logos-storage/logos-storage-frontend
1
0
Fork 0
mirror of https://github.com/logos-storage/logos-storage-frontend.git synced 2026-01-02 13:23:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

UPD get uploaded info from codex api

Browse Source
This commit is contained in:
Shaun Orssaud 2023-11-22 11:54:54 +09:00
parent 93df34b45e
commit a1af932c82
3 changed files with 40 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/components/uploadedItem/UploadedItemComponent.tsx
View File

@ -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 &&
"Uploading...") ||
(props.item.status === UploadedItemStatus.FAILED && (
<span style={{ color: constants.errorColor }}>Upload failed</span>
)) || (
<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 />)}
<p>
<span>Size: </span>
{props.item.manifest.blockSize}
</p>
</div>
</UploadedItemComponentWrapper>
);

13
frontend/src/data/models/UploadedItemModel.ts
View File

@ -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;

78
frontend/src/pages/data/tabs/upload/UploadTab.tsx
View File

@ -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([]);
}, [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 });