Fix: Filter error on navigated page (401)

src/components/CatalogueContent.tsx

@@ -60,6 +60,10 @@ const CatalogueContentInner = ({ subject }: { subject: string | null }) => {
     handleDownloadSelected,
   } = useFilters();
 
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [subject]);
+
   // Fetch related subjects when subject changes
   useEffect(() => {
     if (!subject) return;
@@ -92,11 +96,21 @@ const CatalogueContentInner = ({ subject }: { subject: string | null }) => {
         localStorage.getItem("userSubjects") ?? "[]",
       ) as StoredSubjects;
       const subjectName = searchParams.get("subject");
-      setSelectedExams(searchParams.get("exams")?.split(",").filter(Boolean) ?? []);
-      setSelectedSlots(searchParams.get("slots")?.split(",").filter(Boolean) ?? []);
-      setSelectedYears(searchParams.get("years")?.split(",").filter(Boolean) ?? []);
-      setSelectedCampuses(searchParams.get("campus")?.split(",").filter(Boolean) ?? []);
-      setSelectedSemesters(searchParams.get("semester")?.split(",").filter(Boolean) ?? []);
+      setSelectedExams(
+        searchParams.get("exams")?.split(",").filter(Boolean) ?? [],
+      );
+      setSelectedSlots(
+        searchParams.get("slots")?.split(",").filter(Boolean) ?? [],
+      );
+      setSelectedYears(
+        searchParams.get("years")?.split(",").filter(Boolean) ?? [],
+      );
+      setSelectedCampuses(
+        searchParams.get("campus")?.split(",").filter(Boolean) ?? [],
+      );
+      setSelectedSemesters(
+        searchParams.get("semester")?.split(",").filter(Boolean) ?? [],
+      );
       setSelectedAnswerKeyIncluded(searchParams.get("answerkey") === "true");
       if (subjectName && Array.isArray(currentPinnedSubjects)) {
         if (currentPinnedSubjects.includes(subjectName)) {
@@ -106,7 +120,15 @@ const CatalogueContentInner = ({ subject }: { subject: string | null }) => {
         }
       }
     }
-  }, [searchParams, setSelectedExams, setSelectedSlots, setSelectedYears, setSelectedSemesters, setSelectedCampuses, setSelectedAnswerKeyIncluded]);
+  }, [
+    searchParams,
+    setSelectedExams,
+    setSelectedSlots,
+    setSelectedYears,
+    setSelectedSemesters,
+    setSelectedCampuses,
+    setSelectedAnswerKeyIncluded,
+  ]);
 
   const handlePinToggle = () => {
     const current = !pinned;
@@ -151,12 +173,7 @@ const CatalogueContentInner = ({ subject }: { subject: string | null }) => {
     };
 
     void fetchPapers();
-  }, [
-    subject,
-    isMounted,
-    setPapers,
-    setFilterOptions,
-  ]);
+  }, [subject, isMounted, setPapers, setFilterOptions]);
 
   useEffect(() => {
     if (!papers.length) return;
@@ -189,15 +206,14 @@ const CatalogueContentInner = ({ subject }: { subject: string | null }) => {
         answerkeyCondition
       );
     });
-
     setFilteredPapers(filtered);
     setAppliedFilters(
       selectedExams.length > 0 ||
-      selectedSlots.length > 0 ||
-      selectedYears.length > 0 ||
-      selectedSemesters.length > 0 ||
-      selectedCampuses.length > 0 ||
-      selectedAnswerKeyIncluded
+        selectedSlots.length > 0 ||
+        selectedYears.length > 0 ||
+        selectedSemesters.length > 0 ||
+        selectedCampuses.length > 0 ||
+        selectedAnswerKeyIncluded,
     );
   }, [
     papers,

src/components/SideBar.tsx

@@ -17,16 +17,18 @@ function SideBar() {
     selectedAnswerKeyIncluded,
     filterOptions,
     handleApplyFilters,
+    setCurrentPage,
   } = useFilters();
   const exams =
-    filterOptions?.unique_exams.map((exam) => ({ label: exam, value: exam })) ?? [];
+    filterOptions?.unique_exams.map((exam) => ({ label: exam, value: exam })) ??
+    [];
   const slots =
     filterOptions?.unique_slots
       .sort((a, b) => a.localeCompare(b, undefined, { numeric: true }))
       .map((slot) => ({ label: slot, value: slot })) ?? [];
   const years =
     filterOptions?.unique_years
-      .sort((a, b) => b.localeCompare(a)) 
+      .sort((a, b) => b.localeCompare(a))
       .map((year) => ({ label: year, value: year })) ?? [];
   const semesters =
     filterOptions?.unique_semesters.map((semester) => ({
@@ -39,57 +41,61 @@ function SideBar() {
       label: "Exams",
       data: exams,
       selected: selectedExams,
-      updater: (newVal: string[]) =>
+      updater: (newVal: string[]) => {
         handleApplyFilters(
           newVal,
           selectedSlots,
           selectedYears,
           selectedCampuses,
           selectedSemesters,
-          selectedAnswerKeyIncluded
-        ),
+          selectedAnswerKeyIncluded,
+        );
+      },
     },
     {
       label: "Slots",
       data: slots,
       selected: selectedSlots,
-      updater: (newVal: string[]) =>
+      updater: (newVal: string[]) => {
         handleApplyFilters(
           selectedExams,
           newVal,
           selectedYears,
           selectedCampuses,
           selectedSemesters,
-          selectedAnswerKeyIncluded
-        ),
+          selectedAnswerKeyIncluded,
+        );
+      },
     },
     {
       label: "Years",
       data: years,
       selected: selectedYears,
-      updater: (newVal: string[]) =>
+      updater: (newVal: string[]) => {
         handleApplyFilters(
           selectedExams,
           selectedSlots,
           newVal,
           selectedCampuses,
           selectedSemesters,
-          selectedAnswerKeyIncluded
-        ),
+          selectedAnswerKeyIncluded,
+        );
+      },
     },
     {
       label: "Semesters",
       data: semesters,
       selected: selectedSemesters,
-      updater: (newVal: string[]) =>
+      updater: (newVal: string[]) => {
         handleApplyFilters(
           selectedExams,
           selectedSlots,
           selectedYears,
           selectedCampuses,
           newVal,
-          selectedAnswerKeyIncluded
-        ),
+          selectedAnswerKeyIncluded,
+        );
+      },
     },
   ];
 
@@ -100,7 +106,9 @@ function SideBar() {
           <Filter size={24} />
           <div className="font-play text-xl font-bold">Filters</div>
         </div>
-        <SidebarButton onClick={() => handleApplyFilters([], [], [], [], [], false)}>
+        <SidebarButton
+          onClick={() => handleApplyFilters([], [], [], [], [], false)}
+        >
           Reset Filters
         </SidebarButton>
       </div>
@@ -115,15 +123,14 @@ function SideBar() {
               selectedYears,
               selectedCampuses,
               selectedSemesters,
-              !selectedAnswerKeyIncluded
+              !selectedAnswerKeyIncluded,
             )
           }
         >
           Answer Key Available
         </SidebarButton>
       </div>
 
-
       {filtersForSidebar.map((section) => (
         <SidebarSection
           key={section.label}