refactor: rename states to view controllers (#1060)

app/assets/javascripts/Components/PurchaseFlow/Panes/CreateAccount.tsx

@@ -1,7 +1,7 @@
 import Button from '@/Components/Button/Button'
-import { WebApplication } from '@/UIModels/Application'
-import { AppState } from '@/UIModels/AppState'
-import { PurchaseFlowPane } from '@/UIModels/AppState/PurchaseFlowPane'
+import { WebApplication } from '@/Application/Application'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
+import { PurchaseFlowPane } from '@/Controllers/PurchaseFlow/PurchaseFlowPane'
 import { observer } from 'mobx-react-lite'
 import { ChangeEventHandler, FunctionComponent, useEffect, useRef, useState } from 'react'
 import FloatingLabelInput from '@/Components/Input/FloatingLabelInput'
@@ -10,12 +10,12 @@ import { BlueDotIcon, CircleIcon, DiamondIcon, CreateAccountIllustration } from
 import { loadPurchaseFlowUrl } from '../PurchaseFlowFunctions'
 
 type Props = {
-  appState: AppState
+  viewControllerManager: ViewControllerManager
   application: WebApplication
 }
 
-const CreateAccount: FunctionComponent<Props> = ({ appState, application }) => {
-  const { setCurrentPane } = appState.purchaseFlow
+const CreateAccount: FunctionComponent<Props> = ({ viewControllerManager, application }) => {
+  const { setCurrentPane } = viewControllerManager.purchaseFlowController
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   const [confirmPassword, setConfirmPassword] = useState('')

app/assets/javascripts/Components/PurchaseFlow/Panes/SignIn.tsx

@@ -1,7 +1,7 @@
 import Button from '@/Components/Button/Button'
-import { WebApplication } from '@/UIModels/Application'
-import { AppState } from '@/UIModels/AppState'
-import { PurchaseFlowPane } from '@/UIModels/AppState/PurchaseFlowPane'
+import { WebApplication } from '@/Application/Application'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
+import { PurchaseFlowPane } from '@/Controllers/PurchaseFlow/PurchaseFlowPane'
 import { observer } from 'mobx-react-lite'
 import { ChangeEventHandler, FunctionComponent, useEffect, useRef, useState } from 'react'
 import FloatingLabelInput from '@/Components/Input/FloatingLabelInput'
@@ -10,12 +10,12 @@ import { BlueDotIcon, CircleIcon, DiamondIcon } from '@standardnotes/icons'
 import { loadPurchaseFlowUrl } from '../PurchaseFlowFunctions'
 
 type Props = {
-  appState: AppState
+  viewControllerManager: ViewControllerManager
   application: WebApplication
 }
 
-const SignIn: FunctionComponent<Props> = ({ appState, application }) => {
-  const { setCurrentPane } = appState.purchaseFlow
+const SignIn: FunctionComponent<Props> = ({ viewControllerManager, application }) => {
+  const { setCurrentPane } = viewControllerManager.purchaseFlowController
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   const [isSigningIn, setIsSigningIn] = useState(false)

app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowFunctions.ts

@@ -1,4 +1,4 @@
-import { WebApplication } from '@/UIModels/Application'
+import { WebApplication } from '@/Application/Application'
 import { getWindowUrlParams, isDesktopApplication } from '@/Utils'
 
 export const getPurchaseFlowUrl = async (application: WebApplication): Promise<string | undefined> => {

app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowView.tsx

@@ -1,6 +1,6 @@
-import { WebApplication } from '@/UIModels/Application'
-import { AppState } from '@/UIModels/AppState'
-import { PurchaseFlowPane } from '@/UIModels/AppState/PurchaseFlowPane'
+import { WebApplication } from '@/Application/Application'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
+import { PurchaseFlowPane } from '@/Controllers/PurchaseFlow/PurchaseFlowPane'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'react'
 import CreateAccount from './Panes/CreateAccount'
@@ -12,28 +12,36 @@ type PaneSelectorProps = {
 } & PurchaseFlowViewProps
 
 type PurchaseFlowViewProps = {
-  appState: AppState
+  viewControllerManager: ViewControllerManager
   application: WebApplication
 }
 
-const PurchaseFlowPaneSelector: FunctionComponent<PaneSelectorProps> = ({ currentPane, appState, application }) => {
+const PurchaseFlowPaneSelector: FunctionComponent<PaneSelectorProps> = ({
+  currentPane,
+  viewControllerManager,
+  application,
+}) => {
   switch (currentPane) {
     case PurchaseFlowPane.CreateAccount:
-      return <CreateAccount appState={appState} application={application} />
+      return <CreateAccount viewControllerManager={viewControllerManager} application={application} />
     case PurchaseFlowPane.SignIn:
-      return <SignIn appState={appState} application={application} />
+      return <SignIn viewControllerManager={viewControllerManager} application={application} />
   }
 }
 
-const PurchaseFlowView: FunctionComponent<PurchaseFlowViewProps> = ({ appState, application }) => {
-  const { currentPane } = appState.purchaseFlow
+const PurchaseFlowView: FunctionComponent<PurchaseFlowViewProps> = ({ viewControllerManager, application }) => {
+  const { currentPane } = viewControllerManager.purchaseFlowController
 
   return (
     <div className="flex items-center justify-center overflow-hidden h-full w-full absolute top-left-0 z-index-purchase-flow bg-passive-super-light">
       <div className="relative fit-content">
         <div className="relative p-12 xs:px-8 mb-4 bg-default border-1 border-solid border-main rounded xs:rounded-0">
           <SNLogoFull className="mb-5" />
-          <PurchaseFlowPaneSelector currentPane={currentPane} appState={appState} application={application} />
+          <PurchaseFlowPaneSelector
+            currentPane={currentPane}
+            viewControllerManager={viewControllerManager}
+            application={application}
+          />
         </div>
         <div className="flex justify-end xs:px-4">
           <a

app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowWrapper.tsx

@@ -3,12 +3,12 @@ import { FunctionComponent } from 'react'
 import PurchaseFlowView from './PurchaseFlowView'
 import { PurchaseFlowWrapperProps } from './PurchaseFlowWrapperProps'
 
-const PurchaseFlowWrapper: FunctionComponent<PurchaseFlowWrapperProps> = ({ appState, application }) => {
-  if (!appState.purchaseFlow.isOpen) {
+const PurchaseFlowWrapper: FunctionComponent<PurchaseFlowWrapperProps> = ({ viewControllerManager, application }) => {
+  if (!viewControllerManager.purchaseFlowController.isOpen) {
     return null
   }
 
-  return <PurchaseFlowView appState={appState} application={application} />
+  return <PurchaseFlowView viewControllerManager={viewControllerManager} application={application} />
 }
 
 export default observer(PurchaseFlowWrapper)

app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowWrapperProps.tsx

@@ -1,7 +1,7 @@
-import { WebApplication } from '@/UIModels/Application'
-import { AppState } from '@/UIModels/AppState'
+import { WebApplication } from '@/Application/Application'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 
 export type PurchaseFlowWrapperProps = {
-  appState: AppState
+  viewControllerManager: ViewControllerManager
   application: WebApplication
 }