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