Merge pull request #172 from kashyap-harshit/staging

Abh1noob · web-flow · commit fa6f78963169 · 2025-04-17T22:58:02.000+05:30
Staging
diff --git a/src/components/CatalogueContent.tsx b/src/components/CatalogueContent.tsx
@@ -48,6 +48,10 @@ const CatalogueContent = () => {
   const [filtersPulled, setFiltersPulled] = useState<boolean>(false);
   const [appliedFilters, setAppliedFilters] = useState<boolean>(false);
 
+
+  const filtersNotPulled = ()=>{
+    setFiltersPulled(false);
+  }
   // Memoized effect to fetch papers
   useEffect(() => {
     if (!subject) return;
@@ -93,6 +97,7 @@ const CatalogueContent = () => {
         });
         setFilteredPapers(filtered.length > 0 ? filtered : papersData);
       } catch (error) {
+        setPapers([]);
         if (axios.isAxiosError(error)) {
           const axiosError = error as AxiosError<{ message?: string }>;
           setError(
@@ -107,7 +112,7 @@ const CatalogueContent = () => {
     };
 
     void fetchPapers();
-  }, []); // just run on initial page render
+  }, [subject]); // just run on initial page render
 
   // Memoized handlers
   const handleSelectPaper = useCallback(
@@ -209,12 +214,13 @@ const CatalogueContent = () => {
       link.download = filename;
       link.click();
       window.URL.revokeObjectURL(link.href);
-    } catch (error) { }
+    } catch (error) {}
   }
 
   return (
     <div className="relative flex min-h-screen justify-center p-0 md:justify-normal">
       <SideBar
+        filtersNotPulled={filtersNotPulled}
         loading={loading}
         selectedExams={selectedExams}
         selectedSlots={selectedSlots}
@@ -235,67 +241,62 @@ const CatalogueContent = () => {
       />
 
       {/* {error && <p className="text-red-500">{error}</p>} */}
-      {loading ? (
-        <Loader />
-      ) : papers.length > 0 ? (
+      <div className="w-full">
         <div
-          className={`grid h-fit grid-cols-1 gap-8 px-[30px] py-[40px] md:grid-cols-4 ${filtersPulled ? "blur-xl" : ""}`}
+          className={`justify-center mt-8 filter md:hidden ${filtersPulled ? "hidden" : "flex"}`}
         >
+          <Button
+            variant="outline"
+            onClick={() => setFiltersPulled(true)}
+            className="mr-2 border-2 border-black font-sans font-semibold hover:bg-slate-800 hover:text-white dark:border-[#434dba] dark:hover:border-white dark:hover:bg-slate-900"
+          >
+            Add Filters
+            <Image
+              src={filterIcon as string}
+              width={30}
+              height={30}
+              alt="Filter Icon"
+              className="invert dark:invert-0"
+            />
+
+          </Button>
+        </div>
+        {loading ? (
+          <Loader />
+        ) : papers.length > 0 ? (
           <div
-            className={`justify-center filter md:hidden ${filtersPulled ? "hidden" : "flex"}`}
+            className={`grid h-fit grid-cols-1 gap-8 px-[30px] py-[40px] md:grid-cols-4 ${filtersPulled ? "blur-xl" : ""}`}
           >
-            <Button
-              variant="outline"
-              onClick={() => setFiltersPulled(true)}
-              className="mr-2 border-2 border-black font-sans font-semibold hover:bg-slate-800 hover:text-white dark:border-[#434dba] dark:hover:border-white dark:hover:bg-slate-900"
-            >
-              Add Filters
-              <Image
-                src={filterIcon as string}
-                width={30}
-                height={30}
-                alt="Filter Icon"
-                className="hidden dark:block"
-              />
-              <Image
-                src={filterd as string}
-                height={30}
-                width={30}
-                alt="filter light"
-                className="block dark:hidden"
-              />
-            </Button>
-          </div>
+            
 
-          {appliedFilters ? (
-            filteredPapers.length > 0 ? (
-              filteredPapers.map((paper: IPaper) => (
+            {appliedFilters ? (
+              filteredPapers.length > 0 ? (
+                filteredPapers.map((paper: IPaper) => (
+                  <Card
+                    key={paper._id}
+                    paper={paper}
+                    onSelect={handleSelectPaper}
+                    isSelected={selectedPapers.some((p) => p._id === paper._id)}
+                  />
+                ))
+              ) : (
+                <p>No papers available with the applied filter</p>
+              )
+            ) : (
+              papers.map((paper: IPaper) => (
                 <Card
                   key={paper._id}
                   paper={paper}
                   onSelect={handleSelectPaper}
                   isSelected={selectedPapers.some((p) => p._id === paper._id)}
                 />
               ))
-            ) : (
-              <p>No papers available with the applied filter</p>
-            )
-          ) : (
-            papers.map((paper: IPaper) => (
-              <Card
-                key={paper._id}
-                paper={paper}
-                onSelect={handleSelectPaper}
-                isSelected={selectedPapers.some((p) => p._id === paper._id)}
-              />
-            ))
-          )}
-        </div>
-      ) : (
-        <Error
-          message={error ?? "No papers available for this subject."}
-        />
-      )}
+            )}
+          </div>
+        ) : (
+          <Error filtersPulled={filtersPulled} message={error ?? "No papers available for this subject."} />
+        )}
+      </div>
     </div>
   );
 };
diff --git a/src/components/Error.tsx b/src/components/Error.tsx
@@ -2,11 +2,12 @@ import React from "react";
 
 interface ErrorProps {
   message?: string;
+  filtersPulled : boolean;
 }
 
-const Error = ({ message = "Some error occured" }: ErrorProps) => {
+const Error = ({ message = "Some error occured", filtersPulled }: ErrorProps) => {
   return (
-    <div className="flex flex-1 items-center justify-center">
+    <div  className={`flex flex-1 items-center justify-center h-full ${filtersPulled ? "blur-xl" : ""}`}>
       <div className="-mt-32 text-center text-lg">
         {message}
       </div>
diff --git a/src/components/Searchbar/searchbar-child.tsx b/src/components/Searchbar/searchbar-child.tsx
@@ -5,7 +5,7 @@ import { Search } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { Input } from "@/components/ui/input";
 
-function SearchBarChild({ initialSubjects }: { initialSubjects: string[] }) {
+function SearchBarChild({ initialSubjects, filtersNotPulled  }: { initialSubjects: string[]; filtersNotPulled: ()=>void; }) {
   const router = useRouter();
   const [searchText, setSearchText] = useState("");
   const [suggestions, setSuggestions] = useState<string[]>([]);
@@ -25,8 +25,10 @@ function SearchBarChild({ initialSubjects }: { initialSubjects: string[] }) {
   };
 
   const handleSelectSuggestion = (suggestion: string) => {
+    suggestion = suggestion.replace(/\[.*?\]/g, '').trim();
     router.push(`/catalogue?subject=${encodeURIComponent(suggestion)}`);
     setSearchText(suggestion);
+    filtersNotPulled();
     setSuggestions([]);
   };
 
@@ -35,7 +37,7 @@ function SearchBarChild({ initialSubjects }: { initialSubjects: string[] }) {
       suggestionsRef.current &&
       !suggestionsRef.current.contains(event.target as Node)
     ) {
-      setSuggestions([]);
+      // setSuggestions([]);
     }
   };
 
@@ -74,7 +76,7 @@ function SearchBarChild({ initialSubjects }: { initialSubjects: string[] }) {
             (searchText.length > 1 && initialSubjects.length > 0)) && (
             <ul
               ref={suggestionsRef}
-              className="absolute z-20 h-[250px] w-full max-w-xl overflow-y-scroll rounded-md rounded-t-none border border-t-0 bg-white text-center shadow-lg dark:bg-[#303771] md:mx-0 md:h-auto md:overflow-auto"
+              className={`absolute z-20 h-[250px] w-full max-w-xl overflow-y-scroll rounded-md rounded-t-none border border-t-0 bg-white text-center shadow-lg dark:bg-[#303771] md:mx-0 ${suggestions.length>6?"h-[250px]" : "h-auto"} ${suggestions.length>10?"md:h-[400px]" : "md:h-auto"}  `}
             >
               {suggestions.length > 0 ? (
                 suggestions.map((suggestion, index) => (
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
@@ -20,6 +20,7 @@ import toast from "react-hot-toast";
 import SearchbarChild from "./Searchbar/searchbar-child";
 
 function SideBar({
+  filtersNotPulled,
   loading,
   selectedExams,
   selectedSlots,
@@ -38,6 +39,7 @@ function SideBar({
   handleApplyFilters,
   closeFilters,
 }: {
+  filtersNotPulled: ()=>void;
   loading: boolean;
   selectedExams: string[];
   selectedSlots: string[];
@@ -112,7 +114,7 @@ function SideBar({
         />
       </div>
       <div className="px-[10px] md:w-[100%]">{/* <SearchBar /> */}
-      <SearchbarChild initialSubjects={subjects ?? []}></SearchbarChild>
+      <SearchbarChild filtersNotPulled={filtersNotPulled} initialSubjects={subjects ?? []}></SearchbarChild>
 
       </div>
       <div className="flex w-full gap-8 border-b-2 border-[#36266d] px-[10px] pb-4 pt-8">
