From b9d63c1edf064664556e67c20732de93889201ba Mon Sep 17 00:00:00 2001 From: Thibaut Sardan Date: Fri, 4 Jun 2021 16:31:46 +0200 Subject: [PATCH 01/11] wip --- packages/storage-ui/package.json | 2 +- .../src/Components/Pages/PinsPage.tsx | 9 ++- .../src/Contexts/StorageContext.tsx | 64 +++++++++++-------- yarn.lock | 7 +- 4 files changed, 51 insertions(+), 31 deletions(-) diff --git a/packages/storage-ui/package.json b/packages/storage-ui/package.json index a57246a865..2e26dca685 100644 --- a/packages/storage-ui/package.json +++ b/packages/storage-ui/package.json @@ -6,7 +6,7 @@ "@babel/core": "^7.12.10", "@babel/runtime": "^7.0.0", "@chainsafe/browser-storage-hooks": "^1.0.1", - "@chainsafe/files-api-client":"1.11.3", + "@chainsafe/files-api-client": "^1.14.3", "@chainsafe/web3-context": "1.1.4", "@lingui/core": "^3.7.2", "@lingui/react": "^3.7.2", diff --git a/packages/storage-ui/src/Components/Pages/PinsPage.tsx b/packages/storage-ui/src/Components/Pages/PinsPage.tsx index d815280fc0..98a9194346 100644 --- a/packages/storage-ui/src/Components/Pages/PinsPage.tsx +++ b/packages/storage-ui/src/Components/Pages/PinsPage.tsx @@ -1,6 +1,7 @@ -import React from "react" +import React, { useCallback } from "react" import { makeStyles, createStyles } from "@chainsafe/common-theme" import { Typography } from "@chainsafe/common-components" +import { useStorage } from "../../Contexts/StorageContext" const useStyles = makeStyles(() => createStyles({ @@ -14,10 +15,16 @@ const useStyles = makeStyles(() => const PinsPage = () => { const classes = useStyles() + const { pins, addPin } = useStorage() + + const onCreatePin = useCallback(() => { + addPin("QmZnxeGKi2ALzDeywikKCpNPbFfA8EkUsZPTrvsjyjGLA9") + }, [addPin]) return (
Pins +
create pin
) } diff --git a/packages/storage-ui/src/Contexts/StorageContext.tsx b/packages/storage-ui/src/Contexts/StorageContext.tsx index 332a63d2af..3b629ef24a 100644 --- a/packages/storage-ui/src/Contexts/StorageContext.tsx +++ b/packages/storage-ui/src/Contexts/StorageContext.tsx @@ -4,7 +4,9 @@ import { DirectoryContentResponse, BucketType, Bucket as FilesBucket, - SearchEntry + SearchEntry, + Pin, + PinObject } from "@chainsafe/files-api-client" import React, { useCallback, useEffect, useReducer } from "react" import { useState } from "react" @@ -50,14 +52,15 @@ interface GetFileContentParams { type Bucket = FilesBucket type StorageContext = { - pins: Bucket[] + pins: PinObject[] uploadsInProgress: UploadProgress[] downloadsInProgress: DownloadProgress[] spaceUsed: number + addPin: (cid: string) => void createPin: (bucketId: string, files: File[], path: string) => Promise downloadPin: (bucketId: string, itemToDownload: FileSystemItem, path: string) => void getPinContent: (bucketId: string, params: GetFileContentParams) => Promise - refreshPins: () => Promise + refreshPins: () => void } // This represents a File or Folder on the @@ -77,36 +80,35 @@ const StorageProvider = ({ children }: StorageContextProps) => { isLoggedIn } = useStorageApi() const [spaceUsed, setSpaceUsed] = useState(0) - const [pins, setPins] = useState([]) - - const refreshPins = useCallback(async () => { - const result = await filesApiClient.listBuckets() + const [pins, setPins] = useState([]) - setPins(result.filter(b => b.type === "pinning")) - return Promise.resolve() + const refreshPins = useCallback(() => { + filesApiClient.getAllPins() + .then((pins) => setPins(pins.results || [])) + .catch(console.error) }, [filesApiClient]) useEffect(() => { isLoggedIn && refreshPins() }, [isLoggedIn, refreshPins]) - // Space used counter - useEffect(() => { - const getSpaceUsage = async () => { - try { - // TODO: Update this to include Share buckets where the current user is the owner - const totalSize = pins.filter(b => b.type === "pinning") - .reduce((totalSize, bucket) => { return totalSize += (bucket as any).size}, 0) - - setSpaceUsed(totalSize) - } catch (error) { - console.error(error) - } - } - if (isLoggedIn) { - getSpaceUsage() - } - }, [filesApiClient, isLoggedIn, pins]) + // // Space used counter + // useEffect(() => { + // const getSpaceUsage = async () => { + // try { + // // TODO: Update this to include Share buckets where the current user is the owner + // const totalSize = pins.filter(p => p.pin === "pinning") + // .reduce((totalSize, bucket) => { return totalSize += (bucket as any).size}, 0) + + // setSpaceUsed(totalSize) + // } catch (error) { + // console.error(error) + // } + // } + // if (isLoggedIn) { + // getSpaceUsage() + // } + // }, [filesApiClient, isLoggedIn, pins]) // Reset encryption keys on log out useEffect(() => { @@ -143,6 +145,12 @@ const StorageProvider = ({ children }: StorageContextProps) => { } }) + const addPin = useCallback((cid: string) => { + filesApiClient.addPin({ pins: [{ cid }] }) + .then(res => console.log(res)) + .catch(console.error) + }, [filesApiClient]) + const createPin = useCallback(async (bucketId: string, files: File[], path: string) => { const bucket = pins.find(b => b.id === bucketId) @@ -278,15 +286,15 @@ const StorageProvider = ({ children }: StorageContextProps) => { return ( {children} diff --git a/yarn.lock b/yarn.lock index c9c7aae820..471391df31 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1669,6 +1669,11 @@ resolved "https://npm.pkg.github.com/download/@chainsafe/files-api-client/1.11.3/2817fd5c98430022620c5780b8f250486c24a0c2ef3b50ee64a4487df1a7a798#64a2123619c77eac61fbae588496cb5777eb1207" integrity sha512-nBQwpG6t0W7jjcUOaRwhb3VDG7FnAKssU21rBGedXYEuGn+CeOUM5bR3ERqoB22i7tVFEZjiY0AJhoGo2YxIGA== +"@chainsafe/files-api-client@^1.14.3": + version "1.14.3" + resolved "https://npm.pkg.github.com/download/@chainsafe/files-api-client/1.14.3/3a86b5b65dccc5d572a2969acb540a0fd70fd4f36f7e3eb502fc11da7b82bf07#cafc5b54a4c1b88f483fca6e233b6044746989d5" + integrity sha512-vLDnJ4sMBXEvLzBGWwXFFVGwlXWlqxk0mjCA20sHnJSyxO7QFiqCVx0mDs0F+2BGJZ2fhp8ppNVH+wBShc1wIQ== + "@chainsafe/web3-context@1.1.4": version "1.1.4" resolved "https://registry.yarnpkg.com/@chainsafe/web3-context/-/web3-context-1.1.4.tgz#ce0f140af8ccf93af1a189fbdbd6f018b9bf5fb7" @@ -8995,7 +9000,7 @@ cypress-file-upload@^5.0.7: resolved "https://registry.yarnpkg.com/cypress-file-upload/-/cypress-file-upload-5.0.7.tgz#acf24fe08a92b2d0c892a58b56811fb933d34ea9" integrity sha512-cgWsWx7igxjyyVm9/VJ9ukdy69jL00I7z0lrwUWtXXLPvX4neO+8JAZ054Ax8Xf+mdV9OerenXzb9nqRoafjHA== -cypress@^7.4.0: +cypress@^7.3.0, cypress@^7.4.0: version "7.4.0" resolved "https://registry.yarnpkg.com/cypress/-/cypress-7.4.0.tgz#679bfe75335b9a4873d44f0d989e9f0367f00665" integrity sha512-+CmSoT5DS88e92YDfc6aDA3Zf3uCBRKVB92caWsjXMilz0tf6NpByFvIbLLVWXiYOwrhtWV0m/k93+rzodYwRQ== From 30328ffa4083870bb35c6635fdb087b0eea8fc7c Mon Sep 17 00:00:00 2001 From: Thibaut Sardan Date: Mon, 7 Jun 2021 12:23:11 +0200 Subject: [PATCH 02/11] v1.14 --- .../src/Contexts/StorageContext.tsx | 171 +++++++++--------- 1 file changed, 84 insertions(+), 87 deletions(-) diff --git a/packages/storage-ui/src/Contexts/StorageContext.tsx b/packages/storage-ui/src/Contexts/StorageContext.tsx index 3b629ef24a..9be4966deb 100644 --- a/packages/storage-ui/src/Contexts/StorageContext.tsx +++ b/packages/storage-ui/src/Contexts/StorageContext.tsx @@ -1,11 +1,9 @@ import { - CSFFilesFullInfoResponse, FileContentResponse, DirectoryContentResponse, BucketType, Bucket as FilesBucket, SearchEntry, - Pin, PinObject } from "@chainsafe/files-api-client" import React, { useCallback, useEffect, useReducer } from "react" @@ -58,8 +56,8 @@ type StorageContext = { spaceUsed: number addPin: (cid: string) => void createPin: (bucketId: string, files: File[], path: string) => Promise - downloadPin: (bucketId: string, itemToDownload: FileSystemItem, path: string) => void - getPinContent: (bucketId: string, params: GetFileContentParams) => Promise + // downloadPin: (bucketId: string, itemToDownload: FileSystemItem, path: string) => void + // getPinContent: (bucketId: string, params: GetFileContentParams) => Promise refreshPins: () => void } @@ -199,97 +197,97 @@ const StorageProvider = ({ children }: StorageContextProps) => { } }, [pins]) - const getPinContent = useCallback(async ( - bucketId: string, - { cid, cancelToken, onDownloadProgress, file, path }: GetFileContentParams - ) => { - const bucket = pins.find(b => b.id === bucketId) - - if (!bucket) { - throw new Error("No encryption key for this bucket found") - } + // const getPinContent = useCallback(async ( + // bucketId: string, + // { cid, cancelToken, onDownloadProgress, file, path }: GetFileContentParams + // ) => { + // const bucket = pins.find(b => b.id === bucketId) - if (!file) { - console.error("No file passed, and no file found for cid:", cid, "in pathContents:", path) - throw new Error("No file found.") - } + // if (!bucket) { + // throw new Error("No encryption key for this bucket found") + // } - try { - const result = await filesApiClient.getFileContent( - { - path: path, - source: { - id: bucket.id - } - }, - cancelToken, - onDownloadProgress - ) - - return result.data - } catch (error) { - console.error(error) - return Promise.reject() - } - }, [pins, filesApiClient]) + // if (!file) { + // console.error("No file passed, and no file found for cid:", cid, "in pathContents:", path) + // throw new Error("No file found.") + // } - const downloadPin = useCallback(async (bucketId: string, itemToDownload: FileSystemItem, path: string) => { - const toastId = uuidv4() - try { - const downloadProgress: DownloadProgress = { - id: toastId, - fileName: itemToDownload.name, - complete: false, - error: false, - progress: 0 - } - dispatchDownloadsInProgress({ type: "add", payload: downloadProgress }) - const result = await getPinContent(bucketId, { - cid: itemToDownload.cid, - file: itemToDownload, - path: `${path}/${itemToDownload.name}`, - onDownloadProgress: (progressEvent) => { - dispatchDownloadsInProgress({ - type: "progress", - payload: { - id: toastId, - progress: Math.ceil( - (progressEvent.loaded / itemToDownload.size) * 100 - ) - } - }) - } - }) - if (!result) return - const link = document.createElement("a") - link.href = URL.createObjectURL(result) - link.download = itemToDownload?.name || "file" - link.click() - dispatchDownloadsInProgress({ - type: "complete", - payload: { id: toastId } - }) - URL.revokeObjectURL(link.href) - setTimeout(() => { - dispatchDownloadsInProgress({ - type: "remove", - payload: { id: toastId } - }) - }, REMOVE_UPLOAD_PROGRESS_DELAY) - return Promise.resolve() - } catch (error) { - dispatchDownloadsInProgress({ type: "error", payload: { id: toastId } }) - return Promise.reject() - } - }, [getPinContent]) + // try { + // const result = await filesApiClient.getFileContent( + // { + // path: path, + // source: { + // id: bucket.id + // } + // }, + // cancelToken, + // onDownloadProgress + // ) + + // return result.data + // } catch (error) { + // console.error(error) + // return Promise.reject() + // } + // }, [pins, filesApiClient]) + + // const downloadPin = useCallback(async (bucketId: string, itemToDownload: FileSystemItem, path: string) => { + // const toastId = uuidv4() + // try { + // const downloadProgress: DownloadProgress = { + // id: toastId, + // fileName: itemToDownload.name, + // complete: false, + // error: false, + // progress: 0 + // } + // dispatchDownloadsInProgress({ type: "add", payload: downloadProgress }) + // const result = await getPinContent(bucketId, { + // cid: itemToDownload.cid, + // file: itemToDownload, + // path: `${path}/${itemToDownload.name}`, + // onDownloadProgress: (progressEvent) => { + // dispatchDownloadsInProgress({ + // type: "progress", + // payload: { + // id: toastId, + // progress: Math.ceil( + // (progressEvent.loaded / itemToDownload.size) * 100 + // ) + // } + // }) + // } + // }) + // if (!result) return + // const link = document.createElement("a") + // link.href = URL.createObjectURL(result) + // link.download = itemToDownload?.name || "file" + // link.click() + // dispatchDownloadsInProgress({ + // type: "complete", + // payload: { id: toastId } + // }) + // URL.revokeObjectURL(link.href) + // setTimeout(() => { + // dispatchDownloadsInProgress({ + // type: "remove", + // payload: { id: toastId } + // }) + // }, REMOVE_UPLOAD_PROGRESS_DELAY) + // return Promise.resolve() + // } catch (error) { + // dispatchDownloadsInProgress({ type: "error", payload: { id: toastId } }) + // return Promise.reject() + // } + // }, [getPinContent]) return ( Date: Mon, 7 Jun 2021 15:55:31 +0200 Subject: [PATCH 03/11] v1.15-rc1 --- packages/files-ui/package.json | 2 +- packages/storage-ui/package.json | 2 +- yarn.lock | 13 ++++--------- 3 files changed, 6 insertions(+), 11 deletions(-) diff --git a/packages/files-ui/package.json b/packages/files-ui/package.json index f951a0497d..f7febcc50c 100644 --- a/packages/files-ui/package.json +++ b/packages/files-ui/package.json @@ -6,7 +6,7 @@ "@babel/core": "^7.12.10", "@babel/runtime": "^7.0.0", "@chainsafe/browser-storage-hooks": "^1.0.1", - "@chainsafe/files-api-client": "1.14.3", + "@chainsafe/files-api-client": "1.15.0-rc1", "@chainsafe/web3-context": "1.1.4", "@lingui/core": "^3.7.2", "@lingui/react": "^3.7.2", diff --git a/packages/storage-ui/package.json b/packages/storage-ui/package.json index 2e26dca685..f415ee1bdf 100644 --- a/packages/storage-ui/package.json +++ b/packages/storage-ui/package.json @@ -6,7 +6,7 @@ "@babel/core": "^7.12.10", "@babel/runtime": "^7.0.0", "@chainsafe/browser-storage-hooks": "^1.0.1", - "@chainsafe/files-api-client": "^1.14.3", + "@chainsafe/files-api-client": "1.15.0-rc1", "@chainsafe/web3-context": "1.1.4", "@lingui/core": "^3.7.2", "@lingui/react": "^3.7.2", diff --git a/yarn.lock b/yarn.lock index 1e22937b5e..3eb6575d41 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1664,15 +1664,10 @@ resolved "https://registry.yarnpkg.com/@chainsafe/browser-storage-hooks/-/browser-storage-hooks-1.0.1.tgz#26d32cde1999914db755a631e2643823c54959f7" integrity sha512-Q4b5gQAZnsRXKeADspd5isqfwwhhXjDk70y++YadufA6EZ3tf340oW0OVszp74KaGEw+CAYFGQR4X7bzpZ3x9Q== -"@chainsafe/files-api-client@1.11.3": - version "1.11.3" - resolved "https://npm.pkg.github.com/download/@chainsafe/files-api-client/1.11.3/2817fd5c98430022620c5780b8f250486c24a0c2ef3b50ee64a4487df1a7a798#64a2123619c77eac61fbae588496cb5777eb1207" - integrity sha512-nBQwpG6t0W7jjcUOaRwhb3VDG7FnAKssU21rBGedXYEuGn+CeOUM5bR3ERqoB22i7tVFEZjiY0AJhoGo2YxIGA== - -"@chainsafe/files-api-client@1.14.3": - version "1.14.3" - resolved "https://npm.pkg.github.com/download/@chainsafe/files-api-client/1.14.3/3a86b5b65dccc5d572a2969acb540a0fd70fd4f36f7e3eb502fc11da7b82bf07#cafc5b54a4c1b88f483fca6e233b6044746989d5" - integrity sha512-vLDnJ4sMBXEvLzBGWwXFFVGwlXWlqxk0mjCA20sHnJSyxO7QFiqCVx0mDs0F+2BGJZ2fhp8ppNVH+wBShc1wIQ== +"@chainsafe/files-api-client@1.15.0-rc1": + version "1.15.0-rc1" + resolved "https://npm.pkg.github.com/download/@chainsafe/files-api-client/1.15.0-rc1/5bc22c32c65bc7a434ba29038a9813d9c551d46f25a61dd5f7012c4d4d7717ba#605202cdb6aaaae354638dc66a206df13fb56084" + integrity sha512-tkew3fr9Mvd7OmMJSkT5fSEdm0GH/UQ/4XuaBJJeX3SkpRp+ig9o70ltDymqM+0fgKLR6fr3kpwR4FQjO/hu+w== "@chainsafe/web3-context@1.1.4": version "1.1.4" From 3d457402d55bb7ca283f3bd83b469aa062457125 Mon Sep 17 00:00:00 2001 From: Thibaut Sardan Date: Tue, 8 Jun 2021 10:26:17 +0200 Subject: [PATCH 04/11] show Cids --- packages/storage-ui/src/App.tsx | 5 +- .../src/Components/Pages/PinsPage.tsx | 77 ++++++++++++++++++- .../src/Contexts/StorageContext.tsx | 7 +- 3 files changed, 78 insertions(+), 11 deletions(-) diff --git a/packages/storage-ui/src/App.tsx b/packages/storage-ui/src/App.tsx index 434fc4c257..ed5ac2382a 100644 --- a/packages/storage-ui/src/App.tsx +++ b/packages/storage-ui/src/App.tsx @@ -26,8 +26,7 @@ if ( } const availableLanguages = [ - { id: "en", label: "English" }, - { id: "fr", label: "Français" } + { id: "en", label: "English" } ] const onboardConfig = { @@ -55,7 +54,7 @@ const onboardConfig = { } } -const App: React.FC<{}> = () => { +const App = () => { const { initHotjar } = useHotjar() const { canUseLocalStorage } = useLocalStorage() const hotjarId = process.env.REACT_APP_HOTJAR_ID diff --git a/packages/storage-ui/src/Components/Pages/PinsPage.tsx b/packages/storage-ui/src/Components/Pages/PinsPage.tsx index 98a9194346..27c89469c0 100644 --- a/packages/storage-ui/src/Components/Pages/PinsPage.tsx +++ b/packages/storage-ui/src/Components/Pages/PinsPage.tsx @@ -1,7 +1,9 @@ import React, { useCallback } from "react" import { makeStyles, createStyles } from "@chainsafe/common-theme" -import { Typography } from "@chainsafe/common-components" +import { formatBytes, Table, TableBody, TableCell, TableHead, TableHeadCell, TableRow, Typography } from "@chainsafe/common-components" import { useStorage } from "../../Contexts/StorageContext" +import { Trans } from "@lingui/macro" +import dayjs from "dayjs" const useStyles = makeStyles(() => createStyles({ @@ -9,6 +11,9 @@ const useStyles = makeStyles(() => position: "relative", minHeight: "100vh", overflow: "hidden" + }, + tableHead: { + marginTop: 24 } }) ) @@ -18,13 +23,79 @@ const PinsPage = () => { const { pins, addPin } = useStorage() const onCreatePin = useCallback(() => { - addPin("QmZnxeGKi2ALzDeywikKCpNPbFfA8EkUsZPTrvsjyjGLA9") + addPin("QmNbbff884cwp1pvH8muod4pNaUqHA2ph77nYXP7dps2Xw") }, [addPin]) return (
Pins -
create pin
+ + + + + + Cid + + + Created + + + Size + + {/* IPFS Gateway */} + {/* Menu */} + + + + {pins.map((pinObject, index) => + + + {pinObject.pin?.cid} + + + {dayjs(pinObject.created).format("DD MMM YYYY h:mm a")} + + + {/** as any needs to be removed when the api spec will be up to date */} + {formatBytes((pinObject as any).info.size)} + + + + Open on Gateway + + + + + + + )} + +
) } diff --git a/packages/storage-ui/src/Contexts/StorageContext.tsx b/packages/storage-ui/src/Contexts/StorageContext.tsx index 9be4966deb..8de78b8a45 100644 --- a/packages/storage-ui/src/Contexts/StorageContext.tsx +++ b/packages/storage-ui/src/Contexts/StorageContext.tsx @@ -73,10 +73,7 @@ const REMOVE_UPLOAD_PROGRESS_DELAY = 5000 const StorageContext = React.createContext(undefined) const StorageProvider = ({ children }: StorageContextProps) => { - const { - filesApiClient, - isLoggedIn - } = useStorageApi() + const { filesApiClient, isLoggedIn } = useStorageApi() const [spaceUsed, setSpaceUsed] = useState(0) const [pins, setPins] = useState([]) @@ -144,7 +141,7 @@ const StorageProvider = ({ children }: StorageContextProps) => { }) const addPin = useCallback((cid: string) => { - filesApiClient.addPin({ pins: [{ cid }] }) + filesApiClient.addPin({ cid }) .then(res => console.log(res)) .catch(console.error) }, [filesApiClient]) From e247c1948db0e91baeecd6b092f74e1ca1ab3bc4 Mon Sep 17 00:00:00 2001 From: Thibaut Sardan Date: Tue, 8 Jun 2021 11:20:08 +0200 Subject: [PATCH 05/11] buckets in nav bar --- .../src/Components/Elements/PinRow.tsx | 54 +++++++++++++++++++ .../src/Components/Layouts/AppHeader.tsx | 4 +- .../src/Components/Layouts/AppNav.tsx | 37 ++++--------- .../src/Components/Pages/Buckets.tsx | 31 +++++++++++ .../src/Components/Pages/LoginPage.tsx | 4 +- .../src/Components/Pages/PinsPage.tsx | 38 +++---------- .../src/Components/StorageRoutes.tsx | 9 ++++ 7 files changed, 116 insertions(+), 61 deletions(-) create mode 100644 packages/storage-ui/src/Components/Elements/PinRow.tsx create mode 100644 packages/storage-ui/src/Components/Pages/Buckets.tsx diff --git a/packages/storage-ui/src/Components/Elements/PinRow.tsx b/packages/storage-ui/src/Components/Elements/PinRow.tsx new file mode 100644 index 0000000000..9231815f41 --- /dev/null +++ b/packages/storage-ui/src/Components/Elements/PinRow.tsx @@ -0,0 +1,54 @@ +import React from "react" +import { makeStyles, createStyles } from "@chainsafe/common-theme" +import { formatBytes, TableCell, TableRow } from "@chainsafe/common-components" +import { Trans } from "@lingui/macro" +import dayjs from "dayjs" +import { PinObject } from "@chainsafe/files-api-client" + +const useStyles = makeStyles(() => + createStyles({ + root: { + } + }) +) +interface Props { + pinObject: PinObject +} + +const IPFS_GATEWAY = "https://ipfs.infura.io:5001/api/v0/cat/" + +const PinRow = ({ pinObject }: Props) => { + const classes = useStyles() + + return ( + + + {pinObject.pin?.cid} + + + {dayjs(pinObject.created).format("DD MMM YYYY h:mm a")} + + + {/** as any needs to be removed when the api spec will be up to date */} + {formatBytes((pinObject as any).info.size)} + + + + Open on Gateway + + + + + + + ) +} + +export default PinRow \ No newline at end of file diff --git a/packages/storage-ui/src/Components/Layouts/AppHeader.tsx b/packages/storage-ui/src/Components/Layouts/AppHeader.tsx index 2d37c6f363..85312f18d8 100644 --- a/packages/storage-ui/src/Components/Layouts/AppHeader.tsx +++ b/packages/storage-ui/src/Components/Layouts/AppHeader.tsx @@ -4,7 +4,7 @@ import clsx from "clsx" import { Link, Typography, - ChainsafeFilesLogo, + ChainsafeLogo, HamburgerMenu, MenuDropdown, PowerDownSvg, @@ -207,7 +207,7 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => { className={classes.logo} to={ROUTE_LINKS.Pins} > - + = ({ navOpen, setNavOpen }: IAppNav) => { className={classes.logo} to={ROUTE_LINKS.Pins} > - - - Files - -   - - beta + + + ChainSafe Storage )}
- - Folders - - - {desktop ? Resources : Account} - diff --git a/packages/storage-ui/src/Components/Pages/Buckets.tsx b/packages/storage-ui/src/Components/Pages/Buckets.tsx new file mode 100644 index 0000000000..3e56efc9e2 --- /dev/null +++ b/packages/storage-ui/src/Components/Pages/Buckets.tsx @@ -0,0 +1,31 @@ +import React, { useCallback } from "react" +import { makeStyles, createStyles } from "@chainsafe/common-theme" +import { Table, TableBody, TableHead, TableHeadCell, TableRow, Typography } from "@chainsafe/common-components" +import { useStorage } from "../../Contexts/StorageContext" +import { Trans } from "@lingui/macro" +import PinRow from "../Elements/PinRow" + +const useStyles = makeStyles(() => + createStyles({ + root: { + position: "relative", + minHeight: "100vh", + overflow: "hidden" + }, + tableHead: { + marginTop: 24 + } + }) +) + +const BucketsPage = () => { + const classes = useStyles() + + return ( +
+ Buckets +
+ ) +} + +export default BucketsPage diff --git a/packages/storage-ui/src/Components/Pages/LoginPage.tsx b/packages/storage-ui/src/Components/Pages/LoginPage.tsx index cd25b2ff61..f2b5d04e11 100644 --- a/packages/storage-ui/src/Components/Pages/LoginPage.tsx +++ b/packages/storage-ui/src/Components/Pages/LoginPage.tsx @@ -2,7 +2,7 @@ import React from "react" import { makeStyles, createStyles, useThemeSwitcher } from "@chainsafe/common-theme" import { CSFTheme } from "../../Themes/types" import InitialScreen from "../Modules/LoginModule/InitialScreen" -import { ChainsafeFilesLogo, ChainsafeLogo, Typography } from "@chainsafe/common-components" +import { ChainsafeLogo, Typography } from "@chainsafe/common-components" import { ROUTE_LINKS } from "../StorageRoutes" import { Trans } from "@lingui/macro" import BottomDarkSVG from "../../Media/landing/layers/dark/Bottom.dark.svg" @@ -127,7 +127,7 @@ const LoginPage = () => { return (
- + ChainSafe Storage <> diff --git a/packages/storage-ui/src/Components/Pages/PinsPage.tsx b/packages/storage-ui/src/Components/Pages/PinsPage.tsx index 27c89469c0..40b043fc26 100644 --- a/packages/storage-ui/src/Components/Pages/PinsPage.tsx +++ b/packages/storage-ui/src/Components/Pages/PinsPage.tsx @@ -1,9 +1,9 @@ import React, { useCallback } from "react" import { makeStyles, createStyles } from "@chainsafe/common-theme" -import { formatBytes, Table, TableBody, TableCell, TableHead, TableHeadCell, TableRow, Typography } from "@chainsafe/common-components" +import { Table, TableBody, TableHead, TableHeadCell, TableRow, Typography } from "@chainsafe/common-components" import { useStorage } from "../../Contexts/StorageContext" import { Trans } from "@lingui/macro" -import dayjs from "dayjs" +import PinRow from "../Elements/PinRow" const useStyles = makeStyles(() => createStyles({ @@ -22,14 +22,14 @@ const PinsPage = () => { const classes = useStyles() const { pins, addPin } = useStorage() - const onCreatePin = useCallback(() => { + const onCreateHardcodedPin = useCallback(() => { addPin("QmNbbff884cwp1pvH8muod4pNaUqHA2ph77nYXP7dps2Xw") }, [addPin]) return (
Pins - + { {pins.map((pinObject, index) => - - - {pinObject.pin?.cid} - - - {dayjs(pinObject.created).format("DD MMM YYYY h:mm a")} - - - {/** as any needs to be removed when the api spec will be up to date */} - {formatBytes((pinObject as any).info.size)} - - - - Open on Gateway - - - - - - + /> )}
diff --git a/packages/storage-ui/src/Components/StorageRoutes.tsx b/packages/storage-ui/src/Components/StorageRoutes.tsx index 51581fe87d..4c402d44af 100644 --- a/packages/storage-ui/src/Components/StorageRoutes.tsx +++ b/packages/storage-ui/src/Components/StorageRoutes.tsx @@ -3,10 +3,12 @@ import { Switch, ConditionalRoute } from "@chainsafe/common-components" import LoginPage from "./Pages/LoginPage" import { useStorageApi } from "../Contexts/StorageApiContext" import PinsPage from "./Pages/PinsPage" +import BucketsPage from "./Pages/Buckets" export const ROUTE_LINKS = { Landing: "/", Pins: "/pins", + Buckets: "/buckets", PrivacyPolicy: "https://files.chainsafe.io/privacy-policy", Terms: "https://files.chainsafe.io/terms-of-service", ChainSafe: "https://chainsafe.io/" @@ -27,6 +29,13 @@ const FilesRoutes = () => { component={PinsPage} redirectPath={ROUTE_LINKS.Landing} /> + Date: Tue, 8 Jun 2021 11:30:15 +0200 Subject: [PATCH 06/11] cleanup --- .../storage-ui/src/Components/Layouts/AppNav.tsx | 1 - .../storage-ui/src/Components/Pages/Buckets.tsx | 7 ++----- .../storage-ui/src/Contexts/StorageContext.tsx | 15 ++------------- 3 files changed, 4 insertions(+), 19 deletions(-) diff --git a/packages/storage-ui/src/Components/Layouts/AppNav.tsx b/packages/storage-ui/src/Components/Layouts/AppNav.tsx index b1680c52ed..6e61418bf7 100644 --- a/packages/storage-ui/src/Components/Layouts/AppNav.tsx +++ b/packages/storage-ui/src/Components/Layouts/AppNav.tsx @@ -12,7 +12,6 @@ import { PowerDownSvg, ProgressBar, formatBytes, - DeleteSvg, ChainsafeLogo, FolderSvg } from "@chainsafe/common-components" diff --git a/packages/storage-ui/src/Components/Pages/Buckets.tsx b/packages/storage-ui/src/Components/Pages/Buckets.tsx index 3e56efc9e2..e68275fc0d 100644 --- a/packages/storage-ui/src/Components/Pages/Buckets.tsx +++ b/packages/storage-ui/src/Components/Pages/Buckets.tsx @@ -1,9 +1,6 @@ -import React, { useCallback } from "react" +import React from "react" import { makeStyles, createStyles } from "@chainsafe/common-theme" -import { Table, TableBody, TableHead, TableHeadCell, TableRow, Typography } from "@chainsafe/common-components" -import { useStorage } from "../../Contexts/StorageContext" -import { Trans } from "@lingui/macro" -import PinRow from "../Elements/PinRow" +import { Typography } from "@chainsafe/common-components" const useStyles = makeStyles(() => createStyles({ diff --git a/packages/storage-ui/src/Contexts/StorageContext.tsx b/packages/storage-ui/src/Contexts/StorageContext.tsx index 8de78b8a45..0b8ebe8d29 100644 --- a/packages/storage-ui/src/Contexts/StorageContext.tsx +++ b/packages/storage-ui/src/Contexts/StorageContext.tsx @@ -2,7 +2,6 @@ import { FileContentResponse, DirectoryContentResponse, BucketType, - Bucket as FilesBucket, SearchEntry, PinObject } from "@chainsafe/files-api-client" @@ -10,7 +9,6 @@ import React, { useCallback, useEffect, useReducer } from "react" import { useState } from "react" import { v4 as uuidv4 } from "uuid" import { downloadsInProgressReducer, uploadsInProgressReducer } from "./FilesReducers" -import { CancelToken } from "axios" import { t } from "@lingui/macro" import { useBeforeunload } from "react-beforeunload" import { useStorageApi } from "./StorageApiContext" @@ -39,16 +37,6 @@ export type DownloadProgress = { complete: boolean } -interface GetFileContentParams { - cid: string - cancelToken?: CancelToken - onDownloadProgress?: (progressEvent: ProgressEvent) => void - file: FileSystemItem - path: string -} - -type Bucket = FilesBucket - type StorageContext = { pins: PinObject[] uploadsInProgress: UploadProgress[] @@ -141,7 +129,8 @@ const StorageProvider = ({ children }: StorageContextProps) => { }) const addPin = useCallback((cid: string) => { - filesApiClient.addPin({ cid }) + // Remove the as any once the api specs will be updated + filesApiClient.addPin(({ cid }) as any) .then(res => console.log(res)) .catch(console.error) }, [filesApiClient]) From bd6b93e086620b092eb7a2dd44101c465da20ad2 Mon Sep 17 00:00:00 2001 From: Thibaut Sardan Date: Tue, 8 Jun 2021 12:27:04 +0200 Subject: [PATCH 07/11] cid instead of pin --- .../storage-ui/src/Components/Layouts/AppHeader.tsx | 2 +- packages/storage-ui/src/Components/Layouts/AppNav.tsx | 4 ++-- .../Components/Pages/{PinsPage.tsx => CidsPage.tsx} | 4 ++-- packages/storage-ui/src/Components/StorageRoutes.tsx | 10 +++++----- 4 files changed, 10 insertions(+), 10 deletions(-) rename packages/storage-ui/src/Components/Pages/{PinsPage.tsx => CidsPage.tsx} (97%) diff --git a/packages/storage-ui/src/Components/Layouts/AppHeader.tsx b/packages/storage-ui/src/Components/Layouts/AppHeader.tsx index 85312f18d8..e9c63fb5df 100644 --- a/packages/storage-ui/src/Components/Layouts/AppHeader.tsx +++ b/packages/storage-ui/src/Components/Layouts/AppHeader.tsx @@ -205,7 +205,7 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => { /> = ({ navOpen, setNavOpen }: IAppNav) => {
@@ -251,7 +251,7 @@ const AppNav: React.FC = ({ navOpen, setNavOpen }: IAppNav) => { handleOnClick() }} className={classes.navItem} - to={ROUTE_LINKS.Pins} + to={ROUTE_LINKS.Cids} > }) ) -const PinsPage = () => { +const CidsPage = () => { const classes = useStyles() const { pins, addPin } = useStorage() @@ -76,4 +76,4 @@ const PinsPage = () => { ) } -export default PinsPage +export default CidsPage diff --git a/packages/storage-ui/src/Components/StorageRoutes.tsx b/packages/storage-ui/src/Components/StorageRoutes.tsx index 4c402d44af..29ad384938 100644 --- a/packages/storage-ui/src/Components/StorageRoutes.tsx +++ b/packages/storage-ui/src/Components/StorageRoutes.tsx @@ -2,12 +2,12 @@ import React from "react" import { Switch, ConditionalRoute } from "@chainsafe/common-components" import LoginPage from "./Pages/LoginPage" import { useStorageApi } from "../Contexts/StorageApiContext" -import PinsPage from "./Pages/PinsPage" +import CidsPage from "./Pages/CidsPage" import BucketsPage from "./Pages/Buckets" export const ROUTE_LINKS = { Landing: "/", - Pins: "/pins", + Cids: "/cids", Buckets: "/buckets", PrivacyPolicy: "https://files.chainsafe.io/privacy-policy", Terms: "https://files.chainsafe.io/terms-of-service", @@ -24,9 +24,9 @@ const FilesRoutes = () => { { path={ROUTE_LINKS.Landing} isAuthorized={!isLoggedIn} component={LoginPage} - redirectPath={ROUTE_LINKS.Pins} + redirectPath={ROUTE_LINKS.Cids} redirectToSource /> From dce4773ad59b1b2d6736ffc791ca4de40a759258 Mon Sep 17 00:00:00 2001 From: Thibaut Sardan Date: Tue, 8 Jun 2021 15:21:17 +0200 Subject: [PATCH 08/11] in menus --- packages/storage-ui/src/Components/Layouts/AppNav.tsx | 2 +- packages/storage-ui/src/Components/Pages/CidsPage.tsx | 2 +- yarn.lock | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/storage-ui/src/Components/Layouts/AppNav.tsx b/packages/storage-ui/src/Components/Layouts/AppNav.tsx index 89c8240a4c..971078582b 100644 --- a/packages/storage-ui/src/Components/Layouts/AppNav.tsx +++ b/packages/storage-ui/src/Components/Layouts/AppNav.tsx @@ -258,7 +258,7 @@ const AppNav: React.FC = ({ navOpen, setNavOpen }: IAppNav) => { variant="h5" className={classes.navItemText} > - Pins + Cids { return (
- Pins + Cids Date: Wed, 9 Jun 2021 20:33:17 +0600 Subject: [PATCH 09/11] login on refresh - storage ui (#1109) * with local storage * local or session --- packages/storage-ui/src/App.tsx | 8 ++-- .../src/Components/StorageRoutes.tsx | 4 +- .../src/Contexts/StorageApiContext.tsx | 47 ++++++++++--------- .../src/Contexts/StorageContext.tsx | 20 ++++---- 4 files changed, 41 insertions(+), 38 deletions(-) diff --git a/packages/storage-ui/src/App.tsx b/packages/storage-ui/src/App.tsx index ed5ac2382a..e2fe1683ae 100644 --- a/packages/storage-ui/src/App.tsx +++ b/packages/storage-ui/src/App.tsx @@ -4,7 +4,7 @@ import { Web3Provider } from "@chainsafe/web3-context" import { ThemeSwitcher } from "@chainsafe/common-theme" import "@chainsafe/common-theme/dist/font-faces.css" import { Button, CssBaseline, Modal, Router, ToasterProvider, Typography } from "@chainsafe/common-components" -import FilesRoutes from "./Components/StorageRoutes" +import StorageRoutes from "./Components/StorageRoutes" import AppWrapper from "./Components/Layouts/AppWrapper" import { useHotjar } from "react-use-hotjar" import { LanguageProvider } from "./Contexts/LanguageContext" @@ -92,7 +92,7 @@ const App = () => { return ( { > - + diff --git a/packages/storage-ui/src/Components/StorageRoutes.tsx b/packages/storage-ui/src/Components/StorageRoutes.tsx index 29ad384938..0970100c3e 100644 --- a/packages/storage-ui/src/Components/StorageRoutes.tsx +++ b/packages/storage-ui/src/Components/StorageRoutes.tsx @@ -17,7 +17,7 @@ export const ROUTE_LINKS = { export const SETTINGS_PATHS = ["profile", "plan", "security"] as const export type SettingsPath = typeof SETTINGS_PATHS[number] -const FilesRoutes = () => { +const StorageRoutes = () => { const { isLoggedIn } = useStorageApi() return ( @@ -47,4 +47,4 @@ const FilesRoutes = () => { ) } -export default FilesRoutes +export default StorageRoutes diff --git a/packages/storage-ui/src/Contexts/StorageApiContext.tsx b/packages/storage-ui/src/Contexts/StorageApiContext.tsx index d332153515..6deae3924b 100644 --- a/packages/storage-ui/src/Contexts/StorageApiContext.tsx +++ b/packages/storage-ui/src/Contexts/StorageApiContext.tsx @@ -7,8 +7,8 @@ import axios from "axios" import { useLocalStorage, useSessionStorage } from "@chainsafe/browser-storage-hooks" export type { IdentityProvider as OAuthProvider } -const tokenStorageKey = "csf.refreshToken" -const isReturningUserStorageKey = "csf.isReturningUser" +const tokenStorageKey = "css.refreshToken" +const isReturningUserStorageKey = "css.isReturningUser" type StorageApiContextProps = { apiUrl?: string @@ -17,7 +17,7 @@ type StorageApiContextProps = { } type StorageApiContext = { - filesApiClient: IFilesApiClient + storageApiClient: IFilesApiClient isLoggedIn: boolean | undefined secured: boolean | undefined isReturningUser: boolean @@ -44,7 +44,7 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora const maintenanceMode = process.env.REACT_APP_MAINTENANCE_MODE === "true" const { wallet, onboard, checkIsReady, isReady, provider } = useWeb3() - const { localStorageRemove, localStorageGet, localStorageSet } = useLocalStorage() + const { canUseLocalStorage, localStorageRemove, localStorageGet, localStorageSet } = useLocalStorage() const { sessionStorageRemove, sessionStorageGet, sessionStorageSet } = useSessionStorage() // initializing api @@ -58,7 +58,7 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora }, [apiUrl, initialAxiosInstance] ) - const [filesApiClient, setFilesApiClient] = useState(initialApiClient) + const [storageApiClient, setStorageApiClient] = useState(initialApiClient) const [isLoadingUser, setIsLoadingUser] = useState(true) // access tokens @@ -78,8 +78,8 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora setRefreshToken(refreshToken) refreshToken.token && withLocalStorage && localStorageSet(tokenStorageKey, refreshToken.token) !withLocalStorage && sessionStorageSet(tokenStorageKey, refreshToken.token) - accessToken.token && filesApiClient.setToken(accessToken.token) - }, [filesApiClient, localStorageSet, sessionStorageSet, withLocalStorage]) + accessToken.token && storageApiClient.setToken(accessToken.token) + }, [storageApiClient, localStorageSet, sessionStorageSet, withLocalStorage]) const setReturningUser = () => { // set returning user @@ -140,8 +140,11 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora ) const apiClient = new FilesApiClient({}, apiUrl, axiosInstance) - const savedRefreshToken = localStorageGet(tokenStorageKey) - setFilesApiClient(apiClient) + const savedRefreshToken = withLocalStorage + ? localStorageGet(tokenStorageKey) + : sessionStorageGet(tokenStorageKey) + + setStorageApiClient(apiClient) if (!maintenanceMode && savedRefreshToken) { try { const { @@ -160,7 +163,7 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora initializeApiClient() // eslint-disable-next-line react-hooks/exhaustive-deps - }, []) + }, [canUseLocalStorage]) const selectWallet = async () => { if (onboard && !isReady) { @@ -194,8 +197,8 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora }, [refreshToken]) useEffect(() => { - if (accessToken && accessToken.token && filesApiClient) { - filesApiClient?.setToken(accessToken.token) + if (accessToken && accessToken.token && storageApiClient) { + storageApiClient?.setToken(accessToken.token) const decodedAccessToken = jwtDecode<{ perm: { secured?: string } }>( accessToken.token ) @@ -205,7 +208,7 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora setSecured(false) } } - }, [accessToken, filesApiClient]) + }, [accessToken, storageApiClient]) const isLoggedIn = () => { if (isLoadingUser) { @@ -225,7 +228,7 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora const getProviderUrl = async (provider: OAuthIdentityToken) => { try { - const { url } = await filesApiClient.getOauth2Provider(provider) + const { url } = await storageApiClient.getOauth2Provider(provider) return Promise.resolve(url) } catch { return Promise.reject("There was an error logging in") @@ -237,7 +240,7 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora const { access_token, refresh_token - } = await filesApiClient.postOauth2CodeGithub(code, state) + } = await storageApiClient.postOauth2CodeGithub(code, state) setTokensAndSave(access_token, refresh_token) setReturningUser() return Promise.resolve() @@ -258,7 +261,7 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora const { access_token, refresh_token - } = await filesApiClient.postOauth2CodeGoogle( + } = await storageApiClient.postOauth2CodeGoogle( code, state, scope, @@ -280,7 +283,7 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora const { access_token, refresh_token - } = await filesApiClient.postOauth2CodeFacebook(code, state) + } = await storageApiClient.postOauth2CodeFacebook(code, state) setTokensAndSave(access_token, refresh_token) setReturningUser() @@ -299,7 +302,7 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora } const signer = provider.getSigner() try { - const { token } = await filesApiClient.getWeb3Token() + const { token } = await storageApiClient.getWeb3Token() if (token) { const signature = await signer.signMessage(token) @@ -307,7 +310,7 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora const { access_token, refresh_token - } = await filesApiClient.postWeb3Token({ + } = await storageApiClient.postWeb3Token({ signature: signature, token: token, public_address: address @@ -325,7 +328,7 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora setAccessToken(undefined) setRefreshToken(undefined) setDecodedRefreshToken(undefined) - filesApiClient.setToken("") + storageApiClient.setToken("") localStorageRemove(tokenStorageKey) !withLocalStorage && sessionStorageRemove(tokenStorageKey) } @@ -333,7 +336,7 @@ const StorageApiProvider = ({ apiUrl, withLocalStorage = true, children }: Stora return ( { const context = React.useContext(StorageApiContext) if (context === undefined) { - throw new Error("useAuth must be used within a AuthProvider") + throw new Error("useStorage must be used within a StorageProvider") } return context } diff --git a/packages/storage-ui/src/Contexts/StorageContext.tsx b/packages/storage-ui/src/Contexts/StorageContext.tsx index 0b8ebe8d29..5e6662e14b 100644 --- a/packages/storage-ui/src/Contexts/StorageContext.tsx +++ b/packages/storage-ui/src/Contexts/StorageContext.tsx @@ -61,15 +61,15 @@ const REMOVE_UPLOAD_PROGRESS_DELAY = 5000 const StorageContext = React.createContext(undefined) const StorageProvider = ({ children }: StorageContextProps) => { - const { filesApiClient, isLoggedIn } = useStorageApi() - const [spaceUsed, setSpaceUsed] = useState(0) + const { storageApiClient, isLoggedIn } = useStorageApi() + const [spaceUsed] = useState(0) const [pins, setPins] = useState([]) const refreshPins = useCallback(() => { - filesApiClient.getAllPins() + storageApiClient.getAllPins() .then((pins) => setPins(pins.results || [])) .catch(console.error) - }, [filesApiClient]) + }, [storageApiClient]) useEffect(() => { isLoggedIn && refreshPins() @@ -91,7 +91,7 @@ const StorageProvider = ({ children }: StorageContextProps) => { // if (isLoggedIn) { // getSpaceUsage() // } - // }, [filesApiClient, isLoggedIn, pins]) + // }, [storageApiClient, isLoggedIn, pins]) // Reset encryption keys on log out useEffect(() => { @@ -105,7 +105,7 @@ const StorageProvider = ({ children }: StorageContextProps) => { [] ) - const [downloadsInProgress, dispatchDownloadsInProgress] = useReducer( + const [downloadsInProgress] = useReducer( downloadsInProgressReducer, [] ) @@ -130,10 +130,10 @@ const StorageProvider = ({ children }: StorageContextProps) => { const addPin = useCallback((cid: string) => { // Remove the as any once the api specs will be updated - filesApiClient.addPin(({ cid }) as any) + storageApiClient.addPin(({ cid }) as any) .then(res => console.log(res)) .catch(console.error) - }, [filesApiClient]) + }, [storageApiClient]) const createPin = useCallback(async (bucketId: string, files: File[], path: string) => { const bucket = pins.find(b => b.id === bucketId) @@ -199,7 +199,7 @@ const StorageProvider = ({ children }: StorageContextProps) => { // } // try { - // const result = await filesApiClient.getFileContent( + // const result = await storageApiClient.getFileContent( // { // path: path, // source: { @@ -215,7 +215,7 @@ const StorageProvider = ({ children }: StorageContextProps) => { // console.error(error) // return Promise.reject() // } - // }, [pins, filesApiClient]) + // }, [pins, storageApiClient]) // const downloadPin = useCallback(async (bucketId: string, itemToDownload: FileSystemItem, path: string) => { // const toastId = uuidv4() From e05382b0ec4fb2563c151238ca32c39750f31414 Mon Sep 17 00:00:00 2001 From: Thibaut Sardan Date: Thu, 10 Jun 2021 11:19:40 +0200 Subject: [PATCH 10/11] v2 api spec --- packages/storage-ui/package.json | 2 +- .../src/Contexts/StorageContext.tsx | 96 +++++++++---------- yarn.lock | 5 + 3 files changed, 54 insertions(+), 49 deletions(-) diff --git a/packages/storage-ui/package.json b/packages/storage-ui/package.json index 3b8b70a703..48fb8f624c 100644 --- a/packages/storage-ui/package.json +++ b/packages/storage-ui/package.json @@ -6,7 +6,7 @@ "@babel/core": "^7.12.10", "@babel/runtime": "^7.0.0", "@chainsafe/browser-storage-hooks": "^1.0.1", - "@chainsafe/files-api-client": "1.15.0-rc1", + "@chainsafe/files-api-client": "^2.0.0", "@chainsafe/web3-context": "1.1.4", "@lingui/core": "^3.7.2", "@lingui/react": "^3.7.2", diff --git a/packages/storage-ui/src/Contexts/StorageContext.tsx b/packages/storage-ui/src/Contexts/StorageContext.tsx index 0b8ebe8d29..253f6be65c 100644 --- a/packages/storage-ui/src/Contexts/StorageContext.tsx +++ b/packages/storage-ui/src/Contexts/StorageContext.tsx @@ -43,7 +43,7 @@ type StorageContext = { downloadsInProgress: DownloadProgress[] spaceUsed: number addPin: (cid: string) => void - createPin: (bucketId: string, files: File[], path: string) => Promise + // createPin: (bucketId: string, files: File[], path: string) => Promise // downloadPin: (bucketId: string, itemToDownload: FileSystemItem, path: string) => void // getPinContent: (bucketId: string, params: GetFileContentParams) => Promise refreshPins: () => void @@ -66,7 +66,7 @@ const StorageProvider = ({ children }: StorageContextProps) => { const [pins, setPins] = useState([]) const refreshPins = useCallback(() => { - filesApiClient.getAllPins() + filesApiClient.listPins() .then((pins) => setPins(pins.results || [])) .catch(console.error) }, [filesApiClient]) @@ -135,53 +135,53 @@ const StorageProvider = ({ children }: StorageContextProps) => { .catch(console.error) }, [filesApiClient]) - const createPin = useCallback(async (bucketId: string, files: File[], path: string) => { - const bucket = pins.find(b => b.id === bucketId) + // const createPin = useCallback(async (bucketId: string, files: File[], path: string) => { + // const bucket = pins.find(b => b.id === bucketId) - if (!bucket) { - console.error("No encryption key for this bucket is available.") - return - } + // if (!bucket) { + // console.error("No encryption key for this bucket is available.") + // return + // } - const id = uuidv4() - const uploadProgress: UploadProgress = { - id, - fileName: files[0].name, // TODO: Do we need this? - complete: false, - error: false, - noOfFiles: files.length, - progress: 0, - path - } - dispatchUploadsInProgress({ type: "add", payload: uploadProgress }) - try { - // TODO: Make API Request to upload here - - // setting complete - dispatchUploadsInProgress({ type: "complete", payload: { id } }) - setTimeout(() => { - dispatchUploadsInProgress({ type: "remove", payload: { id } }) - }, REMOVE_UPLOAD_PROGRESS_DELAY) - - return Promise.resolve() - } catch (error) { - console.error(error) - // setting error - let errorMessage = t`Something went wrong. We couldn't upload your file` - - // we will need a method to parse server errors - if (Array.isArray(error) && error[0].message.includes("conflict")) { - errorMessage = t`A file with the same name already exists` - } - dispatchUploadsInProgress({ - type: "error", - payload: { id, errorMessage } - }) - setTimeout(() => { - dispatchUploadsInProgress({ type: "remove", payload: { id } }) - }, REMOVE_UPLOAD_PROGRESS_DELAY) - } - }, [pins]) + // const id = uuidv4() + // const uploadProgress: UploadProgress = { + // id, + // fileName: files[0].name, // TODO: Do we need this? + // complete: false, + // error: false, + // noOfFiles: files.length, + // progress: 0, + // path + // } + // dispatchUploadsInProgress({ type: "add", payload: uploadProgress }) + // try { + // // TODO: Make API Request to upload here + + // // setting complete + // dispatchUploadsInProgress({ type: "complete", payload: { id } }) + // setTimeout(() => { + // dispatchUploadsInProgress({ type: "remove", payload: { id } }) + // }, REMOVE_UPLOAD_PROGRESS_DELAY) + + // return Promise.resolve() + // } catch (error) { + // console.error(error) + // // setting error + // let errorMessage = t`Something went wrong. We couldn't upload your file` + + // // we will need a method to parse server errors + // if (Array.isArray(error) && error[0].message.includes("conflict")) { + // errorMessage = t`A file with the same name already exists` + // } + // dispatchUploadsInProgress({ + // type: "error", + // payload: { id, errorMessage } + // }) + // setTimeout(() => { + // dispatchUploadsInProgress({ type: "remove", payload: { id } }) + // }, REMOVE_UPLOAD_PROGRESS_DELAY) + // } + // }, [pins]) // const getPinContent = useCallback(async ( // bucketId: string, @@ -271,7 +271,7 @@ const StorageProvider = ({ children }: StorageContextProps) => { Date: Thu, 10 Jun 2021 12:36:35 +0200 Subject: [PATCH 11/11] v2.1 --- packages/storage-ui/package.json | 2 +- yarn.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/storage-ui/package.json b/packages/storage-ui/package.json index 48fb8f624c..f45cc29cc4 100644 --- a/packages/storage-ui/package.json +++ b/packages/storage-ui/package.json @@ -6,7 +6,7 @@ "@babel/core": "^7.12.10", "@babel/runtime": "^7.0.0", "@chainsafe/browser-storage-hooks": "^1.0.1", - "@chainsafe/files-api-client": "^2.0.0", + "@chainsafe/files-api-client": "^2.1.0-rc-1", "@chainsafe/web3-context": "1.1.4", "@lingui/core": "^3.7.2", "@lingui/react": "^3.7.2", diff --git a/yarn.lock b/yarn.lock index 9b8da253fa..df28248954 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1664,16 +1664,16 @@ resolved "https://registry.yarnpkg.com/@chainsafe/browser-storage-hooks/-/browser-storage-hooks-1.0.1.tgz#26d32cde1999914db755a631e2643823c54959f7" integrity sha512-Q4b5gQAZnsRXKeADspd5isqfwwhhXjDk70y++YadufA6EZ3tf340oW0OVszp74KaGEw+CAYFGQR4X7bzpZ3x9Q== -"@chainsafe/files-api-client@1.15.0-rc1": - version "1.15.0-rc1" - resolved "https://npm.pkg.github.com/download/@chainsafe/files-api-client/1.15.0-rc1/5bc22c32c65bc7a434ba29038a9813d9c551d46f25a61dd5f7012c4d4d7717ba#605202cdb6aaaae354638dc66a206df13fb56084" - integrity sha512-tkew3fr9Mvd7OmMJSkT5fSEdm0GH/UQ/4XuaBJJeX3SkpRp+ig9o70ltDymqM+0fgKLR6fr3kpwR4FQjO/hu+w== - "@chainsafe/files-api-client@2.0.0": version "2.0.0" resolved "https://npm.pkg.github.com/download/@chainsafe/files-api-client/2.0.0/59fcd2bbb4c64e37edae6b31b05ab5e46e2d24bec5424afbe2eb7c2eaa8b9ea0#f2a93ee7a605eccf2ed64ca7c731a1de79f3e001" integrity sha512-28zvyqB8D8Itmsc31xy7gZHFcOg9J2b3BMZWgHNLQLtfJBfLWlE0gHS+CVPUrrPERf02Bbm79Z57qP96YJYOoA== +"@chainsafe/files-api-client@^2.1.0-rc-1": + version "2.1.0-rc-1" + resolved "https://npm.pkg.github.com/download/@chainsafe/files-api-client/2.1.0-rc-1/422fefb018a31955b3fdc525e5a1ea6f5cc6a04f80e2716e6667733c97e3888e#e7e69aa132ec6ccbb396f9b3fc1e6bc270b21162" + integrity sha512-UjKUyelAUpUu7aJTYUpZHEF8py7M2hiY1rBEmlQKOJOrivT5srkdBMPM2SQOzi93jnZm6AVQxYCO9MPOQoGaPA== + "@chainsafe/web3-context@1.1.4": version "1.1.4" resolved "https://registry.yarnpkg.com/@chainsafe/web3-context/-/web3-context-1.1.4.tgz#ce0f140af8ccf93af1a189fbdbd6f018b9bf5fb7"