refactor(web): dependency management (#2386)

packages/web/src/javascripts/Components/ApplicationView/ApplicationView.tsx

@@ -1,7 +1,7 @@
 import { WebApplicationGroup } from '@/Application/WebApplicationGroup'
-import { getPlatformString, isIOS } from '@/Utils'
+import { getPlatformString } from '@/Utils'
 import { ApplicationEvent, Challenge, removeFromArray, WebAppEvent } from '@standardnotes/snjs'
-import { alertDialog, RouteType } from '@standardnotes/ui-services'
+import { alertDialog, isIOS, RouteType } from '@standardnotes/ui-services'
 import { WebApplication } from '@/Application/WebApplication'
 import Footer from '@/Components/Footer/Footer'
 import SessionsModal from '@/Components/SessionsModal/SessionsModal'
@@ -30,6 +30,7 @@ import LinkingControllerProvider from '@/Controllers/LinkingControllerProvider'
 import ImportModal from '../ImportModal/ImportModal'
 import IosKeyboardClose from '../IosKeyboardClose/IosKeyboardClose'
 import EditorWidthSelectionModalWrapper from '../EditorWidthSelectionModal/EditorWidthSelectionModal'
+import { ProtectionEvent } from '@standardnotes/services'
 
 type Props = {
   application: WebApplication
@@ -47,10 +48,8 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
   const currentWriteErrorDialog = useRef<Promise<void> | null>(null)
   const currentLoadErrorDialog = useRef<Promise<void> | null>(null)
 
-  const viewControllerManager = application.controllers
-
   useEffect(() => {
-    const desktopService = application.getDesktopService()
+    const desktopService = application.desktopManager
 
     if (desktopService) {
       application.componentManager.setDesktopManager(desktopService)
@@ -142,10 +141,6 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
             })
             .catch(console.error)
         }
-      } else if (eventName === ApplicationEvent.BiometricsSoftLockEngaged) {
-        setNeedsUnlock(true)
-      } else if (eventName === ApplicationEvent.BiometricsSoftLockDisengaged) {
-        setNeedsUnlock(false)
       }
     })
 
@@ -154,10 +149,22 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
     }
   }, [application, onAppLaunch, onAppStart])
 
+  useEffect(() => {
+    const disposer = application.protections.addEventObserver(async (eventName) => {
+      if (eventName === ProtectionEvent.BiometricsSoftLockEngaged) {
+        setNeedsUnlock(true)
+      } else if (eventName === ProtectionEvent.BiometricsSoftLockDisengaged) {
+        setNeedsUnlock(false)
+      }
+    })
+
+    return disposer
+  }, [application])
+
   useEffect(() => {
     const removeObserver = application.addWebEventObserver(async (eventName) => {
       if (eventName === WebAppEvent.WindowDidFocus) {
-        if (!(await application.isLocked())) {
+        if (!(await application.protections.isLocked())) {
           application.sync.sync().catch(console.error)
         }
       }
@@ -178,14 +185,13 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
         <ChallengeModal
           key={`${challenge.id}${application.ephemeralIdentifier}`}
           application={application}
-          viewControllerManager={viewControllerManager}
           mainApplicationGroup={mainApplicationGroup}
           challenge={challenge}
           onDismiss={removeChallenge}
         />
       </div>
     ))
-  }, [viewControllerManager, challenges, mainApplicationGroup, removeChallenge, application])
+  }, [challenges, mainApplicationGroup, removeChallenge, application])
 
   if (!renderAppContents) {
     return <AndroidBackHandlerProvider application={application}>{renderChallenges()}</AndroidBackHandlerProvider>
@@ -198,23 +204,13 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
       <ApplicationProvider application={application}>
         <CommandProvider service={application.keyboardService}>
           <AndroidBackHandlerProvider application={application}>
-            <ResponsivePaneProvider paneController={application.controllers.paneController}>
-              <PremiumModalProvider
-                application={application}
-                featuresController={viewControllerManager.featuresController}
-              >
-                <LinkingControllerProvider controller={viewControllerManager.linkingController}>
-                  <FileDragNDropProvider
-                    application={application}
-                    featuresController={viewControllerManager.featuresController}
-                    filesController={viewControllerManager.filesController}
-                  >
-                    <LazyLoadedClipperView
-                      viewControllerManager={viewControllerManager}
-                      applicationGroup={mainApplicationGroup}
-                    />
+            <ResponsivePaneProvider paneController={application.paneController}>
+              <PremiumModalProvider application={application}>
+                <LinkingControllerProvider controller={application.linkingController}>
+                  <FileDragNDropProvider application={application}>
+                    <LazyLoadedClipperView applicationGroup={mainApplicationGroup} />
                     <ToastContainer />
-                    <FilePreviewModalWrapper application={application} viewControllerManager={viewControllerManager} />
+                    <FilePreviewModalWrapper application={application} />
                     {renderChallenges()}
                   </FileDragNDropProvider>
                 </LinkingControllerProvider>
@@ -230,64 +226,38 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
     <ApplicationProvider application={application}>
       <CommandProvider service={application.keyboardService}>
         <AndroidBackHandlerProvider application={application}>
-          <ResponsivePaneProvider paneController={application.controllers.paneController}>
-            <PremiumModalProvider
-              application={application}
-              featuresController={viewControllerManager.featuresController}
-            >
-              <LinkingControllerProvider controller={viewControllerManager.linkingController}>
+          <ResponsivePaneProvider paneController={application.paneController}>
+            <PremiumModalProvider application={application}>
+              <LinkingControllerProvider controller={application.linkingController}>
                 <div className={platformString + ' main-ui-view sn-component h-full'}>
-                  <FileDragNDropProvider
-                    application={application}
-                    featuresController={viewControllerManager.featuresController}
-                    filesController={viewControllerManager.filesController}
-                  >
+                  <FileDragNDropProvider application={application}>
                     <PanesSystemComponent />
                   </FileDragNDropProvider>
                   <>
                     <Footer application={application} applicationGroup={mainApplicationGroup} />
-                    <SessionsModal application={application} viewControllerManager={viewControllerManager} />
-                    <PreferencesViewWrapper viewControllerManager={viewControllerManager} application={application} />
-                    <RevisionHistoryModal
-                      application={application}
-                      historyModalController={viewControllerManager.historyModalController}
-                      selectionController={viewControllerManager.selectionController}
-                    />
+                    <SessionsModal application={application} />
+                    <PreferencesViewWrapper application={application} />
+                    <RevisionHistoryModal application={application} />
                   </>
                   {renderChallenges()}
                   <>
-                    <NotesContextMenu
-                      navigationController={viewControllerManager.navigationController}
-                      notesController={viewControllerManager.notesController}
-                      linkingController={viewControllerManager.linkingController}
-                      historyModalController={viewControllerManager.historyModalController}
-                      selectionController={viewControllerManager.selectionController}
-                    />
+                    <NotesContextMenu />
                     <TagContextMenuWrapper
-                      navigationController={viewControllerManager.navigationController}
-                      featuresController={viewControllerManager.featuresController}
+                      navigationController={application.navigationController}
+                      featuresController={application.featuresController}
                     />
                     <FileContextMenuWrapper
-                      filesController={viewControllerManager.filesController}
-                      selectionController={viewControllerManager.selectionController}
-                      navigationController={viewControllerManager.navigationController}
-                      linkingController={viewControllerManager.linkingController}
-                    />
-                    <PurchaseFlowWrapper application={application} viewControllerManager={viewControllerManager} />
-                    <ConfirmSignoutContainer
-                      applicationGroup={mainApplicationGroup}
-                      viewControllerManager={viewControllerManager}
-                      application={application}
+                      filesController={application.filesController}
+                      itemListController={application.itemListController}
                     />
+                    <PurchaseFlowWrapper application={application} />
+                    <ConfirmSignoutContainer applicationGroup={mainApplicationGroup} application={application} />
                     <ToastContainer />
-                    <FilePreviewModalWrapper application={application} viewControllerManager={viewControllerManager} />
+                    <FilePreviewModalWrapper application={application} />
                     <PermissionsModalWrapper application={application} />
                     <EditorWidthSelectionModalWrapper />
-                    <ConfirmDeleteAccountContainer
-                      application={application}
-                      viewControllerManager={viewControllerManager}
-                    />
-                    <ImportModal importModalController={viewControllerManager.importModalController} />
+                    <ConfirmDeleteAccountContainer application={application} />
+                    <ImportModal importModalController={application.importModalController} />
                   </>
                   {application.routeService.isDotOrg && <DotOrgNotice />}
                   {isIOS() && <IosKeyboardClose />}