fix(api): fix many bugs

src/components/pages/Images.tsx

@@ -4,18 +4,15 @@ import { Grid, Pagination, Box, Typography } from '@material-ui/core';
 import Backdrop from 'components/Backdrop';
 import ZiplineImage from 'components/Image';
 import useFetch from 'hooks/useFetch';
-import { useStoreSelector } from 'lib/redux/store';
 
 export default function Upload() {
-  const user = useStoreSelector(state => state.user);
-
   const [pages, setPages] = useState([]);
   const [page, setPage] = useState(1);
   const [loading, setLoading] = useState(true);
 
   const updatePages = async () => {
     setLoading(true);
-    const pages = await useFetch('/api/user/images?paged=true');
+    const pages = await useFetch('/api/user/images?paged=true&filter=image');
     setPages(pages);
     setLoading(false);
   };

src/pages/404.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Box, Typography } from '@material-ui/core';
+
+export default function FourOhFour() {
+  return (
+    <>
+      <Box
+        display='flex'
+        justifyContent='center'
+        alignItems='center'
+        minHeight='100vh'
+      >
+        <Typography variant='h2'>404 - Not Found</Typography>
+      </Box>
+    </>
+  );
+}

src/pages/[...id].tsx

@@ -56,6 +56,10 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     }
   });
 
+  if (!image) return {
+    notFound: true
+  };
+
   const user = await prisma.user.findFirst({
     select: {
       embedTitle: true,
@@ -66,11 +70,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
       id: image.userId
     }
   });
-
-  if (!image) return {
-    notFound: true
-  };
-
+  
   if (!image.mimetype.startsWith('image')) return {
     redirect: {
       permanent: true,

src/pages/api/user/images.ts

@@ -25,7 +25,7 @@ async function handler(req: NextApiReq, res: NextApiRes) {
 
     return res.json(image);
   } else {
-    const images = await prisma.image.findMany({
+    let images = await prisma.image.findMany({
       where: {
         userId: user.id
       },
@@ -40,6 +40,7 @@ async function handler(req: NextApiReq, res: NextApiRes) {
   
     // @ts-ignore
     images.map(image => image.url = `${config.uploader.route}/${image.file}`);
+    if (req.query.filter && req.query.filter === 'image') images = images.filter(x => x.mimetype.startsWith('image'));
   
     return res.json(req.query.paged ? chunk(images, 16) : images);
   }