Merge pull request #52 from Sourabh-Bharale/refactor/file-validation-…

…and-not-found-page Refactor/file validation and not found page
joshsoftware · Nov 13, 2024 · 9905af5 · 9905af5
2 parents 0a2007e + b172b60
commit 9905af5
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 17 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -45,6 +45,7 @@
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
     "uploadthing": "^6.13.2",
+    "uuid": "^11.0.3",
     "zod": "^3.23.8"
   },
   "devDependencies": {

diff --git a/app/src/app/api/uploadthing/core.ts b/app/src/app/api/uploadthing/core.ts
@@ -12,11 +12,11 @@ export const ourFileRouter = {
     {
       audio: {
         maxFileCount: 1,
-        maxFileSize: "1024MB"
+        maxFileSize: "16MB"
       },
       video: {
         maxFileCount: 1,
-        maxFileSize: "1024MB"
+        maxFileSize: "16MB"
       }
     })
     // Set permissions and file types for this FileRoute

diff --git a/app/src/app/transcriptions/[transcription_id]/page.tsx b/app/src/app/transcriptions/[transcription_id]/page.tsx
@@ -1,14 +1,12 @@
-// transcriptions / [transcription_id] / page.tsx
-
 import { validateRequest } from "@/auth";
 import DetailedTranscription from "@/components/DetailedTranscription";
 import NavigateBack from "@/components/NavigateBack";
 import { db } from "@/db";
 import { transcriptions } from "@/db/schema";
 import { eq } from "drizzle-orm";
-
 import { Metadata } from "next";
-import { redirect } from "next/navigation";
+import { notFound } from "next/navigation";
+import { validate as validateUUID } from 'uuid';
 
 export const metadata: Metadata = {
   title: "Lingo.ai | Transcription",
@@ -23,15 +21,23 @@ interface PageProps {
 const page = async (props: PageProps) => {
   const { transcription_id } = props.params;
 
+  if (!validateUUID(transcription_id)) {
+    return notFound();
+  }
+
   // skip user signin validation for now
 
   const transcription = await db
     .select()
     .from(transcriptions)
     .where(eq(transcriptions.id, transcription_id));
 
-  return (
 
+  if (transcription.length === 0) {
+    return notFound();
+  }
+
+  return (
     <div className="flex flex-col w-full h-full pt-8">
       <div className="flex justify-start w-full mb-8">
         <NavigateBack href="/transcriptions" subHeading={`Transcription for ${transcription[0].documentName}`} />
@@ -45,4 +51,4 @@ const page = async (props: PageProps) => {
   );
 };
 
-export default page;
+export default page;
diff --git a/app/src/components/RecorderCard.tsx b/app/src/components/RecorderCard.tsx
@@ -26,7 +26,7 @@ import { Fragment } from "react";
 interface RecorderCardProps {
   userId: string;
 }
-const RecorderCard = (props:RecorderCardProps) => {
+const RecorderCard = (props: RecorderCardProps) => {
   const { userId } = props;
 
   const router = useRouter();
@@ -51,15 +51,41 @@ const RecorderCard = (props:RecorderCardProps) => {
     }
   };
 
+  const handleFileError = (file: any) => {
+    file.errors.forEach((error: any) => {
+      switch (error.code) {
+        case "file-too-large":
+          toast.error(`File ${file.file.name} is too large`, {
+            description: "Please upload a file less than 5MB",
+          });
+          break;
+        case "file-invalid-type":
+          toast.error(`File ${file.file.name} is invalid`, {
+            description: "Please upload a valid audio or video file",
+          });
+          break;
+        default:
+          toast.error(`File ${file.file.name} encountered an error`, {
+            description: error.message,
+          });
+          break;
+      }
+    });
+  };
+
   const { getRootProps, getInputProps } = useDropzone({
     maxFiles: 1,
-    // maxSize: 5 * 1024 * 1024, // 5MB
-    onDrop: handleFileChange,
+    maxSize: 5 * 1024 * 1024, // 5MB
+    onDrop: (acceptedFiles, rejectedFiles) => {
+      if (rejectedFiles.length > 0) {
+        rejectedFiles.forEach(handleFileError);
+      }
+      handleFileChange(acceptedFiles);
+    },
     accept: {
       "audio/*": [".mp3", ".wav"],
       "video/*": [".mp4"],
     },
-    onDropRejected: (error) => console.log(error),
     noDrag: true,
   });
 
@@ -137,7 +163,7 @@ const RecorderCard = (props:RecorderCardProps) => {
         return response.data[0] as TranscriptionsType;
       },
       onSuccess: async (res) => {
-        if(res.id){
+        if (res.id) {
           router.push(`/transcriptions/${res.id}`);
         }
         return toast.success("Transcription saved successfully");
@@ -286,9 +312,14 @@ const RecorderCard = (props:RecorderCardProps) => {
                       <p className="mt-2">{formatTime(recordingTime)}</p>
                     </div>
                   ) : (
-                    <p>
-                      Enable mic access, record yourself, or upload an audio or video file
-                    </p>
+                    <>
+                      <p>
+                        Enable mic access, record yourself, or upload an audio or video file
+                      </p>
+                      <p className="text-gray-400 text-sm">
+                        Max file size: 5MB
+                      </p>
+                    </>
                   )}
                 </Fragment>
               )}

diff --git a/app/src/components/TranscriptionItem.tsx b/app/src/components/TranscriptionItem.tsx
@@ -27,7 +27,6 @@ const TranscriptionItem = (props: TranscriptionItemProps) => {
   const [defaultTranscriptionFilter, setDefaultTranscriptionFilter] = useState<boolean>(false);
   const [filteredTranscriptions, setFilteredTranscriptions] = useState(userTranscriptions);
 
-  console.log({ userTranscriptions }, { filteredTranscriptions }, { defaultTranscriptionFilter });
 
   useEffect(() => {
     if (defaultTranscriptionFilter) {