refactor: pass sub controllers to controllers instead of passing global controller manager (#1061)

2022-06-01 12:56:30 -05:00
parent 721cf8df35
commit a87e3b98e2
40 changed files with 672 additions and 591 deletions
--- a/app/assets/javascripts/Components/Abstract/PureComponent.tsx
+++ b/app/assets/javascripts/Components/Abstract/PureComponent.tsx
@@ -1,6 +1,6 @@
 import { ApplicationEvent } from '@standardnotes/snjs'
 import { WebApplication } from '@/Application/Application'
-import { ViewControllerManager, ViewControllerManagerEvent } from '@/Services/ViewControllerManager'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
 import { autorun, IReactionDisposer, IReactionPublic } from 'mobx'
 import { Component } from 'react'

@@ -9,7 +9,6 @@ export type PureComponentProps = Partial<Record<string, any>>

 export abstract class PureComponent<P = PureComponentProps, S = PureComponentState> extends Component<P, S> {
  private unsubApp!: () => void
-  private unsubState!: () => void
  private reactionDisposers: IReactionDisposer[] = []

  constructor(props: P, protected application: WebApplication) {
@@ -18,18 +17,17 @@ export abstract class PureComponent<P = PureComponentProps, S = PureComponentSta

  override componentDidMount() {
    this.addAppEventObserver()
-    this.addViewControllerManagerObserver()
  }

  deinit(): void {
    this.unsubApp?.()
-    this.unsubState?.()
+
    for (const disposer of this.reactionDisposers) {
      disposer()
    }
+
    this.reactionDisposers.length = 0
    ;(this.unsubApp as unknown) = undefined
-    ;(this.unsubState as unknown) = undefined
    ;(this.application as unknown) = undefined
    ;(this.props as unknown) = undefined
    ;(this.state as unknown) = undefined
@@ -47,16 +45,6 @@ export abstract class PureComponent<P = PureComponentProps, S = PureComponentSta
    this.reactionDisposers.push(autorun(view))
  }

-  addViewControllerManagerObserver() {
-    this.unsubState = this.application.getViewControllerManager().addObserver(async (eventName, data) => {
-      this.onViewControllerManagerEvent(eventName, data)
-    })
-  }
-
-  onViewControllerManagerEvent(_eventName: ViewControllerManagerEvent, _data: unknown) {
-    /** Optional override */
-  }
-
  addAppEventObserver() {
    if (this.application.isStarted()) {
      this.onAppStart().catch(console.error)
--- a/app/assets/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx
@@ -169,7 +169,7 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({
            <Icon type="help" className={iconClassName} />
            Help &amp; feedback
          </div>
-          <span className="color-neutral">v{viewControllerManager.version}</span>
+          <span className="color-neutral">v{application.version}</span>
        </MenuItem>
        {user ? (
          <>
--- a/app/assets/javascripts/Components/ApplicationView/ApplicationView.tsx
+++ b/app/assets/javascripts/Components/ApplicationView/ApplicationView.tsx
@@ -1,10 +1,10 @@
 import { ApplicationGroup } from '@/Application/ApplicationGroup'
 import { getPlatformString, getWindowUrlParams } from '@/Utils'
-import { ViewControllerManagerEvent } from '@/Services/ViewControllerManager'
 import { ApplicationEvent, Challenge, removeFromArray } from '@standardnotes/snjs'
 import { PANEL_NAME_NOTES, PANEL_NAME_NAVIGATION } from '@/Constants/Constants'
 import { alertDialog } from '@/Services/AlertService'
 import { WebApplication } from '@/Application/Application'
+import { WebAppEvent } from '@/Application/WebAppEvent'
 import Navigation from '@/Components/Navigation/Navigation'
 import NoteGroupView from '@/Components/NoteGroupView/NoteGroupView'
 import Footer from '@/Components/Footer/Footer'
@@ -120,8 +120,8 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
  }, [application, onAppLaunch, onAppStart])

  useEffect(() => {
-    const removeObserver = application.getViewControllerManager().addObserver(async (eventName, data) => {
-      if (eventName === ViewControllerManagerEvent.PanelResized) {
+    const removeObserver = application.addWebEventObserver(async (eventName, data) => {
+      if (eventName === WebAppEvent.PanelResized) {
        const { panel, collapsed } = data as PanelResizedData
        let appClass = ''
        if (panel === PANEL_NAME_NOTES && collapsed) {
@@ -131,7 +131,7 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
          appClass += ' collapsed-navigation'
        }
        setAppClass(appClass)
-      } else if (eventName === ViewControllerManagerEvent.WindowDidFocus) {
+      } else if (eventName === WebAppEvent.WindowDidFocus) {
        if (!(await application.isLocked())) {
          application.sync.sync().catch(console.error)
        }
--- a/app/assets/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
+++ b/app/assets/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
@@ -90,7 +90,7 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({

      const transactions: TransactionalMutation[] = []

-      await application.getViewControllerManager().contentListController.insertCurrentIfTemplate()
+      await application.getViewControllerManager().itemListController.insertCurrentIfTemplate()

      if (note.locked) {
        application.alertService.alert(STRING_EDIT_LOCKED_ATTEMPT).catch(console.error)
--- a/app/assets/javascripts/Components/ContentListView/ContentList.tsx
+++ b/app/assets/javascripts/Components/ContentListView/ContentList.tsx
@@ -23,10 +23,10 @@ const ContentList: FunctionComponent<Props> = ({
  selectedItems,
  paginate,
 }) => {
-  const { selectPreviousItem, selectNextItem } = viewControllerManager.contentListController
+  const { selectPreviousItem, selectNextItem } = viewControllerManager.itemListController
  const { hideTags, hideDate, hideNotePreview, hideEditorIcon } =
-    viewControllerManager.contentListController.webDisplayOptions
-  const { sortBy } = viewControllerManager.contentListController.displayOptions
+    viewControllerManager.itemListController.webDisplayOptions
+  const { sortBy } = viewControllerManager.itemListController.displayOptions

  const onScroll: UIEventHandler = useCallback(
    (e) => {
--- a/app/assets/javascripts/Components/ContentListView/ContentListItem.tsx
+++ b/app/assets/javascripts/Components/ContentListView/ContentListItem.tsx
@@ -15,7 +15,7 @@ const ContentListItem: FunctionComponent<AbstractListItemProps> = (props) => {
      return []
    }

-    const tags = props.viewControllerManager.getItemTags(props.item)
+    const tags = props.application.getItemTags(props.item)

    const isNavigatingOnlyTag = selectedTag instanceof SNTag && tags.length === 1
    if (isNavigatingOnlyTag) {
--- a/app/assets/javascripts/Components/ContentListView/ContentListView.tsx
+++ b/app/assets/javascripts/Components/ContentListView/ContentListView.tsx
@@ -46,7 +46,7 @@ const ContentListView: FunctionComponent<Props> = ({ application, viewController
    paginate,
    panelWidth,
    createNewNote,
-  } = viewControllerManager.contentListController
+  } = viewControllerManager.itemListController

  const { selectedItems } = viewControllerManager.selectionController

@@ -143,7 +143,7 @@ const ContentListView: FunctionComponent<Props> = ({ application, viewController
    (width, _lastLeft, _isMaxWidth, isCollapsed) => {
      application.setPreference(PrefKey.NotesPanelWidth, width).catch(console.error)
      viewControllerManager.noteTagsController.reloadTagsContainerMaxWidth()
-      viewControllerManager.panelDidResize(PANEL_NAME_NOTES, isCollapsed)
+      application.publishPanelDidResizeEvent(PANEL_NAME_NOTES, isCollapsed)
    },
    [viewControllerManager, application],
  )
--- a/app/assets/javascripts/Components/Footer/Footer.tsx
+++ b/app/assets/javascripts/Components/Footer/Footer.tsx
@@ -1,4 +1,5 @@
-import { WebAppEvent, WebApplication } from '@/Application/Application'
+import { WebApplication } from '@/Application/Application'
+import { WebAppEvent } from '@/Application/WebAppEvent'
 import { ApplicationGroup } from '@/Application/ApplicationGroup'
 import { PureComponent } from '@/Components/Abstract/PureComponent'
 import { destroyAllObjectProperties, preventRefreshing } from '@/Utils'
@@ -12,7 +13,6 @@ import {
 } from '@/Constants/Strings'
 import { alertDialog, confirmDialog } from '@/Services/AlertService'
 import AccountMenu from '@/Components/AccountMenu/AccountMenu'
-import { ViewControllerManagerEvent } from '@/Services/ViewControllerManager'
 import Icon from '@/Components/Icon/Icon'
 import QuickSettingsMenu from '@/Components/QuickSettingsMenu/QuickSettingsMenu'
 import SyncResolutionMenu from '@/Components/SyncResolutionMenu/SyncResolutionMenu'
@@ -64,9 +64,34 @@ class Footer extends PureComponent<Props, State> {
      showQuickSettingsMenu: false,
    }

-    this.webEventListenerDestroyer = props.application.addWebEventObserver((event) => {
-      if (event === WebAppEvent.NewUpdateAvailable) {
-        this.onNewUpdateAvailable()
+    this.webEventListenerDestroyer = props.application.addWebEventObserver((event, data) => {
+      const statusService = this.application.status
+
+      switch (event) {
+        case WebAppEvent.NewUpdateAvailable:
+          this.onNewUpdateAvailable()
+          break
+        case WebAppEvent.EditorFocused:
+          if ((data as any).eventSource === EditorEventSource.UserInteraction) {
+            this.closeAccountMenu()
+          }
+          break
+        case WebAppEvent.BeganBackupDownload:
+          statusService.setMessage('Saving local backup…')
+          break
+        case WebAppEvent.EndedBackupDownload: {
+          const successMessage = 'Successfully saved backup.'
+          const errorMessage = 'Unable to save local backup.'
+          statusService.setMessage((data as any).success ? successMessage : errorMessage)
+
+          const twoSeconds = 2000
+          setTimeout(() => {
+            if (statusService.message === successMessage || statusService.message === errorMessage) {
+              statusService.setMessage('')
+            }
+          }, twoSeconds)
+          break
+        }
      }
    })
  }
@@ -133,33 +158,6 @@ class Footer extends PureComponent<Props, State> {
    })
  }

-  override onViewControllerManagerEvent(eventName: ViewControllerManagerEvent, data: any) {
-    const statusService = this.application.status
-    switch (eventName) {
-      case ViewControllerManagerEvent.EditorFocused:
-        if (data.eventSource === EditorEventSource.UserInteraction) {
-          this.closeAccountMenu()
-        }
-        break
-      case ViewControllerManagerEvent.BeganBackupDownload:
-        statusService.setMessage('Saving local backup…')
-        break
-      case ViewControllerManagerEvent.EndedBackupDownload: {
-        const successMessage = 'Successfully saved backup.'
-        const errorMessage = 'Unable to save local backup.'
-        statusService.setMessage(data.success ? successMessage : errorMessage)
-
-        const twoSeconds = 2000
-        setTimeout(() => {
-          if (statusService.message === successMessage || statusService.message === errorMessage) {
-            statusService.setMessage('')
-          }
-        }, twoSeconds)
-        break
-      }
-    }
-  }
-
  override async onAppKeyChange() {
    super.onAppKeyChange().catch(console.error)
    this.reloadPasscodeStatus().catch(console.error)
--- a/app/assets/javascripts/Components/Navigation/Navigation.tsx
+++ b/app/assets/javascripts/Components/Navigation/Navigation.tsx
@@ -33,7 +33,7 @@ const Navigation: FunctionComponent<Props> = ({ application }) => {
    (width, _lastLeft, _isMaxWidth, isCollapsed) => {
      application.setPreference(PrefKey.TagsPanelWidth, width).catch(console.error)
      viewControllerManager.noteTagsController.reloadTagsContainerMaxWidth()
-      viewControllerManager.panelDidResize(PANEL_NAME_NAVIGATION, isCollapsed)
+      application.publishPanelDidResizeEvent(PANEL_NAME_NAVIGATION, isCollapsed)
    },
    [application, viewControllerManager],
  )
--- a/app/assets/javascripts/Components/NoteView/NoteView.tsx
+++ b/app/assets/javascripts/Components/NoteView/NoteView.tsx
@@ -35,6 +35,7 @@ import {
 } from './TransactionFunctions'
 import { reloadFont } from './FontFunctions'
 import { NoteViewProps } from './NoteViewProps'
+import { WebAppEvent } from '@/Application/WebAppEvent'

 const MINIMUM_STATUS_DURATION = 400
 const TEXTAREA_DEBOUNCE = 100
@@ -588,7 +589,7 @@ class NoteView extends PureComponent<NoteViewProps, State> {

  onContentFocus = () => {
    if (this.lastEditorFocusEventSource) {
-      this.application.getViewControllerManager().editorDidFocus(this.lastEditorFocusEventSource)
+      this.application.notifyWebEvent(WebAppEvent.EditorFocused, { eventSource: this.lastEditorFocusEventSource })
    }
    this.lastEditorFocusEventSource = undefined
  }
--- a/app/assets/javascripts/Components/Preferences/Panes/General/Defaults.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/General/Defaults.tsx
@@ -57,7 +57,7 @@ const Defaults: FunctionComponent<Props> = ({ application }) => {

  const toggleSpellcheck = () => {
    setSpellcheck(!spellcheck)
-    application.getViewControllerManager().toggleGlobalSpellcheck().catch(console.error)
+    application.toggleGlobalSpellcheck().catch(console.error)
  }

  useEffect(() => {
--- a/app/assets/javascripts/Components/Tags/RootTagDropZone.tsx
+++ b/app/assets/javascripts/Components/Tags/RootTagDropZone.tsx
@@ -1,14 +1,14 @@
 import Icon from '@/Components/Icon/Icon'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import { FeaturesController } from '@/Controllers/FeaturesController'
-import { TagsController } from '@/Controllers/Navigation/TagsController'
+import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'react'
 import { useDrop } from 'react-dnd'
 import { DropItem, DropProps, ItemTypes } from './DragNDrop'

 type Props = {
-  tagsState: TagsController
+  tagsState: NavigationController
  featuresState: FeaturesController
 }

--- a/app/assets/javascripts/Components/Tags/SmartViewsListItem.tsx
+++ b/app/assets/javascripts/Components/Tags/SmartViewsListItem.tsx
@@ -1,6 +1,6 @@
 import Icon from '@/Components/Icon/Icon'
 import { FeaturesController } from '@/Controllers/FeaturesController'
-import { TagsController } from '@/Controllers/Navigation/TagsController'
+import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import '@reach/tooltip/styles.css'
 import { SmartView, SystemViewId, IconType, isSystemView } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
@@ -16,7 +16,7 @@ import {

 type Props = {
  view: SmartView
-  tagsState: TagsController
+  tagsState: NavigationController
  features: FeaturesController
 }

--- a/app/assets/javascripts/Components/Tags/TagsListItem.tsx
+++ b/app/assets/javascripts/Components/Tags/TagsListItem.tsx
@@ -3,7 +3,7 @@ import { TAG_FOLDERS_FEATURE_NAME } from '@/Constants/Constants'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import { KeyboardKey } from '@/Services/IOService'
 import { FeaturesController } from '@/Controllers/FeaturesController'
-import { TagsController } from '@/Controllers/Navigation/TagsController'
+import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import '@reach/tooltip/styles.css'
 import { SNTag } from '@standardnotes/snjs'
 import { computed } from 'mobx'
@@ -23,7 +23,7 @@ import { DropItem, DropProps, ItemTypes } from './DragNDrop'

 type Props = {
  tag: SNTag
-  tagsState: TagsController
+  tagsState: NavigationController
  features: FeaturesController
  level: number
  onContextMenu: (tag: SNTag, posX: number, posY: number) => void
--- a/app/assets/javascripts/Components/Tags/TagsSectionAddButton.tsx
+++ b/app/assets/javascripts/Components/Tags/TagsSectionAddButton.tsx
@@ -1,11 +1,11 @@
 import IconButton from '@/Components/Button/IconButton'
 import { FeaturesController } from '@/Controllers/FeaturesController'
-import { TagsController } from '@/Controllers/Navigation/TagsController'
+import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'react'

 type Props = {
-  tags: TagsController
+  tags: NavigationController
  features: FeaturesController
 }