feat: files table & react ConfigProvider

* server side sorting / ordering
* ConfigProvider, useConfig (no need to pass config to every component)
This commit is contained in:
diced 2023-07-08 20:56:52 -07:00
parent d2ce56f5d3
commit c964bff4ac
No known key found for this signature in database
GPG key ID: 370BD1BA142842D1
18 changed files with 500 additions and 119 deletions

View file

@ -1,92 +0,0 @@
import DashboardFile from '@/components/file/DashboardFile';
import type { SafeConfig } from '@/lib/config/safe';
import {
Button,
Center,
Group,
LoadingOverlay,
Pagination,
Paper,
SimpleGrid,
Stack,
Title,
} from '@mantine/core';
import { IconFileUpload, IconFilesOff } from '@tabler/icons-react';
import Link from 'next/link';
import { useEffect, useState } from 'react';
import { useApiPagination } from './useApiPagination';
import { useRouter } from 'next/router';
export default function Files({ config }: { config: SafeConfig }) {
const router = useRouter();
const [page, setPage] = useState<number>(router.query.page ? parseInt(router.query.page as string) : 1);
const { pages, pagesCount } = useApiPagination(page);
useEffect(() => {
router.replace(
{
query: {
...router.query,
page: page,
},
},
undefined,
{ shallow: true }
);
}, [page]);
return (
<>
<SimpleGrid
my='sm'
cols={pages.data?.length ?? 0 > 0 ? 3 : 1}
spacing='md'
breakpoints={[
{ maxWidth: 'sm', cols: 1 },
{ maxWidth: 'md', cols: 2 },
]}
pos='relative'
>
{pages.isLoading ? (
<Paper withBorder h={200}>
<LoadingOverlay visible />
</Paper>
) : pages.data?.length ?? 0 > 0 ? (
pages.data?.map((file) => (
<DashboardFile
disableMediaPreview={config.website.disableMediaPreview}
key={file.id}
file={file}
/>
))
) : (
<Paper withBorder p='sm'>
<Center>
<Stack>
<Group>
<IconFilesOff size='2rem' />
<Title order={2}>No files found</Title>
</Group>
<Button
variant='outline'
color='gray'
compact
leftIcon={<IconFileUpload size='1rem' />}
component={Link}
href='/dashboard/upload/file'
>
Upload a file
</Button>
</Stack>
</Center>
</Paper>
)}
</SimpleGrid>
<Center>
<Pagination my='sm' value={page} onChange={setPage} total={pagesCount.data?.count ?? 1} />
</Center>
</>
);
}