FIX can now view status of rosc

frontend/src/components/RequestForStorageItem/RequestForStorageItemComponent.tsx

@@ -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%;
+  }
+`;

frontend/src/data/models/RequestForStorageContractModel.ts

@@ -1,17 +1,31 @@
-enum RequestForStorageContractStatus {
-    UPLOADING = "UPLOADING",
-    UPLOADED = "UPLOADED",
-    FAILED = "FAILED",
-}
-
 type RequestForStorageContractModel = {
-    purchaseid: string;
+    requestId: string;
-    lastModified: string;
+    request: Request;
-    reward: string;
+    state: string;
-    duration: string;
+    error: string;
-    collateral: string;
-    status: 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;
-export { RequestForStorageContractStatus };

frontend/src/pages/marketplace/Marketplace.tsx

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

frontend/src/pages/marketplace/tabs/status/StatusTab.tsx

@@ -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;
+  }
+`;

frontend/src/pages/marketplace/tabs/status/status.tsx

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