mirror of
https://github.com/codex-storage/codex-frontend.git
synced 2025-03-01 02:30:49 +00:00
UPD prepared marketplace pages for development
This commit is contained in:
Shaun Orssaud
parent
7b12a4563c
commit
6b524e610a
@ -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() {
|
||||
<Router>
|
||||
<AppWrapper>
|
||||
<NavigationRail />
|
||||
|
||||
<Routes>
|
||||
<Route path="/settings" element={<SettingsPage />} />
|
||||
<Route
|
||||
path="/marketplace"
|
||||
element={PlacehoderPage({ name: "Marketplace" })}
|
||||
/>
|
||||
<Route path="/marketplace" element={<MarketplacePage/>}/>
|
||||
<Route path="/" element={<DataPage />} />
|
||||
<Route path="/node" element={PlacehoderPage({ name: "Node" })} />
|
||||
<Route path="/debug" element={DebugPage()} />
|
||||
|
||||
@ -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
|
||||
|
||||
32
frontend/src/pages/marketplace/Marketplace.tsx
Normal file
32
frontend/src/pages/marketplace/Marketplace.tsx
Normal file
@ -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 (
|
||||
<div>
|
||||
<TabBarView tabIcons={[MdFileUpload, MdFileDownload]}>
|
||||
<UploadTab />
|
||||
<TabBarViewPage>
|
||||
<DownloadTab />
|
||||
</TabBarViewPage>
|
||||
</TabBarView>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default MarketplacePage;
|
||||
|
||||
const TabBarViewPage = styled.div`
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
`;
|
||||
150
frontend/src/pages/marketplace/tabs/available/AvailableTab.tsx
Normal file
150
frontend/src/pages/marketplace/tabs/available/AvailableTab.tsx
Normal file
@ -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<UploadedItemModel[]>(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 (
|
||||
<AvailableTabWrapper>
|
||||
<div>
|
||||
</div>
|
||||
</AvailableTabWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
`;
|
||||
117
frontend/src/pages/marketplace/tabs/create/CreateTab.tsx
Normal file
117
frontend/src/pages/marketplace/tabs/create/CreateTab.tsx
Normal file
@ -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 (
|
||||
<CreateTabWrapper>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="CID"
|
||||
onChange={(e) => {
|
||||
setFtdCid(e.target.value);
|
||||
}}
|
||||
value={ftdCid}
|
||||
/>
|
||||
<div id="divider"></div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Contract Parameters"
|
||||
onChange={(e) => setFilename(e.target.value)}
|
||||
/>
|
||||
<button onClick={() => download(ftdCid)}>Download</button>
|
||||
</CreateTabWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
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%;
|
||||
}
|
||||
`;
|
||||
Loading…
x
Reference in New Issue
Block a user