diff --git a/frontend/src/components/uploadedItem/UploadedItemComponent.tsx b/frontend/src/components/uploadedItem/UploadedItemComponent.tsx index 4164301..ddd6b50 100644 --- a/frontend/src/components/uploadedItem/UploadedItemComponent.tsx +++ b/frontend/src/components/uploadedItem/UploadedItemComponent.tsx @@ -13,48 +13,13 @@ function UploadedItemComponent(props: { item: UploadedItemModel }) {

- Name: - {props.item.fileName} -

-

- File size (bytes): - {props.item.fileSize} -

-
-
-

- Last Modified: - {props.item.lastModified} -

-

- Type: - {props.item.type} -

-
-
-

CID: - {(props.item.status === UploadedItemStatus.UPLOADING && - "Uploading...") || - (props.item.status === UploadedItemStatus.FAILED && ( - Upload failed - )) || ( - - {props.item.cid} - - )} + {props.item.cid} +

+

+ Size: + {props.item.manifest.blockSize}

-

{props.item.status}

- {(props.item.status === UploadedItemStatus.UPLOADING && ( - - )) || - (props.item.status === UploadedItemStatus.UPLOADED && ) || - (props.item.status === UploadedItemStatus.FAILED && )}
); diff --git a/frontend/src/data/models/UploadedItemModel.ts b/frontend/src/data/models/UploadedItemModel.ts index c9d4a95..a15d27d 100644 --- a/frontend/src/data/models/UploadedItemModel.ts +++ b/frontend/src/data/models/UploadedItemModel.ts @@ -6,11 +6,14 @@ enum UploadedItemStatus { type UploadedItemModel = { cid: string; - fileName: string; - fileSize: number; - lastModified: string; - type: string; - status: UploadedItemStatus; + manifest: Manifest; +}; + +type Manifest = { + treeCid: string; + datasetSize: number; + blockSize: number; + protected: boolean; }; export default UploadedItemModel; diff --git a/frontend/src/pages/data/tabs/upload/UploadTab.tsx b/frontend/src/pages/data/tabs/upload/UploadTab.tsx index 2c622d5..4be4247 100644 --- a/frontend/src/pages/data/tabs/upload/UploadTab.tsx +++ b/frontend/src/pages/data/tabs/upload/UploadTab.tsx @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useRef } from "react"; +import { useCallback, useEffect, useRef, useState } from "react"; import { useDropzone } from "react-dropzone"; import styled from "styled-components"; import UploadedItemModel, { @@ -12,12 +12,31 @@ import constants from "../../../../util/Constants"; function UploadTab() { const { uploads, setUploads, nodeInfo } = useDexyStore(); - var filesCopy = useRef(uploads); + var files = useRef(uploads); + const [isLoading, setIsLoading] = useState(false); + function getDatas() { + fetch(`/api/codex/v1/data`, { + headers: { + Authorization: nodeInfo.auth ? "Basic " + btoa(nodeInfo.auth) : "", + }, + }) + .then((response) => response.json()) + .then((data) => { + setUploads(data); + setIsLoading(false); + }) + .catch((error) => { + console.error("Error fetching data: ", error); + setIsLoading(false); + }); + } useEffect(() => { - console.log(uploads); - // setUploads([]); - }, [uploads]); + setUploads([]); + setIsLoading(true); + // Fetch purchase IDs + getDatas(); + }, []); const onDrop = useCallback( async (acceptedFiles: File[]) => { @@ -26,17 +45,6 @@ function UploadTab() { new Promise(async (resolve, reject) => { let cid: string = (Math.random() * 1000000).toString(); console.log(cid + acceptedFiles[i].name); - filesCopy.current.push({ - cid: cid, - fileName: acceptedFiles[i].name, - fileSize: acceptedFiles[i].size, - lastModified: new Date( - acceptedFiles[i].lastModified - ).toLocaleString(), - type: acceptedFiles[i].type, - status: UploadedItemStatus.UPLOADING, - }); - setUploads(filesCopy.current); var bytes = await acceptedFiles[i].arrayBuffer(); bytes = new Uint8Array(bytes); @@ -57,48 +65,16 @@ function UploadTab() { .then((response) => { newCid = response.data; }); - - filesCopy.current = filesCopy.current.filter( - (file) => file.cid !== cid - ); - filesCopy.current.push({ - cid: newCid, - fileName: acceptedFiles[i].name, - fileSize: acceptedFiles[i].size, - lastModified: new Date( - acceptedFiles[i].lastModified - ).toLocaleString(), - type: acceptedFiles[i].type, - status: UploadedItemStatus.UPLOADED, - }); - setUploads(filesCopy.current); - console.log("filesCopy"); - console.log(filesCopy.current); - } catch (error) { - console.log(error); - filesCopy.current = filesCopy.current.filter( - (file) => file.cid !== cid - ); - filesCopy.current.push({ - cid: "Failed", - fileName: acceptedFiles[i].name, - fileSize: acceptedFiles[i].size, - lastModified: new Date( - acceptedFiles[i].lastModified - ).toLocaleString(), - type: acceptedFiles[i].type, - status: UploadedItemStatus.FAILED, - }); console.log("filesCopy failed"); - console.log(filesCopy.current); - setUploads(filesCopy.current); + } catch (error) { + console.error("Error uploading file: ", error); } console.log(cid + acceptedFiles[i].name); resolve("done"); }); } }, - [setUploads, filesCopy, nodeInfo] + [setUploads, nodeInfo] ); const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });