applications/mail/src/app/MainContainer.tsx

   1 import type { FunctionComponent } from 'react';
   2 import { useEffect, useRef } from 'react';
   3 import { Route, Switch } from 'react-router-dom';
   4
   5 import {
   6     ApiModalsHVUpsell,
   7     DrawerThemeInjector,
   8     ModalsChildren,
   9     SubscriptionModalProvider,
  10     useActiveBreakpoint,
  11     useConfig,
  12 } from '@proton/components';
  13 import { QuickSettingsRemindersProvider } from '@proton/components/hooks/drawer/useQuickSettingsReminders';
  14 import { useInboxDesktopMessageForward } from '@proton/components/hooks/useInboxDesktopMessageForward';
  15 import { FeatureCode, useFeatures } from '@proton/features';
  16 import AssistantProvider from '@proton/llm/lib/providers/AssistantProvider';
  17 import { useInboxDesktopHeartbeat } from '@proton/shared/lib/desktop/heartbeat';
  18 import { useFlag } from '@proton/unleash';
  19 import { useWalletAutoCreate } from '@proton/wallet/hooks/useWalletAutoCreate';
  20
  21 import { CheckAllRefProvider } from 'proton-mail/containers/CheckAllRefProvider';
  22
  23 import { MAIN_ROUTE_PATH } from './constants';
  24 import ComposerContainer from './containers/ComposerContainer';
  25 import EncryptedSearchProvider from './containers/EncryptedSearchProvider';
  26 import PageContainer from './containers/PageContainer';
  27 import ChecklistsProvider from './containers/onboardingChecklist/provider/ChecklistsProvider';
  28 import { MailContentRefProvider } from './hooks/useClickMailContent';
  29 import { extraThunkArguments } from './store/thunk';
  30
  31 const MainContainer: FunctionComponent = () => {
  32     const breakpoints = useActiveBreakpoint();
  33     const { APP_NAME } = useConfig();
  34     const mailContentRef = useRef<HTMLDivElement>(null);
  35     const { getFeature } = useFeatures([
  36         FeatureCode.MailServiceWorker,
  37         FeatureCode.EarlyAccessScope,
  38         FeatureCode.ScheduledSendFreemium,
  39         FeatureCode.SpotlightScheduledSend,
  40         FeatureCode.BundlePromoShown,
  41         FeatureCode.UsedMailMobileApp,
  42         FeatureCode.ESUserInterface,
  43     ]);
  44
  45     const { feature: featureSw, loading: loadingSw } = getFeature(FeatureCode.MailServiceWorker);
  46
  47     const shouldAutoSetupWallet = useFlag('WalletAutoSetup');
  48     useWalletAutoCreate({ higherLevelPilot: shouldAutoSetupWallet });
  49
  50     useInboxDesktopMessageForward();
  51     useInboxDesktopHeartbeat();
  52
  53     /**
  54      * @description React has an issue regarding DOM changed by Gtranslate from Chrome
  55      * The only part not tracked by React is the message view which is great.
  56      * Check MAILWEB-4981 to get more details.
  57      * Github issue: https://github.com/facebook/react/issues/11538
  58      */
  59     useEffect(() => {
  60         document.querySelector('body')?.setAttribute('translate', 'no');
  61         return () => {
  62             document.querySelector('body')?.removeAttribute('translate');
  63         };
  64     }, []);
  65
  66     // Service Worker registration
  67     // Including a kill switch with a feature flag
  68     useEffect(() => {
  69         if ('serviceWorker' in navigator && !loadingSw) {
  70             const unregister = async () => {
  71                 const registrations = await navigator.serviceWorker.getRegistrations();
  72                 registrations.forEach((registration) => {
  73                     if (registration.scope === window.location.origin + '/') {
  74                         void registration.unregister();
  75                     }
  76                 });
  77             };
  78
  79             const register = async () => {
  80                 try {
  81                     await navigator.serviceWorker.register('/service-worker.js');
  82                 } catch {
  83                     console.log('No service worker found');
  84                 }
  85             };
  86
  87             const action = featureSw?.Value === true ? register : unregister;
  88
  89             void action();
  90         }
  91     }, [featureSw, loadingSw]);
  92
  93     return (
  94         <AssistantProvider>
  95             <QuickSettingsRemindersProvider>
  96                 <DrawerThemeInjector />
  97                 <EncryptedSearchProvider>
  98                     <MailContentRefProvider mailContentRef={mailContentRef}>
  99                         <ChecklistsProvider>
 100                             <SubscriptionModalProvider app={APP_NAME}>
 101                                 <ComposerContainer breakpoints={breakpoints}>
 102                                     <CheckAllRefProvider>
 103                                         <ModalsChildren />
 104                                         <ApiModalsHVUpsell api={extraThunkArguments.api} />
 105                                         <Switch>
 106                                             <Route
 107                                                 path={MAIN_ROUTE_PATH}
 108                                                 render={() => (
 109                                                     <PageContainer ref={mailContentRef} breakpoints={breakpoints} />
 110                                                 )}
 111                                             />
 112                                         </Switch>
 113                                     </CheckAllRefProvider>
 114                                 </ComposerContainer>
 115                             </SubscriptionModalProvider>
 116                         </ChecklistsProvider>
 117                     </MailContentRefProvider>
 118                 </EncryptedSearchProvider>
 119             </QuickSettingsRemindersProvider>
 120         </AssistantProvider>
 121     );
 122 };
 123
 124 export default MainContainer;