refactor: blocks plugins (#1956)

2022-11-08 13:31:48 -06:00
parent bfca244061
commit 70a9dbcea6
73 changed files with 1448 additions and 1049 deletions
--- a/packages/web/src/javascripts/Components/LinkedItems/ItemLinkAutocompleteInput.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/ItemLinkAutocompleteInput.tsx
@@ -18,6 +18,8 @@ import { LinkingController } from '@/Controllers/LinkingController'
 import { KeyboardKey } from '@standardnotes/ui-services'
 import { ElementIds } from '@/Constants/ElementIDs'
 import Menu from '../Menu/Menu'
+import { getLinkingSearchResults } from '@/Utils/Items/Search/getSearchResults'
+import { useApplication } from '../ApplicationView/ApplicationProvider'

 type Props = {
  linkingController: LinkingController
@@ -27,18 +29,11 @@ type Props = {
 }

 const ItemLinkAutocompleteInput = ({ linkingController, focusPreviousItem, focusedId, setFocusedId }: Props) => {
-  const {
-    tags,
-    getTitleForLinkedTag,
-    getLinkedItemIcon,
-    getSearchResults,
-    linkItemToSelectedItem,
-    createAndAddNewTag,
-    isEntitledToNoteLinking,
-  } = linkingController
+  const application = useApplication()
+  const { tags, linkItemToSelectedItem, createAndAddNewTag, isEntitledToNoteLinking, activeItem } = linkingController

  const [searchQuery, setSearchQuery] = useState('')
-  const { unlinkedResults, shouldShowCreateTag } = getSearchResults(searchQuery)
+  const { unlinkedItems, shouldShowCreateTag } = getLinkingSearchResults(searchQuery, application, activeItem)

  const [dropdownVisible, setDropdownVisible] = useState(false)
  const [dropdownMaxHeight, setDropdownMaxHeight] = useState<number | 'auto'>('auto')
@@ -105,7 +100,7 @@ const ItemLinkAutocompleteInput = ({ linkingController, focusPreviousItem, focus
    }
  }, [focusedId])

-  const areSearchResultsVisible = dropdownVisible && (unlinkedResults.length > 0 || shouldShowCreateTag)
+  const areSearchResultsVisible = dropdownVisible && (unlinkedItems.length > 0 || shouldShowCreateTag)

  const handleMenuKeyDown: KeyboardEventHandler<HTMLMenuElement> = useCallback((event) => {
    if (event.key === KeyboardKey.Escape) {
@@ -155,10 +150,8 @@ const ItemLinkAutocompleteInput = ({ linkingController, focusPreviousItem, focus
              >
                <LinkedItemSearchResults
                  createAndAddNewTag={createAndAddNewTag}
-                  getLinkedItemIcon={getLinkedItemIcon}
-                  getTitleForLinkedTag={getTitleForLinkedTag}
                  linkItemToSelectedItem={linkItemToSelectedItem}
-                  results={unlinkedResults}
+                  results={unlinkedItems}
                  searchQuery={searchQuery}
                  shouldShowCreateTag={shouldShowCreateTag}
                  onClickCallback={() => setSearchQuery('')}
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx
@@ -1,15 +1,18 @@
-import { ItemLink, LinkableItem, LinkingController } from '@/Controllers/LinkingController'
+import { LinkingController } from '@/Controllers/LinkingController'
 import { classNames } from '@/Utils/ConcatenateClassNames'
 import { KeyboardKey } from '@standardnotes/ui-services'
 import { observer } from 'mobx-react-lite'
 import { KeyboardEventHandler, MouseEventHandler, useEffect, useRef, useState } from 'react'
 import { ContentType } from '@standardnotes/snjs'
 import Icon from '../Icon/Icon'
+import { ItemLink } from '@/Utils/Items/Search/ItemLink'
+import { LinkableItem } from '@/Utils/Items/Search/LinkableItem'
+import { getIconForItem } from '@/Utils/Items/Icons/getIconForItem'
+import { useApplication } from '../ApplicationView/ApplicationProvider'
+import { getTitleForLinkedTag } from '@/Utils/Items/Display/getTitleForLinkedTag'

 type Props = {
  link: ItemLink
-  getItemIcon: LinkingController['getLinkedItemIcon']
-  getTitleForLinkedTag: LinkingController['getTitleForLinkedTag']
  activateItem: (item: LinkableItem) => Promise<void>
  unlinkItem: LinkingController['unlinkItemFromSelectedItem']
  focusPreviousItem: () => void
@@ -21,8 +24,6 @@ type Props = {

 const LinkedItemBubble = ({
  link,
-  getItemIcon,
-  getTitleForLinkedTag,
  activateItem,
  unlinkItem,
  focusPreviousItem,
@@ -32,6 +33,7 @@ const LinkedItemBubble = ({
  isBidirectional,
 }: Props) => {
  const ref = useRef<HTMLButtonElement>(null)
+  const application = useApplication()

  const [showUnlinkButton, setShowUnlinkButton] = useState(false)
  const unlinkButtonRef = useRef<HTMLAnchorElement | null>(null)
@@ -80,8 +82,8 @@ const LinkedItemBubble = ({
    }
  }

-  const [icon, iconClassName] = getItemIcon(link.item)
-  const tagTitle = getTitleForLinkedTag(link.item)
+  const [icon, iconClassName] = getIconForItem(link.item, application)
+  const tagTitle = getTitleForLinkedTag(link.item, application)

  useEffect(() => {
    if (link.id === focusedId) {
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubblesContainer.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubblesContainer.tsx
@@ -1,12 +1,14 @@
 import { observer } from 'mobx-react-lite'
 import ItemLinkAutocompleteInput from './ItemLinkAutocompleteInput'
-import { ItemLink, LinkableItem, LinkingController } from '@/Controllers/LinkingController'
+import { LinkingController } from '@/Controllers/LinkingController'
 import LinkedItemBubble from './LinkedItemBubble'
 import { useCallback, useState } from 'react'
 import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
 import { ElementIds } from '@/Constants/ElementIDs'
 import { classNames } from '@/Utils/ConcatenateClassNames'
 import { ContentType } from '@standardnotes/snjs'
+import { LinkableItem } from '@/Utils/Items/Search/LinkableItem'
+import { ItemLink } from '@/Utils/Items/Search/ItemLink'

 type Props = {
  linkingController: LinkingController
@@ -19,8 +21,6 @@ const LinkedItemBubblesContainer = ({ linkingController }: Props) => {
    notesLinkingToActiveItem,
    filesLinkingToActiveItem,
    unlinkItemFromSelectedItem: unlinkItem,
-    getTitleForLinkedTag,
-    getLinkedItemIcon: getItemIcon,
    activateItem,
  } = linkingController

@@ -86,8 +86,6 @@ const LinkedItemBubblesContainer = ({ linkingController }: Props) => {
          <LinkedItemBubble
            link={link}
            key={link.id}
-            getItemIcon={getItemIcon}
-            getTitleForLinkedTag={getTitleForLinkedTag}
            activateItem={activateItemAndTogglePane}
            unlinkItem={unlinkItem}
            focusPreviousItem={focusPreviousItem}
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemMeta.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemMeta.tsx
@@ -1,22 +1,21 @@
-import { LinkableItem, LinkingController } from '@/Controllers/LinkingController'
 import { splitQueryInString } from '@/Utils'
 import { classNames } from '@/Utils/ConcatenateClassNames'
+import { getTitleForLinkedTag } from '@/Utils/Items/Display/getTitleForLinkedTag'
+import { getIconForItem } from '@/Utils/Items/Icons/getIconForItem'
+import { LinkableItem } from '@/Utils/Items/Search/LinkableItem'
 import { observer } from 'mobx-react-lite'
+import { useApplication } from '../ApplicationView/ApplicationProvider'
 import Icon from '../Icon/Icon'

-const LinkedItemMeta = ({
-  item,
-  getItemIcon,
-  getTitleForLinkedTag,
-  searchQuery,
-}: {
+type Props = {
  item: LinkableItem
-  getItemIcon: LinkingController['getLinkedItemIcon']
-  getTitleForLinkedTag: LinkingController['getTitleForLinkedTag']
  searchQuery?: string
-}) => {
-  const [icon, className] = getItemIcon(item)
-  const tagTitle = getTitleForLinkedTag(item)
+}
+
+const LinkedItemMeta = ({ item, searchQuery }: Props) => {
+  const application = useApplication()
+  const [icon, className] = getIconForItem(item, application)
+  const tagTitle = getTitleForLinkedTag(item, application)
  const title = item.title ?? ''

  return (
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemSearchResults.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemSearchResults.tsx
@@ -1,15 +1,14 @@
-import { LinkableItem, LinkingController } from '@/Controllers/LinkingController'
+import { LinkingController } from '@/Controllers/LinkingController'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import { observer } from 'mobx-react-lite'
 import { SNNote } from '@standardnotes/snjs'
 import Icon from '../Icon/Icon'
 import { PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon'
 import LinkedItemMeta from './LinkedItemMeta'
+import { LinkableItem } from '@/Utils/Items/Search/LinkableItem'

 type Props = {
  createAndAddNewTag: LinkingController['createAndAddNewTag']
-  getLinkedItemIcon: LinkingController['getLinkedItemIcon']
-  getTitleForLinkedTag: LinkingController['getTitleForLinkedTag']
  linkItemToSelectedItem: LinkingController['linkItemToSelectedItem']
  results: LinkableItem[]
  searchQuery: string
@@ -20,8 +19,6 @@ type Props = {

 const LinkedItemSearchResults = ({
  createAndAddNewTag,
-  getLinkedItemIcon,
-  getTitleForLinkedTag,
  linkItemToSelectedItem,
  results,
  searchQuery,
@@ -48,12 +45,7 @@ const LinkedItemSearchResults = ({
              }
            }}
          >
-            <LinkedItemMeta
-              item={result}
-              getItemIcon={getLinkedItemIcon}
-              getTitleForLinkedTag={getTitleForLinkedTag}
-              searchQuery={searchQuery}
-            />
+            <LinkedItemMeta item={result} searchQuery={searchQuery} />
            {cannotLinkItem && <Icon type={PremiumFeatureIconName} className="ml-auto flex-shrink-0 text-info" />}
          </button>
        )
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx
@@ -1,13 +1,17 @@
 import { FeaturesController } from '@/Controllers/FeaturesController'
 import { FilesController } from '@/Controllers/FilesController'
-import { LinkableItem, LinkingController } from '@/Controllers/LinkingController'
+import { LinkingController } from '@/Controllers/LinkingController'
 import { classNames } from '@/Utils/ConcatenateClassNames'
 import { formatDateForContextMenu } from '@/Utils/DateUtils'
+import { getIconForItem } from '@/Utils/Items/Icons/getIconForItem'
+import { getLinkingSearchResults } from '@/Utils/Items/Search/getSearchResults'
+import { LinkableItem } from '@/Utils/Items/Search/LinkableItem'
 import { formatSizeToReadableString } from '@standardnotes/filepicker'
 import { FileItem } from '@standardnotes/snjs'
 import { KeyboardKey } from '@standardnotes/ui-services'
 import { observer } from 'mobx-react-lite'
 import { ChangeEventHandler, useEffect, useRef, useState } from 'react'
+import { useApplication } from '../ApplicationView/ApplicationProvider'
 import { PopoverFileItemActionType } from '../AttachedFilesPopover/PopoverFileItemAction'
 import ClearInputButton from '../ClearInputButton/ClearInputButton'
 import Icon from '../Icon/Icon'
@@ -22,29 +26,26 @@ import LinkedItemSearchResults from './LinkedItemSearchResults'

 const LinkedItemsSectionItem = ({
  activateItem,
-  getItemIcon,
-  getTitleForLinkedTag,
  item,
  searchQuery,
  unlinkItem,
  handleFileAction,
 }: {
  activateItem: LinkingController['activateItem']
-  getItemIcon: LinkingController['getLinkedItemIcon']
-  getTitleForLinkedTag: LinkingController['getTitleForLinkedTag']
  item: LinkableItem
  searchQuery?: string
  unlinkItem: () => void
  handleFileAction: FilesController['handleFileAction']
 }) => {
  const menuButtonRef = useRef<HTMLButtonElement>(null)
+  const application = useApplication()

  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const toggleMenu = () => setIsMenuOpen((open) => !open)

  const [isRenamingFile, setIsRenamingFile] = useState(false)

-  const [icon, className] = getItemIcon(item)
+  const [icon, className] = getIconForItem(item, application)
  const title = item.title ?? ''

  const renameFile = async (name: string) => {
@@ -93,12 +94,7 @@ const LinkedItemsSectionItem = ({
            toggleMenu()
          }}
        >
-          <LinkedItemMeta
-            item={item}
-            getItemIcon={getItemIcon}
-            getTitleForLinkedTag={getTitleForLinkedTag}
-            searchQuery={searchQuery}
-          />
+          <LinkedItemMeta item={item} searchQuery={searchQuery} />
        </button>
      )}
      <button
@@ -174,23 +170,26 @@ const LinkedItemsPanel = ({
    notesLinkedToItem,
    notesLinkingToActiveItem,
    allItemLinks: allLinkedItems,
-    getTitleForLinkedTag,
-    getLinkedItemIcon,
-    getSearchResults,
    linkItemToSelectedItem,
    unlinkItemFromSelectedItem,
    activateItem,
    createAndAddNewTag,
    isEntitledToNoteLinking,
+    activeItem,
  } = linkingController

  const { hasFiles } = featuresController
+  const application = useApplication()

  const fileInputRef = useRef<HTMLInputElement | null>(null)
  const searchInputRef = useRef<HTMLInputElement | null>(null)
  const [searchQuery, setSearchQuery] = useState('')
  const isSearching = !!searchQuery.length
-  const { linkedResults, unlinkedResults, shouldShowCreateTag } = getSearchResults(searchQuery)
+  const { linkedResults, unlinkedItems, shouldShowCreateTag } = getLinkingSearchResults(
+    searchQuery,
+    application,
+    activeItem,
+  )

  useEffect(() => {
    if (isOpen && searchInputRef.current) {
@@ -227,7 +226,7 @@ const LinkedItemsPanel = ({
      <form
        className={classNames(
          'sticky top-0 z-10 bg-default px-2.5 pt-2.5',
-          allLinkedItems.length || linkedResults.length || unlinkedResults.length || notesLinkingToActiveItem.length
+          allLinkedItems.length || linkedResults.length || unlinkedItems.length || notesLinkingToActiveItem.length
            ? 'border-b border-border pb-2.5'
            : 'pb-1',
        )}
@@ -254,15 +253,13 @@ const LinkedItemsPanel = ({
      <div className="divide-y divide-border">
        {isSearching ? (
          <>
-            {(!!unlinkedResults.length || shouldShowCreateTag) && (
+            {(!!unlinkedItems.length || shouldShowCreateTag) && (
              <div>
                <div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">Unlinked</div>
                <LinkedItemSearchResults
                  createAndAddNewTag={createAndAddNewTag}
-                  getLinkedItemIcon={getLinkedItemIcon}
-                  getTitleForLinkedTag={getTitleForLinkedTag}
                  linkItemToSelectedItem={linkItemToSelectedItem}
-                  results={unlinkedResults}
+                  results={unlinkedItems}
                  searchQuery={searchQuery}
                  shouldShowCreateTag={shouldShowCreateTag}
                  isEntitledToNoteLinking={isEntitledToNoteLinking}
@@ -281,8 +278,6 @@ const LinkedItemsPanel = ({
                    <LinkedItemsSectionItem
                      key={link.id}
                      item={link.item}
-                      getItemIcon={getLinkedItemIcon}
-                      getTitleForLinkedTag={getTitleForLinkedTag}
                      searchQuery={searchQuery}
                      unlinkItem={() => unlinkItemFromSelectedItem(link)}
                      activateItem={activateItem}
@@ -303,8 +298,6 @@ const LinkedItemsPanel = ({
                    <LinkedItemsSectionItem
                      key={link.id}
                      item={link.item}
-                      getItemIcon={getLinkedItemIcon}
-                      getTitleForLinkedTag={getTitleForLinkedTag}
                      searchQuery={searchQuery}
                      unlinkItem={() => unlinkItemFromSelectedItem(link)}
                      activateItem={activateItem}
@@ -336,8 +329,6 @@ const LinkedItemsPanel = ({
                    <LinkedItemsSectionItem
                      key={link.id}
                      item={link.item}
-                      getItemIcon={getLinkedItemIcon}
-                      getTitleForLinkedTag={getTitleForLinkedTag}
                      searchQuery={searchQuery}
                      unlinkItem={() => unlinkItemFromSelectedItem(link)}
                      activateItem={activateItem}
@@ -357,8 +348,6 @@ const LinkedItemsPanel = ({
                    <LinkedItemsSectionItem
                      key={link.id}
                      item={link.item}
-                      getItemIcon={getLinkedItemIcon}
-                      getTitleForLinkedTag={getTitleForLinkedTag}
                      searchQuery={searchQuery}
                      unlinkItem={() => unlinkItemFromSelectedItem(link)}
                      activateItem={activateItem}
@@ -376,8 +365,6 @@ const LinkedItemsPanel = ({
                    <LinkedItemsSectionItem
                      key={link.id}
                      item={link.item}
-                      getItemIcon={getLinkedItemIcon}
-                      getTitleForLinkedTag={getTitleForLinkedTag}
                      searchQuery={searchQuery}
                      unlinkItem={() => unlinkItemFromSelectedItem(link)}
                      activateItem={activateItem}
@@ -397,8 +384,6 @@ const LinkedItemsPanel = ({
                    <LinkedItemsSectionItem
                      key={link.id}
                      item={link.item}
-                      getItemIcon={getLinkedItemIcon}
-                      getTitleForLinkedTag={getTitleForLinkedTag}
                      searchQuery={searchQuery}
                      unlinkItem={() => unlinkItemFromSelectedItem(link)}
                      activateItem={activateItem}