refactor(web): dependency management (#2386)

packages/web/src/javascripts/Controllers/PaneController/PaneController.ts

@@ -1,4 +1,11 @@
+import { PanesForLayout } from './../../Application/UseCase/PanesForLayout'
 import {
+  InternalEventHandlerInterface,
+  InternalEventInterface,
+  PreferenceServiceInterface,
+} from '@standardnotes/services'
+import {
+  KeyboardService,
   TOGGLE_FOCUS_MODE_COMMAND,
   TOGGLE_LIST_PANE_KEYBOARD_COMMAND,
   TOGGLE_NAVIGATION_PANE_KEYBOARD_COMMAND,
@@ -15,12 +22,10 @@ import { isMobileScreen } from '@/Utils'
 import { makeObservable, observable, action, computed } from 'mobx'
 import { Disposer } from '@/Types/Disposer'
 import { MediaQueryBreakpoints } from '@/Hooks/useMediaQuery'
-import { WebApplication } from '@/Application/WebApplication'
 import { AbstractViewController } from '../Abstract/AbstractViewController'
 import { log, LoggingDomain } from '@/Logging'
 import { PaneLayout } from './PaneLayout'
-import { panesForLayout } from './panesForLayout'
-import { getIsTabletOrMobileScreen } from '@/Hooks/useIsTabletOrMobileScreen'
+import { IsTabletOrMobileScreen } from '@/Application/UseCase/IsTabletOrMobileScreen'
 
 const MinimumNavPanelWidth = PrefDefaults[PrefKey.TagsPanelWidth]
 const MinimumNotesPanelWidth = PrefDefaults[PrefKey.NotesPanelWidth]
@@ -28,7 +33,7 @@ const FOCUS_MODE_CLASS_NAME = 'focus-mode'
 const DISABLING_FOCUS_MODE_CLASS_NAME = 'disable-focus-mode'
 const FOCUS_MODE_ANIMATION_DURATION = 1255
 
-export class PaneController extends AbstractViewController {
+export class PaneController extends AbstractViewController implements InternalEventHandlerInterface {
   isInMobileView = isMobileScreen()
   protected disposers: Disposer[] = []
   panes: AppPaneId[] = []
@@ -40,8 +45,14 @@ export class PaneController extends AbstractViewController {
   listPaneExplicitelyCollapsed = false
   navigationPaneExplicitelyCollapsed = false
 
-  constructor(application: WebApplication, eventBus: InternalEventBusInterface) {
-    super(application, eventBus)
+  constructor(
+    private preferences: PreferenceServiceInterface,
+    private keyboardService: KeyboardService,
+    private _isTabletOrMobileScreen: IsTabletOrMobileScreen,
+    private _panesForLayout: PanesForLayout,
+    eventBus: InternalEventBusInterface,
+  ) {
+    super(eventBus)
 
     makeObservable(this, {
       panes: observable,
@@ -70,10 +81,10 @@ export class PaneController extends AbstractViewController {
       setFocusModeEnabled: action,
     })
 
-    this.setCurrentNavPanelWidth(application.getPreference(PrefKey.TagsPanelWidth, MinimumNavPanelWidth))
-    this.setCurrentItemsPanelWidth(application.getPreference(PrefKey.NotesPanelWidth, MinimumNotesPanelWidth))
+    this.setCurrentNavPanelWidth(preferences.getValue(PrefKey.TagsPanelWidth, MinimumNavPanelWidth))
+    this.setCurrentItemsPanelWidth(preferences.getValue(PrefKey.NotesPanelWidth, MinimumNotesPanelWidth))
 
-    const screen = getIsTabletOrMobileScreen(application)
+    const screen = this._isTabletOrMobileScreen.execute().getValue()
 
     this.panes = screen.isTabletOrMobile
       ? [AppPaneId.Navigation, AppPaneId.Items]
@@ -86,13 +97,10 @@ export class PaneController extends AbstractViewController {
       mediaQuery.addListener(this.mediumScreenMQHandler)
     }
 
-    this.disposers.push(
-      application.addEventObserver(async () => {
-        this.setCurrentNavPanelWidth(application.getPreference(PrefKey.TagsPanelWidth, MinimumNavPanelWidth))
-        this.setCurrentItemsPanelWidth(application.getPreference(PrefKey.NotesPanelWidth, MinimumNotesPanelWidth))
-      }, ApplicationEvent.PreferencesChanged),
+    eventBus.addEventHandler(this, ApplicationEvent.PreferencesChanged)
 
-      application.keyboardService.addCommandHandler({
+    this.disposers.push(
+      keyboardService.addCommandHandler({
         command: TOGGLE_FOCUS_MODE_COMMAND,
         onKeyDown: (event) => {
           event.preventDefault()
@@ -100,14 +108,14 @@ export class PaneController extends AbstractViewController {
           return true
         },
       }),
-      application.keyboardService.addCommandHandler({
+      keyboardService.addCommandHandler({
         command: TOGGLE_LIST_PANE_KEYBOARD_COMMAND,
         onKeyDown: (event) => {
           event.preventDefault()
           this.toggleListPane()
         },
       }),
-      application.keyboardService.addCommandHandler({
+      keyboardService.addCommandHandler({
         command: TOGGLE_NAVIGATION_PANE_KEYBOARD_COMMAND,
         onKeyDown: (event) => {
           event.preventDefault()
@@ -117,6 +125,13 @@ export class PaneController extends AbstractViewController {
     )
   }
 
+  async handleEvent(event: InternalEventInterface): Promise<void> {
+    if (event.type === ApplicationEvent.PreferencesChanged) {
+      this.setCurrentNavPanelWidth(this.preferences.getValue(PrefKey.TagsPanelWidth, MinimumNavPanelWidth))
+      this.setCurrentItemsPanelWidth(this.preferences.getValue(PrefKey.NotesPanelWidth, MinimumNotesPanelWidth))
+    }
+  }
+
   setCurrentNavPanelWidth(width: number) {
     this.currentNavPanelWidth = width
   }
@@ -158,7 +173,7 @@ export class PaneController extends AbstractViewController {
   setPaneLayout = (layout: PaneLayout) => {
     log(LoggingDomain.Panes, 'Set pane layout', layout)
 
-    const panes = panesForLayout(layout, this.application)
+    const panes = this._panesForLayout.execute(layout).getValue()
 
     if (panes.includes(AppPaneId.Items) && this.listPaneExplicitelyCollapsed) {
       removeFromArray(panes, AppPaneId.Items)

packages/web/src/javascripts/Controllers/PaneController/panesForLayout.ts

@@ -1,34 +1,4 @@
 import { AppPaneId } from '../../Components/Panes/AppPaneMetadata'
-import { PaneLayout } from './PaneLayout'
-import { WebApplication } from '@/Application/WebApplication'
-import { getIsTabletOrMobileScreen } from '@/Hooks/useIsTabletOrMobileScreen'
-
-export function panesForLayout(layout: PaneLayout, application: WebApplication): AppPaneId[] {
-  const screen = getIsTabletOrMobileScreen(application)
-  if (screen.isTablet) {
-    if (layout === PaneLayout.TagSelection || layout === PaneLayout.TableView) {
-      return [AppPaneId.Navigation, AppPaneId.Items]
-    } else if (layout === PaneLayout.ItemSelection || layout === PaneLayout.Editing) {
-      return [AppPaneId.Items, AppPaneId.Editor]
-    }
-  } else if (screen.isMobile) {
-    if (layout === PaneLayout.TagSelection) {
-      return [AppPaneId.Navigation]
-    } else if (layout === PaneLayout.ItemSelection || layout === PaneLayout.TableView) {
-      return [AppPaneId.Navigation, AppPaneId.Items]
-    } else if (layout === PaneLayout.Editing) {
-      return [AppPaneId.Navigation, AppPaneId.Items, AppPaneId.Editor]
-    }
-  } else {
-    if (layout === PaneLayout.TableView) {
-      return [AppPaneId.Navigation, AppPaneId.Items]
-    } else {
-      return [AppPaneId.Navigation, AppPaneId.Items, AppPaneId.Editor]
-    }
-  }
-
-  throw Error('Unhandled pane layout')
-}
 
 export function isPanesChangeLeafDismiss(from: AppPaneId[], to: AppPaneId[]): boolean {
   const fromWithoutLast = from.slice(0, from.length - 1)