diff --git a/src/components/File.tsx b/src/components/File.tsx
deleted file mode 100644
index fb46fe6..0000000
--- a/src/components/File.tsx
+++ /dev/null
@@ -1,402 +0,0 @@
-import {
- ActionIcon,
- Card,
- Group,
- LoadingOverlay,
- Modal,
- Select,
- SimpleGrid,
- Stack,
- Text,
- Title,
- Tooltip,
-} from '@mantine/core';
-import { useClipboard } from '@mantine/hooks';
-import { showNotification } from '@mantine/notifications';
-import useFetch from 'hooks/useFetch';
-import { useFileDelete, useFileFavorite } from 'lib/queries/files';
-import { useFolders } from 'lib/queries/folders';
-import { relativeTime } from 'lib/utils/client';
-import { useState } from 'react';
-import {
- CalendarIcon,
- ClockIcon,
- CopyIcon,
- CrossIcon,
- DeleteIcon,
- DownloadIcon,
- ExternalLinkIcon,
- EyeIcon,
- FileIcon,
- FolderMinusIcon,
- FolderPlusIcon,
- HashIcon,
- ImageIcon,
- InfoIcon,
- StarIcon,
-} from './icons';
-import MutedText from './MutedText';
-import Type from './Type';
-
-export function FileMeta({ Icon, title, subtitle, ...other }) {
- return other.tooltip ? (
-
-
-
-
- {title}
- {subtitle}
-
-
-
- ) : (
-
-
-
- {title}
- {subtitle}
-
-
- );
-}
-
-export default function File({
- image,
- disableMediaPreview,
- exifEnabled,
- refreshImages,
- reducedActions = false,
-}) {
- const [open, setOpen] = useState(false);
- const [overrideRender, setOverrideRender] = useState(false);
- const deleteFile = useFileDelete();
- const favoriteFile = useFileFavorite();
- const clipboard = useClipboard();
-
- const folders = useFolders();
-
- const loading = deleteFile.isLoading || favoriteFile.isLoading;
-
- const handleDelete = async () => {
- deleteFile.mutate(image.id, {
- onSuccess: () => {
- showNotification({
- title: 'File Deleted',
- message: '',
- color: 'green',
- icon: ,
- });
- },
-
- onError: (res: any) => {
- showNotification({
- title: 'Failed to delete file',
- message: res.error,
- color: 'red',
- icon: ,
- });
- },
-
- onSettled: () => {
- setOpen(false);
- },
- });
- };
-
- const handleCopy = () => {
- clipboard.copy(`${window.location.protocol}//${window.location.host}${image.url}`);
- setOpen(false);
- if (!navigator.clipboard)
- showNotification({
- title: 'Unable to copy to clipboard',
- message: 'Zipline is unable to copy to clipboard due to security reasons.',
- color: 'red',
- });
- else
- showNotification({
- title: 'Copied to clipboard',
- message: '',
- icon: ,
- });
- };
-
- const handleFavorite = async () => {
- favoriteFile.mutate(
- { id: image.id, favorite: !image.favorite },
- {
- onSuccess: () => {
- showNotification({
- title: 'Image is now ' + (!image.favorite ? 'favorited' : 'unfavorited'),
- message: '',
- icon: ,
- });
- },
-
- onError: (res: any) => {
- showNotification({
- title: 'Failed to favorite file',
- message: res.error,
- color: 'red',
- icon: ,
- });
- },
- }
- );
- };
-
- const inFolder = image.folderId;
-
- const refresh = () => {
- refreshImages();
- folders.refetch();
- };
-
- const removeFromFolder = async () => {
- const res = await useFetch('/api/user/folders/' + image.folderId, 'DELETE', {
- file: Number(image.id),
- });
-
- refresh();
-
- if (!res.error) {
- showNotification({
- title: 'Removed from folder',
- message: res.name,
- color: 'green',
- icon: ,
- });
- } else {
- showNotification({
- title: 'Failed to remove from folder',
- message: res.error,
- color: 'red',
- icon: ,
- });
- }
- };
-
- const addToFolder = async (t) => {
- const res = await useFetch('/api/user/folders/' + t, 'POST', {
- file: Number(image.id),
- });
-
- refresh();
-
- if (!res.error) {
- showNotification({
- title: 'Added to folder',
- message: res.name,
- color: 'green',
- icon: ,
- });
- } else {
- showNotification({
- title: 'Failed to add to folder',
- message: res.error,
- color: 'red',
- icon: ,
- });
- }
- };
-
- const createFolder = (t) => {
- useFetch('/api/user/folders', 'POST', {
- name: t,
- add: [Number(image.id)],
- }).then((res) => {
- refresh();
-
- if (!res.error) {
- showNotification({
- title: 'Created & added to folder',
- message: res.name,
- color: 'green',
- icon: ,
- });
- } else {
- showNotification({
- title: 'Failed to create folder',
- message: res.error,
- color: 'red',
- icon: ,
- });
- }
- });
- return { value: t, label: t };
- };
-
- return (
- <>
- setOpen(false)} title={{image.name}} size='xl'>
-
-
-
-
-
-
-
- {image.maxViews && (
-
- )}
-
- {image.expiresAt && !reducedActions && (
-
- )}
-
-
-
-
-
-
- {exifEnabled && !reducedActions && (
-
- window.open(`/dashboard/metadata/${image.id}`, '_blank')}
- >
-
-
-
- )}
- {reducedActions ? null : inFolder && !folders.isLoading ? (
- f.id === image.folderId)?.name ?? ''
- }"`}
- >
-
-
-
-
- ) : (
-
-
- )}
-
-
- {reducedActions ? null : (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
- )}
-
-
- window.open(image.url, '_blank')}>
-
-
-
-
-
-
-
-
-
-
-
- window.open(`/r/${encodeURI(image.name)}?download=true`, '_blank')}
- >
-
-
-
-
-
-
-
-
-
- setOpen(true)}
- disableMediaPreview={disableMediaPreview}
- />
-
-
-
- );
-}
diff --git a/src/components/File/FileModal.tsx b/src/components/File/FileModal.tsx
new file mode 100644
index 0000000..31dd8e4
--- /dev/null
+++ b/src/components/File/FileModal.tsx
@@ -0,0 +1,345 @@
+import {
+ ActionIcon,
+ Group,
+ LoadingOverlay,
+ Modal,
+ Select,
+ SimpleGrid,
+ Stack,
+ Title,
+ Tooltip,
+} from '@mantine/core';
+import { useClipboard } from '@mantine/hooks';
+import { showNotification } from '@mantine/notifications';
+import useFetch from 'hooks/useFetch';
+import { useFileDelete, useFileFavorite } from 'lib/queries/files';
+import { useFolders } from 'lib/queries/folders';
+import { relativeTime } from 'lib/utils/client';
+import { useState } from 'react';
+import { FileMeta } from '.';
+import {
+ CalendarIcon,
+ ClockIcon,
+ CopyIcon,
+ CrossIcon,
+ DeleteIcon,
+ DownloadIcon,
+ ExternalLinkIcon,
+ EyeIcon,
+ FileIcon,
+ FolderMinusIcon,
+ FolderPlusIcon,
+ HashIcon,
+ ImageIcon,
+ InfoIcon,
+ StarIcon,
+} from '../icons';
+import Type from '../Type';
+
+export default function FileModal({
+ open,
+ setOpen,
+ file,
+ loading,
+ refresh,
+ reducedActions = false,
+ exifEnabled,
+}: {
+ open: boolean;
+ setOpen: (open: boolean) => void;
+ file: any;
+ loading: boolean;
+ refresh: () => void;
+ reducedActions?: boolean;
+ exifEnabled?: boolean;
+}) {
+ const deleteFile = useFileDelete();
+ const favoriteFile = useFileFavorite();
+ const folders = useFolders();
+
+ const [overrideRender, setOverrideRender] = useState(false);
+ const clipboard = useClipboard();
+
+ const handleDelete = async () => {
+ deleteFile.mutate(file.id, {
+ onSuccess: () => {
+ showNotification({
+ title: 'File Deleted',
+ message: '',
+ color: 'green',
+ icon: ,
+ });
+ },
+
+ onError: (res: any) => {
+ showNotification({
+ title: 'Failed to delete file',
+ message: res.error,
+ color: 'red',
+ icon: ,
+ });
+ },
+
+ onSettled: () => {
+ setOpen(false);
+ },
+ });
+ };
+
+ const handleCopy = () => {
+ clipboard.copy(`${window.location.protocol}//${window.location.host}${file.url}`);
+ setOpen(false);
+ if (!navigator.clipboard)
+ showNotification({
+ title: 'Unable to copy to clipboard',
+ message: 'Zipline is unable to copy to clipboard due to security reasons.',
+ color: 'red',
+ });
+ else
+ showNotification({
+ title: 'Copied to clipboard',
+ message: '',
+ icon: ,
+ });
+ };
+
+ const handleFavorite = async () => {
+ favoriteFile.mutate(
+ { id: file.id, favorite: !file.favorite },
+ {
+ onSuccess: () => {
+ showNotification({
+ title: 'The file is now ' + (!file.favorite ? 'favorited' : 'unfavorited'),
+ message: '',
+ icon: ,
+ });
+ },
+
+ onError: (res: any) => {
+ showNotification({
+ title: 'Failed to favorite file',
+ message: res.error,
+ color: 'red',
+ icon: ,
+ });
+ },
+ }
+ );
+ };
+
+ const inFolder = file.folderId;
+
+ const removeFromFolder = async () => {
+ const res = await useFetch('/api/user/folders/' + file.folderId, 'DELETE', {
+ file: Number(file.id),
+ });
+
+ refresh();
+
+ if (!res.error) {
+ showNotification({
+ title: 'Removed from folder',
+ message: res.name,
+ color: 'green',
+ icon: ,
+ });
+ } else {
+ showNotification({
+ title: 'Failed to remove from folder',
+ message: res.error,
+ color: 'red',
+ icon: ,
+ });
+ }
+ };
+
+ const addToFolder = async (t) => {
+ const res = await useFetch('/api/user/folders/' + t, 'POST', {
+ file: Number(file.id),
+ });
+
+ refresh();
+
+ if (!res.error) {
+ showNotification({
+ title: 'Added to folder',
+ message: res.name,
+ color: 'green',
+ icon: ,
+ });
+ } else {
+ showNotification({
+ title: 'Failed to add to folder',
+ message: res.error,
+ color: 'red',
+ icon: ,
+ });
+ }
+ };
+
+ const createFolder = (t) => {
+ useFetch('/api/user/folders', 'POST', {
+ name: t,
+ add: [Number(file.id)],
+ }).then((res) => {
+ refresh();
+
+ if (!res.error) {
+ showNotification({
+ title: 'Created & added to folder',
+ message: res.name,
+ color: 'green',
+ icon: ,
+ });
+ } else {
+ showNotification({
+ title: 'Failed to create folder',
+ message: res.error,
+ color: 'red',
+ icon: ,
+ });
+ }
+ });
+ return { value: t, label: t };
+ };
+
+ return (
+ setOpen(false)} title={{file.name}} size='xl'>
+
+
+
+
+
+
+
+ {file.maxViews && (
+
+ )}
+
+ {file.expiresAt && !reducedActions && (
+
+ )}
+
+
+
+
+
+
+ {exifEnabled && !reducedActions && (
+
+ window.open(`/dashboard/metadata/${file.id}`, '_blank')}
+ >
+
+
+
+ )}
+ {reducedActions ? null : inFolder && !folders.isLoading ? (
+ f.id === file.folderId)?.name ?? ''}"`}
+ >
+
+
+
+
+ ) : (
+
+
+ )}
+
+
+ {reducedActions ? null : (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+ window.open(file.url, '_blank')}>
+
+
+
+
+
+
+
+
+
+
+
+ window.open(`/r/${encodeURI(file.name)}?download=true`, '_blank')}
+ >
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/File/index.tsx b/src/components/File/index.tsx
new file mode 100644
index 0000000..8bfef83
--- /dev/null
+++ b/src/components/File/index.tsx
@@ -0,0 +1,90 @@
+import { Card, Group, LoadingOverlay, Stack, Text, Tooltip } from '@mantine/core';
+import { useFileDelete, useFileFavorite } from 'lib/queries/files';
+import { useFolders } from 'lib/queries/folders';
+import { useState } from 'react';
+import MutedText from '../MutedText';
+import Type from '../Type';
+import FileModal from './FileModal';
+
+export function FileMeta({ Icon, title, subtitle, ...other }) {
+ return other.tooltip ? (
+
+
+
+
+ {title}
+ {subtitle}
+
+
+
+ ) : (
+
+
+
+ {title}
+ {subtitle}
+
+
+ );
+}
+
+export default function File({
+ image,
+ disableMediaPreview,
+ exifEnabled,
+ refreshImages,
+ reducedActions = false,
+}) {
+ const [open, setOpen] = useState(false);
+ const deleteFile = useFileDelete();
+ const favoriteFile = useFileFavorite();
+ const loading = deleteFile.isLoading || favoriteFile.isLoading;
+
+ const folders = useFolders();
+
+ const refresh = () => {
+ refreshImages();
+ folders.refetch();
+ };
+
+ return (
+ <>
+
+
+
+
+
+ setOpen(true)}
+ disableMediaPreview={disableMediaPreview}
+ />
+
+
+
+ );
+}
diff --git a/src/components/Type.tsx b/src/components/Type.tsx
index b66aeda..099d68f 100644
--- a/src/components/Type.tsx
+++ b/src/components/Type.tsx
@@ -1,16 +1,4 @@
-import {
- Alert,
- Box,
- Button,
- Card,
- Center,
- Container,
- Group,
- Image,
- LoadingOverlay,
- Text,
-} from '@mantine/core';
-import { Prism } from '@mantine/prism';
+import { Alert, Box, Button, Card, Center, Group, Image, LoadingOverlay, Text } from '@mantine/core';
import { useEffect, useState } from 'react';
import { AudioIcon, FileIcon, ImageIcon, PlayIcon } from './icons';
import KaTeX from './render/KaTeX';
@@ -62,7 +50,7 @@ export default function Type({ file, popup = false, disableMediaPreview, ...prop
}, []);
}
- const renderRenderAlert = () => {
+ const renderAlert = () => {
return (
You are{props.overrideRender ? ' not ' : ' '}viewing a rendered version of the file
@@ -81,7 +69,7 @@ export default function Type({ file, popup = false, disableMediaPreview, ...prop
if ((shouldRenderMarkdown || shouldRenderTex) && !props.overrideRender && popup)
return (
<>
- {renderRenderAlert()}
+ {renderAlert()}
{shouldRenderMarkdown && }
{shouldRenderTex && }
@@ -90,7 +78,7 @@ export default function Type({ file, popup = false, disableMediaPreview, ...prop
);
if (media && disableMediaPreview) {
- return ;
+ return ;
}
return popup ? (
@@ -110,7 +98,7 @@ export default function Type({ file, popup = false, disableMediaPreview, ...prop
) : (
<>
- {(shouldRenderMarkdown || shouldRenderTex) && renderRenderAlert()}
+ {(shouldRenderMarkdown || shouldRenderTex) && renderAlert()}
)}
diff --git a/src/components/pages/Dashboard/index.tsx b/src/components/pages/Dashboard/index.tsx
index 166eac5..fce10da 100644
--- a/src/components/pages/Dashboard/index.tsx
+++ b/src/components/pages/Dashboard/index.tsx
@@ -1,42 +1,88 @@
-import { DataGrid, dateFilterFn, stringFilterFn } from '@dicedtomato/mantine-data-grid';
-import { Title, useMantineTheme, Box } from '@mantine/core';
+import { ActionIcon, Box, Group, Title, Tooltip } from '@mantine/core';
import { useClipboard } from '@mantine/hooks';
import { showNotification } from '@mantine/notifications';
-import { CopyIcon, CrossIcon, DeleteIcon, EnterIcon } from 'components/icons';
+import FileModal from 'components/File/FileModal';
+import { CopyIcon, CrossIcon, DeleteIcon, EnterIcon, FileIcon } from 'components/icons';
import Link from 'components/Link';
import MutedText from 'components/MutedText';
import useFetch from 'lib/hooks/useFetch';
-import { useFiles, useRecent } from 'lib/queries/files';
+import { usePaginatedFiles, useRecent } from 'lib/queries/files';
import { useStats } from 'lib/queries/stats';
import { userSelector } from 'lib/recoil/user';
+import { DataTable, DataTableSortStatus } from 'mantine-datatable';
+import { useEffect, useState } from 'react';
import { useRecoilValue } from 'recoil';
import RecentFiles from './RecentFiles';
import { StatCards } from './StatCards';
export default function Dashboard({ disableMediaPreview, exifEnabled }) {
const user = useRecoilValue(userSelector);
- const theme = useMantineTheme();
- const images = useFiles();
const recent = useRecent('media');
const stats = useStats();
const clipboard = useClipboard();
- const updateImages = () => {
- images.refetch();
+ // pagination
+ const [, setNumPages] = useState(0);
+ const [page, setPage] = useState(1);
+ const [numFiles, setNumFiles] = useState(0);
+
+ useEffect(() => {
+ (async () => {
+ const { count } = await useFetch('/api/user/paged?count=true');
+ setNumPages(count);
+
+ const { count: filesCount } = await useFetch('/api/user/files?count=true');
+ setNumFiles(filesCount);
+ })();
+ }, [page]);
+
+ const files = usePaginatedFiles(page);
+
+ // sorting
+ const [sortStatus, setSortStatus] = useState({
+ columnAccessor: 'date',
+ direction: 'asc',
+ });
+ const [records, setRecords] = useState(files.data);
+
+ useEffect(() => {
+ setRecords(files.data);
+ }, [files.data]);
+
+ useEffect(() => {
+ if (!records || records.length === 0) return;
+
+ const sortedRecords = [...records].sort((a, b) => {
+ if (sortStatus.direction === 'asc') {
+ return a[sortStatus.columnAccessor] > b[sortStatus.columnAccessor] ? 1 : -1;
+ }
+
+ return a[sortStatus.columnAccessor] < b[sortStatus.columnAccessor] ? 1 : -1;
+ });
+
+ setRecords(sortedRecords);
+ }, [sortStatus]);
+
+ // file modal on click
+ const [open, setOpen] = useState(false);
+ const [selectedFile, setSelectedFile] = useState(null);
+
+ const updateFiles = () => {
+ files.refetch();
recent.refetch();
stats.refetch();
};
- const deleteImage = async ({ original }) => {
+ const deleteFile = async (file) => {
const res = await useFetch('/api/user/files', 'DELETE', {
- id: original.id,
+ id: file.id,
});
if (!res.error) {
- updateImages();
+ updateFiles();
showNotification({
title: 'File Deleted',
- message: `${original.name}`,
+ message: `${file.name}`,
color: 'green',
icon: ,
});
@@ -50,8 +96,8 @@ export default function Dashboard({ disableMediaPreview, exifEnabled }) {
}
};
- const copyImage = async ({ original }) => {
- clipboard.copy(`${window.location.protocol}//${window.location.host}${original.url}`);
+ const copyFile = async (file) => {
+ clipboard.copy(`${window.location.protocol}//${window.location.host}${file.url}`);
if (!navigator.clipboard)
showNotification({
title: 'Unable to copy to clipboard',
@@ -63,22 +109,34 @@ export default function Dashboard({ disableMediaPreview, exifEnabled }) {
title: 'Copied to clipboard',
message: (
{`${window.location.protocol}//${window.location.host}${original.url}`}
+ href={`${window.location.protocol}//${window.location.host}${file.url}`}
+ >{`${window.location.protocol}//${window.location.host}${file.url}`}
),
icon: ,
});
};
- const viewImage = async ({ original }) => {
- window.open(`${window.location.protocol}//${window.location.host}${original.url}`);
+ const viewFile = async (file) => {
+ window.open(`${window.location.protocol}//${window.location.host}${file.url}`);
};
return (
+ {selectedFile && (
+
files.refetch()}
+ reducedActions={false}
+ exifEnabled={exifEnabled}
+ />
+ )}
+
Welcome back, {user?.username}
- You have {images.isSuccess ? images.data.length : '...'} files
+ You have {numFiles === 0 ? '...' : numFiles} files
@@ -90,74 +148,92 @@ export default function Dashboard({ disableMediaPreview, exifEnabled }) {
View your gallery here.
- }
+
+ new Date(file.createdAt).toLocaleString(),
},
{
- accessorKey: 'mimetype',
- header: 'Type',
- filterFn: stringFilterFn,
- },
- {
- accessorKey: 'createdAt',
- header: 'Date',
- filterFn: dateFilterFn,
+ accessor: 'actions',
+ textAlignment: 'right',
+ render: (file) => (
+
+
+ {
+ setSelectedFile(file);
+ setOpen(true);
+ }}
+ color='blue'
+ >
+
+
+
+
+
+ viewFile(file)} color='blue'>
+
+
+
+
+ copyFile(file)} color='green'>
+
+
+ deleteFile(file)} color='red'>
+
+
+
+ ),
},
]}
+ records={records ?? []}
+ fetching={files.isLoading}
+ loaderBackgroundBlur={5}
+ loaderVariant='dots'
+ minHeight={620}
+ page={page}
+ onPageChange={setPage}
+ recordsPerPage={16}
+ totalRecords={numFiles}
+ sortStatus={sortStatus}
+ onSortStatusChange={setSortStatus}
+ rowContextMenu={{
+ shadow: 'xl',
+ borderRadius: 'md',
+ items: (file) => [
+ {
+ key: 'view',
+ icon: ,
+ title: `View ${file.name}`,
+ onClick: () => viewFile(file),
+ },
+ {
+ key: 'copy',
+ icon: ,
+ title: `Copy ${file.name}`,
+ onClick: () => copyFile(file),
+ },
+ {
+ key: 'delete',
+ icon: ,
+ title: `Delete ${file.name}`,
+ onClick: () => deleteFile(file),
+ },
+ ],
+ }}
+ onCellClick={({ record: file }) => {
+ setSelectedFile(file);
+ setOpen(true);
+ }}
/>