LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

uploads

This commit is contained in:
Karol Wypchlo 2021-02-09 16:55:56 +01:00
parent 87f36036a7
commit 2d85850d5e
5 changed files with 112 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
packages/dashboard/src/components/Table.js
View File

@ -1,8 +1,6 @@
import { useEffect } from "react"; import { useEffect } from "react";
import classnames from "classnames"; import classnames from "classnames";
const pageSize = 2;
function Button({ children, disabled, className, ...props }) { function Button({ children, disabled, className, ...props }) {
return ( return (
<button <button
@ -23,14 +21,16 @@ function Button({ children, disabled, className, ...props }) {
); );
} }
export default function Table({ data, headers, actions, page, setPage }) { export default function Table({ items, count, headers, actions, offset, setOffset, pageSize = 10 }) {
const lastPage = Math.ceil(data.length / pageSize);
const dataSlice = data.slice(pageSize * (page - 1), pageSize * (page - 1) + pageSize);
useEffect(() => { useEffect(() => {
if (page > lastPage) setPage(lastPage); if (offset + pageSize > count) setOffset(Math.floor(count / pageSize));
if (page < 1) setPage(1); else if (offset < 0) setOffset(0);
}, [page, lastPage, setPage]); else if (offset % pageSize) setOffset(offset - (offset % pageSize));
}, [offset, pageSize, setOffset]);
if (!items) {
return <>aaaa</>;
}
return ( return (
<div className="flex flex-col"> <div className="flex flex-col">
@ -57,7 +57,7 @@ export default function Table({ data, headers, actions, page, setPage }) {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{dataSlice.map((row, index) => ( {items.map((row, index) => (
<tr className={index % 2 ? "bg-white" : "bg-gray-50"} key={index}> <tr className={index % 2 ? "bg-white" : "bg-gray-50"} key={index}>
{headers.map(({ key, formatter }) => ( {headers.map(({ key, formatter }) => (
<td key={key} className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"> <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"> <div className="hidden sm:block">
<p className="text-sm text-gray-700"> <p className="text-sm text-gray-700">
Showing <span className="font-medium">{data.length ? pageSize * (page - 1) + 1 : 0}</span> to{" "} Showing <span className="font-medium">{offset ? offset + 1 : 0}</span> to{" "}
<span className="font-medium">{pageSize * page > data.length ? data.length : pageSize * page}</span>{" "} <span className="font-medium">{offset + pageSize > count ? count : offset + pageSize}</span> of{" "}
of <span className="font-medium">{data.length}</span> results <span className="font-medium">{count}</span> results
</p> </p>
</div> </div>
<div className="flex-1 flex justify-between sm:justify-end"> <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 Previous
</Button> </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 Next
</Button> </Button>
</div> </div>

81
packages/dashboard/src/pages/api/stubs/user/downloads.json
View File

@ -1,38 +1,43 @@
[ {
{ "items": [
"skylink": "PAL0w4SdA5rFCDGEutgpeQ50Om-YkBabtXVOJAkmedslKw", {
"name": "ugabuga.pdf", "skylink": "PAL0w4SdA5rFCDGEutgpeQ50Om-YkBabtXVOJAkmedslKw",
"size": 123123, "name": "ugabuga.pdf",
"uploadedOn": "2020-04-02T08:02:17-05:00" "size": 123123,
}, "uploadedOn": "2020-04-02T08:02:17-05:00"
{ },
"skylink": "XABvi7JtJbQSMAcDwnUnmp2FKDPjg8_tTTFP4BwMSxVdEg", {
"name": "ugabuga.pdf", "skylink": "XABvi7JtJbQSMAcDwnUnmp2FKDPjg8_tTTFP4BwMSxVdEg",
"size": 8912739812, "name": "ugabuga.pdf",
"uploadedOn": "2020-04-02T08:02:17-05:00" "size": 8912739812,
}, "uploadedOn": "2020-04-02T08:02:17-05:00"
{ },
"skylink": "IADUs8d9CQjUO34LmdaaNPK_STuZo24rpKVfYW3wPPM2uQ", {
"name": "ugabuga.pdf", "skylink": "IADUs8d9CQjUO34LmdaaNPK_STuZo24rpKVfYW3wPPM2uQ",
"size": 123123, "name": "ugabuga.pdf",
"uploadedOn": "2020-04-02T08:02:17-05:00" "size": 123123,
}, "uploadedOn": "2020-04-02T08:02:17-05:00"
{ },
"skylink": "_A2zt5SKoqwnnZU4cBF8uBycSKULXMyeg1c5ZISBr2Q3dA", {
"name": "ugabuga.pdf", "skylink": "_A2zt5SKoqwnnZU4cBF8uBycSKULXMyeg1c5ZISBr2Q3dA",
"size": 83943, "name": "ugabuga.pdf",
"uploadedOn": "2020-04-02T08:02:17-05:00" "size": 83943,
}, "uploadedOn": "2020-04-02T08:02:17-05:00"
{ },
"skylink": "AAC0uO43g64ULpyrW0zO3bjEknSFbAhm8c-RFP21EQlmSQ", {
"name": "ugabuga.pdf", "skylink": "AAC0uO43g64ULpyrW0zO3bjEknSFbAhm8c-RFP21EQlmSQ",
"size": 3290489120, "name": "ugabuga.pdf",
"uploadedOn": "2020-04-02T08:02:17-05:00" "size": 3290489120,
}, "uploadedOn": "2020-04-02T08:02:17-05:00"
{ },
"skylink": "CACqf4NlIMlA0CCCieYGjpViPGyfyJ4v1x3bmuCKZX8FKA", {
"name": "ugabuga.pdf", "skylink": "CACqf4NlIMlA0CCCieYGjpViPGyfyJ4v1x3bmuCKZX8FKA",
"size": 1290389, "name": "ugabuga.pdf",
"uploadedOn": "2020-04-02T08:02:17-05:00" "size": 1290389,
} "uploadedOn": "2020-04-02T08:02:17-05:00"
] }
],
"offset": 0,
"pageSize": 10,
"count": 6
}

81
packages/dashboard/src/pages/api/stubs/user/uploads.json
View File

@ -1,38 +1,43 @@
[ {
{ "items": [
"skylink": "PAL0w4SdA5rFCDGEutgpeQ50Om-YkBabtXVOJAkmedslKw", {
"name": "ugabuga.pdf", "skylink": "PAL0w4SdA5rFCDGEutgpeQ50Om-YkBabtXVOJAkmedslKw",
"size": 123123, "name": "ugabuga.pdf",
"uploadedOn": "2020-04-02T08:02:17-05:00" "size": 123123,
}, "uploadedOn": "2020-04-02T08:02:17-05:00"
{ },
"skylink": "XABvi7JtJbQSMAcDwnUnmp2FKDPjg8_tTTFP4BwMSxVdEg", {
"name": "ugabuga.pdf", "skylink": "XABvi7JtJbQSMAcDwnUnmp2FKDPjg8_tTTFP4BwMSxVdEg",
"size": 8912739812, "name": "ugabuga.pdf",
"uploadedOn": "2020-04-02T08:02:17-05:00" "size": 8912739812,
}, "uploadedOn": "2020-04-02T08:02:17-05:00"
{ },
"skylink": "IADUs8d9CQjUO34LmdaaNPK_STuZo24rpKVfYW3wPPM2uQ", {
"name": "ugabuga.pdf", "skylink": "IADUs8d9CQjUO34LmdaaNPK_STuZo24rpKVfYW3wPPM2uQ",
"size": 123123, "name": "ugabuga.pdf",
"uploadedOn": "2020-04-02T08:02:17-05:00" "size": 123123,
}, "uploadedOn": "2020-04-02T08:02:17-05:00"
{ },
"skylink": "_A2zt5SKoqwnnZU4cBF8uBycSKULXMyeg1c5ZISBr2Q3dA", {
"name": "ugabuga.pdf", "skylink": "_A2zt5SKoqwnnZU4cBF8uBycSKULXMyeg1c5ZISBr2Q3dA",
"size": 83943, "name": "ugabuga.pdf",
"uploadedOn": "2020-04-02T08:02:17-05:00" "size": 83943,
}, "uploadedOn": "2020-04-02T08:02:17-05:00"
{ },
"skylink": "AAC0uO43g64ULpyrW0zO3bjEknSFbAhm8c-RFP21EQlmSQ", {
"name": "ugabuga.pdf", "skylink": "AAC0uO43g64ULpyrW0zO3bjEknSFbAhm8c-RFP21EQlmSQ",
"size": 3290489120, "name": "ugabuga.pdf",
"uploadedOn": "2020-04-02T08:02:17-05:00" "size": 3290489120,
}, "uploadedOn": "2020-04-02T08:02:17-05:00"
{ },
"skylink": "CACqf4NlIMlA0CCCieYGjpViPGyfyJ4v1x3bmuCKZX8FKA", {
"name": "ugabuga.pdf", "skylink": "CACqf4NlIMlA0CCCieYGjpViPGyfyJ4v1x3bmuCKZX8FKA",
"size": 1290389, "name": "ugabuga.pdf",
"uploadedOn": "2020-04-02T08:02:17-05:00" "size": 1290389,
} "uploadedOn": "2020-04-02T08:02:17-05:00"
] }
],
"offset": 0,
"pageSize": 10,
"count": 6
}

6
packages/dashboard/src/pages/downloads.js
View File

@ -16,12 +16,12 @@ const headers = [
const actions = []; const actions = [];
export default function Downloads() { export default function Downloads() {
const [page, setPage] = useState(1); const [offset, setOffset] = useState(0);
const { data, error } = useSWR(`${apiPrefix}/user/downloads`, fetcher); const { data, error } = useSWR(`${apiPrefix}/user/downloads?pageSize=10&offset=${offset}`, fetcher);
return ( return (
<Layout title="Your downloads"> <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> </Layout>
); );
} }

8
packages/dashboard/src/pages/uploads.js
View File

@ -15,13 +15,13 @@ const headers = [
]; ];
const actions = []; const actions = [];
export default function Downloads() { export default function Uploads() {
const [page, setPage] = useState(1); const [offset, setOffset] = useState(0);
const { data, error } = useSWR(`${apiPrefix}/user/uploads`, fetcher); const { data, error } = useSWR(`${apiPrefix}/user/uploads?pageSize=10&offset=${offset}`, fetcher);
return ( return (
<Layout title="Your uploads"> <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> </Layout>
); );
} }