codex-storage/codex-frontend
1
0
Fork 0
mirror of https://github.com/codex-storage/codex-frontend.git synced 2025-03-01 10:40:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Modified error messages for post requests

Browse Source
This commit is contained in:
Shaun Orssaud 2024-01-05 17:24:47 +09:00
parent c3078124ff
commit 52217354f0
5 changed files with 216 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docker-compose.yml
View File

@ -8,4 +8,4 @@ services:
ports: ports:
- "3000:80" - "3000:80"
environment: environment:
- codex_url=${codex_url:-http://kubernetes.docker.internal:30003} - codex_url=${codex_url:-http://kubernetes.docker.internal:30001}

79
frontend/src/pages/data/tabs/download/DownloadTab.tsx
View File

@ -7,6 +7,7 @@ function DownloadTab() {
const { ftdCid, setFtdCid, nodeInfo } = useDexyStore(); const { ftdCid, setFtdCid, nodeInfo } = useDexyStore();
const [filename, setFilename] = useState("file"); const [filename, setFilename] = useState("file");
const [error, setError] = useState("");
function download(cid: string) { function download(cid: string) {
console.log(filename); console.log(filename);
@ -22,36 +23,60 @@ function DownloadTab() {
{}, {},
} }
) )
.then((response) => response.blob()) .then((response) =>
.then((blob) => { {
const url = window.URL.createObjectURL(new Blob([blob])); if (response.status === 200) {
const link = document.createElement("a"); response.blob()
link.href = url; .then((blob) => {
link.setAttribute("download", filename); const url = window.URL.createObjectURL(new Blob([blob]));
document.body.appendChild(link); const link = document.createElement("a");
link.click(); link.href = url;
link.parentNode?.removeChild(link); 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 ( return (
<DownloadTabWrapper> <>
<input <DownloadTabWrapper>
type="text" <input
placeholder="CID" type="text"
onChange={(e) => { placeholder="CID"
setFtdCid(e.target.value); onChange={(e) => {
}} setFtdCid(e.target.value);
value={ftdCid} }}
/> value={ftdCid}
<div id="divider"></div> />
<input <div id="divider"></div>
type="text" <input
placeholder="Filename" type="text"
onChange={(e) => setFilename(e.target.value)} placeholder="Filename"
/> onChange={(e) => setFilename(e.target.value)}
<button onClick={() => download(ftdCid)}>Download</button> />
</DownloadTabWrapper> <button onClick={() => download(ftdCid)}>Download</button>
</DownloadTabWrapper>
{error && (
<p style={{ color: "red", marginTop: "10px", textAlign: "center" }}>
{error}
</p>
)}
</>
); );
} }

69
frontend/src/pages/data/tabs/upload/UploadTab.tsx
View File

@ -14,6 +14,7 @@ function UploadTab() {
const { uploads, setUploads, nodeInfo } = useDexyStore(); const { uploads, setUploads, nodeInfo } = useDexyStore();
var files = useRef<UploadedItemModel[]>(uploads); var files = useRef<UploadedItemModel[]>(uploads);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState("");
function getDatas() { function getDatas() {
fetch(`/api/codex/v1/data`, { fetch(`/api/codex/v1/data`, {
@ -90,12 +91,17 @@ function UploadTab() {
}, },
}) })
.then((response) => { .then((response) => {
newCid = response.data; if (response.status === 200) {
getDatas(); newCid = response.data;
getDatas();
} else {
setError("Upload failed");
}
}); });
console.log("filesCopy failed"); console.log("filesCopy failed");
} catch (error) { } catch (error) {
console.error("Error uploading file: ", error); console.error("Error uploading file: ", error);
setError("Upload failed");
} }
console.log(cid + acceptedFiles[i].name); console.log(cid + acceptedFiles[i].name);
resolve("done"); resolve("done");
@ -108,32 +114,39 @@ function UploadTab() {
const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop }); const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
return ( return (
<UploadTabWrapper> <>
<div <UploadTabWrapper>
id="dropzone" <div
{...getRootProps()} id="dropzone"
style={{ {...getRootProps()}
minHeight: uploads.length > 0 ? "33%" : "100%", style={{
}} minHeight: uploads.length > 0 ? "33%" : "100%",
> }}
<input {...getInputProps()} /> >
{isDragActive ? ( <input {...getInputProps()} />
<p>Drop the files here ...</p> {isDragActive ? (
) : ( <p>Drop the files here ...</p>
<p>Drag 'n' drop some files here, or click to select files</p> ) : (
)} <p>Drag 'n' drop some files here, or click to select files</p>
</div> )}
<div </div>
id="uploaded-items-wrap" <div
style={{ id="uploaded-items-wrap"
maxHeight: uploads.length > 0 ? "60vh" : "0%", style={{
}} maxHeight: uploads.length > 0 ? "60vh" : "0%",
> }}
{uploads.map((file) => ( >
<UploadedItemComponent item={file} key={file.cid} /> {uploads.map((file) => (
))} <UploadedItemComponent item={file} key={file.cid} />
</div> ))}
</UploadTabWrapper> </div>
</UploadTabWrapper>
{error && (
<p style={{ color: "red", marginTop: "10px", textAlign: "center" }}>
{error}
</p>
)}
</>
); );
} }

108
frontend/src/pages/marketplace/tabs/Availability/OfferStorage.tsx
View File

@ -11,6 +11,7 @@ function OfferStorage() {
const [minPrice, setMinPrice,] = useState("file"); const [minPrice, setMinPrice,] = useState("file");
const [maxCollateral, setMaxCollateral,] = useState("file"); const [maxCollateral, setMaxCollateral,] = useState("file");
const [expiry, setExpiry,] = useState("file"); const [expiry, setExpiry,] = useState("file");
const [error, setError] = useState("");
function upload(cid: string) { function upload(cid: string) {
@ -33,58 +34,75 @@ function OfferStorage() {
}) })
} }
) )
// create a popup in the browser to show if the upload was successful // create a popup in the browser to show if the upload was successful
.then((response) => { .then((response) => {
if (response.status === 200) { if (response.status === 200) {
alert("Upload successful!"); alert("Successfully created storage offer!");
setError("");
} else { } 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 ( return (
<OfferStorageWrapper> <>
<input <OfferStorageWrapper>
type="text" <input
placeholder="CID" type="text"
onChange={(e) => { placeholder="CID"
setFtdCid(e.target.value); onChange={(e) => {
}} setFtdCid(e.target.value);
value={ftdCid} }}
/> value={ftdCid}
<div id="divider"></div> />
<input <div id="divider"></div>
type="text" <input
placeholder="Size" type="text"
onChange={(e) => setSize(e.target.value)} placeholder="Size"
/> onChange={(e) => setSize(e.target.value)}
<div id="divider"></div> />
<input <div id="divider"></div>
type="text" <input
placeholder="Duration" type="text"
onChange={(e) => setDuration(e.target.value)} placeholder="Duration"
/> onChange={(e) => setDuration(e.target.value)}
<div id="divider"></div> />
<input <div id="divider"></div>
type="text" <input
placeholder="MinPrice" type="text"
onChange={(e) => setMinPrice(e.target.value)} placeholder="MinPrice"
/> onChange={(e) => setMinPrice(e.target.value)}
<div id="divider"></div> />
<input <div id="divider"></div>
type="text" <input
placeholder="MaxCollateral" type="text"
onChange={(e) => setMaxCollateral(e.target.value)} placeholder="MaxCollateral"
/> onChange={(e) => setMaxCollateral(e.target.value)}
<div id="divider"></div> />
<input <div id="divider"></div>
type="text" <input
placeholder="Expiry" type="text"
onChange={(e) => setExpiry(e.target.value)} placeholder="Expiry"
/> onChange={(e) => setExpiry(e.target.value)}
<button onClick={() => upload(ftdCid)}>Download</button> />
</OfferStorageWrapper> <button onClick={() => upload(ftdCid)}>Create</button>
</OfferStorageWrapper>
{error && (
<p style={{ color: "red", marginTop: "10px", textAlign: "center" }}>
{error}
</p>
)}
</>
); );
} }

96
frontend/src/pages/marketplace/tabs/Rosc/CreateTab.tsx
View File

@ -10,6 +10,7 @@ function CreateTab() {
const [duration, setDuration,] = useState("file"); const [duration, setDuration,] = useState("file");
const [proofProbability, setProofProbability,] = useState("file"); const [proofProbability, setProofProbability,] = useState("file");
const [collateral, setCollateral,] = useState("file"); const [collateral, setCollateral,] = useState("file");
const [error, setError] = useState("");
function upload(cid: string) { function upload(cid: string) {
@ -31,52 +32,69 @@ function CreateTab() {
}) })
} }
) )
// create a popup in the browser to show if the upload was successful // create a popup in the browser to show if the upload was successful
.then((response) => { .then((response) => {
if (response.status === 200) { if (response.status === 200) {
alert("Upload successful!"); alert("Successfully created storage offer!");
setError("");
} else { } 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 ( return (
<CreateTabWrapper> <>
<input <CreateTabWrapper>
type="text" <input
placeholder="CID" type="text"
onChange={(e) => { placeholder="CID"
setFtdCid(e.target.value); onChange={(e) => {
}} setFtdCid(e.target.value);
value={ftdCid} }}
/> value={ftdCid}
<div id="divider"></div> />
<input <div id="divider"></div>
type="text" <input
placeholder="Reward" type="text"
onChange={(e) => setReward(e.target.value)} placeholder="Reward"
/> onChange={(e) => setReward(e.target.value)}
<div id="divider"></div> />
<input <div id="divider"></div>
type="text" <input
placeholder="Duration" type="text"
onChange={(e) => setDuration(e.target.value)} placeholder="Duration"
/> onChange={(e) => setDuration(e.target.value)}
<div id="divider"></div> />
<input <div id="divider"></div>
type="text" <input
placeholder="ProofProbability" type="text"
onChange={(e) => setProofProbability(e.target.value)} placeholder="ProofProbability"
/> onChange={(e) => setProofProbability(e.target.value)}
<div id="divider"></div> />
<input <div id="divider"></div>
type="text" <input
placeholder="collateral" type="text"
onChange={(e) => setCollateral(e.target.value)} placeholder="collateral"
/> onChange={(e) => setCollateral(e.target.value)}
<button onClick={() => upload(ftdCid)}>Download</button> />
</CreateTabWrapper> <button onClick={() => upload(ftdCid)}>Download</button>
</CreateTabWrapper>
{error && (
<p style={{ color: "red", marginTop: "10px", textAlign: "center" }}>
{error}
</p>
)}
</>
); );
} }