import { API_URL } from '@lib/constants'; import { FileResponse, IFile } from '@lib/types'; import { formatDate } from '@lib/utils'; import { Box, Button, Flex, Grid, Group, Image, Stack, Text, } from '@mantine/core'; import { showNotification } from '@mantine/notifications'; import { IconCheck, IconX } from '@tabler/icons'; import { useQueryClient } from '@tanstack/react-query'; import axios from 'axios'; import { FC, useCallback } from 'react'; const PreviewCard: FC<{ file: IFile; }> = ({ file }) => { const queryClient = useQueryClient(); const fileURL = `${API_URL}/${file.slug}.${file.filename.split('.').pop()}`; const deleteFile = useCallback(() => { return axios .get(`${API_URL}/delete/${Buffer.from(file.id).toString('base64')}`) .then((res) => { const data = res.data.replace(/
|<\/pre>/g, ''); showNotification({ title: 'Delete File', color: 'green', message: data, icon:, }); queryClient.setQueryData (['files'], (oldData) => { if (!oldData) return { files: [], totalFiles: 0, totalPages: 0 }; return { files: oldData?.files.filter((f: IFile) => f.id !== file.id), totalFiles: oldData?.totalFiles - 1, totalPages: oldData?.totalPages, }; }); }) .catch((err) => { if (err.response.status === 429) { showNotification({ title: 'Delete File', color: 'red', message: 'You are deleting files too fast.', icon: , }); return; } showNotification({ title: 'Delete File', color: 'red', message: 'Something went wrong while deleting the file.', icon: , }); }); }, [file.id, queryClient]); return ( ); }; export default PreviewCard; ({ overflow: 'scroll', border: `1px solid ${theme.colors.dark[4]}`, borderRadius: theme.radius.md, boxShadow: theme.shadows.sm, msOverflowStyle: 'none', scrollbarWidth: 'thin', scrollbarColor: `${theme.colors.dark[5]} ${theme.colors.dark[7]}`, '::-webkit-scrollbar': { width: 8, }, '::webkit-scrollbar-track': { background: theme.colors.dark[7], }, '::-webkit-scrollbar-thumb': { background: theme.colors.dark[5], borderRadius: 8, }, })} > {file.mimetype.includes('image') ? ( /* eslint-disable-next-line @next/next/no-img-element*/ ) : file.mimetype.includes('video') ? ( ) : file.mimetype.includes('audio') ? ( ) : ( This file type is not supported for preview. )}{file.filename} ({file.size}) {file.slug + '.' + file.filename.split('.').pop()} Uploaded at {formatDate(new Date(file.createdAt))}