From 7a21c33e13acf771ffd7fc9adeeeec621fb31222 Mon Sep 17 00:00:00 2001
From: Shaun Orssaud <shaun.orssaud@epitech.eu>
Date: Fri, 15 Mar 2024 15:52:10 +0900
Subject: [PATCH] ADD expiry dropdown list

---
 .../pages/marketplace/tabs/Rosc/CreateTab.tsx | 75 +++++++++++++------
 frontend/src/pages/settings/SettingsPage.tsx  | 13 +---
 2 files changed, 54 insertions(+), 34 deletions(-)

diff --git a/frontend/src/pages/marketplace/tabs/Rosc/CreateTab.tsx b/frontend/src/pages/marketplace/tabs/Rosc/CreateTab.tsx
index 3390333..21c526f 100644
--- a/frontend/src/pages/marketplace/tabs/Rosc/CreateTab.tsx
+++ b/frontend/src/pages/marketplace/tabs/Rosc/CreateTab.tsx
@@ -30,7 +30,17 @@ function CreateTab() {
   const toggleBoxExpiry = () => {
     setBoxOpenExpiry(!isBoxOpenExpiry);
   };
-
+  const handleExpiryChangeDropdown = (e: any) => {
+    const minutes = e.target.value;
+    console.log(minutes);
+    const newDuration = {
+      days: 0,
+      hours: 0,
+      minutes: minutes,
+      seconds: 0
+    };
+    handleExpiryChange(newDuration);
+  };
   const handleExpiryChange = (newDuration: { days: number; hours: number; minutes: number; seconds: number }) => {
     const { days, hours, minutes, seconds } = newDuration;
     const totalSeconds = days * 24 * 60 * 60 + hours * 60 * 60 + minutes * 60 + seconds;
@@ -41,12 +51,19 @@ function CreateTab() {
   const handleDurationChange = (newDuration: { days: number; hours: number; minutes: number; seconds: number }) => {
     const { days, hours, minutes, seconds } = newDuration;
     const totalSeconds = days * 24 * 60 * 60 + hours * 60 * 60 + minutes * 60 + seconds;
-    
+
     if (totalSeconds >= 60 && totalSeconds <= 86400) {
       setDuration(totalSeconds.toString());
     }
   };
 
+  const handleProofProbabilityChange = (e: any) => {
+    const value = e.target.value;
+    if (value === "" || (value >= 0 && value <= 99)) {
+      setProofProbability(value);
+    }
+  };
+
   function upload(cid: string) {
     fetch(
       `/api/codex/v1/storage/request/${cid}`,
@@ -89,12 +106,6 @@ function CreateTab() {
       });
   }
 
-  const handleProofProbabilityChange = (e: any) => {
-    const value = e.target.value;
-    if (value === "" || (value >= 0 && value <= 99)) {
-      setProofProbability(value);
-    }
-  };
 
   return (
     <>
@@ -134,6 +145,15 @@ function CreateTab() {
               onClick={toggleBoxExpiry}
             />
           </div>
+          <select
+                value={expiry}
+                onChange={handleExpiryChangeDropdown}
+              >
+                <option value="">Recommended Expiry Time</option>
+                <option value="5">Small datasets</option>
+                <option value="15">Medium Datasets</option>
+                <option value="60">Large Datasets</option>
+              </select>
         </div>
 
         <div className="row">
@@ -181,22 +201,22 @@ function CreateTab() {
           <div className="field">
             <label>Proof Probability</label>
             <div>
-            <select
+              <select
+                value={proofProbability}
+                onChange={handleProofProbabilityChange}
+              >
+                <option value="">Select Proof Probability</option>
+                <option value="1">Low Durability Guarantee</option>
+                <option value="3">Medium Durability Guarantee</option>
+                <option value="6">Strong Durability Guarantee</option>
+              </select>
+            </div>
+            <input
+              type="text"
+              placeholder="Custom Proof Probability"
               value={proofProbability}
               onChange={handleProofProbabilityChange}
-            >
-              <option value="">Select Proof Probability</option>
-              <option value="1">Low Durability Guarantee</option>
-              <option value="3">Medium Durability Guarantee</option>
-              <option value="6">Strong Durability Guarantee</option>
-            </select>
-          </div>
-          <input
-            type="text"
-            placeholder="Custom Proof Probability"
-            value={proofProbability}
-            onChange={handleProofProbabilityChange}
-          />
+            />
           </div>
           <button onClick={() => upload(ftdCid)}>Create</button>
         </div>
@@ -242,6 +262,16 @@ h1 {
   border-radius: 8px;
   width: 50%;
 }
+
+.select{
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #141414;
+  border-radius: 8px;
+  width: 50%;
+}
 .row {
   display: flex;
   align-items: center;
@@ -294,6 +324,7 @@ button {
   border-radius: 8px;
 }
 
+
 button span {
   font-weight: bold;
 }
diff --git a/frontend/src/pages/settings/SettingsPage.tsx b/frontend/src/pages/settings/SettingsPage.tsx
index 0ea6ad9..b0ee706 100644
--- a/frontend/src/pages/settings/SettingsPage.tsx
+++ b/frontend/src/pages/settings/SettingsPage.tsx
@@ -33,7 +33,7 @@ function SettingsPage() {
     }
     try {
       await fetch(
-        `http://localhost:8080/api/codex/v1/connect/${encodeURIComponent(
+        `/api/codex/v1/connect/${encodeURIComponent(
           params.id
         )}?addrs=${encodeURIComponent(params.address)}`
       )
@@ -58,17 +58,6 @@ function SettingsPage() {
       <main>
         <div className="inputs">
           <h4>Connection Settings</h4>
-          <input
-            type="text"
-            placeholder="Local node base URL (default is http://localhost:8080)"
-            value={nodeInfoInput.nodeBaseUrl}
-            onChange={(e) =>
-              setNodeInfoInput({
-                ...nodeInfoInput,
-                nodeBaseUrl: e.target.value,
-              })
-            }
-          />
           <input
             type="text"
             placeholder="Node to connect to (blank for local node) (e.g. http://example.com:8080))"