use context to get course list everywhere

Author: Advik-Gupta

src/app/request/page.tsx

@@ -19,6 +19,7 @@ import UpcomingPaper from "../../components/UpcomingPaper";
 import toast from "react-hot-toast";
 import { Search } from "lucide-react";
 import SkeletonPaperCard from "@/components/SkeletonPaperCard";
+import { useCourses } from "@/context/courseContext";
 
 type Course = {
   name?: string | null;
@@ -37,23 +38,11 @@ export default function PaperRequest() {
   const suggestionsRef = useRef<HTMLUListElement | null>(null);
   const [displayPapers, setDisplayPapers] = useState<IUpcomingPaper[]>([]);
   const [isLoading, setIsLoading] = useState(true);
+  const { courses, loading, error, refetch } = useCourses();
 
   useEffect(() => {
-    async function fetchSubjects() {
-      try {
-        const response = await axios.get<Course[]>(`/api/course-list`);
-        const courses: Course[] = response.data;
-        const names = courses
-          .map((course) => course.name ?? course.courseName ?? course.title)
-          .filter(Boolean) as string[];
-
-        setSubjects(names);
-      } catch (err) {
-        console.error("Error fetching subjects:", err);
-      }
-    }
-    void fetchSubjects();
-  }, []);
+    setSubjects(courses.map((course) => course.name));
+  }, [courses]);
 
   useEffect(() => {
     async function fetchPapers() {
@@ -138,7 +127,7 @@ export default function PaperRequest() {
           loading: "Submitting your request...",
           success: "Your paper request was submitted successfully",
           error: "Failed to submit your request. Please try again later.",
-        }
+        },
       );
 
       setSearchText("");

src/components/CatalogueContent.tsx

@@ -4,11 +4,7 @@ import { useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
 import axios, { type AxiosError } from "axios";
 import { Button } from "@/components/ui/button";
-import {
-  type IPaper,
-  type Filters,
-  type StoredSubjects
-} from "@/interface";
+import { type IPaper, type Filters, type StoredSubjects } from "@/interface";
 import Card from "./Card";
 import { useRouter } from "next/navigation";
 import Loader from "./ui/loader";
@@ -17,7 +13,7 @@ import Error from "./Error";
 import { Filter } from "lucide-react";
 import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet";
 import { Pin } from "lucide-react";
-import SearchBarChild from "./Searchbar/searchbar-child"
+import SearchBarChild from "./Searchbar/searchbar-child";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import {
@@ -26,6 +22,7 @@ import {
   downloadFile,
 } from "@/util/download_paper";
 import type { ICourses } from "@/interface";
+import { useCourses } from "@/context/courseContext";
 
 const CatalogueContent = () => {
   const router = useRouter();
@@ -52,6 +49,8 @@ const CatalogueContent = () => {
   const [appliedFilters, setAppliedFilters] = useState<boolean>(false);
   const [pinned, setPinned] = useState<boolean>(false);
   const [relatedSubjects, setRelatedSubjects] = useState<string[]>([]);
+  const { courses } = useCourses();
+
   // Fetch related subjects when subject changes
   useEffect(() => {
     if (!subject) return;
@@ -78,31 +77,11 @@ const CatalogueContent = () => {
     void fetchRelatedSubjects();
   }, [subject]);
 
-    useEffect(() => {
-      if (pathname !== "/catalogue") return;
-  
-      const getSubjects = async () => {
-        try {
-          const res = await fetch("/api/course-list");
-          if (!res.ok) return;
-  
-          const json: unknown = await res.json();
-  
-          if (Array.isArray(json)) {
-            const filtered = json
-              .filter((item): item is ICourses => typeof item === "object" && item !== null && "name" in item)
-              .map(item => item.name);
-            setSubjects(filtered);
-          } else {
-            console.error("Invalid data returned from API:", json);
-          }
-        } catch (err) {
-          console.error("Failed to fetch courses", err);
-        }
-      };
-  
-      void getSubjects();
-    }, [pathname]);
+  useEffect(() => {
+    if (pathname !== "/catalogue") return;
+    const filteredSubjects = courses.map((course) => course.name);
+    setSubjects(filteredSubjects);
+  }, [pathname, courses]);
   // Set initial state from searchParams on client-side mount
   useEffect(() => {
     setIsMounted(true);
@@ -321,68 +300,72 @@ const CatalogueContent = () => {
 
   return (
     <div className="relative flex min-h-screen justify-center p-0 md:justify-normal">
-      {papers.length > 0 && <div className="hidden !w-[22%] min-w-[22%] max-w-[22%] flex-shrink-0 md:block">
-        <SideBar
-          filtersNotPulled={filtersNotPulled}
-          loading={loading}
-          selectedExams={selectedExams}
-          selectedSlots={selectedSlots}
-          selectedYears={selectedYears}
-          selectedSemesters={selectedSemesters}
-          selectedCampuses={selectedCampuses}
-          selectedAnswerKeyIncluded={selectedAnswerKeyIncluded}
-          noAppliedFilters={noAppliedFilters}
-          handleApplyFilters={handleApplyFilters}
-          handleSelectAll={handleSelectAll}
-          handleDeselectAll={handleDeselectAll}
-          selectedPapers={selectedPapers}
-          subject={subject}
-          filterOptions={filterOptions}
-          handleDownloadAll={handleDownloadAll}
-          closeFilters={closeFilters}
-        />
-      </div>}
+      {papers.length > 0 && (
+        <div className="hidden !w-[22%] min-w-[22%] max-w-[22%] flex-shrink-0 md:block">
+          <SideBar
+            filtersNotPulled={filtersNotPulled}
+            loading={loading}
+            selectedExams={selectedExams}
+            selectedSlots={selectedSlots}
+            selectedYears={selectedYears}
+            selectedSemesters={selectedSemesters}
+            selectedCampuses={selectedCampuses}
+            selectedAnswerKeyIncluded={selectedAnswerKeyIncluded}
+            noAppliedFilters={noAppliedFilters}
+            handleApplyFilters={handleApplyFilters}
+            handleSelectAll={handleSelectAll}
+            handleDeselectAll={handleDeselectAll}
+            selectedPapers={selectedPapers}
+            subject={subject}
+            filterOptions={filterOptions}
+            handleDownloadAll={handleDownloadAll}
+            closeFilters={closeFilters}
+          />
+        </div>
+      )}
 
       <div className="w-full">
-        {papers.length > 0 && <Sheet>
-          <SheetTrigger className="mx-8 mt-8 block md:hidden">
-            <Button
-              variant="outline"
-              className="flex gap-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"
+        {papers.length > 0 && (
+          <Sheet>
+            <SheetTrigger className="mx-8 mt-8 block md:hidden">
+              <Button
+                variant="outline"
+                className="flex gap-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"
+              >
+                <Filter size={18} />
+                Add Filters
+              </Button>
+            </SheetTrigger>
+            <SheetContent
+              side={"left"}
+              className="m-0 bg-[#f3f5ff] p-0 pt-4 dark:bg-[#070114]"
             >
-              <Filter size={18} />
-              Add Filters
-            </Button>
-          </SheetTrigger>
-          <SheetContent
-            side={"left"}
-            className="m-0 bg-[#f3f5ff] p-0 pt-4 dark:bg-[#070114]"
-          >
-            <SideBar
-              filtersNotPulled={filtersNotPulled}
-              loading={loading}
-              selectedExams={selectedExams}
-              selectedSlots={selectedSlots}
-              selectedYears={selectedYears}
-              selectedSemesters={selectedSemesters}
-              selectedCampuses={selectedCampuses}
-              selectedAnswerKeyIncluded={selectedAnswerKeyIncluded}
-              noAppliedFilters={noAppliedFilters}
-              handleApplyFilters={handleApplyFilters}
-              handleSelectAll={handleSelectAll}
-              handleDeselectAll={handleDeselectAll}
-              selectedPapers={selectedPapers}
-              subject={subject}
-              filterOptions={filterOptions}
-              handleDownloadAll={handleDownloadAll}
-              closeFilters={closeFilters}
-            />
-          </SheetContent>
-        </Sheet>}
+              <SideBar
+                filtersNotPulled={filtersNotPulled}
+                loading={loading}
+                selectedExams={selectedExams}
+                selectedSlots={selectedSlots}
+                selectedYears={selectedYears}
+                selectedSemesters={selectedSemesters}
+                selectedCampuses={selectedCampuses}
+                selectedAnswerKeyIncluded={selectedAnswerKeyIncluded}
+                noAppliedFilters={noAppliedFilters}
+                handleApplyFilters={handleApplyFilters}
+                handleSelectAll={handleSelectAll}
+                handleDeselectAll={handleDeselectAll}
+                selectedPapers={selectedPapers}
+                subject={subject}
+                filterOptions={filterOptions}
+                handleDownloadAll={handleDownloadAll}
+                closeFilters={closeFilters}
+              />
+            </SheetContent>
+          </Sheet>
+        )}
 
-        <div className="p-7 flex flex-col items-start">
-          <div className="md:hidden flex flex-col items-start w-full mb-8">
-              <SearchBarChild initialSubjects={subjects} />
+        <div className="flex flex-col items-start p-7">
+          <div className="mb-8 flex w-full flex-col items-start md:hidden">
+            <SearchBarChild initialSubjects={courses} />
           </div>
           <div className="flex items-center gap-2">
             <div>

src/components/Navbar.tsx

@@ -27,37 +27,12 @@ import { useCourses } from "@/context/courseContext";
 
 function Navbar() {
   const pathname: string = usePathname() ?? "/";
-  const [subjects, setSubjects] = useState<string[]>([]);
+
   const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);
   const { courses, loading, error, refetch } = useCourses();
 
   useEffect(() => {
     if (pathname !== "/catalogue") return;
-
-    const getSubjects = async () => {
-      try {
-        const res = await fetch("/api/course-list");
-        if (!res.ok) return;
-
-        const json: unknown = await res.json();
-
-        if (Array.isArray(json)) {
-          const filtered = json
-            .filter(
-              (item): item is ICourses =>
-                typeof item === "object" && item !== null && "name" in item,
-            )
-            .map((item) => item.name);
-          setSubjects(filtered);
-        } else {
-          console.error("Invalid data returned from API:", json);
-        }
-      } catch (err) {
-        console.error("Failed to fetch courses", err);
-      }
-    };
-
-    void getSubjects();
   }, [pathname]);
 
   const renderHomePageButtons = () => (

src/components/screens/PapersPage.tsx

@@ -19,6 +19,7 @@ import { IUpcomingPaper } from "@/interface";
 import { Skeleton } from "../ui/skeleton";
 import { CarouselItem } from "@/components/ui/carousel";
 import UpcomingPaper from "../UpcomingPaper";
+import { useCourses } from "@/context/courseContext";
 
 type Course = {
   name?: string | null;
@@ -37,23 +38,7 @@ export default function PapersPage() {
   const suggestionsRef = useRef<HTMLUListElement | null>(null);
   const [displayPapers, setDisplayPapers] = useState<IUpcomingPaper[]>([]);
   const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    async function fetchSubjects() {
-      try {
-        const response = await axios.get<Course[]>(`/api/course-list`);
-        const courses: Course[] = response.data;
-        const names = courses
-          .map((course) => course.name ?? course.courseName ?? course.title)
-          .filter(Boolean) as string[];
-
-        setSubjects(names);
-      } catch (err) {
-        console.error("Error fetching subjects:", err);
-      }
-    }
-    void fetchSubjects();
-  }, []);
+  const { courses, loading, error, refetch } = useCourses();
 
   useEffect(() => {
     async function fetchPapers() {
@@ -79,8 +64,8 @@ export default function PapersPage() {
   }, []);
 
   const fuse = useMemo(
-    () => new Fuse(subjects, { includeScore: true, threshold: 0.3 }),
-    [subjects],
+    () => new Fuse(courses, { includeScore: true, threshold: 0.3 }),
+    [courses],
   );
 
   useEffect(() => {
@@ -95,7 +80,7 @@ export default function PapersPage() {
     }
 
     const results = fuse.search(searchText);
-    setSuggestions(results.map((r) => r.item).slice(0, 10));
+    setSuggestions(results.map((r) => r.item.name).slice(0, 10));
   }, [searchText, fuse, selectedSubject]);
 
   const handleSelectSubject = (subject: string) => {