changes in search and admin upload

Author: NishantGupt786

src/app/adminupload/page.tsx

@@ -31,7 +31,7 @@ const Upload: React.FC = () => {
   const [subject, setSubject] = useState<string>("Digital Logic and Microprocessors[BITE202L]");
   const [slot, setSlot] = useState<string>("A1");
   const [year, setYear] = useState<string>("2011");
-  const [exam, setExam] = useState<string>("cat1");
+  const [exam, setExam] = useState<string>("CAT-1");
   const [tag, setTag] = useState<string>();
   const [urls, setUrls] = useState<string[]>();
   const [publicIds, setPublicIds] = useState<string[]>();
@@ -380,7 +380,7 @@ const Upload: React.FC = () => {
             setSubject("");
             setSlot("");
             setYear("");
-            setExam("cat1");
+            setExam("CAT-1");
             setAsset([]);
             setPublicIds([]);
             setUrls([]);

src/app/page.tsx

@@ -1,4 +1,4 @@
-import SearchBar from "@/app/components/searchbar"
+import SearchBar from "@/components/searchbar";
 
 const HomePage = () => {
   return (

src/app/upload/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 import React, { useRef, useState } from "react";
-import Camera from "../components/camera";
+import Camera from "@/components/camera";
 import JSZip from "jszip";
 import axios from "axios";
 import { slots, courses } from "./select_options";

src/app/components/camera.tsx renamed to src/components/camera.tsx

@@ -16,73 +16,87 @@ const SearchBar = () => {
   const [searchText, setSearchText] = useState("");
   const [suggestions, setSuggestions] = useState<string[]>([]);
   const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
 
-
- 
   const debouncedSearch = useCallback(
     debounce(async (text: string) => {
       if (text.length > 1) {
+        setLoading(true);
         try {
           const searchResponse = await axios.get("/api/search", {
             params: { text },
           });
-  
+
           const { res: encryptedSearchResponse } = searchResponse.data;
           const decryptedSearchResponse = cryptr.decrypt(encryptedSearchResponse);
           const { subjects } = JSON.parse(decryptedSearchResponse);
           const suggestionList = subjects.map((subjectObj: { subject: string }) => subjectObj.subject);
           setSuggestions(suggestionList);
+          setError(null);
         } catch (error) {
           const typedError = error as AxiosError<{ message?: string }>;
           const errorMessage = typedError.response?.data?.message ?? "Error fetching suggestions";
           setError(errorMessage);
+        } finally {
+          setLoading(false);
         }
       } else {
         setSuggestions([]);
       }
-    }, 1000),
-    [cryptr, axios]
+    }, 500),
+    [cryptr]
   );
 
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const text = e.target.value;
     setSearchText(text);
+    if (text.length <= 1) {
+      setSuggestions([]);
+    }
     debouncedSearch(text); 
   };
 
   const handleSelectSuggestion = async (suggestion: string) => {
     setSearchText(suggestion);
     setSuggestions([]);
-    // console.log(encodeURI(suggestion))
     router.push(`/catalogue?subject=${encodeURIComponent(suggestion)}`);
   };
 
   return (
     <div className="flex min-h-screen items-center justify-center bg-gray-50 flex-col">
       <form className="w-full max-w-md">
         <div className="relative">
-          
-          <input type="text" value={searchText} onChange={handleSearchChange}
-            placeholder="Search..." className="w-full rounded-md border border-gray-300 px-4 py-2 pr-10 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"/>
-
-          <button type="submit" className="absolute inset-y-0 right-0 flex items-center pr-3">
+          <input 
+            type="text" 
+            value={searchText} 
+            onChange={handleSearchChange}
+            placeholder="Search..." 
+            className={`w-full rounded-md border border-gray-300 px-4 py-2 pr-10 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 ${loading ? 'opacity-50' : ''}`}
+          />
+          <button type="submit" className="absolute inset-y-0 right-0 flex items-center pr-3" disabled={loading}>
             <Search className="h-5 w-5 text-gray-400" />
           </button>
-
         </div>
-        {suggestions.length > 0 && (
-          <ul className="absolute z-10 w-full bg-white border border-gray-300 rounded-md mt-2">
+        {loading && (
+          <div className="absolute z-10 w-full max-w-md bg-white border border-gray-300 rounded-md mt-2 p-2 text-center text-gray-500">
+            Loading suggestions...
+          </div>
+        )}
+        {suggestions.length > 0 && !loading && (
+          <ul className="absolute w-full text-center max-w-md z-10 bg-white border border-gray-300 rounded-md mt-2">
             {suggestions.map((suggestion, index) => (
-
-              <li key={index} onClick={() => handleSelectSuggestion(suggestion)} className="cursor-pointer p-2 hover:bg-gray-100">
+              <li 
+                key={index} 
+                onClick={() => handleSelectSuggestion(suggestion)} 
+                className="cursor-pointer p-2 hover:bg-gray-100 truncate"
+                style={{ width: '100%', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}
+              >
                 {suggestion}
               </li>
-
             ))}
           </ul>
         )}
       </form>
-
       {error && <p className="mt-4 text-red">{error}</p>}
     </div>
   );

src/app/components/searchbar.tsx renamed to src/components/searchbar.tsx

@@ -7,7 +7,7 @@ const paperSchema = new Schema<IPaper>({
   subject: { type: String, required: true },
   slot: { type: String, required: true },
   year: { type: String, required: true },
-  exam: { type: String, enum: ["cat1", "cat2", "fat"], required: true },
+  exam: { type: String, enum: ["CAT-1", "CAT-2", "FAT"], required: true },
 });
 
 const Paper: Model<IPaper> =