refactor(web): dependency management (#2386)

packages/web/src/javascripts/Components/FileContextMenu/FileContextMenu.tsx

@@ -1,60 +1,46 @@
 import { FilesController } from '@/Controllers/FilesController'
-import { LinkingController } from '@/Controllers/LinkingController'
-import { NavigationController } from '@/Controllers/Navigation/NavigationController'
-import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'react'
 import Menu from '../Menu/Menu'
 import Popover from '../Popover/Popover'
 import FileMenuOptions from './FileMenuOptions'
+import { ItemListController } from '@/Controllers/ItemList/ItemListController'
 
 type Props = {
   filesController: FilesController
-  selectionController: SelectedItemsController
-  linkingController: LinkingController
-  navigationController: NavigationController
+  itemListController: ItemListController
 }
 
-const FileContextMenu: FunctionComponent<Props> = observer(
-  ({ filesController, selectionController, linkingController, navigationController }) => {
-    const { showFileContextMenu, setShowFileContextMenu, fileContextMenuLocation } = filesController
-    const { selectedFiles } = selectionController
+const FileContextMenu: FunctionComponent<Props> = observer(({ filesController, itemListController }) => {
+  const { showFileContextMenu, setShowFileContextMenu, fileContextMenuLocation } = filesController
+  const { selectedFiles } = itemListController
 
-    return (
-      <Popover
-        title="File options"
-        open={showFileContextMenu}
-        anchorPoint={fileContextMenuLocation}
-        togglePopover={() => setShowFileContextMenu(!showFileContextMenu)}
-        align="start"
-        className="py-2"
-      >
-        <Menu a11yLabel="File context menu" isOpen={showFileContextMenu}>
-          <FileMenuOptions
-            filesController={filesController}
-            linkingController={linkingController}
-            navigationController={navigationController}
-            selectedFiles={selectedFiles}
-            closeMenu={() => setShowFileContextMenu(false)}
-            shouldShowRenameOption={false}
-            shouldShowAttachOption={false}
-          />
-        </Menu>
-      </Popover>
-    )
-  },
-)
+  return (
+    <Popover
+      title="File options"
+      open={showFileContextMenu}
+      anchorPoint={fileContextMenuLocation}
+      togglePopover={() => setShowFileContextMenu(!showFileContextMenu)}
+      align="start"
+      className="py-2"
+    >
+      <Menu a11yLabel="File context menu" isOpen={showFileContextMenu}>
+        <FileMenuOptions
+          selectedFiles={selectedFiles}
+          closeMenu={() => setShowFileContextMenu(false)}
+          shouldShowRenameOption={false}
+          shouldShowAttachOption={false}
+        />
+      </Menu>
+    </Popover>
+  )
+})
 
 FileContextMenu.displayName = 'FileContextMenu'
 
-const FileContextMenuWrapper: FunctionComponent<Props> = ({
-  filesController,
-  linkingController,
-  navigationController,
-  selectionController,
-}) => {
+const FileContextMenuWrapper: FunctionComponent<Props> = ({ filesController, itemListController }) => {
   const { showFileContextMenu } = filesController
-  const { selectedFiles } = selectionController
+  const { selectedFiles } = itemListController
 
   const selectedFile = selectedFiles[0]
 
@@ -62,14 +48,7 @@ const FileContextMenuWrapper: FunctionComponent<Props> = ({
     return null
   }
 
-  return (
-    <FileContextMenu
-      filesController={filesController}
-      linkingController={linkingController}
-      navigationController={navigationController}
-      selectionController={selectionController}
-    />
-  )
+  return <FileContextMenu filesController={filesController} itemListController={itemListController} />
 }
 
 export default observer(FileContextMenuWrapper)

packages/web/src/javascripts/Components/FileContextMenu/FileMenuOptions.tsx

@@ -2,7 +2,6 @@ import { FunctionComponent, useCallback, useMemo } from 'react'
 import { FileItemActionType } from '../AttachedFilesPopover/PopoverFileItemAction'
 import Icon from '@/Components/Icon/Icon'
 import { observer } from 'mobx-react-lite'
-import { FilesController } from '@/Controllers/FilesController'
 import HorizontalSeparator from '../Shared/HorizontalSeparator'
 import { formatSizeToReadableString } from '@standardnotes/filepicker'
 import { useResponsiveAppPane } from '../Panes/ResponsivePaneProvider'
@@ -13,17 +12,13 @@ import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem'
 import { FileItem } from '@standardnotes/snjs'
 import AddTagOption from '../NotesOptions/AddTagOption'
 import { MenuItemIconSize } from '@/Constants/TailwindClassNames'
-import { LinkingController } from '@/Controllers/LinkingController'
-import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import AddToVaultMenuOption from '../Vaults/AddToVaultMenuOption'
 import { iconClass } from '../NotesOptions/ClassNames'
 import { featureTrunkVaultsEnabled } from '@/FeatureTrunk'
+import { useApplication } from '../ApplicationProvider'
 
 type Props = {
   closeMenu: () => void
-  filesController: FilesController
-  linkingController: LinkingController
-  navigationController: NavigationController
   isFileAttachedToNote?: boolean
   renameToggleCallback?: (isRenamingFile: boolean) => void
   shouldShowRenameOption: boolean
@@ -33,16 +28,15 @@ type Props = {
 
 const FileMenuOptions: FunctionComponent<Props> = ({
   closeMenu,
-  filesController,
-  linkingController,
-  navigationController,
   isFileAttachedToNote,
   renameToggleCallback,
   shouldShowRenameOption,
   shouldShowAttachOption,
   selectedFiles,
 }) => {
-  const { handleFileAction } = filesController
+  const application = useApplication()
+
+  const { handleFileAction } = application.filesController
   const { toggleAppPane } = useResponsiveAppPane()
 
   const hasProtectedFiles = useMemo(() => selectedFiles.some((file) => file.protected), [selectedFiles])
@@ -95,15 +89,15 @@ const FileMenuOptions: FunctionComponent<Props> = ({
       )}
       {featureTrunkVaultsEnabled() && <AddToVaultMenuOption iconClassName={iconClass} items={selectedFiles} />}
       <AddTagOption
-        navigationController={navigationController}
-        linkingController={linkingController}
+        navigationController={application.navigationController}
+        linkingController={application.linkingController}
         selectedItems={selectedFiles}
         iconClassName={`text-neutral mr-2 ${MenuItemIconSize}`}
       />
       <MenuSwitchButtonItem
         checked={hasProtectedFiles}
         onChange={(hasProtectedFiles) => {
-          void filesController.setProtectionForFiles(hasProtectedFiles, selectedFiles)
+          void application.filesController.setProtectionForFiles(hasProtectedFiles, selectedFiles)
         }}
       >
         <Icon type="lock" className={`mr-2 text-neutral ${MenuItemIconSize}`} />
@@ -112,7 +106,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
       <HorizontalSeparator classes="my-1" />
       <MenuItem
         onClick={() => {
-          void filesController.downloadFiles(selectedFiles)
+          void application.filesController.downloadFiles(selectedFiles)
           closeMenu()
         }}
       >
@@ -132,7 +126,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
       <MenuItem
         onClick={() => {
           closeMenuAndToggleFilesList()
-          void filesController.deleteFilesPermanently(selectedFiles)
+          void application.filesController.deleteFilesPermanently(selectedFiles)
         }}
       >
         <Icon type="trash" className={`mr-2 text-danger ${MenuItemIconSize}`} />

packages/web/src/javascripts/Components/FileContextMenu/FileOptionsPanel.tsx

@@ -1,27 +1,16 @@
 import { useCallback, useRef, useState } from 'react'
 import { observer } from 'mobx-react-lite'
 import FileMenuOptions from './FileMenuOptions'
-import { FilesController } from '@/Controllers/FilesController'
-import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
 import Popover from '../Popover/Popover'
 import RoundIconButton from '../Button/RoundIconButton'
 import Menu from '../Menu/Menu'
-import { LinkingController } from '@/Controllers/LinkingController'
-import { NavigationController } from '@/Controllers/Navigation/NavigationController'
+import { ItemListController } from '@/Controllers/ItemList/ItemListController'
 
 type Props = {
-  filesController: FilesController
-  selectionController: SelectedItemsController
-  linkingController: LinkingController
-  navigationController: NavigationController
+  itemListController: ItemListController
 }
 
-const FilesOptionsPanel = ({
-  filesController,
-  linkingController,
-  navigationController,
-  selectionController,
-}: Props) => {
+const FilesOptionsPanel = ({ itemListController }: Props) => {
   const [isOpen, setIsOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement>(null)
 
@@ -39,10 +28,7 @@ const FilesOptionsPanel = ({
       >
         <Menu a11yLabel="File options panel" isOpen={isOpen}>
           <FileMenuOptions
-            filesController={filesController}
-            linkingController={linkingController}
-            navigationController={navigationController}
-            selectedFiles={selectionController.selectedFiles}
+            selectedFiles={itemListController.selectedFiles}
             closeMenu={() => {
               setIsOpen(false)
             }}