made subject selection on upload page to be similar in function to one on homepage

Author: abhitrueprogrammer

src/app/upload/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 import React, { useRef, useState } from "react";
 import axios from "axios";
-import { slots, courses } from "./select_options";
 import toast, { Toaster } from "react-hot-toast";
 import { handleAPIError } from "../../util/error";
 import { useRouter } from "next/navigation";
@@ -29,6 +28,8 @@ import {
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 import {PostPDFToCloudinary} from "@/interface"
+import { courses, slots } from "@/components/select_options";
+import SearchBar from "@/components/searchbarSubjectList";
 const Page = () => {
   const router = useRouter();
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -197,15 +198,17 @@ const Page = () => {
             {/* Subject Selection */}
             <div>
               <label>Subject:</label>
-              <Command className="rounded-lg border shadow-md md:min-w-[450px]">
+              {/* 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]">
+                /> */}
+                {/* <CommandList className="h-[100px]">
                   <CommandEmpty>No results found.</CommandEmpty>
 
                   <CommandGroup heading="Subjects">
@@ -219,7 +222,7 @@ const Page = () => {
                     ))}
                   </CommandGroup>
                 </CommandList>
-              </Command>
+              </Command> */}
             </div>
 
             {/* Year Selection */}

src/components/searchbarSubjectList.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { useState, useCallback, useRef, useEffect } from "react";
+import { Search } from "lucide-react";
+import debounce from "debounce";
+import { Input } from "@/components/ui/input";
+import { courses } from "./select_options";
+
+function searchbarSubjectList({
+  setSubject,
+}: {
+  setSubject: React.Dispatch<React.SetStateAction<string>>;
+}) {
+  const [searchText, setSearchText] = useState("");
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const suggestionsRef = useRef<HTMLUListElement | null>(null);
+
+  const debouncedSearch = useCallback(
+    debounce(async (text: string) => {
+      if (text.length > 0) {
+        setLoading(true);
+        const escapedSearchText = text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
+        const regex = new RegExp(escapedSearchText, "i");
+        const filteredSubjects = courses
+          .filter((subject) => subject.search(regex) !== -1)
+          .slice(0, 10);
+
+        if (filteredSubjects.length === 0) {
+          setError("Subject not found");
+          return;
+        }
+        setSuggestions(filteredSubjects);
+        setError(null);
+
+        setLoading(false);
+      } else {
+        setSuggestions([]);
+      }
+    }, 500),
+    [],
+  );
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const text = e.target.value;
+    setSearchText(text);
+    if (text.length <= 0) {
+      setSuggestions([]);
+    }
+    void debouncedSearch(text);
+  };
+
+  const handleSelectSuggestion = async (suggestion: string) => {
+    setSearchText(suggestion);
+    setSuggestions([]);
+    setSubject(suggestion);
+    // router.push(`/catalogue?subject=${encodeURIComponent(suggestion)}`);
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      suggestionsRef.current &&
+      !suggestionsRef.current.contains(event.target as Node)
+    ) {
+      setSuggestions([]);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div className="mx-4 md:mx-0">
+      <form className=" my-2 ml-2 w-full max-w-xl">
+        <div className="relative">
+          <Input
+            type="text"
+            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 && (
+            <div className="text-md absolute z-20 mt-2 w-full max-w-xl rounded-md border border-[#434dba] bg-white p-2 text-center font-sans font-semibold tracking-wider dark:bg-[#030712]">
+              Loading suggestions...
+            </div>
+          )}
+          {(suggestions.length > 0 || error) && !loading && (
+            <ul
+              ref={suggestionsRef}
+              className="absolute z-20 mx-0.5 mt-2 w-full max-w-xl rounded-md border border-[#434dba] bg-white text-center dark:bg-[#030712] md:mx-0"
+            >
+              {error ? (
+                <li className="text-red p-2">{error}</li>
+              ) : (
+                suggestions.map((suggestion, index) => (
+                  <li
+                    key={index}
+                    onClick={() => handleSelectSuggestion(suggestion)}
+                    className="cursor-pointer truncate p-2 hover:opacity-50"
+                    style={{
+                      width: "100%",
+                      overflow: "hidden",
+                      whiteSpace: "nowrap",
+                      textOverflow: "ellipsis",
+                    }}
+                  >
+                    {suggestion}
+                  </li>
+                ))
+              )}
+            </ul>
+          )}
+        </div>
+      </form>
+    </div>
+  );
+}
+
+export default searchbarSubjectList;