refactor: rename states to view controllers (#1060)

app/assets/javascripts/Components/AccountMenu/AccountMenu.tsx

@@ -1,31 +1,36 @@
 import { observer } from 'mobx-react-lite'
 import { useCloseOnClickOutside } from '@/Hooks/useCloseOnClickOutside'
-import { AppState } from '@/UIModels/AppState'
-import { WebApplication } from '@/UIModels/Application'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
+import { WebApplication } from '@/Application/Application'
 import { useCallback, useRef, FunctionComponent, KeyboardEventHandler } from 'react'
-import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
+import { ApplicationGroup } from '@/Application/ApplicationGroup'
 import { AccountMenuPane } from './AccountMenuPane'
 import MenuPaneSelector from './MenuPaneSelector'
 
 type Props = {
-  appState: AppState
+  viewControllerManager: ViewControllerManager
   application: WebApplication
   onClickOutside: () => void
   mainApplicationGroup: ApplicationGroup
 }
 
-const AccountMenu: FunctionComponent<Props> = ({ application, appState, onClickOutside, mainApplicationGroup }) => {
-  const { currentPane, shouldAnimateCloseMenu } = appState.accountMenu
+const AccountMenu: FunctionComponent<Props> = ({
+  application,
+  viewControllerManager,
+  onClickOutside,
+  mainApplicationGroup,
+}) => {
+  const { currentPane, shouldAnimateCloseMenu } = viewControllerManager.accountMenuController
 
   const closeAccountMenu = useCallback(() => {
-    appState.accountMenu.closeAccountMenu()
-  }, [appState])
+    viewControllerManager.accountMenuController.closeAccountMenu()
+  }, [viewControllerManager])
 
   const setCurrentPane = useCallback(
     (pane: AccountMenuPane) => {
-      appState.accountMenu.setCurrentPane(pane)
+      viewControllerManager.accountMenuController.setCurrentPane(pane)
     },
-    [appState],
+    [viewControllerManager],
   )
 
   const ref = useRef<HTMLDivElement>(null)
@@ -59,7 +64,7 @@ const AccountMenu: FunctionComponent<Props> = ({ application, appState, onClickO
         onKeyDown={handleKeyDown}
       >
         <MenuPaneSelector
-          appState={appState}
+          viewControllerManager={viewControllerManager}
           application={application}
           mainApplicationGroup={mainApplicationGroup}
           menuPane={currentPane}

app/assets/javascripts/Components/AccountMenu/AdvancedOptions.tsx

@@ -1,5 +1,5 @@
-import { WebApplication } from '@/UIModels/Application'
-import { AppState } from '@/UIModels/AppState'
+import { WebApplication } from '@/Application/Application'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
 import { ChangeEventHandler, FunctionComponent, useCallback, useEffect, useState } from 'react'
 import Checkbox from '@/Components/Checkbox/Checkbox'
@@ -8,21 +8,21 @@ import Icon from '@/Components/Icon/Icon'
 
 type Props = {
   application: WebApplication
-  appState: AppState
+  viewControllerManager: ViewControllerManager
   disabled?: boolean
   onPrivateWorkspaceChange?: (isPrivate: boolean, identifier?: string) => void
   onStrictSignInChange?: (isStrictSignIn: boolean) => void
 }
 
 const AdvancedOptions: FunctionComponent<Props> = ({
-  appState,
+  viewControllerManager,
   application,
   disabled = false,
   onPrivateWorkspaceChange,
   onStrictSignInChange,
   children,
 }) => {
-  const { server, setServer, enableServerOption, setEnableServerOption } = appState.accountMenu
+  const { server, setServer, enableServerOption, setEnableServerOption } = viewControllerManager.accountMenuController
   const [showAdvanced, setShowAdvanced] = useState(false)
 
   const [isPrivateWorkspace, setIsPrivateWorkspace] = useState(false)

app/assets/javascripts/Components/AccountMenu/ConfirmPassword.tsx

@@ -1,6 +1,6 @@
 import { STRING_NON_MATCHING_PASSWORDS } from '@/Strings'
-import { WebApplication } from '@/UIModels/Application'
-import { AppState } from '@/UIModels/AppState'
+import { WebApplication } from '@/Application/Application'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, KeyboardEventHandler, useCallback, useEffect, useRef, useState } from 'react'
 import { AccountMenuPane } from './AccountMenuPane'
@@ -11,15 +11,21 @@ import Icon from '@/Components/Icon/Icon'
 import IconButton from '@/Components/Button/IconButton'
 
 type Props = {
-  appState: AppState
+  viewControllerManager: ViewControllerManager
   application: WebApplication
   setMenuPane: (pane: AccountMenuPane) => void
   email: string
   password: string
 }
 
-const ConfirmPassword: FunctionComponent<Props> = ({ application, appState, setMenuPane, email, password }) => {
-  const { notesAndTagsCount } = appState.accountMenu
+const ConfirmPassword: FunctionComponent<Props> = ({
+  application,
+  viewControllerManager,
+  setMenuPane,
+  email,
+  password,
+}) => {
+  const { notesAndTagsCount } = viewControllerManager.accountMenuController
   const [confirmPassword, setConfirmPassword] = useState('')
   const [isRegistering, setIsRegistering] = useState(false)
   const [isEphemeral, setIsEphemeral] = useState(false)
@@ -61,8 +67,8 @@ const ConfirmPassword: FunctionComponent<Props> = ({ application, appState, setM
             if (res.error) {
               throw new Error(res.error.message)
             }
-            appState.accountMenu.closeAccountMenu()
-            appState.accountMenu.setCurrentPane(AccountMenuPane.GeneralMenu)
+            viewControllerManager.accountMenuController.closeAccountMenu()
+            viewControllerManager.accountMenuController.setCurrentPane(AccountMenuPane.GeneralMenu)
           })
           .catch((err) => {
             console.error(err)
@@ -77,7 +83,7 @@ const ConfirmPassword: FunctionComponent<Props> = ({ application, appState, setM
         passwordInputRef.current?.focus()
       }
     },
-    [appState, application, confirmPassword, email, isEphemeral, password, shouldMergeLocal],
+    [viewControllerManager, application, confirmPassword, email, isEphemeral, password, shouldMergeLocal],
   )
 
   const handleKeyDown: KeyboardEventHandler = useCallback(

app/assets/javascripts/Components/AccountMenu/CreateAccount.tsx

@@ -1,5 +1,5 @@
-import { WebApplication } from '@/UIModels/Application'
-import { AppState } from '@/UIModels/AppState'
+import { WebApplication } from '@/Application/Application'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, KeyboardEventHandler, useCallback, useEffect, useRef, useState } from 'react'
 import { AccountMenuPane } from './AccountMenuPane'
@@ -11,7 +11,7 @@ import IconButton from '@/Components/Button/IconButton'
 import AdvancedOptions from './AdvancedOptions'
 
 type Props = {
-  appState: AppState
+  viewControllerManager: ViewControllerManager
   application: WebApplication
   setMenuPane: (pane: AccountMenuPane) => void
   email: string
@@ -21,7 +21,7 @@ type Props = {
 }
 
 const CreateAccount: FunctionComponent<Props> = ({
-  appState,
+  viewControllerManager,
   application,
   setMenuPane,
   email,
@@ -137,7 +137,7 @@ const CreateAccount: FunctionComponent<Props> = ({
       <div className="h-1px my-2 bg-border"></div>
       <AdvancedOptions
         application={application}
-        appState={appState}
+        viewControllerManager={viewControllerManager}
         onPrivateWorkspaceChange={onPrivateWorkspaceChange}
       />
     </>

app/assets/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx

@@ -1,5 +1,5 @@
-import { WebApplication } from '@/UIModels/Application'
-import { AppState } from '@/UIModels/AppState'
+import { WebApplication } from '@/Application/Application'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
 import Icon from '@/Components/Icon/Icon'
 import { SyncQueueStrategy } from '@standardnotes/snjs'
@@ -11,11 +11,11 @@ import MenuItem from '@/Components/Menu/MenuItem'
 import MenuItemSeparator from '@/Components/Menu/MenuItemSeparator'
 import { MenuItemType } from '@/Components/Menu/MenuItemType'
 import WorkspaceSwitcherOption from './WorkspaceSwitcher/WorkspaceSwitcherOption'
-import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
+import { ApplicationGroup } from '@/Application/ApplicationGroup'
 import { formatLastSyncDate } from '@/Utils/FormatLastSyncDate'
 
 type Props = {
-  appState: AppState
+  viewControllerManager: ViewControllerManager
   application: WebApplication
   mainApplicationGroup: ApplicationGroup
   setMenuPane: (pane: AccountMenuPane) => void
@@ -26,7 +26,7 @@ const iconClassName = 'color-neutral mr-2'
 
 const GeneralAccountMenu: FunctionComponent<Props> = ({
   application,
-  appState,
+  viewControllerManager,
   setMenuPane,
   closeMenu,
   mainApplicationGroup,
@@ -60,20 +60,20 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({
   const user = useMemo(() => application.getUser(), [application])
 
   const openPreferences = useCallback(() => {
-    appState.accountMenu.closeAccountMenu()
-    appState.preferences.setCurrentPane('account')
-    appState.preferences.openPreferences()
-  }, [appState])
+    viewControllerManager.accountMenuController.closeAccountMenu()
+    viewControllerManager.preferencesController.setCurrentPane('account')
+    viewControllerManager.preferencesController.openPreferences()
+  }, [viewControllerManager])
 
   const openHelp = useCallback(() => {
-    appState.accountMenu.closeAccountMenu()
-    appState.preferences.setCurrentPane('help-feedback')
-    appState.preferences.openPreferences()
-  }, [appState])
+    viewControllerManager.accountMenuController.closeAccountMenu()
+    viewControllerManager.preferencesController.setCurrentPane('help-feedback')
+    viewControllerManager.preferencesController.openPreferences()
+  }, [viewControllerManager])
 
   const signOut = useCallback(() => {
-    appState.accountMenu.setSigningOut(true)
-  }, [appState])
+    viewControllerManager.accountMenuController.setSigningOut(true)
+  }, [viewControllerManager])
 
   const activateRegisterPane = useCallback(() => {
     setMenuPane(AccountMenuPane.Register)
@@ -136,13 +136,16 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({
         </>
       )}
       <Menu
-        isOpen={appState.accountMenu.show}
+        isOpen={viewControllerManager.accountMenuController.show}
         a11yLabel="General account menu"
         closeMenu={closeMenu}
         initialFocus={!application.hasAccount() ? CREATE_ACCOUNT_INDEX : SWITCHER_INDEX}
       >
         <MenuItemSeparator />
-        <WorkspaceSwitcherOption mainApplicationGroup={mainApplicationGroup} appState={appState} />
+        <WorkspaceSwitcherOption
+          mainApplicationGroup={mainApplicationGroup}
+          viewControllerManager={viewControllerManager}
+        />
         <MenuItemSeparator />
         {user ? (
           <MenuItem type={MenuItemType.IconButton} onClick={openPreferences}>
@@ -166,7 +169,7 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({
             <Icon type="help" className={iconClassName} />
             Help &amp; feedback
           </div>
-          <span className="color-neutral">v{appState.version}</span>
+          <span className="color-neutral">v{viewControllerManager.version}</span>
         </MenuItem>
         {user ? (
           <>

app/assets/javascripts/Components/AccountMenu/MenuPaneSelector.tsx

@@ -1,6 +1,6 @@
-import { WebApplication } from '@/UIModels/Application'
-import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
-import { AppState } from '@/UIModels/AppState'
+import { WebApplication } from '@/Application/Application'
+import { ApplicationGroup } from '@/Application/ApplicationGroup'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useState } from 'react'
 import { AccountMenuPane } from './AccountMenuPane'
@@ -10,7 +10,7 @@ import GeneralAccountMenu from './GeneralAccountMenu'
 import SignInPane from './SignIn'
 
 type Props = {
-  appState: AppState
+  viewControllerManager: ViewControllerManager
   application: WebApplication
   mainApplicationGroup: ApplicationGroup
   menuPane: AccountMenuPane
@@ -20,7 +20,7 @@ type Props = {
 
 const MenuPaneSelector: FunctionComponent<Props> = ({
   application,
-  appState,
+  viewControllerManager,
   menuPane,
   setMenuPane,
   closeMenu,
@@ -33,7 +33,7 @@ const MenuPaneSelector: FunctionComponent<Props> = ({
     case AccountMenuPane.GeneralMenu:
       return (
         <GeneralAccountMenu
-          appState={appState}
+          viewControllerManager={viewControllerManager}
           application={application}
           mainApplicationGroup={mainApplicationGroup}
           setMenuPane={setMenuPane}
@@ -41,11 +41,13 @@ const MenuPaneSelector: FunctionComponent<Props> = ({
         />
       )
     case AccountMenuPane.SignIn:
-      return <SignInPane appState={appState} application={application} setMenuPane={setMenuPane} />
+      return (
+        <SignInPane viewControllerManager={viewControllerManager} application={application} setMenuPane={setMenuPane} />
+      )
     case AccountMenuPane.Register:
       return (
         <CreateAccount
-          appState={appState}
+          viewControllerManager={viewControllerManager}
           application={application}
           setMenuPane={setMenuPane}
           email={email}
@@ -57,7 +59,7 @@ const MenuPaneSelector: FunctionComponent<Props> = ({
     case AccountMenuPane.ConfirmPassword:
       return (
         <ConfirmPassword
-          appState={appState}
+          viewControllerManager={viewControllerManager}
           application={application}
           setMenuPane={setMenuPane}
           email={email}

app/assets/javascripts/Components/AccountMenu/SignIn.tsx

@@ -1,5 +1,5 @@
-import { WebApplication } from '@/UIModels/Application'
-import { AppState } from '@/UIModels/AppState'
+import { WebApplication } from '@/Application/Application'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { isDev } from '@/Utils'
 import { observer } from 'mobx-react-lite'
 import React, { FunctionComponent, KeyboardEventHandler, useCallback, useEffect, useRef, useState } from 'react'
@@ -13,13 +13,13 @@ import IconButton from '@/Components/Button/IconButton'
 import AdvancedOptions from './AdvancedOptions'
 
 type Props = {
-  appState: AppState
+  viewControllerManager: ViewControllerManager
   application: WebApplication
   setMenuPane: (pane: AccountMenuPane) => void
 }
 
-const SignInPane: FunctionComponent<Props> = ({ application, appState, setMenuPane }) => {
-  const { notesAndTagsCount } = appState.accountMenu
+const SignInPane: FunctionComponent<Props> = ({ application, viewControllerManager, setMenuPane }) => {
+  const { notesAndTagsCount } = viewControllerManager.accountMenuController
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   const [error, setError] = useState('')
@@ -86,7 +86,7 @@ const SignInPane: FunctionComponent<Props> = ({ application, appState, setMenuPa
         if (res.error) {
           throw new Error(res.error.message)
         }
-        appState.accountMenu.closeAccountMenu()
+        viewControllerManager.accountMenuController.closeAccountMenu()
       })
       .catch((err) => {
         console.error(err)
@@ -97,7 +97,7 @@ const SignInPane: FunctionComponent<Props> = ({ application, appState, setMenuPa
       .finally(() => {
         setIsSigningIn(false)
       })
-  }, [appState, application, email, isEphemeral, isStrictSignin, password, shouldMergeLocal])
+  }, [viewControllerManager, application, email, isEphemeral, isStrictSignin, password, shouldMergeLocal])
 
   const onPrivateWorkspaceChange = useCallback(
     (newIsPrivateWorkspace: boolean, privateWorkspaceIdentifier?: string) => {
@@ -201,7 +201,7 @@ const SignInPane: FunctionComponent<Props> = ({ application, appState, setMenuPa
       </div>
       <div className="h-1px my-2 bg-border"></div>
       <AdvancedOptions
-        appState={appState}
+        viewControllerManager={viewControllerManager}
         application={application}
         disabled={isSigningIn}
         onPrivateWorkspaceChange={onPrivateWorkspaceChange}

app/assets/javascripts/Components/AccountMenu/User.tsx

@@ -1,24 +1,25 @@
 import { observer } from 'mobx-react-lite'
-import { AppState } from '@/UIModels/AppState'
-import { WebApplication } from '@/UIModels/Application'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
+import { WebApplication } from '@/Application/Application'
 import { User as UserType } from '@standardnotes/snjs'
 
 type Props = {
-  appState: AppState
+  viewControllerManager: ViewControllerManager
   application: WebApplication
 }
 
-const User = ({ appState, application }: Props) => {
-  const { server } = appState.accountMenu
+const User = ({ viewControllerManager, application }: Props) => {
+  const { server } = viewControllerManager.accountMenuController
   const user = application.getUser() as UserType
 
   return (
     <div className="sk-panel-section">
-      {appState.sync.errorMessage && (
+      {viewControllerManager.syncStatusController.errorMessage && (
         <div className="sk-notification danger">
           <div className="sk-notification-title">Sync Unreachable</div>
           <div className="sk-notification-text">
-            Hmm...we can't seem to sync your account. The reason: {appState.sync.errorMessage}
+            Hmm...we can't seem to sync your account. The reason:{' '}
+            {viewControllerManager.syncStatusController.errorMessage}
           </div>
           <a
             className="sk-a info-contrast sk-bold sk-panel-row"

app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx

@@ -1,5 +1,5 @@
-import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
-import { AppState } from '@/UIModels/AppState'
+import { ApplicationGroup } from '@/Application/ApplicationGroup'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { ApplicationDescriptor, ApplicationGroupEvent, ButtonType } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useCallback, useEffect, useState } from 'react'
@@ -12,14 +12,14 @@ import WorkspaceMenuItem from './WorkspaceMenuItem'
 
 type Props = {
   mainApplicationGroup: ApplicationGroup
-  appState: AppState
+  viewControllerManager: ViewControllerManager
   isOpen: boolean
   hideWorkspaceOptions?: boolean
 }
 
 const WorkspaceSwitcherMenu: FunctionComponent<Props> = ({
   mainApplicationGroup,
-  appState,
+  viewControllerManager,
   isOpen,
   hideWorkspaceOptions = false,
 }: Props) => {
@@ -42,7 +42,7 @@ const WorkspaceSwitcherMenu: FunctionComponent<Props> = ({
   }, [mainApplicationGroup])
 
   const signoutAll = useCallback(async () => {
-    const confirmed = await appState.application.alertService.confirm(
+    const confirmed = await viewControllerManager.application.alertService.confirm(
       'Are you sure you want to sign out of all workspaces on this device?',
       undefined,
       'Sign out all',
@@ -52,11 +52,11 @@ const WorkspaceSwitcherMenu: FunctionComponent<Props> = ({
       return
     }
     mainApplicationGroup.signOutAllWorkspaces().catch(console.error)
-  }, [mainApplicationGroup, appState])
+  }, [mainApplicationGroup, viewControllerManager])
 
   const destroyWorkspace = useCallback(() => {
-    appState.accountMenu.setSigningOut(true)
-  }, [appState])
+    viewControllerManager.accountMenuController.setSigningOut(true)
+  }, [viewControllerManager])
 
   return (
     <Menu a11yLabel="Workspace switcher menu" className="px-0 focus:shadow-none" isOpen={isOpen}>

app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx

@@ -1,6 +1,6 @@
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants'
-import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
-import { AppState } from '@/UIModels/AppState'
+import { ApplicationGroup } from '@/Application/ApplicationGroup'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { calculateSubmenuStyle, SubmenuStyle } from '@/Utils/CalculateSubmenuStyle'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
@@ -9,10 +9,10 @@ import WorkspaceSwitcherMenu from './WorkspaceSwitcherMenu'
 
 type Props = {
   mainApplicationGroup: ApplicationGroup
-  appState: AppState
+  viewControllerManager: ViewControllerManager
 }
 
-const WorkspaceSwitcherOption: FunctionComponent<Props> = ({ mainApplicationGroup, appState }) => {
+const WorkspaceSwitcherOption: FunctionComponent<Props> = ({ mainApplicationGroup, viewControllerManager }) => {
   const buttonRef = useRef<HTMLButtonElement>(null)
   const menuRef = useRef<HTMLDivElement>(null)
   const [isOpen, setIsOpen] = useState(false)
@@ -58,7 +58,11 @@ const WorkspaceSwitcherOption: FunctionComponent<Props> = ({ mainApplicationGrou
       </button>
       {isOpen && (
         <div ref={menuRef} className="sn-dropdown max-h-120 min-w-68 py-2 fixed overflow-y-auto" style={menuStyle}>
-          <WorkspaceSwitcherMenu mainApplicationGroup={mainApplicationGroup} appState={appState} isOpen={isOpen} />
+          <WorkspaceSwitcherMenu
+            mainApplicationGroup={mainApplicationGroup}
+            viewControllerManager={viewControllerManager}
+            isOpen={isOpen}
+          />
         </div>
       )}
     </>