fix: file backups drag

standardnotes · Jun 2, 2022 · ed5f649 · ed5f649
1 parent a87e3b9
commit ed5f649
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 198 deletions.
diff --git a/app/assets/javascripts/Components/Preferences/Panes/Backups/Files/BackupsDropZone.tsx b/app/assets/javascripts/Components/Preferences/Panes/Backups/Files/BackupsDropZone.tsx
@@ -5,7 +5,6 @@ import { FileBackupMetadataFile, FileBackupsConstantsV1, FileItem, FileHandleRea
 import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
 import Icon from '@/Components/Icon/Icon'
 import { StreamingFileApi } from '@standardnotes/filepicker'
-import { isHandlingBackupDrag } from '@/Utils/DragTypeCheck'
 import { WebApplication } from '@/Application/Application'
 import EncryptionStatusItem from '../../Security/EncryptionStatusItem'
 import PreferencesSegment from '@/Components/Preferences/PreferencesComponents/PreferencesSegment'
@@ -53,77 +52,52 @@ const BackupsDropZone: FunctionComponent<Props> = ({ application }) => {
       void application.alertService.alert(
         `<strong>${decryptedFileItem.name}</strong> has been successfully decrypted and saved to your chosen directory.`,
       )
-      setBinaryFile(undefined)
-      setDecryptedFileItem(undefined)
-      setDroppedFile(undefined)
     } else if (result === 'failed') {
       void application.alertService.alert(
         'Unable to save file to local directory. This may be caused by failure to decrypt, or failure to save the file locally.',
       )
     }
 
+    setBinaryFile(undefined)
+    setDecryptedFileItem(undefined)
+    setDroppedFile(undefined)
     setIsSavingAsDecrypted(false)
   }, [decryptedFileItem, application, binaryFile, fileSystem])
 
-  const handleDrag = useCallback(
-    (event: DragEvent) => {
-      if (isHandlingBackupDrag(event, application)) {
-        event.preventDefault()
-        event.stopPropagation()
-      }
-    },
-    [application],
-  )
-
-  const handleDragIn = useCallback(
-    (event: DragEvent) => {
-      if (!isHandlingBackupDrag(event, application)) {
-        return
-      }
+  const handleDragOver = useCallback((event: DragEvent) => {
+    event.stopPropagation()
+  }, [])
 
-      event.preventDefault()
-      event.stopPropagation()
-    },
-    [application],
-  )
-
-  const handleDragOut = useCallback(
-    (event: DragEvent) => {
-      if (!isHandlingBackupDrag(event, application)) {
-        return
-      }
+  const handleDragIn = useCallback((event: DragEvent) => {
+    event.stopPropagation()
+  }, [])
 
-      event.preventDefault()
-      event.stopPropagation()
-    },
-    [application],
-  )
+  const handleDragOut = useCallback((event: DragEvent) => {
+    event.stopPropagation()
+  }, [])
 
   const handleDrop = useCallback(
     async (event: DragEvent) => {
-      if (!isHandlingBackupDrag(event, application)) {
-        return
-      }
-
       event.preventDefault()
       event.stopPropagation()
 
       const items = event.dataTransfer?.items
-
       if (!items || items.length === 0) {
         return
       }
 
       const item = items[0]
       const file = item.getAsFile()
-
       if (!file) {
         return
       }
 
       const text = await file.text()
-
       const type = application.files.isFileNameFileBackupRelated(file.name)
+      if (type === false) {
+        return
+      }
+
       if (type === 'binary') {
         void application.alertService.alert('Please drag the metadata file instead of the encrypted data file.')
         return
@@ -144,16 +118,16 @@ const BackupsDropZone: FunctionComponent<Props> = ({ application }) => {
   useEffect(() => {
     window.addEventListener('dragenter', handleDragIn)
     window.addEventListener('dragleave', handleDragOut)
-    window.addEventListener('dragover', handleDrag)
+    window.addEventListener('dragover', handleDragOver)
     window.addEventListener('drop', handleDrop)
 
     return () => {
       window.removeEventListener('dragenter', handleDragIn)
       window.removeEventListener('dragleave', handleDragOut)
-      window.removeEventListener('dragover', handleDrag)
+      window.removeEventListener('dragover', handleDragOver)
       window.removeEventListener('drop', handleDrop)
     }
-  }, [handleDragIn, handleDrop, handleDrag, handleDragOut])
+  }, [handleDragIn, handleDrop, handleDragOver, handleDragOut])
 
   if (!droppedFile) {
     return (
@@ -174,7 +148,7 @@ const BackupsDropZone: FunctionComponent<Props> = ({ application }) => {
 
             <EncryptionStatusItem
               status={decryptedFileItem.name}
-              icon={[<Icon type="attachment-file" className="min-w-5 min-h-5" />]}
+              icon={<Icon type="attachment-file" className="min-w-5 min-h-5" />}
               checkmark={true}
             />
 

diff --git a/...ssets/javascripts/Components/Preferences/Panes/Backups/Files/FileBackupsCrossPlatform.tsx b/...ssets/javascripts/Components/Preferences/Panes/Backups/Files/FileBackupsCrossPlatform.tsx
@@ -5,6 +5,7 @@ import { WebApplication } from '@/Application/Application'
 import { useMemo } from 'react'
 import BackupsDropZone from './BackupsDropZone'
 import FileBackupsDesktop from './FileBackupsDesktop'
+import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
 
 type Props = {
   application: WebApplication
@@ -23,6 +24,7 @@ const FileBackupsCrossPlatform = ({ application }: Props) => {
           <Subtitle>Automatically save encrypted backups of files uploaded to any device to this computer.</Subtitle>
           <Text className="mt-3">To enable file backups, use the Standard Notes desktop application.</Text>
         </PreferencesSegment>
+        <HorizontalSeparator classes="my-4" />
         <PreferencesSegment>
           <BackupsDropZone application={application} />
         </PreferencesSegment>

diff --git a/app/assets/javascripts/Components/Preferences/Panes/Backups/Files/FileBackupsDesktop.tsx b/app/assets/javascripts/Components/Preferences/Panes/Backups/Files/FileBackupsDesktop.tsx
@@ -73,6 +73,8 @@ const FileBackupsDesktop = ({ application, backupsService }: Props) => {
           )}
         </PreferencesSegment>
 
+        <HorizontalSeparator classes="my-4" />
+
         {backupsEnabled && (
           <>
             <PreferencesSegment>
@@ -84,7 +86,7 @@ const FileBackupsDesktop = ({ application, backupsService }: Props) => {
 
                 <EncryptionStatusItem
                   status={backupsLocation}
-                  icon={[<Icon type="attachment-file" className="min-w-5 min-h-5" />]}
+                  icon={<Icon type="attachment-file" className="min-w-5 min-h-5" />}
                   checkmark={false}
                 />
 
@@ -107,6 +109,8 @@ const FileBackupsDesktop = ({ application, backupsService }: Props) => {
           </>
         )}
 
+        <HorizontalSeparator classes="my-4" />
+
         <PreferencesSegment>
           <BackupsDropZone application={application} />
         </PreferencesSegment>

diff --git a/package.json b/package.json
@@ -71,12 +71,12 @@
     "@reach/tooltip": "^0.16.2",
     "@reach/visually-hidden": "^0.16.0",
     "@standardnotes/components": "1.8.2",
-    "@standardnotes/filepicker": "1.16.2",
+    "@standardnotes/filepicker": "1.16.8",
     "@standardnotes/icons": "^1.1.8",
     "@standardnotes/sncrypto-web": "1.10.1",
-    "@standardnotes/snjs": "^2.114.5",
+    "@standardnotes/snjs": "^2.114.11",
     "@standardnotes/stylekit": "5.29.3",
-    "@standardnotes/services": "^1.13.6",
+    "@standardnotes/services": "^1.13.8",
     "@zip.js/zip.js": "^2.4.10",
     "mobx": "^6.5.0",
     "mobx-react-lite": "^3.3.0",