From 6b524e610a9c910e1222575fff3fec85fb9fc149 Mon Sep 17 00:00:00 2001 From: Shaun Orssaud <72015533+Shorssaud@users.noreply.github.com> Date: Fri, 10 Nov 2023 15:56:06 +0900 Subject: [PATCH] UPD prepared marketplace pages for development --- frontend/src/App.tsx | 7 +- .../src/pages/data/tabs/upload/UploadTab.tsx | 2 - .../src/pages/marketplace/Marketplace.tsx | 32 ++++ .../tabs/available/AvailableTab.tsx | 150 ++++++++++++++++++ .../marketplace/tabs/create/CreateTab.tsx | 117 ++++++++++++++ 5 files changed, 301 insertions(+), 7 deletions(-) create mode 100644 frontend/src/pages/marketplace/Marketplace.tsx create mode 100644 frontend/src/pages/marketplace/tabs/available/AvailableTab.tsx create mode 100644 frontend/src/pages/marketplace/tabs/create/CreateTab.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index a15834b..6391e93 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -4,6 +4,7 @@ import styled from "styled-components"; import DataPage from "./pages/data/DataPage"; import DebugPage from "./pages/debug/DebugPage"; import SettingsPage from "./pages/settings/SettingsPage"; +import MarketplacePage from "./pages/marketplace/Marketplace"; function PlacehoderPage(props: { name: string }) { return ( @@ -24,13 +25,9 @@ export default function App() { - } /> - + }/> } /> diff --git a/frontend/src/pages/data/tabs/upload/UploadTab.tsx b/frontend/src/pages/data/tabs/upload/UploadTab.tsx index adb44e9..ae32295 100644 --- a/frontend/src/pages/data/tabs/upload/UploadTab.tsx +++ b/frontend/src/pages/data/tabs/upload/UploadTab.tsx @@ -55,10 +55,8 @@ function UploadTab() { }, }) .then((response) => { - console.log(newCid); newCid = response.data; }); - console.log(newCid); filesCopy.current = filesCopy.current.filter( (file) => file.cid !== cid diff --git a/frontend/src/pages/marketplace/Marketplace.tsx b/frontend/src/pages/marketplace/Marketplace.tsx new file mode 100644 index 0000000..875f76d --- /dev/null +++ b/frontend/src/pages/marketplace/Marketplace.tsx @@ -0,0 +1,32 @@ +import React from "react"; +import TabBarView from "../../components/layout/tabBarView/TabBarView"; +import styled from "styled-components"; + +import { MdFileUpload, MdFileDownload } from "react-icons/md"; +import UploadTab from "./tabs/available/AvailableTab"; +import DownloadTab from "./tabs/create/CreateTab"; + +function MarketplacePage() { + return ( +
+ + + + + + +
+ ); +} + +export default MarketplacePage; + +const TabBarViewPage = styled.div` + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + width: 100%; +`; diff --git a/frontend/src/pages/marketplace/tabs/available/AvailableTab.tsx b/frontend/src/pages/marketplace/tabs/available/AvailableTab.tsx new file mode 100644 index 0000000..50719a5 --- /dev/null +++ b/frontend/src/pages/marketplace/tabs/available/AvailableTab.tsx @@ -0,0 +1,150 @@ +import { useCallback, useEffect, useRef } from "react"; +import { useDropzone } from "react-dropzone"; +import styled from "styled-components"; +import UploadedItemModel, { + UploadedItemStatus, +} from "../../../../data/models/UploadedItemModel"; +import UploadedItemComponent from "../../../../components/uploadedItem/UploadedItemComponent"; +import axios from "axios"; + +import { useDexyStore } from "../../../../store"; +import constants from "../../../../util/Constants"; + +function AvailableTab() { +// const { uploads, setUploads, nodeInfo } = useDexyStore(); +// var filesCopy = useRef(uploads); + +// useEffect(() => { +// console.log(uploads); +// // setUploads([]); +// }, [uploads]); + +// const onDrop = useCallback( +// async (acceptedFiles: File[]) => { +// console.log(acceptedFiles); +// for (let i = 0; i < acceptedFiles.length; i++) { +// 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); + +// var newCid = ""; +// try { +// await axios +// .post(`/api/codex/v1/upload`, bytes, { +// headers: (nodeInfo.auth !== null && { +// "Base-Url": nodeInfo.nodeToConnectTo || nodeInfo.baseUrl, +// "Content-Type": "application/octet-stream", +// "Auth-String": nodeInfo.auth, +// }) || { +// "Base-Url": nodeInfo.nodeToConnectTo || nodeInfo.baseUrl, +// "Content-Type": "application/octet-stream", +// }, +// }) +// .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); +// } +// console.log(cid + acceptedFiles[i].name); +// resolve("done"); +// }); +// } +// }, +// [setUploads, filesCopy, nodeInfo] +// ); + +// const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop }); + + return ( + +
+
+ + ); +} + +export default AvailableTab; + +const AvailableTabWrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + width: 100%; + padding: 16px; + + #dropzone { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + border: 2px dashed #9e9e9e; + border-radius: 8px; + } + + p { + font-size: 1rem; + text-align: center; + } + + #uploaded-items-wrap { + display: flex; + flex-direction: column; + align-items: center; + justify-content: start; + width: 100%; + overflow-y: scroll; + margin-top: 16px; + } +`; diff --git a/frontend/src/pages/marketplace/tabs/create/CreateTab.tsx b/frontend/src/pages/marketplace/tabs/create/CreateTab.tsx new file mode 100644 index 0000000..e86e5dd --- /dev/null +++ b/frontend/src/pages/marketplace/tabs/create/CreateTab.tsx @@ -0,0 +1,117 @@ +import { useState } from "react"; +import constants from "../../../../util/Constants"; +import styled from "styled-components"; +import { useDexyStore } from "../../../../store"; + +function CreateTab() { + const { ftdCid, setFtdCid, nodeInfo } = useDexyStore(); + + const [filename, setFilename] = useState("file"); + + function download(cid: string) { + // console.log(filename); + // console.log(cid); + // fetch( + // `/api/codex/v1/download/${cid}`, + // { + // headers: + // (nodeInfo.auth !== null && { + // Authorization: + // (nodeInfo.auth && "Basic " + btoa(nodeInfo.auth)) || "", + // }) || + // {}, + // } + // ) + // .then((response) => response.blob()) + // .then((blob) => { + // const url = window.URL.createObjectURL(new Blob([blob])); + // const link = document.createElement("a"); + // link.href = url; + // link.setAttribute("download", filename); + // document.body.appendChild(link); + // link.click(); + // link.parentNode?.removeChild(link); + // }); + } + + return ( + + { + setFtdCid(e.target.value); + }} + value={ftdCid} + /> +
+ setFilename(e.target.value)} + /> + + + ); +} + +export default CreateTab; + +const CreateTabWrapper = styled.div` + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + width: 75%; + + input { + flex: 3; + height: 60px; + padding: 10px 20px; + border: none; + background-color: ${constants.surfaceColor}; + color: ${constants.onSurfaceColor}; + width: 100%; + } + + input:focus { + outline: none; + border: 2px solid ${constants.primaryColor}; + } + + input:nth-child(1) { + border-top-left-radius: 8px; + border-bottom-left-radius: 8px; + } + + #divider { + width: 2.5px; + height: 60px; + background-color: #555555; + } + + button { + flex: 2; + height: 60px; + border: none; + background-color: ${constants.primaryColor}; + color: ${constants.onPrimaryColor}; + font-size: 1rem; + cursor: pointer; + border-top-right-radius: 8px; + border-bottom-right-radius: 8px; + width: 100%; + } + + @media (max-width: 1180px) { + width: 80%; + } + + @media (max-width: 768px) { + width: 85%; + } + + @media (max-width: 450px) { + width: 90%; + } +`;