From 4e1e68e9a3c7328ffc5a14409da7d7f66f6e3e87 Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Sun, 6 Nov 2022 19:30:18 -0300 Subject: [PATCH 01/19] 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" From fee65df1630385cd34dce74dde638c7505cc9727 Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Sun, 6 Nov 2022 19:31:39 -0300 Subject: [PATCH 02/19] clean up --- packages/web/components/templates/library/LibraryList.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/web/components/templates/library/LibraryList.tsx b/packages/web/components/templates/library/LibraryList.tsx index 085d9059c..7a6fde87c 100644 --- a/packages/web/components/templates/library/LibraryList.tsx +++ b/packages/web/components/templates/library/LibraryList.tsx @@ -1,5 +1,5 @@ -import { SetStateAction, useMemo, useState } from 'react' -import Dropzone, { useDropzone } from 'react-dropzone' +import { useMemo, useState } from 'react' +import Dropzone from 'react-dropzone' import { Box } from '../../elements/LayoutPrimitives' import { useGetViewerQuery } from '../../../lib/networking/queries/useGetViewerQuery' import { useGetUserPreferences } from '../../../lib/networking/queries/useGetUserPreferences' @@ -54,7 +54,7 @@ export function LibraryList(props: LibraryListProps): JSX.Element { return ( - + {({ getRootProps, getInputProps, acceptedFiles, fileRejections }) => (

Drag n drop files, or click to select files

From 9dfa628d71c34326333c1dab52d19063a59a303a Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Fri, 11 Nov 2022 09:59:14 -0300 Subject: [PATCH 03/19] Added drag and drop with temporary display of files being dropped for debugging purposes --- .../templates/homeFeed/HomeFeedContainer.tsx | 238 ++++++++++-------- .../templates/library/LibraryList.tsx | 6 +- 2 files changed, 138 insertions(+), 106 deletions(-) diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index 2869846d1..ffdbb93d3 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -1,4 +1,5 @@ import { Box, HStack, VStack } from './../../elements/LayoutPrimitives' +import Dropzone from 'react-dropzone' import type { LibraryItem, LibraryItemsQueryInput, @@ -702,6 +703,11 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { setShowUnsubscribeConfirmation(false) } + const [fileNames, setFileNames] = useState([]) + + const handleDrop = (acceptedFiles: any) => + setFileNames(acceptedFiles.map((file: { name: any }) => file.name)) + return ( <> + {props.isValidating && props.items.length == 0 && } + {viewerData?.me && ( )} - {!props.isValidating && props.items.length == 0 ? ( - { - props.setShowAddLinkModal(true) - }} - /> - ) : ( - - {props.items.map((linkedItem) => ( - div': { - bg: '$grayBg', - }, - '&:focus': { - '> div': { - bg: '$grayBgActive', - }, - }, - '&:hover': { - '> div': { - bg: '$grayBgActive', - }, - }, - }} - > - {viewerData?.me && ( - { - if (action === 'delete') { - setShowRemoveLinkConfirmation(true) - props.setLinkToRemove(linkedItem) - } else if (action === 'editTitle') { - props.setShowEditTitleModal(true) - props.setLinkToEdit(linkedItem) - } else if (action == 'unsubscribe') { - setShowUnsubscribeConfirmation(true) - props.setLinkToUnsubscribe(linkedItem) - } else { - props.actionHandler(action, linkedItem) - } - }} - /> - )} - - ))} - - )} - - {props.hasMore ? ( - - ) : ( - + {({ getRootProps, getInputProps, acceptedFiles, fileRejections }) => ( +
+

Drag n drop files anywhere below

+ + {!props.isValidating && props.items.length == 0 ? ( + { + props.setShowAddLinkModal(true) + }} + /> + ) : ( + + {props.items.map((linkedItem) => ( + div': { + bg: '$grayBg', + }, + '&:focus': { + '> div': { + bg: '$grayBgActive', + }, + }, + '&:hover': { + '> div': { + bg: '$grayBgActive', + }, + }, + }} + > + {viewerData?.me && ( + { + if (action === 'delete') { + setShowRemoveLinkConfirmation(true) + props.setLinkToRemove(linkedItem) + } else if (action === 'editTitle') { + props.setShowEditTitleModal(true) + props.setLinkToEdit(linkedItem) + } else if (action == 'unsubscribe') { + setShowUnsubscribeConfirmation(true) + props.setLinkToUnsubscribe(linkedItem) + } else { + props.actionHandler(action, linkedItem) + } + }} + /> + )} + + ))} + + )} + + {props.hasMore ? ( + + ) : ( + + )} + +
)} - + + + {/* Temporary code */} +
+ Files: +
    + {fileNames.map((fileName) => ( +
  • {fileName}
    • + ))} +
+
{/* Temporary code */} + {props.showAddLinkModal && ( props.setShowAddLinkModal(false)} /> )} diff --git a/packages/web/components/templates/library/LibraryList.tsx b/packages/web/components/templates/library/LibraryList.tsx index 7a6fde87c..1ced0a1b2 100644 --- a/packages/web/components/templates/library/LibraryList.tsx +++ b/packages/web/components/templates/library/LibraryList.tsx @@ -30,7 +30,7 @@ export function LibraryList(props: LibraryListProps): JSX.Element { const [fileNames, setFileNames] = useState([]) - const handleDrop = (acceptedFiles) => + const handleDrop = (acceptedFiles: any) => setFileNames(acceptedFiles.map((file: { name: any }) => file.name)) const libraryItems = useMemo(() => { @@ -57,7 +57,7 @@ export function LibraryList(props: LibraryListProps): JSX.Element { {({ getRootProps, getInputProps, acceptedFiles, fileRejections }) => (
-

Drag n drop files, or click to select files

+

Drag n drop files anywhere below

{fileName} ))} -
+
{/* Temporary code */} {/* Extra padding at bottom to give space for scrolling */} From 857fd591997f7ac1cf93e8bd5e2a1f4c72c828a4 Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Fri, 11 Nov 2022 10:18:53 -0300 Subject: [PATCH 04/19] fixing text color for different themes --- .../templates/homeFeed/HomeFeedContainer.tsx | 11 ++++++----- .../web/components/templates/library/LibraryList.tsx | 11 ++++++----- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index ffdbb93d3..ec4f7a0c9 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -1,4 +1,4 @@ -import { Box, HStack, VStack } from './../../elements/LayoutPrimitives' +import { Box, HStack, SpanBox, VStack } from './../../elements/LayoutPrimitives' import Dropzone from 'react-dropzone' import type { LibraryItem, @@ -828,7 +828,9 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { > {({ getRootProps, getInputProps, acceptedFiles, fileRejections }) => (
-

Drag n drop files anywhere below

+ + Drag n drop files anywhere below + {!props.isValidating && props.items.length == 0 ? ( - {/* Temporary code */}
Files: @@ -949,8 +950,8 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
  • {fileName}
    • ))} -
    {/* Temporary code */} - +
    {' '} + {/* Temporary code */} {props.showAddLinkModal && ( props.setShowAddLinkModal(false)} /> )} diff --git a/packages/web/components/templates/library/LibraryList.tsx b/packages/web/components/templates/library/LibraryList.tsx index 1ced0a1b2..1347fb1f8 100644 --- a/packages/web/components/templates/library/LibraryList.tsx +++ b/packages/web/components/templates/library/LibraryList.tsx @@ -54,10 +54,12 @@ export function LibraryList(props: LibraryListProps): JSX.Element { return ( - + {({ getRootProps, getInputProps, acceptedFiles, fileRejections }) => (
    -

    Drag n drop files anywhere below

    + + Drag n drop files anywhere below + )} - {/* Temporary code */}
    Files: @@ -122,8 +123,8 @@ export function LibraryList(props: LibraryListProps): JSX.Element {
  • {fileName}
    • ))} -
    {/* Temporary code */} - +
    {' '} + {/* Temporary code */} {/* Extra padding at bottom to give space for scrolling */} From c9771bb2c3f38ba26c5ff3554a874db2d6098809 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Mon, 14 Nov 2022 11:54:28 +0800 Subject: [PATCH 05/19] Add a file uploader --- .../templates/homeFeed/HomeFeedContainer.tsx | 41 +++++++++++++- .../mutations/uploadFileMutation.ts | 56 +++++++++++++++++++ 2 files changed, 96 insertions(+), 1 deletion(-) create mode 100644 packages/web/lib/networking/mutations/uploadFileMutation.ts diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index ec4f7a0c9..6ea6ef67d 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -51,6 +51,7 @@ import { TypeaheadSearchItemsData, typeaheadSearchQuery, } from '../../../lib/networking/queries/typeaheadSearch' +import { uploadFileRequestMutation } from '../../../lib/networking/mutations/uploadFileMutation' export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT' @@ -705,9 +706,47 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { const [fileNames, setFileNames] = useState([]) - const handleDrop = (acceptedFiles: any) => + const uploadFiles = useCallback(async () => { + + }, [fileNames]) + + const handleDrop = async (acceptedFiles: any) => { setFileNames(acceptedFiles.map((file: { name: any }) => file.name)) + for (const file of acceptedFiles) { + console.log("FILE: ", file) + try { + const request = await uploadFileRequestMutation({ + url: `file://${file.path}`, + contentType: file.type, + createPageEntry: true, + }) + const blob = await new Promise((resolve, reject) => { + const reader = new FileReader() + reader.onload = async () => { + resolve(reader.result); + } + reader.onerror = (error) => { + reject(error); + } + reader.readAsDataURL(file); + }) + if (!request?.uploadSignedUrl) { + throw 'No upload URL available' + } + + const signedUrl = new URL(request?.uploadSignedUrl) + const result = await fetch(signedUrl, { + method: 'PUT', + mode: 'no-cors', + }) + console.log('result of uploading: ', result) + } catch { + alert('Error uploading file') + } + } + } + return ( <> { + const mutation = ` + mutation UploadFileRequest($input: UploadFileRequestInput!) { + uploadFileRequest(input:$input) { + ... on UploadFileRequestError { + errorCodes + } + ... on UploadFileRequestSuccess { + id + uploadSignedUrl + } + } + }` + + if (!input.clientRequestId) { + input.clientRequestId = uuidv4() + } + + const data = await gqlFetcher(mutation, { input }) + const output = data as UploadFileResponseData | undefined + const error = output?.errorCodes?.find(() => true) + if (error) { + throw error + } + console.log("RESPONSE DATA: ", data) + return output?.uploadFileRequest +} From 5c62a63788c8f228805fd49fd6eecd979562b60c Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Mon, 14 Nov 2022 12:01:02 +0800 Subject: [PATCH 06/19] Remove mode --- packages/web/components/templates/homeFeed/HomeFeedContainer.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index 6ea6ef67d..6a72116f2 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -738,7 +738,6 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { const signedUrl = new URL(request?.uploadSignedUrl) const result = await fetch(signedUrl, { method: 'PUT', - mode: 'no-cors', }) console.log('result of uploading: ', result) } catch { From 0a43674da35094273255d359a8d663885c69a275 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Mon, 14 Nov 2022 12:02:38 +0800 Subject: [PATCH 07/19] Linting fix --- packages/web/lib/networking/mutations/uploadFileMutation.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/lib/networking/mutations/uploadFileMutation.ts b/packages/web/lib/networking/mutations/uploadFileMutation.ts index 9c3eb59b4..96436463e 100644 --- a/packages/web/lib/networking/mutations/uploadFileMutation.ts +++ b/packages/web/lib/networking/mutations/uploadFileMutation.ts @@ -5,7 +5,7 @@ import { v4 as uuidv4 } from 'uuid' type UploadFileInput = { url: string contentType: string - createPageEntry?: Boolean + createPageEntry?: boolean clientRequestId?: string } From 389dcc4430ef0faf539393d43500a464e695a983 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Mon, 14 Nov 2022 12:19:55 +0800 Subject: [PATCH 08/19] Use xhr to upload --- .../templates/homeFeed/HomeFeedContainer.tsx | 26 ++++++++++++------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index 6a72116f2..d1bfe27f1 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -706,10 +706,6 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { const [fileNames, setFileNames] = useState([]) - const uploadFiles = useCallback(async () => { - - }, [fileNames]) - const handleDrop = async (acceptedFiles: any) => { setFileNames(acceptedFiles.map((file: { name: any }) => file.name)) @@ -734,12 +730,24 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { if (!request?.uploadSignedUrl) { throw 'No upload URL available' } + console.log("UPLOADING DATA", data) - const signedUrl = new URL(request?.uploadSignedUrl) - const result = await fetch(signedUrl, { - method: 'PUT', - }) - console.log('result of uploading: ', result) + const uploadSignedUrl = new URL(request?.uploadSignedUrl) + const uploadResult = await new Promise((resolve) => { + const xhr = new XMLHttpRequest() + xhr.open('PUT', uploadSignedUrl, true) + xhr.setRequestHeader('Content-Type', file.type) + + xhr.onerror = () => { + resolve(undefined); + } + xhr.onload = (event) => { + resolve(event) + }; + xhr.send(blob as Blob) + }); + + console.log('result of uploading: ', uploadResult) } catch { alert('Error uploading file') } From c79d2a3ed74ff87096630ccebb819cffd9c8fadc Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Mon, 14 Nov 2022 12:26:12 +0800 Subject: [PATCH 09/19] Fix debug --- packages/web/components/templates/homeFeed/HomeFeedContainer.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index d1bfe27f1..d6690e65a 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -730,7 +730,6 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { if (!request?.uploadSignedUrl) { throw 'No upload URL available' } - console.log("UPLOADING DATA", data) const uploadSignedUrl = new URL(request?.uploadSignedUrl) const uploadResult = await new Promise((resolve) => { From 87b90fbeaaaf4fafc4c62f5cbadb5ab53842959b Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Mon, 14 Nov 2022 15:10:35 +0800 Subject: [PATCH 10/19] Handle uploading with fetch, set the filename on upload --- .../templates/homeFeed/HomeFeedContainer.tsx | 36 +++++-------------- 1 file changed, 9 insertions(+), 27 deletions(-) diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index d6690e65a..88fa25de8 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -710,45 +710,27 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { setFileNames(acceptedFiles.map((file: { name: any }) => file.name)) for (const file of acceptedFiles) { - console.log("FILE: ", file) try { const request = await uploadFileRequestMutation({ - url: `file://${file.path}`, + // This will tell the backend not to save the URL + // and give it the local filename as the title. + url: `file://local/${file.path}`, contentType: file.type, createPageEntry: true, }) - const blob = await new Promise((resolve, reject) => { - const reader = new FileReader() - reader.onload = async () => { - resolve(reader.result); - } - reader.onerror = (error) => { - reject(error); - } - reader.readAsDataURL(file); - }) if (!request?.uploadSignedUrl) { throw 'No upload URL available' } const uploadSignedUrl = new URL(request?.uploadSignedUrl) - const uploadResult = await new Promise((resolve) => { - const xhr = new XMLHttpRequest() - xhr.open('PUT', uploadSignedUrl, true) - xhr.setRequestHeader('Content-Type', file.type) - - xhr.onerror = () => { - resolve(undefined); - } - xhr.onload = (event) => { - resolve(event) - }; - xhr.send(blob as Blob) - }); + const uploadResult = await fetch(uploadSignedUrl, { + method: 'PUT', + body: file, + }) console.log('result of uploading: ', uploadResult) - } catch { - alert('Error uploading file') + } catch (error) { + console.log("ERROR", error) } } } From 5c1e4e46678b12334c06450ca5cc3516703832c6 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Mon, 14 Nov 2022 15:18:02 +0800 Subject: [PATCH 11/19] Use string instead of URL with fetch --- .../web/components/templates/homeFeed/HomeFeedContainer.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index 88fa25de8..ef3f420bd 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -722,8 +722,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { throw 'No upload URL available' } - const uploadSignedUrl = new URL(request?.uploadSignedUrl) - const uploadResult = await fetch(uploadSignedUrl, { + const uploadResult = await fetch(request?.uploadSignedUrl, { method: 'PUT', body: file, }) From ad391fb4e69c835441db104f2e37c80b19510556 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Mon, 14 Nov 2022 16:39:05 +0800 Subject: [PATCH 12/19] Handle various DnD states --- .../templates/homeFeed/HomeFeedContainer.tsx | 25 ++++++++++++++----- 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index ef3f420bd..e40ff5f54 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -704,10 +704,12 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { setShowUnsubscribeConfirmation(false) } - const [fileNames, setFileNames] = useState([]) + const [uploadingFiles, setUploadingFiles] = useState([]) + const [inDragOperation, setInDragOperation] = useState(false) const handleDrop = async (acceptedFiles: any) => { - setFileNames(acceptedFiles.map((file: { name: any }) => file.name)) + setInDragOperation(false) + setUploadingFiles(acceptedFiles.map((file: { name: any }) => file.name)) for (const file of acceptedFiles) { try { @@ -732,6 +734,8 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { console.log("ERROR", error) } } + + setUploadingFiles([]) } return ( @@ -849,14 +853,23 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { )} { setInDragOperation(true) }} + onDragLeave={() => { setInDragOperation(false) }} preventDropOnDocument={true} noClick={true} > {({ getRootProps, getInputProps, acceptedFiles, fileRejections }) => (
    - - Drag n drop files anywhere below - + {(inDragOperation && uploadingFiles.length < 1) && ( + + Drag n drop files anywhere below + + )} + {uploadingFiles.length > 0 ? ( + + Uploading Files... + + ) : null} {!props.isValidating && props.items.length == 0 ? ( Files:
      - {fileNames.map((fileName) => ( + {uploadingFiles.map((fileName) => (
    • {fileName}
      • ))}
    From b5a1d8fb9f4189316e97ba99c6bd6b1fb8c1e19c Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Mon, 14 Nov 2022 17:05:38 +0800 Subject: [PATCH 13/19] Call mutate after uploading an item completes --- .../web/components/templates/homeFeed/HomeFeedContainer.tsx | 5 ++++- packages/web/lib/networking/mutations/uploadFileMutation.ts | 1 - .../web/lib/networking/queries/useGetLibraryItemsQuery.tsx | 2 ++ 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index e40ff5f54..801aafd94 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -127,7 +127,7 @@ export function HomeFeedContainer(): JSX.Element { }) ) - const { itemsPages, size, setSize, isValidating, performActionOnItem } = + const { itemsPages, size, setSize, isValidating, performActionOnItem, mutate } = useGetLibraryItemsQuery(queryInputs) useEffect(() => { @@ -560,6 +560,7 @@ export function HomeFeedContainer(): JSX.Element { { @@ -613,6 +614,7 @@ export function HomeFeedContainer(): JSX.Element { type HomeFeedContentProps = { items: LibraryItem[] searchTerm?: string + reloadItems: () => void gridContainerRef: React.RefObject applySearchQuery: (searchQuery: string) => void hasMore: boolean @@ -736,6 +738,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { } setUploadingFiles([]) + props.reloadItems() } return ( diff --git a/packages/web/lib/networking/mutations/uploadFileMutation.ts b/packages/web/lib/networking/mutations/uploadFileMutation.ts index 96436463e..17625fc9c 100644 --- a/packages/web/lib/networking/mutations/uploadFileMutation.ts +++ b/packages/web/lib/networking/mutations/uploadFileMutation.ts @@ -51,6 +51,5 @@ export async function uploadFileRequestMutation( if (error) { throw error } - console.log("RESPONSE DATA: ", data) return output?.uploadFileRequest } diff --git a/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx b/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx index b729bebc5..001842abe 100644 --- a/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx +++ b/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx @@ -27,6 +27,7 @@ type LibraryItemsQueryResponse = { size: number | ((_size: number) => number) ) => Promise performActionOnItem: (action: LibraryItemAction, item: LibraryItem) => void + mutate: () => void } type LibraryItemAction = @@ -352,5 +353,6 @@ export function useGetLibraryItemsQuery({ performActionOnItem, size, setSize, + mutate } } From 49020194859ef9bc6fbea8514f248f5554b8dae8 Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Wed, 16 Nov 2022 22:15:35 -0300 Subject: [PATCH 14/19] 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(null) - const [shareTarget, setShareTarget] = useState( - undefined - ) + const [shareTarget, setShareTarget] = + useState(undefined) - const [snoozeTarget, setSnoozeTarget] = useState( - undefined - ) + const [snoozeTarget, setSnoozeTarget] = + useState(undefined) - const [labelsTarget, setLabelsTarget] = useState( - undefined - ) + const [labelsTarget, setLabelsTarget] = + useState(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 { )} { setInDragOperation(true) }} - onDragLeave={() => { setInDragOperation(false) }} + onDragEnter={() => { + setInDragOperation(true) + }} + onDragLeave={() => { + setInDragOperation(false) + }} preventDropOnDocument={true} noClick={true} > {({ getRootProps, getInputProps, acceptedFiles, fileRejections }) => (
    - {(inDragOperation && uploadingFiles.length < 1) && ( - - Drag n drop files anywhere below - + {inDragOperation && uploadingFiles.length < 1 && ( + + + Drag n drop files here + + )} {uploadingFiles.length > 0 ? ( - - Uploading Files... - + + + Uploading Files... + + ) : null} {!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 ( - + {inDragOperation && uploadingFiles.length < 1 && ( + + + Drag n drop files here + + + )} + { + setInDragOperation(true) + }} + onDragLeave={() => { + setInDragOperation(false) + }} + noClick={true} + noDragEventsBubbling={true} + > {({ getRootProps, getInputProps, acceptedFiles, fileRejections }) => ( -
    - - Drag n drop files anywhere below - + - ))} -
    +     )} {/* Temporary code */} From 96ae67ebf33670982979faec43380f5bfa17376e Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Wed, 16 Nov 2022 22:22:52 -0300 Subject: [PATCH 15/19] Updating the height and width and commented out temporary code --- .../web/components/templates/homeFeed/HomeFeedContainer.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index 6e316ac56..e6a615949 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -695,7 +695,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { backgroundColor: 'aliceblue', borderRadius: '5px', width: '95%', - height: '100%', + height: '80%', position: 'absolute', opacity: '0.8', display: 'flex', @@ -1015,14 +1015,14 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { {/* Temporary code */} -
    + {/*
    Files:
      {uploadingFiles.map((fileName) => (
    • {fileName}
      • ))}
    -
    {' '} +
    */} {/* Temporary code */} {props.showAddLinkModal && ( props.setShowAddLinkModal(false)} /> From b83bef7bc0f0053bae8140ec46c192dd79c8a63a Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Wed, 16 Nov 2022 22:24:34 -0300 Subject: [PATCH 16/19] updated font for uploading files --- .../components/templates/homeFeed/HomeFeedContainer.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index e6a615949..9fe9e8b38 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -898,7 +898,13 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { )} {uploadingFiles.length > 0 ? ( - + Uploading Files... From 4b18b1f0b8c0f4beb2dbed169efdc439795ea13f Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Mon, 21 Nov 2022 00:43:17 -0300 Subject: [PATCH 17/19] adding upload file progressbar --- .../templates/homeFeed/HomeFeedContainer.tsx | 14 ++++++++++++-- packages/web/package.json | 1 + yarn.lock | 5 +++++ 3 files changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index 9fe9e8b38..d2e24b65d 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -1,5 +1,6 @@ import { Box, HStack, SpanBox, VStack } from './../../elements/LayoutPrimitives' import Dropzone from 'react-dropzone' +import ProgressBar from '@ramonak/react-progress-bar' import type { LibraryItem, LibraryItemsQueryInput, @@ -697,7 +698,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { width: '95%', height: '80%', position: 'absolute', - opacity: '0.8', + opacity: '0.9', display: 'flex', justifyContent: 'center', alignItems: 'center', @@ -903,9 +904,18 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { color: '$utilityTextDefault', fontWeight: '800', fontSize: '$4', + width:'80%' }} > - Uploading Files... + ) : null} diff --git a/packages/web/package.json b/packages/web/package.json index 68344b93a..136742bf0 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -26,6 +26,7 @@ "@radix-ui/react-popover": "^0.1.1", "@radix-ui/react-separator": "^0.1.0", "@radix-ui/react-tooltip": "^0.1.7", + "@ramonak/react-progress-bar": "^5.0.3", "@segment/analytics-next": "^1.33.5", "@sentry/nextjs": "^6.16.1", "@stitches/react": "^1.2.5", diff --git a/yarn.lock b/yarn.lock index 215162c39..b49e81ff8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5054,6 +5054,11 @@ dependencies: "@babel/runtime" "^7.13.10" +"@ramonak/react-progress-bar@^5.0.3": + version "5.0.3" + resolved "https://registry.yarnpkg.com/@ramonak/react-progress-bar/-/react-progress-bar-5.0.3.tgz#a3518fb19e6650e593a208dd429dca7cb6b63d52" + integrity sha512-VxXGKN74q94jYoeYuFNJm3xvWhVz9dy+alFZ8S4ZmTTr/05CCq9PjwthT8JB27UdAvn8pHvKBmemV8JU2cZi6A== + "@reach/observe-rect@^1.1.0": version "1.2.0" resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.2.0.tgz#d7a6013b8aafcc64c778a0ccb83355a11204d3b2" From dde26f6eba2dd3e06f7712527f58ad2920388796 Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Mon, 21 Nov 2022 12:27:13 -0300 Subject: [PATCH 18/19] fixing the z-index issue on card view --- .../templates/homeFeed/HomeFeedContainer.tsx | 45 ++++++++++--------- 1 file changed, 23 insertions(+), 22 deletions(-) diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index d2e24b65d..a042fd0af 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -702,6 +702,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { display: 'flex', justifyContent: 'center', alignItems: 'center', + zIndex: '1', }) const removeItem = () => { @@ -897,28 +898,28 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { )} - {uploadingFiles.length > 0 ? ( - - - - - - ) : null} + {uploadingFiles.length > 0 && ( + + + + + + )} {!props.isValidating && props.items.length == 0 ? ( Date: Tue, 22 Nov 2022 12:00:26 +0800 Subject: [PATCH 19/19] Use the radix progress bar to keep consistent --- .../templates/homeFeed/HomeFeedContainer.tsx | 80 ++++++++++++------- packages/web/package.json | 2 +- packages/web/styles/globals.css | 17 +++- 3 files changed, 69 insertions(+), 30 deletions(-) diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index a042fd0af..9c53341a6 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -1,6 +1,6 @@ import { Box, HStack, SpanBox, VStack } from './../../elements/LayoutPrimitives' import Dropzone from 'react-dropzone' -import ProgressBar from '@ramonak/react-progress-bar' +import * as Progress from '@radix-ui/react-progress' import type { LibraryItem, LibraryItemsQueryInput, @@ -15,7 +15,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { LibrarySearchBar } from './LibrarySearchBar' import { StyledText } from '../../elements/StyledText' import { AddLinkModal } from './AddLinkModal' -import { styled } from '../../tokens/stitches.config' +import { styled, theme } from '../../tokens/stitches.config' import { ListLayoutIcon } from '../../elements/images/ListLayoutIcon' import { GridLayoutIcon } from '../../elements/images/GridLayoutIcon' import { @@ -52,6 +52,7 @@ import { TypeaheadSearchItemsData, typeaheadSearchQuery, } from '../../../lib/networking/queries/typeaheadSearch' +import axios from 'axios' import { uploadFileRequestMutation } from '../../../lib/networking/mutations/uploadFileMutation' export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT' @@ -99,14 +100,17 @@ export function HomeFeedContainer(): JSX.Element { const gridContainerRef = useRef(null) - const [shareTarget, setShareTarget] = - useState(undefined) + const [shareTarget, setShareTarget] = useState( + undefined + ) - const [snoozeTarget, setSnoozeTarget] = - useState(undefined) + const [snoozeTarget, setSnoozeTarget] = useState( + undefined + ) - const [labelsTarget, setLabelsTarget] = - useState(undefined) + const [labelsTarget, setLabelsTarget] = useState( + undefined + ) const [showAddLinkModal, setShowAddLinkModal] = useState(false) const [showEditTitleModal, setShowEditTitleModal] = useState(false) @@ -726,6 +730,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { const [uploadingFiles, setUploadingFiles] = useState([]) const [inDragOperation, setInDragOperation] = useState(false) + const [uploadProgress, setUploadProgress] = useState(0) const handleDrop = async (acceptedFiles: any) => { setInDragOperation(false) @@ -744,9 +749,18 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { throw 'No upload URL available' } - const uploadResult = await fetch(request?.uploadSignedUrl, { + const uploadResult = await axios.request({ method: 'PUT', - body: file, + url: request?.uploadSignedUrl, + data: file, + withCredentials: false, + headers: { + 'Content-Type': 'application/pdf', + }, + onUploadProgress: (p) => { + console.log('upload progress: ', (p.loaded / p.total) * 100) + setUploadProgress((p.loaded / p.total) * 100) + }, }) console.log('result of uploading: ', uploadResult) @@ -894,31 +908,41 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { fontSize: '$4', }} > - Drag n drop files here + Drop PDF document here to add to your library )} {uploadingFiles.length > 0 && ( - - + + + + + - - - + Uploading file + + + )} {!props.isValidating && props.items.length == 0 ? ( diff --git a/packages/web/package.json b/packages/web/package.json index 136742bf0..6c47538d0 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -24,9 +24,9 @@ "@radix-ui/react-dropdown-menu": "^0.1.6", "@radix-ui/react-id": "^0.1.1", "@radix-ui/react-popover": "^0.1.1", + "@radix-ui/react-progress": "^1.0.1", "@radix-ui/react-separator": "^0.1.0", "@radix-ui/react-tooltip": "^0.1.7", - "@ramonak/react-progress-bar": "^5.0.3", "@segment/analytics-next": "^1.33.5", "@sentry/nextjs": "^6.16.1", "@stitches/react": "^1.2.5", diff --git a/packages/web/styles/globals.css b/packages/web/styles/globals.css index 2b11e4ad9..f8616bd79 100644 --- a/packages/web/styles/globals.css +++ b/packages/web/styles/globals.css @@ -376,4 +376,19 @@ button { /* .omnivore-masonry-grid_column > div { background: grey; margin-bottom: 16px; -} */ \ No newline at end of file +} */ + +.ProgressRoot { + overflow: hidden; + background: var(--colors-omnivoreGray); + border-radius: 99999px; + height: 25px; + transform: translateZ(0); +} + +.ProgressIndicator { + background-color: var(--colors-omnivoreCtaYellow) ; + width: 100%; + height: 100%; + transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1); +} \ No newline at end of file