feat: multiple files selected view (#1062)

app/assets/javascripts/Components/FileContextMenu/FileMenuOptions.tsx

@@ -1,16 +1,17 @@
+import { FunctionComponent, useCallback, useMemo } from 'react'
+import { PopoverFileItemActionType } from '../AttachedFilesPopover/PopoverFileItemAction'
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
-import { FileItem } from '@standardnotes/snjs'
-import { FunctionComponent } from 'react'
-import { PopoverFileItemAction, PopoverFileItemActionType } from '../AttachedFilesPopover/PopoverFileItemAction'
 import Icon from '@/Components/Icon/Icon'
 import Switch from '@/Components/Switch/Switch'
+import { observer } from 'mobx-react-lite'
+import { FilesController } from '@/Controllers/FilesController'
+import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
 
 type Props = {
   closeMenu: () => void
   closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
-  file: FileItem
-  fileProtectionToggleCallback?: (isProtected: boolean) => void
-  handleFileAction: (action: PopoverFileItemAction) => Promise<boolean>
+  filesController: FilesController
+  selectionController: SelectedItemsController
   isFileAttachedToNote?: boolean
   renameToggleCallback?: (isRenamingFile: boolean) => void
   shouldShowRenameOption: boolean
@@ -20,72 +21,73 @@ type Props = {
 const FileMenuOptions: FunctionComponent<Props> = ({
   closeMenu,
   closeOnBlur,
-  file,
-  fileProtectionToggleCallback,
-  handleFileAction,
+  filesController,
+  selectionController,
   isFileAttachedToNote,
   renameToggleCallback,
   shouldShowRenameOption,
   shouldShowAttachOption,
 }) => {
+  const { selectedFiles } = selectionController
+  const { handleFileAction } = filesController
+
+  const hasProtectedFiles = useMemo(() => selectedFiles.some((file) => file.protected), [selectedFiles])
+
+  const onPreview = useCallback(() => {
+    void handleFileAction({
+      type: PopoverFileItemActionType.PreviewFile,
+      payload: {
+        file: selectedFiles[0],
+        otherFiles: selectedFiles.length > 1 ? selectedFiles : filesController.allFiles,
+      },
+    })
+    closeMenu()
+  }, [closeMenu, filesController.allFiles, handleFileAction, selectedFiles])
+
+  const onDetach = useCallback(() => {
+    const file = selectedFiles[0]
+    void handleFileAction({
+      type: PopoverFileItemActionType.DetachFileToNote,
+      payload: { file },
+    })
+    closeMenu()
+  }, [closeMenu, handleFileAction, selectedFiles])
+
+  const onAttach = useCallback(() => {
+    const file = selectedFiles[0]
+    void handleFileAction({
+      type: PopoverFileItemActionType.AttachFileToNote,
+      payload: { file },
+    })
+    closeMenu()
+  }, [closeMenu, handleFileAction, selectedFiles])
+
   return (
     <>
-      <button
-        onBlur={closeOnBlur}
-        className="sn-dropdown-item focus:bg-info-backdrop"
-        onClick={() => {
-          handleFileAction({
-            type: PopoverFileItemActionType.PreviewFile,
-            payload: file,
-          }).catch(console.error)
-          closeMenu()
-        }}
-      >
+      <button onBlur={closeOnBlur} className="sn-dropdown-item focus:bg-info-backdrop" onClick={onPreview}>
         <Icon type="file" className="mr-2 color-neutral" />
         Preview file
       </button>
-      {isFileAttachedToNote ? (
-        <button
-          onBlur={closeOnBlur}
-          className="sn-dropdown-item focus:bg-info-backdrop"
-          onClick={() => {
-            handleFileAction({
-              type: PopoverFileItemActionType.DetachFileToNote,
-              payload: file,
-            }).catch(console.error)
-            closeMenu()
-          }}
-        >
-          <Icon type="link-off" className="mr-2 color-neutral" />
-          Detach from note
-        </button>
-      ) : shouldShowAttachOption ? (
-        <button
-          onBlur={closeOnBlur}
-          className="sn-dropdown-item focus:bg-info-backdrop"
-          onClick={() => {
-            handleFileAction({
-              type: PopoverFileItemActionType.AttachFileToNote,
-              payload: file,
-            }).catch(console.error)
-            closeMenu()
-          }}
-        >
-          <Icon type="link" className="mr-2 color-neutral" />
-          Attach to note
-        </button>
-      ) : null}
+      {selectedFiles.length === 1 && (
+        <>
+          {isFileAttachedToNote ? (
+            <button onBlur={closeOnBlur} className="sn-dropdown-item focus:bg-info-backdrop" onClick={onDetach}>
+              <Icon type="link-off" className="mr-2 color-neutral" />
+              Detach from note
+            </button>
+          ) : shouldShowAttachOption ? (
+            <button onBlur={closeOnBlur} className="sn-dropdown-item focus:bg-info-backdrop" onClick={onAttach}>
+              <Icon type="link" className="mr-2 color-neutral" />
+              Attach to note
+            </button>
+          ) : null}
+        </>
+      )}
       <div className="min-h-1px my-1 bg-border"></div>
       <button
         className="sn-dropdown-item justify-between focus:bg-info-backdrop"
         onClick={() => {
-          handleFileAction({
-            type: PopoverFileItemActionType.ToggleFileProtection,
-            payload: file,
-            callback: (isProtected: boolean) => {
-              fileProtectionToggleCallback?.(isProtected)
-            },
-          }).catch(console.error)
+          void filesController.setProtectionForFiles(!hasProtectedFiles, selectionController.selectedFiles)
         }}
         onBlur={closeOnBlur}
       >
@@ -93,18 +95,18 @@ const FileMenuOptions: FunctionComponent<Props> = ({
           <Icon type="password" className="mr-2 color-neutral" />
           Password protection
         </span>
-        <Switch className="px-0 pointer-events-none" tabIndex={FOCUSABLE_BUT_NOT_TABBABLE} checked={file.protected} />
+        <Switch
+          className="px-0 pointer-events-none"
+          tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
+          checked={hasProtectedFiles}
+        />
       </button>
       <div className="min-h-1px my-1 bg-border"></div>
       <button
         onBlur={closeOnBlur}
         className="sn-dropdown-item focus:bg-info-backdrop"
         onClick={() => {
-          handleFileAction({
-            type: PopoverFileItemActionType.DownloadFile,
-            payload: file,
-          }).catch(console.error)
-          closeMenu()
+          void filesController.downloadFiles(selectionController.selectedFiles)
         }}
       >
         <Icon type="download" className="mr-2 color-neutral" />
@@ -126,11 +128,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
         onBlur={closeOnBlur}
         className="sn-dropdown-item focus:bg-info-backdrop"
         onClick={() => {
-          handleFileAction({
-            type: PopoverFileItemActionType.DeleteFile,
-            payload: file,
-          }).catch(console.error)
-          closeMenu()
+          void filesController.deleteFilesPermanently(selectionController.selectedFiles)
         }}
       >
         <Icon type="trash" className="mr-2 color-danger" />
@@ -140,4 +138,4 @@ const FileMenuOptions: FunctionComponent<Props> = ({
   )
 }
 
-export default FileMenuOptions
+export default observer(FileMenuOptions)