UPD get uploaded info from codex api

frontend/src/components/uploadedItem/UploadedItemComponent.tsx

@@ -13,48 +13,13 @@ function UploadedItemComponent(props: { item: UploadedItemModel }) {
     <UploadedItemComponentWrapper>
       <div>
         <p>
-          <span>Name: </span>
-          {props.item.fileName}
-        </p>
-        <p>
-          <span>File size (bytes): </span>
-          {props.item.fileSize}
-        </p>
-      </div>
-      <div>
-        <p>
-          <span>Last Modified: </span>
-          {props.item.lastModified}
-        </p>
-        <p>
-          <span>Type: </span>
-          {props.item.type}
-        </p>
-      </div>
-      <div>
-        <p id="cid">
           <span>CID: </span>
-          {(props.item.status === UploadedItemStatus.UPLOADING &&
+          {props.item.cid}
-            "Uploading...") ||
+        </p>
-            (props.item.status === UploadedItemStatus.FAILED && (
+        <p>
-              <span style={{ color: constants.errorColor }}>Upload failed</span>
+          <span>Size: </span>
-            )) || (
+          {props.item.manifest.blockSize}
-              <span
-                style={{
-                  color: constants.successColor,
-                  wordBreak: "break-all",
-                }}
-              >
-                {props.item.cid}
-              </span>
-            )}
         </p>
-        <p>{props.item.status}</p>
-        {(props.item.status === UploadedItemStatus.UPLOADING && (
-          <CircularProgress size={24} />
-        )) ||
-          (props.item.status === UploadedItemStatus.UPLOADED && <MdCheck />) ||
-          (props.item.status === UploadedItemStatus.FAILED && <MdError />)}
       </div>
     </UploadedItemComponentWrapper>
   );

frontend/src/data/models/UploadedItemModel.ts

@@ -6,11 +6,14 @@ enum UploadedItemStatus {
 
 type UploadedItemModel = {
   cid: string;
-  fileName: string;
+  manifest: Manifest;
-  fileSize: number;
+};
-  lastModified: string;
+
-  type: string;
+type Manifest = {
-  status: UploadedItemStatus;
+  treeCid: string;
+  datasetSize: number;
+  blockSize: number;
+  protected: boolean;
 };
 
 export default UploadedItemModel;

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<UploadedItemModel[]>(uploads);
+  var files = useRef<UploadedItemModel[]>(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([]);
-    // setUploads([]);
+    setIsLoading(true);
-  }, [uploads]);
+    // 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);
+          } catch (error) {
-            setUploads(filesCopy.current);
+            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 });