fix : FIxed the upload page issue

Author: vaibhav700c

src/app/upload/page.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import React, { useRef, useState } from "react";
 import axios from "axios";
 import toast, { Toaster } from "react-hot-toast";
@@ -17,19 +18,12 @@ import {
   SelectLabel,
   SelectItem,
 } from "@/components/ui/select";
-import {
-  Command,
-  CommandInput,
-  CommandList,
-  CommandItem,
-  CommandEmpty,
-  CommandGroup,
-} from "@/components/ui/command";
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 import { PostPDFToCloudinary } from "@/interface";
 import { courses, slots, years } from "@/components/select_options";
 import SearchBar from "@/components/searchbarSubjectList";
+
 const Page = () => {
   const router = useRouter();
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -39,9 +33,8 @@ const Page = () => {
   const [exam, setExam] = useState("");
   const [year, setYear] = useState("");
   const [files, setFiles] = useState<File[]>([]);
-  const [inputValue, setInputValue] = useState("");
-  const [isSubjectCommandOpen, setIsSubjectCommandOpen] = useState(false);
   const [isUploading, setIsUploading] = useState(false);
+  const [resetSearch, setResetSearch] = useState(false);
 
   const handlePrint = async () => {
     const maxFileSize = 5 * 1024 * 1024;
@@ -53,38 +46,26 @@ const Page = () => {
     ];
     const files = fileInputRef.current?.files as FileList | null;
 
-    if (!slot) {
-      toast.error("Slot is required");
-      return;
-    }
-    if (!subject) {
-      toast.error("Subject is required");
-      return;
-    }
-    if (!exam) {
-      toast.error("Exam is required");
+    if (!slot || !subject || !exam || !year || !files || files.length === 0) {
+      toast.error("All fields are required.");
       return;
     }
-    if (!year) {
-      toast.error("Year is required");
+
+    if (files.length > 5) {
+      toast.error("More than 5 files selected");
       return;
     }
-    if (!files || files.length === 0) {
-      toast.error("No files selected");
-      return;
-    } else if (files.length > 5) {
-      toast.error("More than 5 files selected");
+
+    if (!Array.from(files).every((file) => file.type === files[0]?.type)) {
+      toast.error(`All files MUST be of the same type`);
       return;
     }
-    //file have same extension
-    if (!Array.from(files).every((file) => file.type == files[0]?.type))
-      toast.error(`All files MUST be of same type`);
+
     for (const file of files) {
       if (file.size > maxFileSize) {
         toast.error(`File ${file.name} is more than 5MB`);
         return;
       }
-
       if (!allowedFileTypes.includes(file.type)) {
         toast.error(
           `File type of ${file.name} is not allowed. Only PDFs and images are accepted.`,
@@ -97,53 +78,54 @@ const Page = () => {
     if (files[0]?.type === "application/pdf") {
       isPdf = true;
       if (files.length > 1) {
-        toast.error(`PDFs should be uploaded seperately`);
+        toast.error(`PDFs should be uploaded separately`);
         return;
       }
     }
+
     const Arrfiles = Array.from(files);
     const formData = new FormData();
     Arrfiles.forEach((file) => {
       formData.append("files", file);
     });
-
-    // const body = {
-    //   subject: subject,
-    //   slot: slot,
-    //   year: year,
-    //   exam: exam,
-    //   isPdf: isPdf,
-    // };
     formData.append("subject", subject);
     formData.append("slot", slot);
     formData.append("year", year);
     formData.append("exam", exam);
     formData.append("isPdf", String(isPdf));
+
+    setIsUploading(true);
+
     void toast.promise(
       (async () => {
         try {
-          const response = await axios.post<PostPDFToCloudinary>(
-            "/api/upload",
-            formData,
-          );
-        } catch (error: unknown) {
-          throw handleAPIError(error);
+          await axios.post("/api/upload", formData);
+
+          setSlot("");
+          setSubject("");
+          setExam("");
+          setYear("");
+          setFiles([]);
+          if (fileInputRef.current) {
+            fileInputRef.current.value = "";
+          }
+
+          setResetSearch(true);
+          setTimeout(() => setResetSearch(false), 100);
+        } catch (error) {
+          handleAPIError(error);
+        } finally {
+          setIsUploading(false);
         }
       })(),
       {
         loading: "Uploading papers...",
-        success: "papers uploaded",
-        error: (err: ApiError) => err.message,
+        success: "Papers uploaded",
+        error: (err:ApiError) => err.message,
       },
     );
   };
 
-  const handleSubjectSelect = (value: string) => {
-    setSubject(value);
-    setInputValue(value);
-    setIsSubjectCommandOpen(false);
-  };
-
   return (
     <div className="flex h-screen flex-col justify-between">
       <div>
@@ -195,31 +177,7 @@ const Page = () => {
             {/* Subject Selection */}
             <div>
               <label>Subject:</label>
-              {/* setSubject */}
-              <SearchBar setSubject={setSubject}></SearchBar>
-              {/* <Command className="rounded-lg border shadow-md md:min-w-[450px]">
-                <CommandInput
-                  value={inputValue}
-                  onChangeCapture={(e) =>
-                    setInputValue((e.target as HTMLInputElement).value)
-                  }
-                  placeholder="Type a subject or search..."
-                /> */}
-              {/* <CommandList className="h-[100px]">
-                  <CommandEmpty>No results found.</CommandEmpty>
-
-                  <CommandGroup heading="Subjects">
-                    {courses.map((course) => (
-                      <CommandItem
-                        key={course}
-                        onSelect={() => handleSubjectSelect(course)}
-                      >
-                        <span>{course}</span>
-                      </CommandItem>
-                    ))}
-                  </CommandGroup>
-                </CommandList>
-              </Command> */}
+              <SearchBar setSubject={setSubject} resetSearch={resetSearch} />
             </div>
 
             {/* Year Selection */}
@@ -232,14 +190,11 @@ const Page = () => {
                 <SelectContent>
                   <SelectGroup>
                     <SelectLabel>Years</SelectLabel>
-                    {years.map((year)=>
-                    {
-                      return (<SelectItem key={year} value={String(year)}>
+                    {years.map((year) => (
+                      <SelectItem key={year} value={String(year)}>
                         {year}
-                      </SelectItem>)
-
-                    }
-                    )}
+                      </SelectItem>
+                    ))}
                   </SelectGroup>
                 </SelectContent>
               </Select>
@@ -283,11 +238,11 @@ const Page = () => {
           {isUploading ? "Uploading..." : "Upload Papers"}
         </Button>
       </div>
-      <div className="">
+      <div>
         <Footer />
       </div>
     </div>
   );
 };
 
-export default Page;
+export default Page;

src/components/searchbarSubjectList.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { useState, useCallback, useRef, useEffect } from "react";
 import { Search } from "lucide-react";
 import debounce from "debounce";
@@ -8,8 +6,10 @@ import { courses } from "./select_options";
 
 function SearchbarSubjectList({
   setSubject,
+  resetSearch,
 }: {
   setSubject: React.Dispatch<React.SetStateAction<string>>;
+  resetSearch: boolean;
 }) {
   const [searchText, setSearchText] = useState("");
   const [suggestions, setSuggestions] = useState<string[]>([]);
@@ -30,11 +30,11 @@ function SearchbarSubjectList({
 
         if (filteredSubjects.length === 0) {
           setError("Subject not found");
+          setSuggestions([]);
           return;
         }
         setSuggestions(filteredSubjects);
         setError(null);
-
         setLoading(false);
       } else {
         setSuggestions([]);
@@ -52,11 +52,10 @@ function SearchbarSubjectList({
     void debouncedSearch(text);
   };
 
-  const handleSelectSuggestion = async (suggestion: string) => {
+  const handleSelectSuggestion = (suggestion: string) => {
     setSearchText(suggestion);
     setSuggestions([]);
     setSubject(suggestion);
-    // router.push(`/catalogue?subject=${encodeURIComponent(suggestion)}`);
   };
 
   const handleClickOutside = (event: MouseEvent) => {
@@ -75,6 +74,13 @@ function SearchbarSubjectList({
     };
   }, []);
 
+  useEffect(() => {
+    if (resetSearch) {
+      setSearchText("");
+      setSuggestions([]);
+    }
+  }, [resetSearch]);
+
   return (
     <div className="mx-4 md:mx-0">
       <form className=" my-2 ml-2 w-full max-w-xl">
@@ -84,14 +90,12 @@ function SearchbarSubjectList({
             value={searchText}
             onChange={handleSearchChange}
             placeholder="Search for subject..."
-            // className={`text-md w-fuyll rounded-full border bg-[#434dba] px-4 py-6 pr-10 font-sans tracking-wider text-white shadow-sm placeholder:text-white focus:outline-none focus:ring-2 ${loading ? "opacity-70" : ""}`}
           />
           <button
             type="submit"
             className="absolute inset-y-0 right-0 flex items-center pr-3"
             disabled
           >
-            {" "}
             <Search className="h-5 w-5 text-white " />
           </button>
           {loading && (
@@ -131,4 +135,4 @@ function SearchbarSubjectList({
   );
 }
 
-export default SearchbarSubjectList;
+export default SearchbarSubjectList;