From 49020194859ef9bc6fbea8514f248f5554b8dae8 Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Wed, 16 Nov 2022 22:15:35 -0300
Subject: [PATCH] Added some layout for Drag n Drop

---
 .../templates/homeFeed/HomeFeedContainer.tsx  | 72 +++++++++++++------
 .../templates/library/LibraryList.tsx         | 53 +++++++++++---
 2 files changed, 96 insertions(+), 29 deletions(-)

diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index 801aafd94..6e316ac56 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -98,17 +98,14 @@ export function HomeFeedContainer(): JSX.Element {
 
   const gridContainerRef = useRef<HTMLDivElement>(null)
 
-  const [shareTarget, setShareTarget] = useState<LibraryItem | undefined>(
-    undefined
-  )
+  const [shareTarget, setShareTarget] =
+    useState<LibraryItem | undefined>(undefined)
 
-  const [snoozeTarget, setSnoozeTarget] = useState<LibraryItem | undefined>(
-    undefined
-  )
+  const [snoozeTarget, setSnoozeTarget] =
+    useState<LibraryItem | undefined>(undefined)
 
-  const [labelsTarget, setLabelsTarget] = useState<LibraryItem | undefined>(
-    undefined
-  )
+  const [labelsTarget, setLabelsTarget] =
+    useState<LibraryItem | undefined>(undefined)
 
   const [showAddLinkModal, setShowAddLinkModal] = useState(false)
   const [showEditTitleModal, setShowEditTitleModal] = useState(false)
@@ -127,8 +124,14 @@ export function HomeFeedContainer(): JSX.Element {
     })
   )
 
-  const { itemsPages, size, setSize, isValidating, performActionOnItem, mutate } =
-    useGetLibraryItemsQuery(queryInputs)
+  const {
+    itemsPages,
+    size,
+    setSize,
+    isValidating,
+    performActionOnItem,
+    mutate,
+  } = useGetLibraryItemsQuery(queryInputs)
 
   useEffect(() => {
     if (queryValue.startsWith('#')) {
@@ -687,6 +690,19 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
     },
   })
 
+  const DragnDropStyle = styled('div', {
+    border: '3px dashed gray',
+    backgroundColor: 'aliceblue',
+    borderRadius: '5px',
+    width: '95%',
+    height: '100%',
+    position: 'absolute',
+    opacity: '0.8',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  })
+
   const removeItem = () => {
     if (!props.linkToRemove) {
       return
@@ -733,7 +749,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
 
         console.log('result of uploading: ', uploadResult)
       } catch (error) {
-        console.log("ERROR", error)
+        console.log('ERROR', error)
       }
     }
 
@@ -856,22 +872,36 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
         )}
         <Dropzone
           onDrop={handleDrop}
-          onDragEnter={() => { setInDragOperation(true) }}
-          onDragLeave={() => { setInDragOperation(false) }}
+          onDragEnter={() => {
+            setInDragOperation(true)
+          }}
+          onDragLeave={() => {
+            setInDragOperation(false)
+          }}
           preventDropOnDocument={true}
           noClick={true}
         >
           {({ getRootProps, getInputProps, acceptedFiles, fileRejections }) => (
             <div {...getRootProps({ className: 'dropzone' })}>
-              {(inDragOperation && uploadingFiles.length < 1) && (
-                <Box css={{ color: '$utilityTextDefault', marginTop: '$1'}}>
-                  Drag n drop files anywhere below
-                </Box>
+              {inDragOperation && uploadingFiles.length < 1 && (
+                <DragnDropStyle>
+                  <Box
+                    css={{
+                      color: '$utilityTextDefault',
+                      fontWeight: '800',
+                      fontSize: '$4',
+                    }}
+                  >
+                    Drag n drop files here
+                  </Box>
+                </DragnDropStyle>
               )}
               {uploadingFiles.length > 0 ? (
-                <Box css={{ color: '$utilityTextDefault', marginTop: '$1'}}>
-                  Uploading Files...
-                </Box>
+                <DragnDropStyle>
+                  <Box css={{ color: '$utilityTextDefault', marginTop: '$1' }}>
+                    Uploading Files...
+                  </Box>
+                </DragnDropStyle>
               ) : null}
               <input {...getInputProps()} />
               {!props.isValidating && props.items.length == 0 ? (
diff --git a/packages/web/components/templates/library/LibraryList.tsx b/packages/web/components/templates/library/LibraryList.tsx
index 1347fb1f8..b701c34b5 100644
--- a/packages/web/components/templates/library/LibraryList.tsx
+++ b/packages/web/components/templates/library/LibraryList.tsx
@@ -29,9 +29,13 @@ export function LibraryList(props: LibraryListProps): JSX.Element {
     useGetLibraryItemsQuery(defaultQuery)
 
   const [fileNames, setFileNames] = useState([])
+  const [inDragOperation, setInDragOperation] = useState(false)
+  const [uploadingFiles, setUploadingFiles] = useState([])
 
-  const handleDrop = (acceptedFiles: any) =>
+  const handleDrop = (acceptedFiles: any) => {
     setFileNames(acceptedFiles.map((file: { name: any }) => file.name))
+    setUploadingFiles(acceptedFiles.map((file: { name: any }) => file.name))
+  }
 
   const libraryItems = useMemo(() => {
     const items =
@@ -54,14 +58,47 @@ export function LibraryList(props: LibraryListProps): JSX.Element {
 
   return (
     <Box css={{ overflowY: 'scroll' }}>
-      <Dropzone onDrop={handleDrop} preventDropOnDocument={true} noClick={true}>
+      {inDragOperation && uploadingFiles.length < 1 && (
+        <Box
+          css={{
+            border: '3px dashed gray',
+            backgroundColor: 'aliceblue',
+            borderRadius: '5px',
+            width: '75%',
+            height: '70%',
+            position: 'absolute',
+            opacity: '0.8',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          <Box
+            css={{
+              color: '$utilityTextDefault',
+              fontWeight: '800',
+              fontSize: '$4',
+            }}
+          >
+            Drag n drop files here
+          </Box>
+        </Box>
+      )}
+      <Dropzone
+        onDrop={handleDrop}
+        preventDropOnDocument={true}
+        onDragEnter={() => {
+          setInDragOperation(true)
+        }}
+        onDragLeave={() => {
+          setInDragOperation(false)
+        }}
+        noClick={true}
+        noDragEventsBubbling={true}
+      >
         {({ getRootProps, getInputProps, acceptedFiles, fileRejections }) => (
-          <div {...getRootProps({ className: 'dropzone' })}>
-            <Box css={{ color: '$utilityTextDefault', marginTop: '$1'}}>
-              Drag n drop files anywhere below
-            </Box>
+          <Box {...getRootProps({ className: 'dropzone' })}>
             <input {...getInputProps()} />
-
             <Masonry
               breakpointCols={
                 props.layoutCoordinator.layout == 'LIST_LAYOUT'
@@ -112,7 +149,7 @@ export function LibraryList(props: LibraryListProps): JSX.Element {
                 </Box>
               ))}
             </Masonry>
-          </div>
+          </Box>
         )}
       </Dropzone>
       {/* Temporary code */}