From fc69bdbd64f17d5262d022ced6c414592e90be4b Mon Sep 17 00:00:00 2001
From: Arnaud <arnaud@status.im>
Date: Thu, 10 Oct 2024 10:40:00 +0200
Subject: [PATCH] Add download feature and re-organize the dashboard page

---
 src/components/Download/Download.css | 13 +++++++
 src/components/Download/Download.tsx | 30 +++++++++++++++
 src/components/Welcome/Welcome.css   |  1 +
 src/components/Welcome/Welcome.tsx   |  7 ----
 src/routes/dashboard.css             | 13 +++++++
 src/routes/dashboard/index.tsx       | 55 +++++++++++++++++++++-------
 6 files changed, 99 insertions(+), 20 deletions(-)
 create mode 100644 src/components/Download/Download.css
 create mode 100644 src/components/Download/Download.tsx

diff --git a/src/components/Download/Download.css b/src/components/Download/Download.css
new file mode 100644
index 0000000..7209c51
--- /dev/null
+++ b/src/components/Download/Download.css
@@ -0,0 +1,13 @@
+.download {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.download-inputContainer {
+  flex: 1;
+}
+
+.download-input {
+  width: 100%;
+}
diff --git a/src/components/Download/Download.tsx b/src/components/Download/Download.tsx
new file mode 100644
index 0000000..bcb1c22
--- /dev/null
+++ b/src/components/Download/Download.tsx
@@ -0,0 +1,30 @@
+import { Button, Input } from "@codex-storage/marketplace-ui-components";
+import "./Download.css";
+import { ChangeEvent, useState } from "react";
+import { CodexSdk } from "../../sdk/codex";
+
+export function Download() {
+  const [cid, setCid] = useState("");
+  console.info(cid);
+  const onDownload = () => {
+    const url = CodexSdk.url() + "/api/codex/v1/data/";
+    window.open(url + cid, "_target");
+  };
+
+  const onCidChange = (e: ChangeEvent<HTMLInputElement>) =>
+    setCid(e.currentTarget.value);
+
+  return (
+    <div className="download">
+      <div className="download-inputContainer">
+        <Input
+          id="cid"
+          isInvalid={false}
+          placeholder="CID"
+          inputClassName="download-input"
+          onChange={onCidChange}></Input>
+      </div>
+      <Button label="Download" onClick={onDownload}></Button>
+    </div>
+  );
+}
diff --git a/src/components/Welcome/Welcome.css b/src/components/Welcome/Welcome.css
index 491b9d8..3530439 100644
--- a/src/components/Welcome/Welcome.css
+++ b/src/components/Welcome/Welcome.css
@@ -6,6 +6,7 @@
   display: flex;
   align-items: flex-start;
   flex-direction: column;
+  flex: 1;
 }
 
 .welcome-disclaimer {
diff --git a/src/components/Welcome/Welcome.tsx b/src/components/Welcome/Welcome.tsx
index e376ff1..49b9b82 100644
--- a/src/components/Welcome/Welcome.tsx
+++ b/src/components/Welcome/Welcome.tsx
@@ -14,13 +14,6 @@ export function Welcome() {
           explore its features. Your feedback is invaluable as we continue to
           improve!
         </SimpleText>
-        <Alert
-          variant="warning"
-          title="Disclaimer"
-          className="welcome-disclaimer">
-          The website and the content herein is not intended for public use and
-          is for informational and demonstration purposes only.
-        </Alert>
       </div>
 
       <Link to="/dashboard/help" className="welcome-link">
diff --git a/src/routes/dashboard.css b/src/routes/dashboard.css
index aa86380..b43ee4a 100644
--- a/src/routes/dashboard.css
+++ b/src/routes/dashboard.css
@@ -5,6 +5,19 @@
   gap: 0.75rem;
 }
 
+.dashboard-download {
+  margin-top: 1rem;
+}
+
+.dashboard-welcome {
+  display: flex;
+  flex-direction: column;
+}
+
+.dashboard-alert {
+  margin-bottom: 0;
+}
+
 @media (min-width: 1000px) {
   .dashboard {
     grid-template-columns: repeat(2, minmax(0, 1fr));
diff --git a/src/routes/dashboard/index.tsx b/src/routes/dashboard/index.tsx
index 4832997..307ae42 100644
--- a/src/routes/dashboard/index.tsx
+++ b/src/routes/dashboard/index.tsx
@@ -1,11 +1,12 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { Files } from "../../components/Files/Files.tsx";
-import { Card, Upload } from "@codex-storage/marketplace-ui-components";
+import { Alert, Card, Upload } from "@codex-storage/marketplace-ui-components";
 import { CodexSdk } from "../../sdk/codex";
 import { Welcome } from "../../components/Welcome/Welcome.tsx";
 import { ErrorPlaceholder } from "../../components/ErrorPlaceholder/ErrorPlaceholder.tsx";
 import { ErrorBoundary } from "@sentry/react";
 import { useQueryClient } from "@tanstack/react-query";
+import { Download } from "../../components/Download/Download.tsx";
 
 export const Route = createFileRoute("/dashboard/")({
   component: About,
@@ -21,17 +22,35 @@ function About() {
   return (
     <>
       <div className="dashboard">
-        <ErrorBoundary
-          fallback={({ error }) => (
-            <ErrorPlaceholder
-              error={error}
-              subtitle="Cannot retrieve the data."
-            />
-          )}>
-          <Card title="Upload a file">
-            <Upload multiple codexData={CodexSdk.data} onSuccess={onSuccess} />
-          </Card>
-        </ErrorBoundary>
+        <div>
+          <ErrorBoundary
+            fallback={({ error }) => (
+              <ErrorPlaceholder
+                error={error}
+                subtitle="Cannot retrieve the data."
+              />
+            )}>
+            <Card title="Upload a file">
+              <Upload
+                multiple
+                codexData={CodexSdk.data}
+                onSuccess={onSuccess}
+              />
+            </Card>
+          </ErrorBoundary>
+
+          <ErrorBoundary
+            fallback={({ error }) => (
+              <ErrorPlaceholder
+                error={error}
+                subtitle="Cannot retrieve the data."
+              />
+            )}>
+            <Card title="Download a file" className="dashboard-download">
+              <Download></Download>
+            </Card>
+          </ErrorBoundary>
+        </div>
 
         <ErrorBoundary
           fallback={({ error }) => (
@@ -40,7 +59,17 @@ function About() {
               subtitle="Cannot retrieve the data."
             />
           )}>
-          <Welcome />
+          <div className="dashboard-welcome">
+            <Welcome />
+
+            <Alert
+              variant="warning"
+              title="Disclaimer"
+              className="welcome-disclaimer dashboard-alert">
+              The website and the content herein is not intended for public use
+              and is for informational and demonstration purposes only.
+            </Alert>
+          </div>
         </ErrorBoundary>
       </div>