68 lines
2.1 KiB
JavaScript
68 lines
2.1 KiB
JavaScript
import dayjs from "dayjs";
|
|
import prettyBytes from "pretty-bytes";
|
|
import { useState } from "react";
|
|
import ky from "ky";
|
|
import { toast } from "react-toastify";
|
|
import Layout from "../components/Layout";
|
|
import Table from "../components/Table";
|
|
import { SkynetClient } from "skynet-js";
|
|
import useAccountsApi from "../services/useAccountsApi";
|
|
|
|
const skynetClient = new SkynetClient(`https://${process.env.NEXT_PUBLIC_PORTAL_DOMAIN}`);
|
|
const getSkylinkLink = ({ skylink }) => skynetClient.getSkylinkUrl(skylink);
|
|
const getRelativeDate = ({ uploadedOn }) => dayjs(uploadedOn).format("YYYY-MM-DD HH:mm:ss");
|
|
const headers = [
|
|
{
|
|
key: "name",
|
|
name: "File",
|
|
formatter: ({ name, skylink }) => (
|
|
<>
|
|
<p>
|
|
<a
|
|
href={getSkylinkLink({ skylink })}
|
|
className="text-green-600 hover:text-green-900 break-all"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{name}
|
|
</a>
|
|
</p>
|
|
<p className="text-gray-500 text-xs">{skylink}</p>
|
|
</>
|
|
),
|
|
},
|
|
{ key: "size", name: "Size", formatter: ({ size }) => prettyBytes(size) },
|
|
{ key: "uploadedOn", name: "Uploaded on", formatter: getRelativeDate },
|
|
];
|
|
const actions = [
|
|
{
|
|
name: "Unpin Skylink",
|
|
action: async ({ skylink }, mutate) => {
|
|
await toast.promise(ky.delete(`/api/user/uploads/${skylink}`), {
|
|
pending: "Unpinning Skylink",
|
|
success: "Skylink unpinned",
|
|
error: (error) => error.message,
|
|
});
|
|
|
|
mutate();
|
|
},
|
|
},
|
|
];
|
|
|
|
export default function Uploads() {
|
|
const [offset, setOffset] = useState(0);
|
|
const { data, mutate } = useAccountsApi(`user/uploads?pageSize=10&offset=${offset}`, {
|
|
revalidateOnMount: true,
|
|
});
|
|
|
|
// preload next page if it exists (based on the response from the current page query)
|
|
const nextPageOffset = data && data.offset + data.pageSize < data.count ? data.offset + data.pageSize : offset;
|
|
useAccountsApi(`user/uploads?pageSize=10&offset=${nextPageOffset}`);
|
|
|
|
return (
|
|
<Layout title="Your uploads">
|
|
<Table {...data} mutate={mutate} headers={headers} actions={actions} setOffset={setOffset} />
|
|
</Layout>
|
|
);
|
|
}
|