mirror of
https://github.com/logos-storage/logos-storage-frontend.git
synced 2026-01-02 13:23:09 +00:00
FIX can now view status of rosc
This commit is contained in:
Shaun Orssaud
parent
927366cb85
commit
93df34b45e
@ -0,0 +1,89 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { CircularProgress } from "@mui/material";
|
||||
import { MdCheck, MdError } from "react-icons/md";
|
||||
import RequestForStorageContractModel from "../../data/models/RequestForStorageContractModel";
|
||||
import constants from "../../util/Constants";
|
||||
|
||||
function RequestForStorageContractComponent(props: { item: RequestForStorageContractModel }) {
|
||||
return (
|
||||
<RequestForStorageContractComponentWrapper>
|
||||
<div>
|
||||
<p>
|
||||
<span>Request ID: </span>
|
||||
{props.item.requestId}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
<span>Client: </span>
|
||||
{props.item.request.client}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
<span>Content: </span>
|
||||
{props.item.request.content.cid}
|
||||
</p>
|
||||
</div>
|
||||
</RequestForStorageContractComponentWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
export default RequestForStorageContractComponent;
|
||||
|
||||
const RequestForStorageContractComponentWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-color: ${constants.surfaceColor};
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
width: 80%;
|
||||
margin-top: 20px;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
div p:nth-child(1) {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
div p:nth-child(2) {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
p {
|
||||
flex: 1;
|
||||
font-size: 1rem;
|
||||
text-align: start;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
p span {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#cid {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
@media (max-width: 450px) {
|
||||
width: 95%;
|
||||
}
|
||||
`;
|
||||
@ -1,17 +1,31 @@
|
||||
enum RequestForStorageContractStatus {
|
||||
UPLOADING = "UPLOADING",
|
||||
UPLOADED = "UPLOADED",
|
||||
FAILED = "FAILED",
|
||||
}
|
||||
|
||||
type RequestForStorageContractModel = {
|
||||
purchaseid: string;
|
||||
lastModified: string;
|
||||
reward: string;
|
||||
duration: string;
|
||||
collateral: string;
|
||||
status: RequestForStorageContractStatus;
|
||||
requestId: string;
|
||||
request: Request;
|
||||
state: string;
|
||||
error: string;
|
||||
};
|
||||
|
||||
export default RequestForStorageContractModel;
|
||||
export { RequestForStorageContractStatus };
|
||||
type Request = {
|
||||
client: string;
|
||||
ask: Ask;
|
||||
content: Content;
|
||||
expiry: string;
|
||||
nonce: string;
|
||||
id: string;
|
||||
}
|
||||
|
||||
type Ask = {
|
||||
slots: number;
|
||||
slotSize: string;
|
||||
duration: string;
|
||||
proofProbability: string;
|
||||
reward: string;
|
||||
collateral: string;
|
||||
maxSlotLoss: number;
|
||||
}
|
||||
|
||||
type Content = {
|
||||
cid: string;
|
||||
}
|
||||
|
||||
export default RequestForStorageContractModel;
|
||||
@ -3,16 +3,16 @@ import TabBarView from "../../components/layout/tabBarView/TabBarView";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { MdFileUpload, MdFileDownload } from "react-icons/md";
|
||||
import UploadTab from "./tabs/status/status";
|
||||
import UploadTab from "./tabs/status/StatusTab";
|
||||
import DownloadTab from "./tabs/create/CreateTab";
|
||||
import AvailableTab from "./tabs/status/status";
|
||||
import StatusTab from "./tabs/status/StatusTab";
|
||||
import CreateTab from "./tabs/create/CreateTab";
|
||||
|
||||
function MarketplacePage() {
|
||||
return (
|
||||
<div>
|
||||
<TabBarView tabIcons={[MdFileUpload, MdFileDownload, MdFileUpload, MdFileDownload]}>
|
||||
<AvailableTab />
|
||||
<StatusTab />
|
||||
<TabBarViewPage>
|
||||
<CreateTab />
|
||||
</TabBarViewPage>
|
||||
|
||||
109
frontend/src/pages/marketplace/tabs/status/StatusTab.tsx
Normal file
109
frontend/src/pages/marketplace/tabs/status/StatusTab.tsx
Normal file
@ -0,0 +1,109 @@
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useDropzone } from "react-dropzone";
|
||||
import styled from "styled-components";
|
||||
import RequestForStorageContractModel from "../../../../data/models/RequestForStorageContractModel";
|
||||
import axios from "axios";
|
||||
|
||||
import { useDexyStore } from "../../../../store";
|
||||
import constants from "../../../../util/Constants";
|
||||
import RequestForStorageContractComponent from "../../../../components/RequestForStorageItem/RequestForStorageItemComponent";
|
||||
|
||||
function StatusTab() {
|
||||
const { storageRequests, setStorageRequests, nodeInfo } = useDexyStore();
|
||||
const purchaseIds = useRef<string[]>([]);
|
||||
const purchaseInfo = useRef<RequestForStorageContractModel[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsLoading(true);
|
||||
// Fetch purchase IDs
|
||||
fetch(`/api/codex/v1/storage/purchases`, {
|
||||
headers: {
|
||||
Authorization: nodeInfo.auth ? "Basic " + btoa(nodeInfo.auth) : "",
|
||||
},
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
purchaseIds.current = data;
|
||||
setIsLoading(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error fetching purchase IDs:", error);
|
||||
setIsLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (purchaseIds.current.length > 0) {
|
||||
setIsLoading(true);
|
||||
// Fetch purchase info for each purchase ID
|
||||
Promise.all(
|
||||
purchaseIds.current.map((purchaseId) =>
|
||||
fetch(`/api/codex/v1/storage/purchases/${purchaseId}`, {
|
||||
headers: {
|
||||
Authorization: nodeInfo.auth ? "Basic " + btoa(nodeInfo.auth) : "",
|
||||
},
|
||||
}).then((response) => response.json())
|
||||
)
|
||||
)
|
||||
.then((data) => {
|
||||
purchaseInfo.current = data;
|
||||
setIsLoading(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error fetching purchase info:", error);
|
||||
setIsLoading(false);
|
||||
});
|
||||
}
|
||||
}, [purchaseIds.current]);
|
||||
|
||||
useEffect(() => {
|
||||
if (purchaseInfo.current.length !== storageRequests.length) {
|
||||
setStorageRequests(purchaseInfo.current);
|
||||
}
|
||||
}, [purchaseInfo.current]);
|
||||
|
||||
return (
|
||||
<StatusTabWrapper>
|
||||
<div
|
||||
id="request-wrap"
|
||||
style={{
|
||||
maxHeight: purchaseIds.current.length > 0 ? "60vh" : "0%",
|
||||
}}
|
||||
>
|
||||
{isLoading ? (
|
||||
<p>Loading...</p>
|
||||
) : (
|
||||
storageRequests.map((item) => (
|
||||
<RequestForStorageContractComponent
|
||||
item={item}
|
||||
key={item.requestId}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</StatusTabWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
export default StatusTab;
|
||||
|
||||
const StatusTabWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
|
||||
#request-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
width: 100%;
|
||||
overflow-y: scroll;
|
||||
margin-top: 16px;
|
||||
}
|
||||
`;
|
||||
@ -1,92 +0,0 @@
|
||||
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() {
|
||||
// fetch(
|
||||
// `/api/codex/v1/storage/request/${cid}`,
|
||||
// {
|
||||
// headers:
|
||||
// (nodeInfo.auth !== null && {
|
||||
// Authorization:
|
||||
// (nodeInfo.auth && "Basic " + btoa(nodeInfo.auth)) || "",
|
||||
// }) ||
|
||||
// {},
|
||||
// body: JSON.stringify({
|
||||
// reward: reward,
|
||||
// duration: duration,
|
||||
// proofProbability: proofProbability,
|
||||
// collateral: collateral
|
||||
// })
|
||||
// }
|
||||
// )
|
||||
// // create a popup in the browser to show if the upload was successful
|
||||
// .then((response) => {
|
||||
// if (response.status === 200) {
|
||||
// alert("Upload successful!");
|
||||
// } else {
|
||||
// alert("Upload failed!");
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
return (
|
||||
<AvailableTabWrapper>
|
||||
{/* <div
|
||||
id="uploaded-items-wrap"
|
||||
style={{
|
||||
maxHeight: uploads.length > 0 ? "60vh" : "0%",
|
||||
}}
|
||||
>
|
||||
{uploads.map((file) => (
|
||||
<UploadedItemComponent item={file} key={file.cid} />
|
||||
))}
|
||||
</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;
|
||||
}
|
||||
`;
|
||||
Loading…
x
Reference in New Issue
Block a user