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