refactor: replace 'preact' with 'react' (#1048)

app/assets/javascripts/Components/ContentListView/FileListItem.tsx

@@ -1,81 +1,89 @@
 import { FileItem } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent } from 'preact'
-import { useCallback } from 'preact/hooks'
-import { getFileIconComponent } from '../AttachedFilesPopover/PopoverFileItem'
-import { ListItemConflictIndicator } from './ListItemConflictIndicator'
-import { ListItemFlagIcons } from './ListItemFlagIcons'
-import { ListItemTags } from './ListItemTags'
-import { ListItemMetadata } from './ListItemMetadata'
+import { FunctionComponent, useCallback } from 'react'
+import { getFileIconComponent } from '../AttachedFilesPopover/getFileIconComponent'
+import ListItemConflictIndicator from './ListItemConflictIndicator'
+import ListItemFlagIcons from './ListItemFlagIcons'
+import ListItemTags from './ListItemTags'
+import ListItemMetadata from './ListItemMetadata'
 import { DisplayableListItemProps } from './Types/DisplayableListItemProps'
 
-export const FileListItem: FunctionComponent<DisplayableListItemProps> = observer(
-  ({ application, appState, hideDate, hideIcon, hideTags, item, selected, sortBy, tags }) => {
-    const openFileContextMenu = useCallback(
-      (posX: number, posY: number) => {
-        appState.files.setFileContextMenuLocation({
-          x: posX,
-          y: posY,
-        })
-        appState.files.setShowFileContextMenu(true)
-      },
-      [appState.files],
-    )
-
-    const openContextMenu = useCallback(
-      (posX: number, posY: number) => {
-        void appState.contentListView.selectItemWithScrollHandling(item, {
-          userTriggered: true,
-          scrollIntoView: false,
-        })
-        openFileContextMenu(posX, posY)
-      },
-      [appState.contentListView, item, openFileContextMenu],
-    )
-
-    const onClick = useCallback(() => {
-      void appState.selectedItems.selectItem(item.uuid, true).then(({ didSelect }) => {
-        if (didSelect && appState.selectedItems.selectedItemsCount < 2) {
-          appState.filePreviewModal.activate(item as FileItem, appState.files.allFiles)
-        }
+const FileListItem: FunctionComponent<DisplayableListItemProps> = ({
+  application,
+  appState,
+  hideDate,
+  hideIcon,
+  hideTags,
+  item,
+  selected,
+  sortBy,
+  tags,
+}) => {
+  const openFileContextMenu = useCallback(
+    (posX: number, posY: number) => {
+      appState.files.setFileContextMenuLocation({
+        x: posX,
+        y: posY,
       })
-    }, [appState.filePreviewModal, appState.files.allFiles, appState.selectedItems, item])
+      appState.files.setShowFileContextMenu(true)
+    },
+    [appState.files],
+  )
 
-    const IconComponent = () =>
-      getFileIconComponent(
-        application.iconsController.getIconForFileType((item as FileItem).mimeType),
-        'w-5 h-5 flex-shrink-0',
-      )
+  const openContextMenu = useCallback(
+    async (posX: number, posY: number) => {
+      const { didSelect } = await appState.selectedItems.selectItem(item.uuid)
+      if (didSelect) {
+        openFileContextMenu(posX, posY)
+      }
+    },
+    [appState.selectedItems, item.uuid, openFileContextMenu],
+  )
 
-    return (
-      <div
-        className={`content-list-item flex items-stretch w-full cursor-pointer ${
-          selected && 'selected border-0 border-l-2px border-solid border-info'
-        }`}
-        id={item.uuid}
-        onClick={onClick}
-        onContextMenu={(event) => {
-          event.preventDefault()
-          openContextMenu(event.clientX, event.clientY)
-        }}
-      >
-        {!hideIcon ? (
-          <div className="flex flex-col items-center justify-between p-4.5 pr-3 mr-0">
-            <IconComponent />
-          </div>
-        ) : (
-          <div className="pr-4" />
-        )}
-        <div className="flex-grow min-w-0 py-4 px-0 border-0 border-b-1 border-solid border-main">
-          <div className="flex items-start justify-between font-semibold text-base leading-1.3 overflow-hidden">
-            <div className="break-word mr-2">{item.title}</div>
-          </div>
-          <ListItemMetadata item={item} hideDate={hideDate} sortBy={sortBy} />
-          <ListItemTags hideTags={hideTags} tags={tags} />
-          <ListItemConflictIndicator item={item} />
-        </div>
-        <ListItemFlagIcons item={item} />
-      </div>
+  const onClick = useCallback(() => {
+    void appState.selectedItems.selectItem(item.uuid, true).then(({ didSelect }) => {
+      if (didSelect && appState.selectedItems.selectedItemsCount < 2) {
+        appState.filePreviewModal.activate(item as FileItem, appState.files.allFiles)
+      }
+    })
+  }, [appState.filePreviewModal, appState.files.allFiles, appState.selectedItems, item])
+
+  const IconComponent = () =>
+    getFileIconComponent(
+      application.iconsController.getIconForFileType((item as FileItem).mimeType),
+      'w-5 h-5 flex-shrink-0',
     )
-  },
-)
+
+  return (
+    <div
+      className={`content-list-item flex items-stretch w-full cursor-pointer ${
+        selected && 'selected border-0 border-l-2px border-solid border-info'
+      }`}
+      id={item.uuid}
+      onClick={onClick}
+      onContextMenu={(event) => {
+        event.preventDefault()
+        void openContextMenu(event.clientX, event.clientY)
+      }}
+    >
+      {!hideIcon ? (
+        <div className="flex flex-col items-center justify-between p-4.5 pr-3 mr-0">
+          <IconComponent />
+        </div>
+      ) : (
+        <div className="pr-4" />
+      )}
+      <div className="flex-grow min-w-0 py-4 px-0 border-0 border-b-1 border-solid border-main">
+        <div className="flex items-start justify-between font-semibold text-base leading-1.3 overflow-hidden">
+          <div className="break-word mr-2">{item.title}</div>
+        </div>
+        <ListItemMetadata item={item} hideDate={hideDate} sortBy={sortBy} />
+        <ListItemTags hideTags={hideTags} tags={tags} />
+        <ListItemConflictIndicator item={item} />
+      </div>
+      <ListItemFlagIcons item={item} />
+    </div>
+  )
+}
+
+export default observer(FileListItem)