refactor: rename states to view controllers (#1060)

app/assets/javascripts/Components/Preferences/Panes/Account/AccountPreferences.tsx

@@ -1,6 +1,6 @@
 import { observer } from 'mobx-react-lite'
-import { WebApplication } from '@/UIModels/Application'
-import { AppState } from '@/UIModels/AppState'
+import { WebApplication } from '@/Application/Application'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import Authentication from './Authentication'
 import Credentials from './Credentials'
 import Sync from './Sync'
@@ -11,22 +11,24 @@ import PreferencesPane from '../../PreferencesComponents/PreferencesPane'
 
 type Props = {
   application: WebApplication
-  appState: AppState
+  viewControllerManager: ViewControllerManager
 }
 
-const AccountPreferences = ({ application, appState }: Props) => (
+const AccountPreferences = ({ application, viewControllerManager }: Props) => (
   <PreferencesPane>
     {!application.hasAccount() ? (
-      <Authentication application={application} appState={appState} />
+      <Authentication application={application} viewControllerManager={viewControllerManager} />
     ) : (
       <>
-        <Credentials application={application} appState={appState} />
+        <Credentials application={application} viewControllerManager={viewControllerManager} />
         <Sync application={application} />
       </>
     )}
-    <Subscription application={application} appState={appState} />
-    {application.hasAccount() && appState.features.hasFiles && <FilesSection application={application} />}
-    <SignOutWrapper application={application} appState={appState} />
+    <Subscription application={application} viewControllerManager={viewControllerManager} />
+    {application.hasAccount() && viewControllerManager.featuresController.hasFiles && (
+      <FilesSection application={application} />
+    )}
+    <SignOutWrapper application={application} viewControllerManager={viewControllerManager} />
   </PreferencesPane>
 )
 

app/assets/javascripts/Components/Preferences/Panes/Account/Advanced.tsx

@@ -1,8 +1,8 @@
 import { FunctionComponent } from 'react'
 import OfflineSubscription from '@/Components/Preferences/Panes/Account/OfflineSubscription'
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { observer } from 'mobx-react-lite'
-import { AppState } from '@/UIModels/AppState'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import Extensions from '@/Components/Preferences/Panes/Extensions/Extensions'
 import { ExtensionsLatestVersions } from '@/Components/Preferences/Panes/Extensions/ExtensionsLatestVersions'
 import AccordionItem from '@/Components/Shared/AccordionItem'
@@ -11,18 +11,18 @@ import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
 
 type Props = {
   application: WebApplication
-  appState: AppState
+  viewControllerManager: ViewControllerManager
   extensionsLatestVersions: ExtensionsLatestVersions
 }
 
-const Advanced: FunctionComponent<Props> = ({ application, appState, extensionsLatestVersions }) => {
+const Advanced: FunctionComponent<Props> = ({ application, viewControllerManager, extensionsLatestVersions }) => {
   return (
     <PreferencesGroup>
       <PreferencesSegment>
         <AccordionItem title={'Advanced Settings'}>
           <div className="flex flex-row items-center">
             <div className="flex-grow flex flex-col">
-              <OfflineSubscription application={application} appState={appState} />
+              <OfflineSubscription application={application} viewControllerManager={viewControllerManager} />
               <Extensions
                 className={'mt-3'}
                 application={application}

app/assets/javascripts/Components/Preferences/Panes/Account/Authentication.tsx

@@ -1,7 +1,7 @@
 import Button from '@/Components/Button/Button'
 import { Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
-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 } from 'react'
 import { AccountIllustration } from '@standardnotes/icons'
@@ -11,20 +11,20 @@ import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
 
 type Props = {
   application: WebApplication
-  appState: AppState
+  viewControllerManager: ViewControllerManager
 }
 
-const Authentication: FunctionComponent<Props> = ({ appState }) => {
+const Authentication: FunctionComponent<Props> = ({ viewControllerManager }) => {
   const clickSignIn = () => {
-    appState.preferences.closePreferences()
-    appState.accountMenu.setCurrentPane(AccountMenuPane.SignIn)
-    appState.accountMenu.setShow(true)
+    viewControllerManager.preferencesController.closePreferences()
+    viewControllerManager.accountMenuController.setCurrentPane(AccountMenuPane.SignIn)
+    viewControllerManager.accountMenuController.setShow(true)
   }
 
   const clickRegister = () => {
-    appState.preferences.closePreferences()
-    appState.accountMenu.setCurrentPane(AccountMenuPane.Register)
-    appState.accountMenu.setShow(true)
+    viewControllerManager.preferencesController.closePreferences()
+    viewControllerManager.accountMenuController.setCurrentPane(AccountMenuPane.Register)
+    viewControllerManager.accountMenuController.setShow(true)
   }
 
   return (

app/assets/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmail.tsx

@@ -4,7 +4,7 @@ import ModalDialogDescription from '@/Components/Shared/ModalDialogDescription'
 import ModalDialogLabel from '@/Components/Shared/ModalDialogLabel'
 import Button from '@/Components/Button/Button'
 import { FunctionComponent, useState } from 'react'
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { useBeforeUnload } from '@/Hooks/useBeforeUnload'
 import ChangeEmailForm from './ChangeEmailForm'
 import ChangeEmailSuccess from './ChangeEmailSuccess'

app/assets/javascripts/Components/Preferences/Panes/Account/ClearSessionDataView.tsx

@@ -1,5 +1,5 @@
 import Button from '@/Components/Button/Button'
-import { AppState } from '@/UIModels/AppState'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'react'
 import { Title, Text } from '../../PreferencesComponents/Content'
@@ -7,8 +7,8 @@ import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
 import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
 
 const ClearSessionDataView: FunctionComponent<{
-  appState: AppState
-}> = ({ appState }) => {
+  viewControllerManager: ViewControllerManager
+}> = ({ viewControllerManager }) => {
   return (
     <PreferencesGroup>
       <PreferencesSegment>
@@ -19,7 +19,7 @@ const ClearSessionDataView: FunctionComponent<{
           dangerStyle={true}
           label="Clear workspace"
           onClick={() => {
-            appState.accountMenu.setSigningOut(true)
+            viewControllerManager.accountMenuController.setSigningOut(true)
           }}
         />
       </PreferencesSegment>

app/assets/javascripts/Components/Preferences/Panes/Account/Credentials.tsx

@@ -1,19 +1,19 @@
 import { Subtitle, Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
 import Button from '@/Components/Button/Button'
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { observer } from '@node_modules/mobx-react-lite'
 import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
 import { dateToLocalizedString } from '@standardnotes/snjs'
 import { useCallback, useState, FunctionComponent } from 'react'
 import ChangeEmail from '@/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmail'
-import { AppState } from '@/UIModels/AppState'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import PasswordWizard from '@/Components/PasswordWizard/PasswordWizard'
 import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
 import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
 
 type Props = {
   application: WebApplication
-  appState: AppState
+  viewControllerManager: ViewControllerManager
 }
 
 const Credentials: FunctionComponent<Props> = ({ application }: Props) => {

app/assets/javascripts/Components/Preferences/Panes/Account/Files.tsx

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { formatSizeToReadableString } from '@standardnotes/filepicker'
 import { SubscriptionSettingName } from '@standardnotes/snjs'
 import { FunctionComponent, useEffect, useState } from 'react'

app/assets/javascripts/Components/Preferences/Panes/Account/OfflineSubscription.tsx

@@ -2,8 +2,8 @@ import React, { FunctionComponent, useEffect, useState } from 'react'
 import { Subtitle } from '@/Components/Preferences/PreferencesComponents/Content'
 import DecoratedInput from '@/Components/Input/DecoratedInput'
 import Button from '@/Components/Button/Button'
-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 { STRING_REMOVE_OFFLINE_KEY_CONFIRMATION } from '@/Strings'
 import { ButtonType, ClientDisplayableError } from '@standardnotes/snjs'
@@ -11,7 +11,7 @@ import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
 
 type Props = {
   application: WebApplication
-  appState: AppState
+  viewControllerManager: ViewControllerManager
 }
 
 const OfflineSubscription: FunctionComponent<Props> = ({ application }) => {

app/assets/javascripts/Components/Preferences/Panes/Account/SignOutView.tsx

@@ -1,8 +1,8 @@
 import Button from '@/Components/Button/Button'
 import OtherSessionsSignOutContainer from '@/Components/OtherSessionsSignOut/OtherSessionsSignOut'
 import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
-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 } from 'react'
 import { Subtitle, Title, Text } from '../../PreferencesComponents/Content'
@@ -12,10 +12,10 @@ import ClearSessionDataView from './ClearSessionDataView'
 
 type Props = {
   application: WebApplication
-  appState: AppState
+  viewControllerManager: ViewControllerManager
 }
 
-const SignOutView: FunctionComponent<Props> = observer(({ application, appState }) => {
+const SignOutView: FunctionComponent<Props> = observer(({ application, viewControllerManager }) => {
   return (
     <>
       <PreferencesGroup>
@@ -30,10 +30,14 @@ const SignOutView: FunctionComponent<Props> = observer(({ application, appState
               variant="normal"
               label="Sign out other sessions"
               onClick={() => {
-                appState.accountMenu.setOtherSessionsSignOut(true)
+                viewControllerManager.accountMenuController.setOtherSessionsSignOut(true)
               }}
             />
-            <Button variant="normal" label="Manage sessions" onClick={() => appState.openSessionsModal()} />
+            <Button
+              variant="normal"
+              label="Manage sessions"
+              onClick={() => viewControllerManager.openSessionsModal()}
+            />
           </div>
         </PreferencesSegment>
         <HorizontalSeparator classes="my-4" />
@@ -45,23 +49,23 @@ const SignOutView: FunctionComponent<Props> = observer(({ application, appState
             dangerStyle={true}
             label="Sign out workspace"
             onClick={() => {
-              appState.accountMenu.setSigningOut(true)
+              viewControllerManager.accountMenuController.setSigningOut(true)
             }}
           />
         </PreferencesSegment>
       </PreferencesGroup>
-      <OtherSessionsSignOutContainer appState={appState} application={application} />
+      <OtherSessionsSignOutContainer viewControllerManager={viewControllerManager} application={application} />
     </>
   )
 })
 
 SignOutView.displayName = 'SignOutView'
 
-const SignOutWrapper: FunctionComponent<Props> = ({ application, appState }) => {
+const SignOutWrapper: FunctionComponent<Props> = ({ application, viewControllerManager }) => {
   if (!application.hasAccount()) {
-    return <ClearSessionDataView appState={appState} />
+    return <ClearSessionDataView viewControllerManager={viewControllerManager} />
   }
-  return <SignOutView appState={appState} application={application} />
+  return <SignOutView viewControllerManager={viewControllerManager} application={application} />
 }
 
 export default observer(SignOutWrapper)

app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx

@@ -1,7 +1,7 @@
 import { FunctionComponent, useState } from 'react'
 import { LinkButton, Text } from '@/Components/Preferences/PreferencesComponents/Content'
 import Button from '@/Components/Button/Button'
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { loadPurchaseFlowUrl } from '@/Components/PurchaseFlow/PurchaseFlowFunctions'
 
 type Props = {

app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/StatusText.tsx

@@ -1,8 +1,8 @@
-import { SubscriptionState } from '@/UIModels/AppState/SubscriptionState'
+import { SubscriptionController } from '@/Controllers/Subscription/SubscriptionController'
 import { observer } from 'mobx-react-lite'
 import { Text } from '@/Components/Preferences/PreferencesComponents/Content'
 
-type Props = { subscriptionState: SubscriptionState }
+type Props = { subscriptionState: SubscriptionController }
 
 const StatusText = ({ subscriptionState }: Props) => {
   const {

app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/Subscription.tsx

@@ -1,20 +1,20 @@
 import { Title } from '@/Components/Preferences/PreferencesComponents/Content'
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import SubscriptionInformation from './SubscriptionInformation'
 import NoSubscription from './NoSubscription'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'react'
-import { AppState } from '@/UIModels/AppState'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import PreferencesGroup from '@/Components/Preferences/PreferencesComponents/PreferencesGroup'
 import PreferencesSegment from '@/Components/Preferences/PreferencesComponents/PreferencesSegment'
 
 type Props = {
   application: WebApplication
-  appState: AppState
+  viewControllerManager: ViewControllerManager
 }
 
-const Subscription: FunctionComponent<Props> = ({ application, appState }: Props) => {
-  const subscriptionState = appState.subscription
+const Subscription: FunctionComponent<Props> = ({ application, viewControllerManager }: Props) => {
+  const subscriptionState = viewControllerManager.subscriptionController
   const { userSubscription } = subscriptionState
 
   const now = new Date().getTime()

app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/SubscriptionInformation.tsx

@@ -1,12 +1,12 @@
 import { observer } from 'mobx-react-lite'
-import { SubscriptionState } from '@/UIModels/AppState/SubscriptionState'
+import { SubscriptionController } from '@/Controllers/Subscription/SubscriptionController'
 import Button from '@/Components/Button/Button'
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { openSubscriptionDashboard } from '@/Utils/ManageSubscription'
 import StatusText from './StatusText'
 
 type Props = {
-  subscriptionState: SubscriptionState
+  subscriptionState: SubscriptionController
   application: WebApplication
 }
 

app/assets/javascripts/Components/Preferences/Panes/Account/Sync.tsx

@@ -3,7 +3,7 @@ import Button from '@/Components/Button/Button'
 import { SyncQueueStrategy } from '@standardnotes/snjs'
 import { STRING_GENERIC_SYNC_ERROR } from '@/Strings'
 import { observer } from 'mobx-react-lite'
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { FunctionComponent, useState } from 'react'
 import { formatLastSyncDate } from '@/Utils/FormatLastSyncDate'
 import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'