Drag and Drop feature

2022-11-06 19:30:18 -03:00
parent 2e69fd2a31
commit 4e1e68e9a3
3 changed files with 102 additions and 50 deletions
--- a/packages/web/components/templates/library/LibraryList.tsx
+++ b/packages/web/components/templates/library/LibraryList.tsx
@ -1,7 +1,8 @@
+import { SetStateAction, useMemo, useState } from 'react'
+import Dropzone, { useDropzone } from 'react-dropzone'
 import { Box } from '../../elements/LayoutPrimitives'
 import { useGetViewerQuery } from '../../../lib/networking/queries/useGetViewerQuery'
 import { useGetUserPreferences } from '../../../lib/networking/queries/useGetUserPreferences'
-import { useMemo } from 'react'
 import { useGetLibraryItemsQuery } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
 import { LinkedItemCardAction } from '../../patterns/LibraryCards/CardTypes'
 import { LibraryGridCard } from '../../patterns/LibraryCards/LibraryGridCard'
@ -9,7 +10,6 @@ import { LayoutCoordinator } from './LibraryContainer'
 import { EmptyLibrary } from '../homeFeed/EmptyLibrary'
 import Masonry from 'react-masonry-css'

-
 export type LibraryListProps = {
  layoutCoordinator: LayoutCoordinator
 }
@ -28,6 +28,11 @@ export function LibraryList(props: LibraryListProps): JSX.Element {
  const { itemsPages, size, setSize, isValidating, performActionOnItem } =
    useGetLibraryItemsQuery(defaultQuery)

+  const [fileNames, setFileNames] = useState([])
+
+  const handleDrop = (acceptedFiles) =>
+    setFileNames(acceptedFiles.map((file: { name: any }) => file.name))
+
  const libraryItems = useMemo(() => {
    const items =
      itemsPages?.flatMap((ad) => {
@ -45,57 +50,82 @@ export function LibraryList(props: LibraryListProps): JSX.Element {
      />
    )
  }
+  console.log(fileNames)

  return (
    <Box css={{ overflowY: 'scroll' }}>
-      <Masonry
-        breakpointCols={props.layoutCoordinator.layout == 'LIST_LAYOUT' ? 1 : {
-          default: 3,
-          1200: 2,
-          992: 1
-        }}
-        className="omnivore-masonry-grid"
-        columnClassName="omnivore-masonry-grid_column"
-      >
-        {libraryItems.map((linkedItem) => (
-          <Box
-            className="linkedItemCard"
-            data-testid="linkedItemCard"
-            id={linkedItem.node.id}
-            tabIndex={0}
-            key={linkedItem.node.id}
-            css={{
-              width: '100%',
-              '&> div': {
-                bg: '$libraryBackground',
-              },
-              '&:focus': {
-                '> div': {
-                  bg: '$grayBgActive',
-                },
-              },
-              '&:hover': {
-                '> div': {
-                  bg: '$grayBgActive',
-                },
-              },
-            }}
-          >
-            {viewerData?.me && (
-              <LibraryGridCard
-                layout={props.layoutCoordinator.layout}
-                item={linkedItem.node}
-                viewer={viewerData.me}
-                handleAction={(action: LinkedItemCardAction) => {
-                  console.log('card clicked')
-                }}
-              />
-            )}
-          </Box>
-        ))}
-      </Masonry>
+      <Dropzone onDrop={handleDrop} preventDropOnDocument={true} noClick={true}>
+        {({ getRootProps, getInputProps, acceptedFiles, fileRejections }) => (
+          <div {...getRootProps({ className: 'dropzone' })}>
+            <p>Drag n drop files, or click to select files</p>
+            <input {...getInputProps()} />
+
+            <Masonry
+              breakpointCols={
+                props.layoutCoordinator.layout == 'LIST_LAYOUT'
+                  ? 1
+                  : {
+                      default: 3,
+                      1200: 2,
+                      992: 1,
+                    }
+              }
+              className="omnivore-masonry-grid"
+              columnClassName="omnivore-masonry-grid_column"
+            >
+              {libraryItems.map((linkedItem) => (
+                <Box
+                  className="linkedItemCard"
+                  data-testid="linkedItemCard"
+                  id={linkedItem.node.id}
+                  tabIndex={0}
+                  key={linkedItem.node.id}
+                  css={{
+                    width: '100%',
+                    '&> div': {
+                      bg: '$libraryBackground',
+                    },
+                    '&:focus': {
+                      '> div': {
+                        bg: '$grayBgActive',
+                      },
+                    },
+                    '&:hover': {
+                      '> div': {
+                        bg: '$grayBgActive',
+                      },
+                    },
+                  }}
+                >
+                  {viewerData?.me && (
+                    <LibraryGridCard
+                      layout={props.layoutCoordinator.layout}
+                      item={linkedItem.node}
+                      viewer={viewerData.me}
+                      handleAction={(action: LinkedItemCardAction) => {
+                        console.log('card clicked')
+                      }}
+                    />
+                  )}
+                </Box>
+              ))}
+            </Masonry>
+          </div>
+        )}
+      </Dropzone>
+
+      {/* Temporary code */}
+      <div>
+        <strong>Files:</strong>
+        <ul>
+          {fileNames.map((fileName) => (
+            <li key={fileName}>{fileName}</li>
+          ))}
+        </ul>
+      </div>
+
      {/* Extra padding at bottom to give space for scrolling */}
      <Box css={{ width: '100%', height: '200px' }} />
    </Box>
  )
-}
+}
--- a/packages/web/package.json
+++ b/packages/web/package.json
@ -43,6 +43,7 @@
    "react-apple-login": "^1.1.3",
    "react-colorful": "^5.5.1",
    "react-dom": "^17.0.2",
+    "react-dropzone": "^14.2.3",
    "react-hot-toast": "^2.1.1",
    "react-masonry-css": "^1.0.16",
    "react-pro-sidebar": "^0.7.1",
--- a/yarn.lock
+++ b/yarn.lock
@ -9617,6 +9617,11 @@ atob@^2.1.2:
  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
  integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==

+attr-accept@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.2.tgz#646613809660110749e92f2c10833b70968d929b"
+  integrity sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==
+
 auto-bind@~4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/auto-bind/-/auto-bind-4.0.0.tgz#e3589fc6c2da8f7ca43ba9f84fa52a744fc997fb"
@ -13846,6 +13851,13 @@ file-loader@^6.2.0:
    loader-utils "^2.0.0"
    schema-utils "^3.0.0"

+file-selector@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.6.0.tgz#fa0a8d9007b829504db4d07dd4de0310b65287dc"
+  integrity sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==
+  dependencies:
+    tslib "^2.4.0"
+
 file-system-cache@^1.0.5:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/file-system-cache/-/file-system-cache-1.0.5.tgz#84259b36a2bbb8d3d6eb1021d3132ffe64cfff4f"
@ -21146,7 +21158,7 @@ promzard@^0.3.0:
  dependencies:
    read "1"

-prop-types@^15.0.0, prop-types@^15.6.0:
+prop-types@^15.0.0, prop-types@^15.6.0, prop-types@^15.8.1:
  version "15.8.1"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@ -21611,6 +21623,15 @@ react-draggable@^4.4.3:
    clsx "^1.1.1"
    prop-types "^15.6.0"

+react-dropzone@^14.2.3:
+  version "14.2.3"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-14.2.3.tgz#0acab68308fda2d54d1273a1e626264e13d4e84b"
+  integrity sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==
+  dependencies:
+    attr-accept "^2.2.2"
+    file-selector "^0.6.0"
+    prop-types "^15.8.1"
+
 react-element-to-jsx-string@^14.3.4:
  version "14.3.4"
  resolved "https://registry.yarnpkg.com/react-element-to-jsx-string/-/react-element-to-jsx-string-14.3.4.tgz#709125bc72f06800b68f9f4db485f2c7d31218a8"