refactor(web): dependency management (#2386)

packages/web/src/javascripts/Components/LinkedItems/LinkedItemsButton.tsx

@@ -1,5 +1,3 @@
-import { FeaturesController } from '@/Controllers/FeaturesController'
-import { FilesController } from '@/Controllers/FilesController'
 import { LinkingController } from '@/Controllers/LinkingController'
 import { observer } from 'mobx-react-lite'
 import { useRef, useCallback } from 'react'
@@ -10,11 +8,9 @@ import LinkedItemsPanel from './LinkedItemsPanel'
 type Props = {
   linkingController: LinkingController
   onClickPreprocessing?: () => Promise<void>
-  filesController: FilesController
-  featuresController: FeaturesController
 }
 
-const LinkedItemsButton = ({ linkingController, filesController, onClickPreprocessing, featuresController }: Props) => {
+const LinkedItemsButton = ({ linkingController, onClickPreprocessing }: Props) => {
   const { activeItem, isLinkingPanelOpen, setIsLinkingPanelOpen } = linkingController
   const buttonRef = useRef<HTMLButtonElement>(null)
 
@@ -40,13 +36,7 @@ const LinkedItemsButton = ({ linkingController, filesController, onClickPreproce
         open={isLinkingPanelOpen}
         className="pb-2"
       >
-        <LinkedItemsPanel
-          item={activeItem}
-          isOpen={isLinkingPanelOpen}
-          linkingController={linkingController}
-          filesController={filesController}
-          featuresController={featuresController}
-        />
+        <LinkedItemsPanel item={activeItem} isOpen={isLinkingPanelOpen} />
       </Popover>
     </>
   )

packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx

@@ -1,7 +1,4 @@
 import { FeatureName } from '@/Controllers/FeatureName'
-import { FeaturesController } from '@/Controllers/FeaturesController'
-import { FilesController } from '@/Controllers/FilesController'
-import { LinkingController } from '@/Controllers/LinkingController'
 import { classNames } from '@standardnotes/utils'
 import { getLinkingSearchResults } from '@/Utils/Items/Search/getSearchResults'
 import { observer } from 'mobx-react-lite'
@@ -15,26 +12,16 @@ import { LinkedItemsSectionItem } from './LinkedItemsSectionItem'
 import { DecryptedItem } from '@standardnotes/snjs'
 import { useItemLinks } from '@/Hooks/useItemLinks'
 
-const LinkedItemsPanel = ({
-  linkingController,
-  filesController,
-  featuresController,
-  isOpen,
-  item,
-}: {
-  linkingController: LinkingController
-  filesController: FilesController
-  featuresController: FeaturesController
-  isOpen: boolean
-  item: DecryptedItem
-}) => {
-  const { linkItems, unlinkItems, activateItem, createAndAddNewTag, isEntitledToNoteLinking } = linkingController
+const LinkedItemsPanel = ({ isOpen, item }: { isOpen: boolean; item: DecryptedItem }) => {
+  const application = useApplication()
+
+  const { linkItems, unlinkItems, activateItem, createAndAddNewTag, isEntitledToNoteLinking } =
+    application.linkingController
 
   const { notesLinkedToItem, notesLinkingToItem, filesLinkedToItem, filesLinkingToItem, tagsLinkedToItem } =
     useItemLinks(item)
 
-  const { entitledToFiles } = featuresController
-  const application = useApplication()
+  const { entitledToFiles } = application.featuresController
 
   const searchInputRef = useRef<HTMLInputElement | null>(null)
   const [searchQuery, setSearchQuery] = useState('')
@@ -49,11 +36,11 @@ const LinkedItemsPanel = ({
 
   const selectAndUploadFiles = async () => {
     if (!entitledToFiles) {
-      void featuresController.showPremiumAlert(FeatureName.Files)
+      void application.featuresController.showPremiumAlert(FeatureName.Files)
       return
     }
 
-    void filesController.selectAndUploadNewFiles((file) => {
+    void application.filesController.selectAndUploadNewFiles((file) => {
       void linkItems(item, file)
     })
   }
@@ -122,7 +109,7 @@ const LinkedItemsPanel = ({
                       searchQuery={searchQuery}
                       unlinkItem={() => unlinkItems(item, link.item)}
                       activateItem={activateItem}
-                      handleFileAction={filesController.handleFileAction}
+                      handleFileAction={application.filesController.handleFileAction}
                     />
                   ))}
                 </div>
@@ -142,7 +129,7 @@ const LinkedItemsPanel = ({
                       searchQuery={searchQuery}
                       unlinkItem={() => unlinkItems(item, link.item)}
                       activateItem={activateItem}
-                      handleFileAction={filesController.handleFileAction}
+                      handleFileAction={application.filesController.handleFileAction}
                     />
                   ))}
                 </div>
@@ -166,7 +153,7 @@ const LinkedItemsPanel = ({
                     searchQuery={searchQuery}
                     unlinkItem={() => unlinkItems(item, link.item)}
                     activateItem={activateItem}
-                    handleFileAction={filesController.handleFileAction}
+                    handleFileAction={application.filesController.handleFileAction}
                   />
                 ))}
               </div>
@@ -185,7 +172,7 @@ const LinkedItemsPanel = ({
                       searchQuery={searchQuery}
                       unlinkItem={() => unlinkItems(item, link.item)}
                       activateItem={activateItem}
-                      handleFileAction={filesController.handleFileAction}
+                      handleFileAction={application.filesController.handleFileAction}
                     />
                   ))}
                 </div>
@@ -202,7 +189,7 @@ const LinkedItemsPanel = ({
                       searchQuery={searchQuery}
                       unlinkItem={() => unlinkItems(item, link.item)}
                       activateItem={activateItem}
-                      handleFileAction={filesController.handleFileAction}
+                      handleFileAction={application.filesController.handleFileAction}
                     />
                   ))}
                 </div>
@@ -221,7 +208,7 @@ const LinkedItemsPanel = ({
                       searchQuery={searchQuery}
                       unlinkItem={() => unlinkItems(item, link.item)}
                       activateItem={activateItem}
-                      handleFileAction={filesController.handleFileAction}
+                      handleFileAction={application.filesController.handleFileAction}
                     />
                   ))}
                 </div>