From 52217354f0281db31cf3a83004e01920db7e5bc3 Mon Sep 17 00:00:00 2001
From: Shaun Orssaud <shaun.orssaud@gmail.com>
Date: Fri, 5 Jan 2024 17:24:47 +0900
Subject: [PATCH] Modified error messages for post requests

---
 docker-compose.yml                            |   2 +-
 .../pages/data/tabs/download/DownloadTab.tsx  |  79 ++++++++-----
 .../src/pages/data/tabs/upload/UploadTab.tsx  |  69 ++++++-----
 .../tabs/Availability/OfferStorage.tsx        | 110 ++++++++++--------
 .../pages/marketplace/tabs/Rosc/CreateTab.tsx |  98 +++++++++-------
 5 files changed, 216 insertions(+), 142 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index e12c35d..1834a4a 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -8,4 +8,4 @@ services:
     ports:
       - "3000:80"
     environment:
-      - codex_url=${codex_url:-http://kubernetes.docker.internal:30003}
+      - codex_url=${codex_url:-http://kubernetes.docker.internal:30001}
diff --git a/frontend/src/pages/data/tabs/download/DownloadTab.tsx b/frontend/src/pages/data/tabs/download/DownloadTab.tsx
index 62e34c5..55f123f 100644
--- a/frontend/src/pages/data/tabs/download/DownloadTab.tsx
+++ b/frontend/src/pages/data/tabs/download/DownloadTab.tsx
@@ -7,6 +7,7 @@ function DownloadTab() {
   const { ftdCid, setFtdCid, nodeInfo } = useDexyStore();
 
   const [filename, setFilename] = useState("file");
+  const [error, setError] = useState("");
 
   function download(cid: string) {
     console.log(filename);
@@ -22,36 +23,60 @@ function DownloadTab() {
           {},
       }
     )
-      .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);
-      });
+      .then((response) =>
+      {
+        if (response.status === 200) {
+          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);
+        })
+      }
+      else {
+        response.text().then((text) => {
+          setError(text);
+        }).catch((error) => {
+          console.error("Error reading response body:", error);
+          setError("Failed to read response body");
+        });
+      }
+    })
+    .catch((error) => {
+      console.error("Error downloading file:", error);
+      setError("Failed to download file");
+    });
   }
 
   return (
-    <DownloadTabWrapper>
-      <input
-        type="text"
-        placeholder="CID"
-        onChange={(e) => {
-          setFtdCid(e.target.value);
-        }}
-        value={ftdCid}
-      />
-      <div id="divider"></div>
-      <input
-        type="text"
-        placeholder="Filename"
-        onChange={(e) => setFilename(e.target.value)}
-      />
-      <button onClick={() => download(ftdCid)}>Download</button>
-    </DownloadTabWrapper>
+    <>
+      <DownloadTabWrapper>
+        <input
+          type="text"
+          placeholder="CID"
+          onChange={(e) => {
+            setFtdCid(e.target.value);
+          }}
+          value={ftdCid}
+        />
+        <div id="divider"></div>
+        <input
+          type="text"
+          placeholder="Filename"
+          onChange={(e) => setFilename(e.target.value)}
+        />
+        <button onClick={() => download(ftdCid)}>Download</button>
+      </DownloadTabWrapper>
+      {error && (
+        <p style={{ color: "red", marginTop: "10px", textAlign: "center" }}>
+          {error}
+        </p>
+      )}
+    </>
   );
 }
 
diff --git a/frontend/src/pages/data/tabs/upload/UploadTab.tsx b/frontend/src/pages/data/tabs/upload/UploadTab.tsx
index b7f4e1a..ac519d0 100644
--- a/frontend/src/pages/data/tabs/upload/UploadTab.tsx
+++ b/frontend/src/pages/data/tabs/upload/UploadTab.tsx
@@ -14,6 +14,7 @@ function UploadTab() {
   const { uploads, setUploads, nodeInfo } = useDexyStore();
   var files = useRef<UploadedItemModel[]>(uploads);
   const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
 
   function getDatas() {
     fetch(`/api/codex/v1/data`, {
@@ -90,12 +91,17 @@ function UploadTab() {
                 },
               })
               .then((response) => {
-                newCid = response.data;
-                getDatas();
+                if (response.status === 200) {
+                  newCid = response.data;
+                  getDatas();
+                } else {
+                  setError("Upload failed");
+                }
               });
             console.log("filesCopy failed");
           } catch (error) {
             console.error("Error uploading file: ", error);
+            setError("Upload failed");
           }
           console.log(cid + acceptedFiles[i].name);
           resolve("done");
@@ -108,32 +114,39 @@ function UploadTab() {
   const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
 
   return (
-    <UploadTabWrapper>
-      <div
-        id="dropzone"
-        {...getRootProps()}
-        style={{
-          minHeight: uploads.length > 0 ? "33%" : "100%",
-        }}
-      >
-        <input {...getInputProps()} />
-        {isDragActive ? (
-          <p>Drop the files here ...</p>
-        ) : (
-          <p>Drag 'n' drop some files here, or click to select files</p>
-        )}
-      </div>
-      <div
-        id="uploaded-items-wrap"
-        style={{
-          maxHeight: uploads.length > 0 ? "60vh" : "0%",
-        }}
-      >
-        {uploads.map((file) => (
-          <UploadedItemComponent item={file} key={file.cid} />
-        ))}
-      </div>
-    </UploadTabWrapper>
+    <>
+      <UploadTabWrapper>
+        <div
+          id="dropzone"
+          {...getRootProps()}
+          style={{
+            minHeight: uploads.length > 0 ? "33%" : "100%",
+          }}
+        >
+          <input {...getInputProps()} />
+          {isDragActive ? (
+            <p>Drop the files here ...</p>
+          ) : (
+            <p>Drag 'n' drop some files here, or click to select files</p>
+          )}
+        </div>
+        <div
+          id="uploaded-items-wrap"
+          style={{
+            maxHeight: uploads.length > 0 ? "60vh" : "0%",
+          }}
+        >
+          {uploads.map((file) => (
+            <UploadedItemComponent item={file} key={file.cid} />
+          ))}
+        </div>
+      </UploadTabWrapper>
+      {error && (
+        <p style={{ color: "red", marginTop: "10px", textAlign: "center" }}>
+          {error}
+        </p>
+      )}
+    </>
   );
 }
 
diff --git a/frontend/src/pages/marketplace/tabs/Availability/OfferStorage.tsx b/frontend/src/pages/marketplace/tabs/Availability/OfferStorage.tsx
index 9768fc9..e7d348f 100644
--- a/frontend/src/pages/marketplace/tabs/Availability/OfferStorage.tsx
+++ b/frontend/src/pages/marketplace/tabs/Availability/OfferStorage.tsx
@@ -11,7 +11,8 @@ function OfferStorage() {
   const [minPrice, setMinPrice,] = useState("file");
   const [maxCollateral, setMaxCollateral,] = useState("file");
   const [expiry, setExpiry,] = useState("file");
-  
+  const [error, setError] = useState("");
+
 
   function upload(cid: string) {
     fetch(
@@ -33,58 +34,75 @@ function OfferStorage() {
         })
       }
     )
-    // create a popup in the browser to show if the upload was successful
-    .then((response) => {
+      // create a popup in the browser to show if the upload was successful
+      .then((response) => {
         if (response.status === 200) {
-          alert("Upload successful!");
+          alert("Successfully created storage offer!");
+          setError("");
         } else {
-          alert("Upload failed!");
+          response.text().then((text) => {
+            setError(text);
+          }).catch((error) => {
+            console.error("Error reading response body:", error);
+            setError("Failed to read response body");
+          });
         }
       })
+      .catch((error) => {
+        console.error("Error creating storage offer:", error);
+        setError("Failed to create storage offer");
+      });
   }
 
   return (
-    <OfferStorageWrapper>
-      <input
-        type="text"
-        placeholder="CID"
-        onChange={(e) => {
-          setFtdCid(e.target.value);
-        }}
-        value={ftdCid}
-      />
-      <div id="divider"></div>
-      <input
-        type="text"
-        placeholder="Size"
-        onChange={(e) => setSize(e.target.value)}
-      />
-      <div id="divider"></div>
-      <input
-        type="text"
-        placeholder="Duration"
-        onChange={(e) => setDuration(e.target.value)}
-      />
-      <div id="divider"></div>
-      <input
-        type="text"
-        placeholder="MinPrice"
-        onChange={(e) => setMinPrice(e.target.value)}
-      />
-      <div id="divider"></div>
-      <input
-        type="text"
-        placeholder="MaxCollateral"
-        onChange={(e) => setMaxCollateral(e.target.value)}
-      />
-      <div id="divider"></div>
-      <input
-        type="text"
-        placeholder="Expiry"
-        onChange={(e) => setExpiry(e.target.value)}
-      />
-      <button onClick={() => upload(ftdCid)}>Download</button>
-    </OfferStorageWrapper>
+    <>
+      <OfferStorageWrapper>
+        <input
+          type="text"
+          placeholder="CID"
+          onChange={(e) => {
+            setFtdCid(e.target.value);
+          }}
+          value={ftdCid}
+        />
+        <div id="divider"></div>
+        <input
+          type="text"
+          placeholder="Size"
+          onChange={(e) => setSize(e.target.value)}
+        />
+        <div id="divider"></div>
+        <input
+          type="text"
+          placeholder="Duration"
+          onChange={(e) => setDuration(e.target.value)}
+        />
+        <div id="divider"></div>
+        <input
+          type="text"
+          placeholder="MinPrice"
+          onChange={(e) => setMinPrice(e.target.value)}
+        />
+        <div id="divider"></div>
+        <input
+          type="text"
+          placeholder="MaxCollateral"
+          onChange={(e) => setMaxCollateral(e.target.value)}
+        />
+        <div id="divider"></div>
+        <input
+          type="text"
+          placeholder="Expiry"
+          onChange={(e) => setExpiry(e.target.value)}
+        />
+        <button onClick={() => upload(ftdCid)}>Create</button>
+      </OfferStorageWrapper>
+      {error && (
+        <p style={{ color: "red", marginTop: "10px", textAlign: "center" }}>
+          {error}
+        </p>
+      )}
+    </>
   );
 }
 
diff --git a/frontend/src/pages/marketplace/tabs/Rosc/CreateTab.tsx b/frontend/src/pages/marketplace/tabs/Rosc/CreateTab.tsx
index 80ec572..1011830 100644
--- a/frontend/src/pages/marketplace/tabs/Rosc/CreateTab.tsx
+++ b/frontend/src/pages/marketplace/tabs/Rosc/CreateTab.tsx
@@ -10,7 +10,8 @@ function CreateTab() {
   const [duration, setDuration,] = useState("file");
   const [proofProbability, setProofProbability,] = useState("file");
   const [collateral, setCollateral,] = useState("file");
-  
+  const [error, setError] = useState("");
+
 
   function upload(cid: string) {
     fetch(
@@ -31,52 +32,69 @@ function CreateTab() {
         })
       }
     )
-    // create a popup in the browser to show if the upload was successful
-    .then((response) => {
+      // create a popup in the browser to show if the upload was successful
+      .then((response) => {
         if (response.status === 200) {
-          alert("Upload successful!");
+          alert("Successfully created storage offer!");
+          setError("");
         } else {
-          alert("Upload failed!");
+          response.text().then((text) => {
+            setError(text);
+          }).catch((error) => {
+            console.error("Error reading response body:", error);
+            setError("Failed to read response body");
+          });
         }
       })
+      .catch((error) => {
+        console.error("Error creating storage offer:", error);
+        setError("Failed to create storage offer");
+      });
   }
 
   return (
-    <CreateTabWrapper>
-      <input
-        type="text"
-        placeholder="CID"
-        onChange={(e) => {
-          setFtdCid(e.target.value);
-        }}
-        value={ftdCid}
-      />
-      <div id="divider"></div>
-      <input
-        type="text"
-        placeholder="Reward"
-        onChange={(e) => setReward(e.target.value)}
-      />
-      <div id="divider"></div>
-      <input
-        type="text"
-        placeholder="Duration"
-        onChange={(e) => setDuration(e.target.value)}
-      />
-      <div id="divider"></div>
-      <input
-        type="text"
-        placeholder="ProofProbability"
-        onChange={(e) => setProofProbability(e.target.value)}
-      />
-      <div id="divider"></div>
-      <input
-        type="text"
-        placeholder="collateral"
-        onChange={(e) => setCollateral(e.target.value)}
-      />
-      <button onClick={() => upload(ftdCid)}>Download</button>
-    </CreateTabWrapper>
+    <>
+      <CreateTabWrapper>
+        <input
+          type="text"
+          placeholder="CID"
+          onChange={(e) => {
+            setFtdCid(e.target.value);
+          }}
+          value={ftdCid}
+        />
+        <div id="divider"></div>
+        <input
+          type="text"
+          placeholder="Reward"
+          onChange={(e) => setReward(e.target.value)}
+        />
+        <div id="divider"></div>
+        <input
+          type="text"
+          placeholder="Duration"
+          onChange={(e) => setDuration(e.target.value)}
+        />
+        <div id="divider"></div>
+        <input
+          type="text"
+          placeholder="ProofProbability"
+          onChange={(e) => setProofProbability(e.target.value)}
+        />
+        <div id="divider"></div>
+        <input
+          type="text"
+          placeholder="collateral"
+          onChange={(e) => setCollateral(e.target.value)}
+        />
+        <button onClick={() => upload(ftdCid)}>Download</button>
+      </CreateTabWrapper>
+      {error && (
+        <p style={{ color: "red", marginTop: "10px", textAlign: "center" }}>
+          {error}
+        </p>
+      )}
+    </>
   );
 }