From 738c74cab3acba00b28a67ce541d1f837a201a52 Mon Sep 17 00:00:00 2001 From: Lucas Jackson Date: Thu, 7 Mar 2024 14:14:27 -0800 Subject: [PATCH] UI - Update content retrieval with download api (#398) * update ui indexify and update content retrieval with download api * wip * update getindexify package * version bump --- Cargo.lock | 2 +- Cargo.toml | 2 +- ui/package-lock.json | 8 +-- ui/package.json | 2 +- ui/src/components/ContentTable.tsx | 4 +- ui/src/routes/Namespace/content.tsx | 81 ++++++++++++----------------- 6 files changed, 42 insertions(+), 57 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index e18a9b794..7da5fd5ee 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -3029,7 +3029,7 @@ dependencies = [ [[package]] name = "indexify" -version = "0.0.11" +version = "0.0.12" dependencies = [ "anyerror", "anyhow", diff --git a/Cargo.toml b/Cargo.toml index d36f9b30f..8c7ccd5a7 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "indexify" -version = "0.0.11" +version = "0.0.12" edition = "2021" authors = ["Diptanu Gon Choudhury "] build = "build.rs" diff --git a/ui/package-lock.json b/ui/package-lock.json index c08cf2c9c..3f4ac6619 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -23,7 +23,7 @@ "@types/react-router-dom": "^5.3.3", "axios": "^1.6.7", "crypto": "^1.0.1", - "getindexify": "^0.0.15", + "getindexify": "^0.0.17", "moment": "^2.30.1", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -9466,9 +9466,9 @@ } }, "node_modules/getindexify": { - "version": "0.0.15", - "resolved": "https://registry.npmjs.org/getindexify/-/getindexify-0.0.15.tgz", - "integrity": "sha512-maHTfInoxpIioYavbo4j4MEnq/Ni24VRkpnfDhqbpcIOnGdmrkHwm3kJkJITSNtvqHk7Of72UQ/KKt/2/z56tw==", + "version": "0.0.17", + "resolved": "https://registry.npmjs.org/getindexify/-/getindexify-0.0.17.tgz", + "integrity": "sha512-pAm+xj82hAWmLDzvZHpKyyyoooFkydsfCcvDvSjFpBLkFAUavgmOQb6hikimf636GcN99tpA/nIF2KJ0SKF4xw==", "dependencies": { "axios": "^1.6.7" } diff --git a/ui/package.json b/ui/package.json index 8edcefb46..186708b7f 100644 --- a/ui/package.json +++ b/ui/package.json @@ -19,7 +19,7 @@ "@types/react-router-dom": "^5.3.3", "axios": "^1.6.7", "crypto": "^1.0.1", - "getindexify": "^0.0.15", + "getindexify": "^0.0.17", "moment": "^2.30.1", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/ui/src/components/ContentTable.tsx b/ui/src/components/ContentTable.tsx index c303994b4..9df5f36ea 100644 --- a/ui/src/components/ContentTable.tsx +++ b/ui/src/components/ContentTable.tsx @@ -188,8 +188,8 @@ const ContentTable = ({ width: 220, }, { - field: "content_type", - headerName: "ContentType", + field: "mime_type", + headerName: "Mime Type", width: 150, }, { diff --git a/ui/src/routes/Namespace/content.tsx b/ui/src/routes/Namespace/content.tsx index 511567e50..5850eae55 100644 --- a/ui/src/routes/Namespace/content.tsx +++ b/ui/src/routes/Namespace/content.tsx @@ -1,7 +1,7 @@ import { useLoaderData, LoaderFunctionArgs, redirect } from "react-router-dom"; import { Typography, Stack, Breadcrumbs, Box } from "@mui/material"; -import { IndexifyClient, IContent, ITask } from "getindexify"; -import React from "react"; +import { IContentMetadata, IndexifyClient, ITask } from "getindexify"; +import React, { useEffect, useState } from "react"; import TasksTable from "../../components/TasksTable"; import { Link } from "react-router-dom"; @@ -14,72 +14,57 @@ export async function loader({ params }: LoaderFunctionArgs) { const tasks = await client .getTasks() .then((tasks) => tasks.filter((t) => t.content_metadata.id === contentId)); - const content = await client.getContentById(contentId); - return { namespace, tasks, contentId, content }; + const contentMetadata = await client.getContentById(contentId); + return { client, namespace, tasks, contentId, contentMetadata }; } const ContentPage = () => { - const { namespace, tasks, contentId, content } = useLoaderData() as { - namespace: string; - tasks: ITask[]; - contentId: string; - content: IContent; - }; - - function byteArrayToBlob(byteArray: number[]): Blob { - const arrayBuffer = new ArrayBuffer(byteArray.length); - const uint8Array = new Uint8Array(arrayBuffer); - for (let i = 0; i < byteArray.length; i++) { - uint8Array[i] = byteArray[i]; - } - return new Blob([uint8Array]); - } - - function bytesToString(byteArray: number[]) { - const chunkSize = 10000; - const decoder = new TextDecoder("utf-8"); - let result = ""; - - for (let i = 0; i < byteArray.length; i += chunkSize) { - const chunk = byteArray.slice(i, i + chunkSize); - result += decoder.decode(new Uint8Array(chunk), { stream: true }); - } - - // Decode any remaining parts of the byteArray - result += decoder.decode(); // Flush the decoder's state - return result; - } + const { client, namespace, tasks, contentId, contentMetadata } = + useLoaderData() as { + namespace: string; + tasks: ITask[]; + contentId: string; + contentMetadata: IContentMetadata; + client: IndexifyClient; + }; + const [textContent, setTextContent] = useState(""); + useEffect(() => { + client.downloadContent(contentId).then((data) => { + setTextContent(data); + }); + }, [client, contentId]); + const renderContent = () => { - if (content.content_type.startsWith("image")) { - const blob = byteArrayToBlob(content.bytes); + if (contentMetadata.mime_type.startsWith("image")) { return ( content ); - } else if (content.content_type.startsWith("audio")) { - const blob = byteArrayToBlob(content.bytes); + } else if (contentMetadata.mime_type.startsWith("audio")) { return ( ); - } else if (content.content_type.startsWith("video")) { - const blob = byteArrayToBlob(content.bytes); + } else if (contentMetadata.mime_type.startsWith("video")) { return (