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 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>

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

@ -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
}

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

@ -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
}

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

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

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

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