feat: v3.2.2 new file management & viewing

diced · Sep 13, 2021 · 4728258 · 4728258
1 parent ece3e16
commit 4728258
Show file tree

Hide file tree

Showing 15 changed files with 114 additions and 99 deletions.
diff --git a/Dockerignore b/Dockerignore
@@ -1,3 +1,5 @@
-prisma/migrations
+prisma
 node_modules
-.next
+.next
+uploads
+.git
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "zip3",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "scripts": {
     "prepare": "husky install",
     "dev": "NODE_ENV=development node server",
@@ -17,10 +17,9 @@
     "@emotion/styled": "^11.3.0",
     "@iarna/toml": "2.2.5",
     "@material-ui/core": "^5.0.0-alpha.37",
-    "@material-ui/data-grid": "^4.0.0-alpha.32",
     "@material-ui/icons": "^5.0.0-alpha.37",
     "@material-ui/styles": "^5.0.0-alpha.35",
-    "@prisma/client": "^2.30.3",
+    "@prisma/client": "^3.0.2",
     "@reduxjs/toolkit": "^1.6.0",
     "argon2": "^0.28.2",
     "colorette": "^1.2.2",
@@ -30,7 +29,7 @@
     "formik": "^2.2.9",
     "multer": "^1.4.2",
     "next": "11.1.1",
-    "prisma": "^2.30.3",
+    "prisma": "^3.0.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-dropzone": "^11.3.2",

diff --git a/server/index.js b/server/index.js
@@ -123,6 +123,7 @@ function shouldUseYarn() {
     });
     srv.on('listening', () => {
       Logger.get('server').info(`listening on ${config.core.host}:${config.core.port}`);
+      if (process.platform === 'linux' && dev) execSync(`xdg-open ${config.core.secure ? 'https' : 'http'}://${config.core.host === '0.0.0.0' ? 'localhost' : config.core.host}:${config.core.port}`);
     });
 
     srv.listen(config.core.port, config.core.host ?? '0.0.0.0');

diff --git a/src/components/Image.tsx b/src/components/Image.tsx
@@ -4,64 +4,80 @@ import {
   Card,
   CardMedia,
   CardActionArea,
-  Popover,
   Button,
-  ButtonGroup
+  Dialog,
+  DialogTitle,
+  DialogActions,
+  DialogContent
 } from '@material-ui/core';
+import AudioIcon from '@material-ui/icons/Audiotrack';
 import copy from 'copy-to-clipboard';
-import useFetch from '../lib/hooks/useFetch';
+import useFetch from 'hooks/useFetch';
 
 export default function Image({ image, updateImages }) {
-  const [anchorEl, setAnchorEl] = useState(null);
+  const [open, setOpen] = useState(false);
+  const [t,] = useState(image.mimetype.split('/')[0]);
 
   const handleDelete = async () => {
-    const res = await useFetch('/api/user/images', 'DELETE', { id: image.id });
+    const res = await useFetch('/api/user/files', 'DELETE', { id: image.id });
     if (!res.error) updateImages(true);
 
-    setAnchorEl(null);
+    setOpen(false);
   };
 
   const handleCopy = () => {
     copy(`${window.location.protocol}//${window.location.host}${image.url}`);
-    setAnchorEl(null);
+    setOpen(false);
   };
 
   const handleFavorite = async () => {
-    const data = await useFetch('/api/user/images', 'PATCH', { id: image.id, favorite: !image.favorite });
+    const data = await useFetch('/api/user/files', 'PATCH', { id: image.id, favorite: !image.favorite });
     if (!data.error) updateImages(true);
   };
 
+  const Type = (props) => {
+    return {
+      'video': <video controls {...props} />,
+      // eslint-disable-next-line jsx-a11y/alt-text
+      'image': <img {...props} />,
+      'audio': <audio controls {...props} />
+    }[t];
+  };
+
   return (
     <>
       <Card sx={{ maxWidth: '100%' }}>
-        <CardActionArea>
+        <CardActionArea sx={t === 'audio' ? { justifyContent: 'center', display: 'flex', alignItems: 'center' } : {}}>
           <CardMedia
-            sx={{ height: 320 }}
+            sx={{ height: 320, fontSize: 70, width: '100%' }}
             image={image.url}
             title={image.file}
-            onClick={e => setAnchorEl(e.currentTarget)}
+            component={t === 'audio' ? AudioIcon : t} // this is done because audio without controls is hidden
+            onClick={() => setOpen(true)}
           />
         </CardActionArea>
       </Card>
-      <Popover
-        open={Boolean(anchorEl)}
-        anchorEl={anchorEl}
-        onClose={() => setAnchorEl(null)}
-        anchorOrigin={{
-          vertical: 'center',
-          horizontal: 'center',
-        }}
-        transformOrigin={{
-          vertical: 'center',
-          horizontal: 'center',
-        }}
+      <Dialog
+        open={open}
+        onClose={() => setOpen(false)}
       >
-        <ButtonGroup variant='contained'>
-          <Button onClick={handleDelete} color='primary'>Delete</Button>
-          <Button onClick={handleCopy} color='primary'>Copy URL</Button>
-          <Button onClick={handleFavorite} color='primary'>{image.favorite ? 'Unfavorite' : 'Favorite'}</Button>
-        </ButtonGroup>
-      </Popover>
+        <DialogTitle id='alert-dialog-title'>
+          {image.file}
+
+        </DialogTitle>
+        <DialogContent>
+          <Type
+            style={{ width: '100%' }}
+            src={image.url}
+            alt={image.url}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleDelete} color='inherit'>Delete</Button>
+          <Button onClick={handleCopy} color='inherit'>Copy URL</Button>
+          <Button onClick={handleFavorite} color='inherit'>{image.favorite ? 'Unfavorite' : 'Favorite'}</Button>
+        </DialogActions>
+      </Dialog>
     </>
   );
 }
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import Link from 'next/link';
-import useFetch from '../lib/hooks/useFetch';
 
 import {
   AppBar,
@@ -29,20 +28,21 @@ import {
   Menu as MenuIcon,
   Home as HomeIcon,
   AccountCircle as AccountIcon,
-  Image as ImageIcon,
+  Folder as FolderIcon,
   Upload as UploadIcon,
   ContentCopy as CopyIcon,
   Autorenew as ResetIcon,
   Logout as LogoutIcon,
   PeopleAlt as UsersIcon,
-  Brush as BrushIcon
+  Brush as BrushIcon,
 } from '@material-ui/icons';
 import copy from 'copy-to-clipboard';
 import Backdrop from './Backdrop';
 import { friendlyThemeName, themes } from './Theming';
 import { useRouter } from 'next/router';
 import { useStoreDispatch } from 'lib/redux/store';
 import { updateUser } from 'lib/redux/reducers/user';
+import useFetch from 'hooks/useFetch';
 
 const items = [
   {
@@ -51,9 +51,9 @@ const items = [
     link: '/dashboard'
   },
   {
-    icon: <ImageIcon />,
-    text: 'Images',
-    link: '/dashboard/images'
+    icon: <FolderIcon />,
+    text: 'Files',
+    link: '/dashboard/files'
   },
   {
     icon: <UploadIcon />,

diff --git a/src/components/Theming.tsx b/src/components/Theming.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { ThemeProvider } from '@emotion/react';
 import { CssBaseline } from '@material-ui/core';
+
+// themes
 import dark_blue from 'lib/themes/dark_blue';
 import dark from 'lib/themes/dark';
 import ayu_dark from 'lib/themes/ayu_dark';
@@ -9,6 +11,7 @@ import ayu_light from 'lib/themes/ayu_light';
 import nord from 'lib/themes/nord';
 import polar from 'lib/themes/polar';
 import dracula from 'lib/themes/dracula';
+
 import { useStoreSelector } from 'lib/redux/store';
 import createTheme from 'lib/themes';
 

diff --git a/src/components/pages/Dashboard.tsx b/src/components/pages/Dashboard.tsx
@@ -16,6 +16,7 @@ import {
   CardMedia,
   Card as MuiCard
 } from '@material-ui/core';
+import AudioIcon from '@material-ui/icons/Audiotrack';
 
 import Link from 'components/Link';
 import Card from 'components/Card';
@@ -61,18 +62,19 @@ function StatTable({ rows, columns }) {
         <TableHead>
           <TableRow>
             {columns.map(col => (
-              <TableCell key={col.name}>{col.name}</TableCell>
+              <TableCell key={col.name} sx={{ borderColor: t => t.palette.divider }}>{col.name}</TableCell>
             ))}
           </TableRow>
         </TableHead>
         <TableBody>
-          {rows.map((row, i) => (
+          {rows.map(row => (
             <TableRow
+              hover
               key={row.username}
               sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
             >
               {columns.map(col => (
-                <TableCell key={col.id}>
+                <TableCell key={col.id} sx={{ borderColor: t => t.palette.divider }}>
                   {col.format ? col.format(row[col.id]) : row[col.id]}
                 </TableCell>
               ))}
@@ -94,8 +96,8 @@ export default function Dashboard() {
   const [rowsPerPage, setRowsPerPage] = useState(10);
 
   const updateImages = async () => {
-    const imgs = await useFetch('/api/user/images');
-    const recent = await useFetch('/api/user/recent');
+    const imgs = await useFetch('/api/user/files');
+    const recent = await useFetch('/api/user/recent?filter=media');
     const stts = await useFetch('/api/stats');
     setImages(imgs);
     setStats(stts);
@@ -106,13 +108,13 @@ export default function Dashboard() {
     setPage(newPage);
   };
 
-  const handleChangeRowsPerPage = (event) => {
+  const handleChangeRowsPerPage = event => {
     setRowsPerPage(+event.target.value);
     setPage(0);
   };
 
   const handleDelete = async image => {
-    const res = await useFetch('/api/user/images', 'DELETE', { id: image.id });
+    const res = await useFetch('/api/user/files', 'DELETE', { id: image.id });
     if (!res.error) updateImages();
   };
 
@@ -135,6 +137,8 @@ export default function Dashboard() {
                   sx={{ height: 220 }}
                   image={image.url}
                   title={image.file}
+                  controls
+                  component={image.mimetype.split('/')[0] === 'audio' ? AudioIcon : image.mimetype.split('/')[0]} // this is done because audio without controls is hidden
                 />
               </CardActionArea>
             </MuiCard>
@@ -173,35 +177,35 @@ export default function Dashboard() {
           <Table size='small'>
             <TableHead>
               <TableRow>
-                {columns.map((column) => (
+                {columns.map(column => (
                   <TableCell
                     key={column.id}
                     align={column.align}
-                    sx={{ minWidth: column.minWidth }}
+                    sx={{ minWidth: column.minWidth, borderColor: t => t.palette.divider }}
                   >
                     {column.label}
                   </TableCell>
                 ))}
-                <TableCell sx={{ minWidth: 200 }} align='right'>
+                <TableCell sx={{ minWidth: 200, borderColor: t => t.palette.divider }} align='right'>
                   Actions
                 </TableCell>
               </TableRow>
             </TableHead>
             <TableBody>
               {images
                 .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                .map((row) => {
+                .map(row => {
                   return (
                     <TableRow hover role='checkbox' tabIndex={-1} key={row.id}>
-                      {columns.map((column) => {
+                      {columns.map(column => {
                         const value = row[column.id];
                         return (
-                          <TableCell key={column.id} align={column.align}>
+                          <TableCell key={column.id} align={column.align} sx={{ borderColor: t => t.palette.divider }}>
                             {column.format ? column.format(value) : value}
                           </TableCell>
                         );
                       })}
-                      <TableCell align='right'>
+                      <TableCell align='right'  sx={{ borderColor: t => t.palette.divider }}>
                         <ButtonGroup variant='outlined'>
                           <Button onClick={() => handleDelete(row)} color='error' size='small'>Delete</Button>
                         </ButtonGroup>

diff --git a/src/components/pages/Images.tsx → src/components/pages/Files.tsx b/src/components/pages/Images.tsx → src/components/pages/Files.tsx
@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { Grid, Pagination, Box, Typography, Accordion, AccordionSummary, AccordionDetails } from '@material-ui/core';
+import { ExpandMore } from '@material-ui/icons';
 
 import Backdrop from 'components/Backdrop';
 import ZiplineImage from 'components/Image';
 import useFetch from 'hooks/useFetch';
-import { ExpandMore } from '@material-ui/icons';
 
-export default function Upload() {
+export default function Files() {
   const [pages, setPages] = useState([]);
   const [page, setPage] = useState(1);
   const [favoritePages, setFavoritePages] = useState([]);
@@ -15,9 +15,9 @@ export default function Upload() {
 
   const updatePages = async favorite => {
     setLoading(true);
-    const pages = await useFetch('/api/user/images?paged=true&filter=image');
+    const pages = await useFetch('/api/user/files?paged=true&filter=media');
     if (favorite) {
-      const fPages = await useFetch('/api/user/images?paged=true&favorite=true');
+      const fPages = await useFetch('/api/user/files?paged=true&favorite=media');
       setFavoritePages(fPages);
     } 
     setPages(pages);
@@ -39,13 +39,13 @@ export default function Upload() {
           pt={2}
           pb={3}
         >
-          <Typography variant='h4'>No Images</Typography>
+          <Typography variant='h4'>No Files</Typography>
         </Box>
-      ) : <Typography variant='h4'>Images</Typography>}
+      ) : <Typography variant='h4'>Files</Typography>}
       {favoritePages.length ? (
         <Accordion sx={{ my: 2, border: 1, borderColor: t => t.palette.divider }} elevation={0}>
           <AccordionSummary expandIcon={<ExpandMore />}>
-            <Typography variant='h4'>Favorite Images</Typography>
+            <Typography variant='h4'>Favorite Files</Typography>
           </AccordionSummary>
           <AccordionDetails>
             <Grid container spacing={2}>

diff --git a/src/components/pages/Manage.tsx b/src/components/pages/Manage.tsx
@@ -167,7 +167,6 @@ export default function Manage() {
     validationSchema: themeValidationSchema,
     onSubmit: async values => {
       setLoading(true);
-
       const newUser = await useFetch('/api/user', 'PATCH', { customTheme: values });
 
       if (newUser.error) {

diff --git a/src/components/pages/Upload.tsx b/src/components/pages/Upload.tsx
@@ -18,7 +18,7 @@ export default function Upload({ route }) {
   const [open, setOpen] = useState(false);
   const [severity, setSeverity] = useState('success');
   const [message, setMessage] = useState('Saved');
-  console.log(files);
+
   const handleUpload = async () => {
     const body = new FormData();
 

diff --git a/src/lib/themes/index.ts b/src/lib/themes/index.ts
@@ -48,7 +48,7 @@ export default function createTheme(o: ThemeOptions) {
             backgroundColor: o.border
           }
         }
-      }
-    }
+      },
+    },
   });
 }