feat: naming & views on files #187 #181

src/components/File.tsx

@@ -4,7 +4,7 @@ import { showNotification } from '@mantine/notifications';
 import { relativeTime } from 'lib/utils/client';
 import { useFileDelete, useFileFavorite } from 'lib/queries/files';
 import { useState } from 'react';
-import { CalendarIcon, ClockIcon, CopyIcon, CrossIcon, DeleteIcon, ExternalLinkIcon, FileIcon, HashIcon, ImageIcon, StarIcon } from './icons';
+import { CalendarIcon, ClockIcon, CopyIcon, CrossIcon, DeleteIcon, ExternalLinkIcon, FileIcon, HashIcon, ImageIcon, StarIcon, EyeIcon } from './icons';
 import MutedText from './MutedText';
 import Type from './Type';
 import Link from './Link';
@@ -96,6 +96,7 @@ export default function File({ image, updateImages, disableMediaPreview }) {
     });
   };
 
+  console.log(image);
   return (
     <>
       <Modal
@@ -118,6 +119,7 @@ export default function File({ image, updateImages, disableMediaPreview }) {
           <Stack>
             <FileMeta Icon={FileIcon} title='Name' subtitle={image.file} />
             <FileMeta Icon={ImageIcon} title='Type' subtitle={image.mimetype} />
+            <FileMeta Icon={EyeIcon} title='Views' subtitle={image.views} />
             <FileMeta Icon={CalendarIcon} title='Uploaded at' subtitle={new Date(image.created_at).toLocaleString()} />
             {image.expires_at && <FileMeta
               Icon={ClockIcon}

src/components/dropzone/Dropzone.tsx

@@ -12,7 +12,7 @@ export default function Dropzone({ loading, onDrop, children }) {
         <ImageIcon size={80} />
 
         <Text size='xl' inline>
-          Drag images here or click to select files
+          Drag files here or click to select files
         </Text>
       </Group>
 

src/components/icons/EyeIcon.tsx

@@ -0,0 +1,5 @@
+import { Eye } from 'react-feather';
+
+export default function EyeIcon({ ...props }) {
+  return <Eye size={15} {...props} />;
+}

src/components/icons/index.tsx

@@ -29,6 +29,7 @@ import DownloadIcon from './DownloadIcon';
 import FlameshotIcon from './FlameshotIcon';
 import GitHubIcon from './GitHubIcon';
 import DiscordIcon from './DiscordIcon';
+import EyeIcon from './EyeIcon';
 
 export {
   ActivityIcon,
@@ -62,4 +63,5 @@ export {
   FlameshotIcon,
   GitHubIcon,
   DiscordIcon,
+  EyeIcon,
 };

src/components/pages/Manage/index.tsx

@@ -202,7 +202,7 @@ export default function Manage() {
   };
 
   const openDeleteModal = () => modals.openConfirmModal({
-    title: 'Are you sure you want to delete all of your images?',
+    title: 'Are you sure you want to delete all of your files?',
     closeOnConfirm: false,
     labels: { confirm: 'Yes', cancel: 'No' },
     onConfirm: () => {

src/components/pages/Upload.tsx

@@ -101,7 +101,7 @@ export default function Upload() {
 
     showNotification({
       id: 'upload',
-      title: 'Uploading Images...',
+      title: 'Uploading files...',
       message: '',
       loading: true,
       autoClose: false,
@@ -123,7 +123,7 @@ export default function Upload() {
         updateNotification({
           id: 'upload',
           title: 'Upload Successful',
-          message: <>Copied first image to clipboard! <br />{json.files.map(x => (<Link key={x} href={x}>{x}<br /></Link>))}</>,
+          message: <>Copied first file to clipboard! <br />{json.files.map(x => (<Link key={x} href={x}>{x}<br /></Link>))}</>,
           color: 'green',
           icon: <UploadIcon />,
         });

src/pages/api/user/files.ts

@@ -25,7 +25,7 @@ async function handler(req: NextApiReq, res: NextApiRes) {
           userId: user.id,
         },
       });
-      Logger.get('image').info(`User ${user.username} (${user.id}) deleted ${count} images.`);
+      Logger.get('image').info(`User ${user.username} (${user.id}) deleted ${count} files.`);
 
       return res.json({ count });
     } else {
@@ -74,6 +74,7 @@ async function handler(req: NextApiReq, res: NextApiRes) {
         mimetype: true,
         id: true,
         favorite: true,
+        views: true,
       },
     });
 

src/pages/api/users.ts

@@ -49,7 +49,7 @@ async function handler(req: NextApiReq, res: NextApiRes) {
           userId: deleteUser.id,
         },
       });
-      Logger.get('image').info(`User ${user.username} (${user.id}) deleted ${count} images of user ${deleteUser.username} (${deleteUser.id})`);
+      Logger.get('image').info(`User ${user.username} (${user.id}) deleted ${count} files of user ${deleteUser.username} (${deleteUser.id})`);
     }
 
     await prisma.user.delete({