From 4e1e68e9a3c7328ffc5a14409da7d7f66f6e3e87 Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Sun, 6 Nov 2022 19:30:18 -0300 Subject: [PATCH] Drag and Drop feature --- .../templates/library/LibraryList.tsx | 128 +++++++++++------- packages/web/package.json | 1 + yarn.lock | 23 +++- 3 files changed, 102 insertions(+), 50 deletions(-) diff --git a/packages/web/components/templates/library/LibraryList.tsx b/packages/web/components/templates/library/LibraryList.tsx index d7ad55f3c..085d9059c 100644 --- 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 ( - - {libraryItems.map((linkedItem) => ( - div': { - bg: '$libraryBackground', - }, - '&:focus': { - '> div': { - bg: '$grayBgActive', - }, - }, - '&:hover': { - '> div': { - bg: '$grayBgActive', - }, - }, - }} - > - {viewerData?.me && ( - { - console.log('card clicked') - }} - /> - )} - - ))} - + + {({ getRootProps, getInputProps, acceptedFiles, fileRejections }) => ( +
+

Drag n drop files, or click to select files

+ + + + {libraryItems.map((linkedItem) => ( + div': { + bg: '$libraryBackground', + }, + '&:focus': { + '> div': { + bg: '$grayBgActive', + }, + }, + '&:hover': { + '> div': { + bg: '$grayBgActive', + }, + }, + }} + > + {viewerData?.me && ( + { + console.log('card clicked') + }} + /> + )} + + ))} + +
+ )} + + + {/* Temporary code */} +
+ Files: +
    + {fileNames.map((fileName) => ( +
  • {fileName}
    • + ))} +
+
+ {/* Extra padding at bottom to give space for scrolling */} ) -} \ No newline at end of file +} diff --git a/packages/web/package.json b/packages/web/package.json index 3610ecbf3..68344b93a 100644 --- 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", diff --git a/yarn.lock b/yarn.lock index 27452d1b1..8bc605947 100644 --- 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"