fixing course and count structure

Author: Advik-Gupta

src/app/api/course-list/route.ts

@@ -1,6 +1,6 @@
 import { NextResponse } from "next/server";
 import { connectToDatabase } from "@/lib/mongoose";
-import { Course } from "@/db/papers";
+import { Course } from "@/db/course";
 
 export const dynamic = "force-dynamic";
 
@@ -14,7 +14,7 @@ export async function GET() {
     console.error(error);
     return NextResponse.json(
       { message: "Failed to fetch courses", error },
-      { status: 500 }
+      { status: 500 },
     );
   }
 }

src/app/api/papers/count/route.ts

@@ -1,22 +1,24 @@
 import { NextResponse } from "next/server";
 import { connectToDatabase } from "@/lib/mongoose";
-import Paper from "@/db/papers";
+import CourseCount from "@/db/course";
 
 export const dynamic = "force-dynamic";
+
 export async function GET(req: Request) {
   try {
     await connectToDatabase();
 
-    const { searchParams } = new URL(req.url);
-    const subject = searchParams.get("subject");
+    const count = await CourseCount.find().lean();
 
-    const filter = subject ? { subject } : {};
-    const count = await Paper.countDocuments(filter);
+    const formatted = count.map((item) => ({
+      name: item.name,
+      count: item.count,
+    }));
 
-    return NextResponse.json({ count }, { status: 200 });
+    return NextResponse.json(formatted, { status: 200 });
   } catch (error) {
     return NextResponse.json(
-      { message: "Failed to fetch papers", error },
+      { message: "Failed to fetch course counts", error },
       { status: 500 },
     );
   }

src/app/layout.tsx

@@ -7,6 +7,8 @@ import type { Metadata } from "next";
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 import ChildrenWrapper from "@/components/ChildrenWrapper";
+import { CoursesProvider } from "@/context/courseContext";
+
 export const metadata: Metadata = {
   metadataBase: new URL("https://papers.codechefvit.com/"),
   title: "Papers by CodeChef-VIT | Explore VIT Previous Year Question Papers",
@@ -119,9 +121,11 @@ export default function RootLayout({
         >
           <Toaster position="top-right" reverseOrder={false} />
           <div className="bg-[#F3F5FF] dark:bg-[#070114]">
-            <Navbar />
-            <ChildrenWrapper>{children}</ChildrenWrapper>
-            <Footer />
+            <CoursesProvider>
+              <Navbar />
+              <ChildrenWrapper>{children}</ChildrenWrapper>
+              <Footer />
+            </CoursesProvider>
           </div>
         </ThemeProvider>
       </body>

src/app/pinned/page.tsx

@@ -8,18 +8,23 @@ import { useState } from "react";
 
 const Pinned = () => {
   const [displayPapers, setDisplayPapers] = useState<IUpcomingPaper[]>([]);
+
   return (
     <div id="pinned" className="mt-5 flex flex-col justify-between">
       <h1 className="mx-auto my-8 hidden text-center font-vipnabd text-3xl font-extrabold md:block">
         Pinned Subjects
       </h1>
       <div className="mb-3 flex w-full flex-col items-center gap-2 px-6">
         <div className="w-full">
-          <SearchBar type="pinned" displayPapers = {displayPapers.length > 0} />
+          <SearchBar type="pinned" displayPapers={displayPapers.length > 0} />
         </div>
       </div>
       <div className="min-h-[40vh]">
-        <PinnedPapersCarousel carouselType="users" displayPapers = {displayPapers} setDisplayPapers = {setDisplayPapers} />
+        <PinnedPapersCarousel
+          carouselType="users"
+          displayPapers={displayPapers}
+          setDisplayPapers={setDisplayPapers}
+        />
       </div>
       {/* <div className="mt-6 flex w-full items-center justify-center">
         <p>You can pin upto 8 Subjects here</p>

src/components/Navbar.tsx

@@ -6,23 +6,30 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import ccLogo from "../assets/codechef_logo.svg";
 import ModeToggle from "@/components/toggle-theme";
-import { ArrowDownLeftIcon, Pin, ArrowUpRight, ChevronDown } from "lucide-react";
+import {
+  ArrowDownLeftIcon,
+  Pin,
+  ArrowUpRight,
+  ChevronDown,
+} from "lucide-react";
 import FloatingNavbar from "./FloatingNavbar";
 import PWAInstallButton from "./ui/PWAInstallButton";
 import SearchBarChild from "./Searchbar/searchbar-child";
-import Banner from "@/components/bannerDismiss"
-import type { ICourses } from "@/interface"; 
+import Banner from "@/components/bannerDismiss";
+import type { ICourses } from "@/interface";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
   DropdownMenuContent,
   DropdownMenuItem,
 } from "@/components/ui/dropdown-menu";
+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;
@@ -36,8 +43,11 @@ function Navbar() {
 
         if (Array.isArray(json)) {
           const filtered = json
-            .filter((item): item is ICourses => typeof item === "object" && item !== null && "name" in item)
-            .map(item => item.name);
+            .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);
@@ -53,36 +63,14 @@ function Navbar() {
   const renderHomePageButtons = () => (
     <>
       <Link href="/pinned" className="ml-2">
-        <div className="flex items-center 
-          gap-1 sm:gap-2 
-          rounded-full border border-[#3A3745]
-          bg-[#e8e9ff] dark:bg-black
-          px-2.5 sm:px-3.5 md:px-4 
-          py-1 sm:py-1.5 md:py-2 
-          text-xs sm:text-sm md:text-base 
-          font-semibold 
-          text-gray-700 dark:text-white
-          transition hover:bg-slate-50 dark:hover:bg-[#1A1823]
-          h-8 sm:h-9 md:h-10">
-          
+        <div className="flex h-8 items-center gap-1 rounded-full border border-[#3A3745] bg-[#e8e9ff] px-2.5 py-1 text-xs font-semibold text-gray-700 transition hover:bg-slate-50 dark:bg-black dark:text-white dark:hover:bg-[#1A1823] sm:h-9 sm:gap-2 sm:px-3.5 sm:py-1.5 sm:text-sm md:h-10 md:px-4 md:py-2 md:text-base">
           <Pin className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
           <span className="truncate">Pinned Subjects</span>
         </div>
       </Link>
 
       <Link href="/request" className="ml-2 mt-2 sm:mt-0">
-        <div className="flex items-center 
-          gap-1 sm:gap-2 
-          rounded-full border border-[#3A3745]
-          bg-[#e8e9ff] dark:bg-black
-          px-2.5 sm:px-3.5 md:px-4 
-          py-1 sm:py-1.5 md:py-2 
-          text-xs sm:text-sm md:text-base 
-          font-semibold 
-          text-gray-700 dark:text-white
-          transition hover:bg-slate-50 dark:hover:bg-[#1A1823]
-          h-8 sm:h-9 md:h-10">
-          
+        <div className="flex h-8 items-center gap-1 rounded-full border border-[#3A3745] bg-[#e8e9ff] px-2.5 py-1 text-xs font-semibold text-gray-700 transition hover:bg-slate-50 dark:bg-black dark:text-white dark:hover:bg-[#1A1823] sm:h-9 sm:gap-2 sm:px-3.5 sm:py-1.5 sm:text-sm md:h-10 md:px-4 md:py-2 md:text-base">
           <ArrowUpRight className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
           <span className="truncate">Paper Request</span>
         </div>
@@ -92,20 +80,25 @@ function Navbar() {
 
   return (
     <div className="sticky top-0 z-[50] w-full bg-[#B2B8FF] dark:bg-[#130E1F]">
-        <Banner
-          bannerId="freshers"
-          bgColor="#fef3c7"
-          textColor="#5a3000"
-          iconColor="#d97706"
-          accentColor="#78350f"
-          title="Attention Freshers!"
-          message="If papers for your subject are not yet available, click on your subject and explore related subjects until papers become available, as these are newly introduced courses."
-        />
-       <div className="flex items-center justify-between bg-inherit px-4 py-4 md:px-8 md:py-5">
+      <Banner
+        bannerId="freshers"
+        bgColor="#fef3c7"
+        textColor="#5a3000"
+        iconColor="#d97706"
+        accentColor="#78350f"
+        title="Attention Freshers!"
+        message="If papers for your subject are not yet available, click on your subject and explore related subjects until papers become available, as these are newly introduced courses."
+      />
+      <div className="flex items-center justify-between bg-inherit px-4 py-4 md:px-8 md:py-5">
         {}
-        <div className="flex items-center gap-4 relative">
+        <div className="relative flex items-center gap-4">
           <Link href="https://www.codechefvit.com/" target="_blank">
-            <Image src={ccLogo as StaticImageData} alt="codechef-logo" height={60} width={60} />
+            <Image
+              src={ccLogo as StaticImageData}
+              alt="codechef-logo"
+              height={60}
+              width={60}
+            />
           </Link>
 
           <Link
@@ -116,7 +109,7 @@ function Navbar() {
           </Link>
 
           {pathname === "/catalogue" ? (
-            <div className="ml-4 hidden xl:block relative">
+            <div className="relative ml-4 hidden xl:block">
               <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
                 <DropdownMenuTrigger asChild>
                   <button
@@ -130,7 +123,7 @@ function Navbar() {
                 </DropdownMenuTrigger>
 
                 <DropdownMenuContent
-                  className="w-56 rounded-2xl bg-[#4B22D1] text-white border border-[rgba(255,255,255,0.1)] shadow-2xl backdrop-blur-sm"
+                  className="w-56 rounded-2xl border border-[rgba(255,255,255,0.1)] bg-[#4B22D1] text-white shadow-2xl backdrop-blur-sm"
                   align="start"
                 >
                   <DropdownMenuItem asChild>
@@ -150,72 +143,70 @@ function Navbar() {
             </div>
           ) : (
             <>
-            <div className="ml-2 hidden lg:block xl:hidden relative">
-              <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
-                <DropdownMenuTrigger asChild>
-                  <button
-                    className="flex h-10 w-10 items-center justify-center rounded-full bg-[#4B22D1] text-white shadow-lg transition-transform duration-200 hover:scale-105 active:scale-95"
-                    aria-label="Toggle dropdown"
-                  >
-                    <ChevronDown
-                      className={`h-5 w-5 transition-transform duration-200 ${dropdownOpen ? "rotate-180" : ""}`}
-                    />
-                  </button>
-                </DropdownMenuTrigger>
-
-                <DropdownMenuContent
-                  className="w-56 rounded-2xl bg-[#4B22D1] text-white border border-[rgba(255,255,255,0.1)] shadow-2xl backdrop-blur-sm"
-                  align="start"
+              <div className="relative ml-2 hidden lg:block xl:hidden">
+                <DropdownMenu
+                  open={dropdownOpen}
+                  onOpenChange={setDropdownOpen}
                 >
-                  <DropdownMenuItem asChild>
-                    <Link href="/pinned" className="flex items-center gap-3">
-                      <Pin className="h-4 w-4" />
-                      <span className="font-medium">Pinned Subjects</span>
-                    </Link>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem asChild>
-                    <Link href="/request" className="flex items-center gap-3">
-                      <ArrowUpRight className="h-4 w-4" />
-                      <span className="font-medium">Paper Request</span>
-                    </Link>
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </div>
-            <div className="hidden xl:flex items-center h-10">{renderHomePageButtons()}</div></>
+                  <DropdownMenuTrigger asChild>
+                    <button
+                      className="flex h-10 w-10 items-center justify-center rounded-full bg-[#4B22D1] text-white shadow-lg transition-transform duration-200 hover:scale-105 active:scale-95"
+                      aria-label="Toggle dropdown"
+                    >
+                      <ChevronDown
+                        className={`h-5 w-5 transition-transform duration-200 ${dropdownOpen ? "rotate-180" : ""}`}
+                      />
+                    </button>
+                  </DropdownMenuTrigger>
+
+                  <DropdownMenuContent
+                    className="w-56 rounded-2xl border border-[rgba(255,255,255,0.1)] bg-[#4B22D1] text-white shadow-2xl backdrop-blur-sm"
+                    align="start"
+                  >
+                    <DropdownMenuItem asChild>
+                      <Link href="/pinned" className="flex items-center gap-3">
+                        <Pin className="h-4 w-4" />
+                        <span className="font-medium">Pinned Subjects</span>
+                      </Link>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem asChild>
+                      <Link href="/request" className="flex items-center gap-3">
+                        <ArrowUpRight className="h-4 w-4" />
+                        <span className="font-medium">Paper Request</span>
+                      </Link>
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+              <div className="hidden h-10 items-center xl:flex">
+                {renderHomePageButtons()}
+              </div>
+            </>
           )}
         </div>
 
         {}
         {pathname === "/catalogue" && (
-          <div className="hidden md:flex flex-1 justify-center mr-12 ml-8 ">
+          <div className="ml-8 mr-12 hidden flex-1 justify-center md:flex">
             <div className="w-full max-w-[700px]">
-              <SearchBarChild initialSubjects={subjects} />
+              <SearchBarChild initialSubjects={courses} />
             </div>
           </div>
         )}
 
         {}
-        <div className={`${pathname === "/catalogue" ? "xl:flex" : "lg:flex"} hidden items-center gap-4`}>
-          <div className="rounded-full border border-[#3A3745] p-1" >
+        <div
+          className={`${pathname === "/catalogue" ? "xl:flex" : "lg:flex"} hidden items-center gap-4`}
+        >
+          <div className="rounded-full border border-[#3A3745] p-1">
             <ModeToggle />
           </div>
           <div className="hidden max-w-[200px] md:block">
             <PWAInstallButton />
           </div>
           <Link href={pathname === "/upload" ? "/" : "/upload"}>
-            <div className="flex items-center 
-              gap-1 sm:gap-1.5 md:gap-2 
-              rounded-full border border-[#3A3745]
-              bg-[#e8e9ff] dark:bg-black
-              px-2.5 sm:px-3.5 md:px-4 
-              py-1 sm:py-1.5 md:py-2 
-              text-xs sm:text-sm md:text-base 
-              font-semibold 
-              text-gray-700 dark:text-white
-              transition hover:bg-slate-50 dark:hover:bg-[#1A1823]
-              h-8 sm:h-9 md:h-10">
-              <ArrowDownLeftIcon className="h-3.5 w-3.5 sm:h-4 sm:w-4 rotate-90" />
+            <div className="flex h-8 items-center gap-1 rounded-full border border-[#3A3745] bg-[#e8e9ff] px-2.5 py-1 text-xs font-semibold text-gray-700 transition hover:bg-slate-50 dark:bg-black dark:text-white dark:hover:bg-[#1A1823] sm:h-9 sm:gap-1.5 sm:px-3.5 sm:py-1.5 sm:text-sm md:h-10 md:gap-2 md:px-4 md:py-2 md:text-base">
+              <ArrowDownLeftIcon className="h-3.5 w-3.5 rotate-90 sm:h-4 sm:w-4" />
               <span className="truncate">
                 {pathname === "/upload" ? "Search Papers" : "Upload Papers"}
               </span>
@@ -224,12 +215,14 @@ function Navbar() {
         </div>
 
         {}
-        <div className={`${pathname === "/catalogue" ? "xl:hidden" : "lg:hidden"}`}>
+        <div
+          className={`${pathname === "/catalogue" ? "xl:hidden" : "lg:hidden"}`}
+        >
           <FloatingNavbar onNavigate={() => void 0} />
         </div>
       </div>
     </div>
   );
 }
 
-export default Navbar;
+export default Navbar;