From 2d85850d5e6ca9f78490583ed1a4ed02f78c8dec Mon Sep 17 00:00:00 2001
From: Karol Wypchlo <kwypchlo@gmail.com>
Date: Tue, 9 Feb 2021 16:55:56 +0100
Subject: [PATCH] uploads

---
 packages/dashboard/src/components/Table.js    | 34 ++++----
 .../src/pages/api/stubs/user/downloads.json   | 81 ++++++++++---------
 .../src/pages/api/stubs/user/uploads.json     | 81 ++++++++++---------
 packages/dashboard/src/pages/downloads.js     |  6 +-
 packages/dashboard/src/pages/uploads.js       |  8 +-
 5 files changed, 112 insertions(+), 98 deletions(-)

diff --git a/packages/dashboard/src/components/Table.js b/packages/dashboard/src/components/Table.js
index 9c65bdc5..3ac0d55a 100644
--- a/packages/dashboard/src/components/Table.js
+++ b/packages/dashboard/src/components/Table.js
@@ -1,8 +1,6 @@
 import { useEffect } from "react";
 import classnames from "classnames";
 
-const pageSize = 2;
-
 function Button({ children, disabled, className, ...props }) {
   return (
     <button
@@ -23,14 +21,16 @@ function Button({ children, disabled, className, ...props }) {
   );
 }
 
-export default function Table({ data, headers, actions, page, setPage }) {
-  const lastPage = Math.ceil(data.length / pageSize);
-  const dataSlice = data.slice(pageSize * (page - 1), pageSize * (page - 1) + pageSize);
-
+export default function Table({ items, count, headers, actions, offset, setOffset, pageSize = 10 }) {
   useEffect(() => {
-    if (page > lastPage) setPage(lastPage);
-    if (page < 1) setPage(1);
-  }, [page, lastPage, setPage]);
+    if (offset + pageSize > count) setOffset(Math.floor(count / pageSize));
+    else if (offset < 0) setOffset(0);
+    else if (offset % pageSize) setOffset(offset - (offset % pageSize));
+  }, [offset, pageSize, setOffset]);
+
+  if (!items) {
+    return <>aaaa</>;
+  }
 
   return (
     <div className="flex flex-col">
@@ -57,7 +57,7 @@ export default function Table({ data, headers, actions, page, setPage }) {
                 </tr>
               </thead>
               <tbody>
-                {dataSlice.map((row, index) => (
+                {items.map((row, index) => (
                   <tr className={index % 2 ? "bg-white" : "bg-gray-50"} key={index}>
                     {headers.map(({ key, formatter }) => (
                       <td key={key} className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
@@ -82,16 +82,20 @@ export default function Table({ data, headers, actions, page, setPage }) {
             >
               <div className="hidden sm:block">
                 <p className="text-sm text-gray-700">
-                  Showing <span className="font-medium">{data.length ? pageSize * (page - 1) + 1 : 0}</span> to{" "}
-                  <span className="font-medium">{pageSize * page > data.length ? data.length : pageSize * page}</span>{" "}
-                  of <span className="font-medium">{data.length}</span> results
+                  Showing <span className="font-medium">{offset ? offset + 1 : 0}</span> to{" "}
+                  <span className="font-medium">{offset + pageSize > count ? count : offset + pageSize}</span> of{" "}
+                  <span className="font-medium">{count}</span> results
                 </p>
               </div>
               <div className="flex-1 flex justify-between sm:justify-end">
-                <Button disabled={page <= 1} onClick={() => setPage(page - 1)}>
+                <Button disabled={offset - pageSize < 0} onClick={() => setOffset(offset - pageSize)}>
                   Previous
                 </Button>
-                <Button className="ml-3" disabled={page >= lastPage} onClick={() => setPage(page + 1)}>
+                <Button
+                  className="ml-3"
+                  disabled={offset + pageSize > count}
+                  onClick={() => setOffset(offset + pageSize)}
+                >
                   Next
                 </Button>
               </div>
diff --git a/packages/dashboard/src/pages/api/stubs/user/downloads.json b/packages/dashboard/src/pages/api/stubs/user/downloads.json
index 929caede..e38e37c0 100644
--- a/packages/dashboard/src/pages/api/stubs/user/downloads.json
+++ b/packages/dashboard/src/pages/api/stubs/user/downloads.json
@@ -1,38 +1,43 @@
-[
-  {
-    "skylink": "PAL0w4SdA5rFCDGEutgpeQ50Om-YkBabtXVOJAkmedslKw",
-    "name": "ugabuga.pdf",
-    "size": 123123,
-    "uploadedOn": "2020-04-02T08:02:17-05:00"
-  },
-  {
-    "skylink": "XABvi7JtJbQSMAcDwnUnmp2FKDPjg8_tTTFP4BwMSxVdEg",
-    "name": "ugabuga.pdf",
-    "size": 8912739812,
-    "uploadedOn": "2020-04-02T08:02:17-05:00"
-  },
-  {
-    "skylink": "IADUs8d9CQjUO34LmdaaNPK_STuZo24rpKVfYW3wPPM2uQ",
-    "name": "ugabuga.pdf",
-    "size": 123123,
-    "uploadedOn": "2020-04-02T08:02:17-05:00"
-  },
-  {
-    "skylink": "_A2zt5SKoqwnnZU4cBF8uBycSKULXMyeg1c5ZISBr2Q3dA",
-    "name": "ugabuga.pdf",
-    "size": 83943,
-    "uploadedOn": "2020-04-02T08:02:17-05:00"
-  },
-  {
-    "skylink": "AAC0uO43g64ULpyrW0zO3bjEknSFbAhm8c-RFP21EQlmSQ",
-    "name": "ugabuga.pdf",
-    "size": 3290489120,
-    "uploadedOn": "2020-04-02T08:02:17-05:00"
-  },
-  {
-    "skylink": "CACqf4NlIMlA0CCCieYGjpViPGyfyJ4v1x3bmuCKZX8FKA",
-    "name": "ugabuga.pdf",
-    "size": 1290389,
-    "uploadedOn": "2020-04-02T08:02:17-05:00"
-  }
-]
+{
+  "items": [
+    {
+      "skylink": "PAL0w4SdA5rFCDGEutgpeQ50Om-YkBabtXVOJAkmedslKw",
+      "name": "ugabuga.pdf",
+      "size": 123123,
+      "uploadedOn": "2020-04-02T08:02:17-05:00"
+    },
+    {
+      "skylink": "XABvi7JtJbQSMAcDwnUnmp2FKDPjg8_tTTFP4BwMSxVdEg",
+      "name": "ugabuga.pdf",
+      "size": 8912739812,
+      "uploadedOn": "2020-04-02T08:02:17-05:00"
+    },
+    {
+      "skylink": "IADUs8d9CQjUO34LmdaaNPK_STuZo24rpKVfYW3wPPM2uQ",
+      "name": "ugabuga.pdf",
+      "size": 123123,
+      "uploadedOn": "2020-04-02T08:02:17-05:00"
+    },
+    {
+      "skylink": "_A2zt5SKoqwnnZU4cBF8uBycSKULXMyeg1c5ZISBr2Q3dA",
+      "name": "ugabuga.pdf",
+      "size": 83943,
+      "uploadedOn": "2020-04-02T08:02:17-05:00"
+    },
+    {
+      "skylink": "AAC0uO43g64ULpyrW0zO3bjEknSFbAhm8c-RFP21EQlmSQ",
+      "name": "ugabuga.pdf",
+      "size": 3290489120,
+      "uploadedOn": "2020-04-02T08:02:17-05:00"
+    },
+    {
+      "skylink": "CACqf4NlIMlA0CCCieYGjpViPGyfyJ4v1x3bmuCKZX8FKA",
+      "name": "ugabuga.pdf",
+      "size": 1290389,
+      "uploadedOn": "2020-04-02T08:02:17-05:00"
+    }
+  ],
+  "offset": 0,
+  "pageSize": 10,
+  "count": 6
+}
diff --git a/packages/dashboard/src/pages/api/stubs/user/uploads.json b/packages/dashboard/src/pages/api/stubs/user/uploads.json
index 929caede..e38e37c0 100644
--- a/packages/dashboard/src/pages/api/stubs/user/uploads.json
+++ b/packages/dashboard/src/pages/api/stubs/user/uploads.json
@@ -1,38 +1,43 @@
-[
-  {
-    "skylink": "PAL0w4SdA5rFCDGEutgpeQ50Om-YkBabtXVOJAkmedslKw",
-    "name": "ugabuga.pdf",
-    "size": 123123,
-    "uploadedOn": "2020-04-02T08:02:17-05:00"
-  },
-  {
-    "skylink": "XABvi7JtJbQSMAcDwnUnmp2FKDPjg8_tTTFP4BwMSxVdEg",
-    "name": "ugabuga.pdf",
-    "size": 8912739812,
-    "uploadedOn": "2020-04-02T08:02:17-05:00"
-  },
-  {
-    "skylink": "IADUs8d9CQjUO34LmdaaNPK_STuZo24rpKVfYW3wPPM2uQ",
-    "name": "ugabuga.pdf",
-    "size": 123123,
-    "uploadedOn": "2020-04-02T08:02:17-05:00"
-  },
-  {
-    "skylink": "_A2zt5SKoqwnnZU4cBF8uBycSKULXMyeg1c5ZISBr2Q3dA",
-    "name": "ugabuga.pdf",
-    "size": 83943,
-    "uploadedOn": "2020-04-02T08:02:17-05:00"
-  },
-  {
-    "skylink": "AAC0uO43g64ULpyrW0zO3bjEknSFbAhm8c-RFP21EQlmSQ",
-    "name": "ugabuga.pdf",
-    "size": 3290489120,
-    "uploadedOn": "2020-04-02T08:02:17-05:00"
-  },
-  {
-    "skylink": "CACqf4NlIMlA0CCCieYGjpViPGyfyJ4v1x3bmuCKZX8FKA",
-    "name": "ugabuga.pdf",
-    "size": 1290389,
-    "uploadedOn": "2020-04-02T08:02:17-05:00"
-  }
-]
+{
+  "items": [
+    {
+      "skylink": "PAL0w4SdA5rFCDGEutgpeQ50Om-YkBabtXVOJAkmedslKw",
+      "name": "ugabuga.pdf",
+      "size": 123123,
+      "uploadedOn": "2020-04-02T08:02:17-05:00"
+    },
+    {
+      "skylink": "XABvi7JtJbQSMAcDwnUnmp2FKDPjg8_tTTFP4BwMSxVdEg",
+      "name": "ugabuga.pdf",
+      "size": 8912739812,
+      "uploadedOn": "2020-04-02T08:02:17-05:00"
+    },
+    {
+      "skylink": "IADUs8d9CQjUO34LmdaaNPK_STuZo24rpKVfYW3wPPM2uQ",
+      "name": "ugabuga.pdf",
+      "size": 123123,
+      "uploadedOn": "2020-04-02T08:02:17-05:00"
+    },
+    {
+      "skylink": "_A2zt5SKoqwnnZU4cBF8uBycSKULXMyeg1c5ZISBr2Q3dA",
+      "name": "ugabuga.pdf",
+      "size": 83943,
+      "uploadedOn": "2020-04-02T08:02:17-05:00"
+    },
+    {
+      "skylink": "AAC0uO43g64ULpyrW0zO3bjEknSFbAhm8c-RFP21EQlmSQ",
+      "name": "ugabuga.pdf",
+      "size": 3290489120,
+      "uploadedOn": "2020-04-02T08:02:17-05:00"
+    },
+    {
+      "skylink": "CACqf4NlIMlA0CCCieYGjpViPGyfyJ4v1x3bmuCKZX8FKA",
+      "name": "ugabuga.pdf",
+      "size": 1290389,
+      "uploadedOn": "2020-04-02T08:02:17-05:00"
+    }
+  ],
+  "offset": 0,
+  "pageSize": 10,
+  "count": 6
+}
diff --git a/packages/dashboard/src/pages/downloads.js b/packages/dashboard/src/pages/downloads.js
index 5194b42d..0b45fa84 100644
--- a/packages/dashboard/src/pages/downloads.js
+++ b/packages/dashboard/src/pages/downloads.js
@@ -16,12 +16,12 @@ const headers = [
 const actions = [];
 
 export default function Downloads() {
-  const [page, setPage] = useState(1);
-  const { data, error } = useSWR(`${apiPrefix}/user/downloads`, fetcher);
+  const [offset, setOffset] = useState(0);
+  const { data, error } = useSWR(`${apiPrefix}/user/downloads?pageSize=10&offset=${offset}`, fetcher);
 
   return (
     <Layout title="Your downloads">
-      {data && <Table data={data} headers={headers} actions={actions} page={page} setPage={setPage} />}
+      <Table {...data} headers={headers} actions={actions} setOffset={setOffset} />
     </Layout>
   );
 }
diff --git a/packages/dashboard/src/pages/uploads.js b/packages/dashboard/src/pages/uploads.js
index be743c51..dc2756c8 100644
--- a/packages/dashboard/src/pages/uploads.js
+++ b/packages/dashboard/src/pages/uploads.js
@@ -15,13 +15,13 @@ const headers = [
 ];
 const actions = [];
 
-export default function Downloads() {
-  const [page, setPage] = useState(1);
-  const { data, error } = useSWR(`${apiPrefix}/user/uploads`, fetcher);
+export default function Uploads() {
+  const [offset, setOffset] = useState(0);
+  const { data, error } = useSWR(`${apiPrefix}/user/uploads?pageSize=10&offset=${offset}`, fetcher);
 
   return (
     <Layout title="Your uploads">
-      {data && <Table data={data} headers={headers} actions={actions} page={page} setPage={setPage} />}
+      <Table {...data} headers={headers} actions={actions} setOffset={setOffset} />
     </Layout>
   );
 }