fix: do not mutate res #266

src/lib/exts.ts

@@ -15,7 +15,7 @@ export default {
   yaml: 'YAML',
   c: 'C',
   cpp: 'C++',
-  csharp: 'C#',
+  cs: 'C#',
   go: 'Go',
   docker: 'Docker',
   toml: 'TOML',
@@ -40,7 +40,6 @@ export default {
 
 export const extToPrismComponent = (ext: string) => {
   // await import(prismjs/components/prism-${extToPrismComponent(ext)}.js)
-
   return {
     md: 'markdown',
     css: 'css',
@@ -57,7 +56,7 @@ export const extToPrismComponent = (ext: string) => {
     yaml: 'yaml',
     c: 'c',
     cpp: 'cpp',
-    csharp: 'csharp',
+    cs: 'csharp',
     go: 'go',
     docker: 'docker',
     toml: 'toml',

src/pages/view/[id].tsx

@@ -1,13 +1,26 @@
 import { Box, Button, Modal, PasswordInput } from '@mantine/core';
+import type { Image } from '@prisma/client';
+import Link from 'components/Link';
 import exts from 'lib/exts';
 import prisma from 'lib/prisma';
 import { parseString } from 'lib/utils/parser';
+import type { UserExtended } from 'middleware/withZipline';
 import { GetServerSideProps } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
-export default function EmbeddedFile({ image, user, pass, prismRender }) {
+export default function EmbeddedFile({
+  image,
+  user,
+  pass,
+  prismRender,
+}: {
+  image: Image;
+  user: UserExtended;
+  pass: boolean;
+  prismRender: boolean;
+}) {
   const dataURL = (route: string) => `${route}/${image.file}`;
 
   const router = useRouter();
@@ -16,7 +29,7 @@ export default function EmbeddedFile({ image, user, pass, prismRender }) {
   const [error, setError] = useState('');
 
   // reapply date from workaround
-  image.created_at = new Date(image?.created_at);
+  image.created_at = new Date(image ? image.created_at : 0);
 
   const check = async () => {
     const res = await fetch(`/api/auth/image?id=${image.id}&password=${password}`);
@@ -71,7 +84,7 @@ export default function EmbeddedFile({ image, user, pass, prismRender }) {
             {user.embedTitle && (
               <meta property='og:title' content={parseString(user.embedTitle, { file: image, user })} />
             )}
-            <meta property='theme-color' content={user.embedColor} />
+            <meta property='theme-color' content={user.embedColor ?? '#2f3136'} />
           </>
         )}
         {image.mimetype.startsWith('image') && (
@@ -98,6 +111,9 @@ export default function EmbeddedFile({ image, user, pass, prismRender }) {
             <meta property='og:video:height' content='480' />
           </>
         )}
+        {!image.mimetype.startsWith('video') && !image.mimetype.startsWith('image') && (
+          <meta property='og:url' content={`/r/${image.file}`} />
+        )}
         <title>{image.file}</title>
       </Head>
       <Modal
@@ -136,6 +152,10 @@ export default function EmbeddedFile({ image, user, pass, prismRender }) {
         {image.mimetype.startsWith('video') && (
           <video src={dataURL('/r')} controls={true} autoPlay={true} id='image_content' />
         )}
+
+        {!image.mimetype.startsWith('video') && !image.mimetype.startsWith('image') && (
+          <Link href={dataURL('/r')}>Can&#39;t preview this file. Click here to download it.</Link>
+        )}
       </Box>
     </>
   );
@@ -154,7 +174,6 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
       file: true,
       invisible: true,
       userId: true,
-      embed: true,
       created_at: true,
       password: true,
     },
@@ -163,9 +182,6 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
 
   const user = await prisma.user.findFirst({
     select: {
-      embedTitle: true,
-      embedColor: true,
-      embedSiteName: true,
       username: true,
       id: true,
     },
@@ -174,7 +190,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     },
   });
 
-  //@ts-ignore workaround because next wont allow date
+  // @ts-ignore workaround because next wont allow date
   image.created_at = image.created_at.toString();
 
   const prismRender = Object.keys(exts).includes(image.file.split('.').pop());
@@ -204,8 +220,12 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     const data = await datasource.get(image.file);
     if (!data) return { notFound: true };
 
-    data.pipe(context.res);
-    return { props: {} };
+    return {
+      props: {
+        image,
+        user,
+      },
+    };
   }
   const pass = image.password ? true : false;
   delete image.password;