applications/calendar/src/app/App.tsx

   1 import type { FunctionComponent } from 'react';
   2 import { useState } from 'react';
   3 import { Router } from 'react-router-dom';
   4
   5 import {
   6     ApiProvider,
   7     AuthenticationProvider,
   8     CalendarModelEventManagerProvider,
   9     DelinquentContainer,
  10     DrawerProvider,
  11     ErrorBoundary,
  12     EventManagerProvider,
  13     LoaderPage,
  14     ProtonApp,
  15     StandardErrorPage,
  16     StandardLoadErrorPage,
  17     StandardPrivateApp,
  18     SubscriptionModalProvider,
  19 } from '@proton/components';
  20 import useEffectOnce from '@proton/hooks/useEffectOnce';
  21 import { ProtonStoreProvider } from '@proton/redux-shared-store';
  22 import { APPS } from '@proton/shared/lib/constants';
  23 import { getNonEmptyErrorMessage } from '@proton/shared/lib/helpers/error';
  24 import { DRAWER_VISIBILITY } from '@proton/shared/lib/interfaces';
  25 import { FlagProvider } from '@proton/unleash';
  26
  27 import { bootstrapApp } from './bootstrap';
  28 import * as config from './config';
  29 import type { CalendarStore } from './store/store';
  30 import { extraThunkArguments } from './store/thunk';
  31
  32 const defaultState: {
  33     store?: CalendarStore;
  34     MainContainer?: FunctionComponent;
  35     error?: { message: string } | undefined;
  36     showDrawerSidebar?: boolean;
  37 } = {
  38     error: undefined,
  39     showDrawerSidebar: false,
  40 };
  41
  42 const App = () => {
  43     const [state, setState] = useState(defaultState);
  44
  45     useEffectOnce(() => {
  46         (async () => {
  47             try {
  48                 const { MainContainer, scopes, userSettings, store } = await bootstrapApp({ config });
  49                 setState({
  50                     MainContainer: scopes.delinquent ? DelinquentContainer : MainContainer,
  51                     store,
  52                     showDrawerSidebar: userSettings.HideSidePanel === DRAWER_VISIBILITY.SHOW,
  53                 });
  54             } catch (error: any) {
  55                 setState({
  56                     error: {
  57                         message: getNonEmptyErrorMessage(error),
  58                     },
  59                 });
  60             }
  61         })();
  62     });
  63
  64     return (
  65         <ProtonApp config={config}>
  66             {(() => {
  67                 if (state.error) {
  68                     return <StandardLoadErrorPage errorMessage={state.error.message} />;
  69                 }
  70                 const loader = <LoaderPage />;
  71                 if (!state.MainContainer || !state.store) {
  72                     return loader;
  73                 }
  74                 return (
  75                     <ProtonStoreProvider store={state.store}>
  76                         <AuthenticationProvider store={extraThunkArguments.authentication}>
  77                             <FlagProvider unleashClient={extraThunkArguments.unleashClient} startClient={false}>
  78                                 <Router history={extraThunkArguments.history}>
  79                                     <EventManagerProvider eventManager={extraThunkArguments.eventManager}>
  80                                         <ApiProvider api={extraThunkArguments.api}>
  81                                             <DrawerProvider defaultShowDrawerSidear={state.showDrawerSidebar}>
  82                                                 <SubscriptionModalProvider app={APPS.PROTONCALENDAR}>
  83                                                     <CalendarModelEventManagerProvider
  84                                                         calendarModelEventManager={
  85                                                             extraThunkArguments.calendarModelEventManager
  86                                                         }
  87                                                     >
  88                                                         <ErrorBoundary big component={<StandardErrorPage big />}>
  89                                                             <StandardPrivateApp
  90                                                                 hasReadableMemberKeyActivation
  91                                                                 hasMemberKeyMigration
  92                                                                 hasPrivateMemberKeyGeneration
  93                                                             >
  94                                                                 <state.MainContainer />
  95                                                             </StandardPrivateApp>
  96                                                         </ErrorBoundary>
  97                                                     </CalendarModelEventManagerProvider>
  98                                                 </SubscriptionModalProvider>
  99                                             </DrawerProvider>
 100                                         </ApiProvider>
 101                                     </EventManagerProvider>
 102                                 </Router>
 103                             </FlagProvider>
 104                         </AuthenticationProvider>
 105                     </ProtonStoreProvider>
 106                 );
 107             })()}
 108         </ProtonApp>
 109     );
 110 };
 111
 112 export default App;