uploads

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>

packages/dashboard/src/pages/api/stubs/user/downloads.json

@@ -1,4 +1,5 @@
-[
+{
+  "items": [
     {
       "skylink": "PAL0w4SdA5rFCDGEutgpeQ50Om-YkBabtXVOJAkmedslKw",
       "name": "ugabuga.pdf",
@@ -35,4 +36,8 @@
       "size": 1290389,
       "uploadedOn": "2020-04-02T08:02:17-05:00"
     }
-]
+  ],
+  "offset": 0,
+  "pageSize": 10,
+  "count": 6
+}

packages/dashboard/src/pages/api/stubs/user/uploads.json

@@ -1,4 +1,5 @@
-[
+{
+  "items": [
     {
       "skylink": "PAL0w4SdA5rFCDGEutgpeQ50Om-YkBabtXVOJAkmedslKw",
       "name": "ugabuga.pdf",
@@ -35,4 +36,8 @@
       "size": 1290389,
       "uploadedOn": "2020-04-02T08:02:17-05:00"
     }
-]
+  ],
+  "offset": 0,
+  "pageSize": 10,
+  "count": 6
+}

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>
   );
 }

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>
   );
 }