Merge branch 'staging' into starredPapers

Author: Advik-Gupta

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

@@ -3,7 +3,6 @@ import { connectToDatabase } from "@/lib/mongoose";
 import Paper from "@/db/papers";
 
 export const dynamic = "force-dynamic";
-
 export async function GET(req: Request) {
   try {
     await connectToDatabase();

src/app/api/papers/route.ts

@@ -13,7 +13,7 @@ export async function GET(req: NextRequest) {
     const escapeRegExp = (text: string) => {
       return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
     };
-    const escapedSubject = escapeRegExp(subject!);
+    const escapedSubject = escapeRegExp(subject ?? "");
 
     if (!subject) {
       return NextResponse.json(
@@ -28,8 +28,15 @@ export async function GET(req: NextRequest) {
 
     if (papers.length === 0) {
       return NextResponse.json(
-        { message: "No papers found for the specified subject" },
-        { status: 404 },
+        {
+          papers,
+          uniqueYears: [],
+          uniqueSlots: [],
+          uniqueExams: [],
+          uniqueCampuses: [],
+          uniqueSemesters: [],
+        },
+        { status: 200 },
       );
     }
 

src/app/api/user-papers/route.ts

@@ -5,6 +5,11 @@ import { StoredSubjects } from "@/interface";
 
 export const dynamic = "force-dynamic";
 
+interface TransformedPaper {
+  subject: string;
+  slots: string[];
+}
+
 export async function POST(req: Request) {
   try {
     await connectToDatabase();

src/app/request/page.tsx

@@ -0,0 +1,5 @@
+import PapersPage from "@/components/screens/PapersPage";
+
+export default function RequestPage() {
+  return <PapersPage />;
+}

src/components/CatalogueContent.tsx

@@ -25,7 +25,7 @@ export async function downloadFile(url: string, filename: string) {
     link.download = filename;
     link.click();
     window.URL.revokeObjectURL(link.href);
-  } catch (error) {}
+  } catch (error) { }
 }
 
 const CatalogueContent = () => {
@@ -104,12 +104,12 @@ const CatalogueContent = () => {
       try {
         const papersResponse = await axios.get<Filters>("/api/papers", {
           params: { subject },
-        });
+        });g
         const data: Filters = papersResponse.data;
         const papersData = data.papers;
         setFilterOptions(data);
         setPapers(papersData);
-        // Apply filters from URL params
+        // Apply filters from URL paramsfilterOptions?
         const filtered = papersData.filter((paper) => {
           const examCondition = selectedExams.length
             ? selectedExams.includes(paper.exam)
@@ -127,7 +127,7 @@ const CatalogueContent = () => {
             ? selectedCampuses.includes(paper.campus)
             : true;
           const answerkeyCondition = selectedAnswerKeyIncluded
-            ? paper.answerKeyIncluded
+            ? paper.answerKeyIncluded === true
             : true;
           return (
             examCondition &&
@@ -146,7 +146,7 @@ const CatalogueContent = () => {
         setError(
           axios.isAxiosError(axiosError)
             ? ((axiosError.response?.data as { message?: string })?.message ??
-                "Error fetching papers")
+              "Error fetching papers")
             : "Error fetching papers",
         );
       } finally {
@@ -177,13 +177,21 @@ const CatalogueContent = () => {
   );
 
   const handleDownloadAll = useCallback(async () => {
+/*    if (typeof window !== "undefined" && window.gtag) {
+      window.gtag("event", "download_all_clicked", {
+        event_category: "Paper Downloads",
+        event_label: "Download All Clicked",
+      });
+    } */
+
     for (const paper of selectedPapers) {
       const extension = paper.finalUrl.split(".").pop();
       const fileName = `${extractBracketContent(paper.subject)}-${paper.exam}-${paper.slot}-${paper.year}.${extension}`;
       await downloadFile(paper.finalUrl, fileName);
     }
   }, [selectedPapers]);
 
+
   const handleApplyFilters = useCallback(
     (
       exams: string[],
@@ -226,7 +234,7 @@ const CatalogueContent = () => {
         const campusCondition = campus.length
           ? campus.includes(paper.campus)
           : true;
-        const answerkeyCondition = anskey ? paper.answerKeyIncluded : true;
+        const answerkeyCondition = anskey ? paper.answerKeyIncluded === true : true;
         return (
           examCondition &&
           slotCondition &&

src/components/PapersCarousel.tsx

@@ -3,7 +3,6 @@
 import { useEffect, useState } from "react";
 import axios from "axios";
 import { type IUpcomingPaper } from "@/interface";
-import Loader from "./ui/loader";
 import UpcomingPaper from "./UpcomingPaper";
 import {
   Carousel,
@@ -14,11 +13,13 @@ import {
 } from "@/components/ui/carousel";
 import Autoplay from "embla-carousel-autoplay";
 import { chunkArray } from "@/util/utils";
+import { Skeleton } from "@/components/ui/skeleton";
 
+function PapersCarousel() {
 function PapersCarousel() {
   const [displayPapers, setDisplayPapers] = useState<IUpcomingPaper[]>([]);
   const [isLoading, setIsLoading] = useState(true);
-  const [chunkSize, setChunkSize] = useState<number>(4);
+  const [chunkSize, setChunkSize] = useState<number>(4); // dynamic chunk size
 
   useEffect(() => {
     const handleResize = () => {
@@ -29,16 +30,11 @@ function PapersCarousel() {
       }
     };
 
-    handleResize();
+    handleResize(); // initialize
     window.addEventListener("resize", handleResize);
-
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
+    return () => window.removeEventListener("resize", handleResize);
   }, []);
 
-  const chunkedPapers = chunkArray(displayPapers, chunkSize);
-
   useEffect(() => {
     async function fetchPapers() {
       try {
@@ -57,10 +53,7 @@ function PapersCarousel() {
     void fetchPapers();
   }, []);
 
-  if (isLoading) {
-    return <Loader prop="m-10" />;
-  }
-
+  const chunkedPapers = chunkArray(displayPapers, chunkSize);
   const plugins = [Autoplay({ delay: 8000, stopOnInteraction: true })];
 
   return (
@@ -69,40 +62,66 @@ function PapersCarousel() {
         Upcoming Exams
       </p>
 
-      <div className="">
-        <Carousel
-          opts={{
-            align: "start",
-            loop: true,
-          }}
-          plugins={plugins}
-          className="w-full"
-        >
-          <div className="relative mt-4 flex justify-end gap-4">
-            <CarouselPrevious className="relative" />
-            <CarouselNext className="relative" />
-          </div>
-          <CarouselContent>
-            {chunkedPapers.map((paperGroup, index) => {
-              return (
-                <CarouselItem
-                  key={`carousel-item-${index}`}
-                  className="grid grid-cols-2 grid-rows-2 gap-4 md:grid-cols-4 lg:auto-rows-fr"
+      <Carousel
+        opts={{ align: "start", loop: true }}
+        plugins={plugins}
+        className="w-full"
+      >
+        <div className="relative mt-4 flex justify-end gap-4">
+          <CarouselPrevious className="relative" />
+          <CarouselNext className="relative" />
+        </div>
+
+        <CarouselContent>
+          {isLoading ? (
+            <CarouselItem
+              className={`grid ${
+                chunkSize === 4
+                  ? "grid-cols-2 grid-rows-2"
+                  : "grid-cols-4"
+              } gap-4 lg:auto-rows-fr`}
+            >
+              {Array.from({ length: chunkSize }).map((_, idx) => (
+                <div
+                  key={idx}
+                  className="cursor-pointer rounded-sm border-2 border-[#734DFF] bg-[#FFFFFF] text-black shadow-lg transition duration-150 ease-in-out hover:bg-[#EFEAFF] dark:border-[#36266D] dark:bg-[#171720] dark:text-white hover:dark:bg-[#262635]"
                 >
-                  {paperGroup.map((paper, subIndex) => (
-                    <div key={subIndex} className="h-full">
-                      <UpcomingPaper
-                        subject={paper.subject}
-                        slots={paper.slots}
-                      />
+                  <div className="border-b-2 border-[#453D60] p-2">
+                    <Skeleton className="h-6 w-24 rounded-md" />
+                  </div>
+                  <div className="flex flex-col justify-between p-4">
+                    <Skeleton className="mb-4 h-6 w-32 rounded-md" />
+                    <div className="flex gap-2">
+                      <Skeleton className="h-7 w-16 rounded-full" />
+                      <Skeleton className="h-7 w-16 rounded-full" />
                     </div>
-                  ))}
-                </CarouselItem>
-              );
-            })}
-          </CarouselContent>
-        </Carousel>
-      </div>
+                  </div>
+                </div>
+              ))}
+            </CarouselItem>
+          ) : (
+            chunkedPapers.map((paperGroup, index) => (
+              <CarouselItem
+                key={`carousel-item-${index}`}
+                className={`grid ${
+                  chunkSize === 4
+                    ? "grid-cols-2 grid-rows-2"
+                    : "grid-cols-4"
+                } gap-4 lg:auto-rows-fr`}
+              >
+                {paperGroup.map((paper, subIndex) => (
+                  <div key={subIndex} className="h-full">
+                    <UpcomingPaper
+                      subject={paper.subject}
+                      slots={paper.slots}
+                    />
+                  </div>
+                ))}
+              </CarouselItem>
+            ))
+          )}
+        </CarouselContent>  
+      </Carousel>
     </div>
   );
 }

src/components/Searchbar/searchbar-child.tsx

@@ -17,9 +17,24 @@ function SearchBarChild({
   const router = useRouter();
   const [searchText, setSearchText] = useState("");
   const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [subjectCounts, setSubjectCounts] = useState<Record<string, number>>({});
   const suggestionsRef = useRef<HTMLUListElement | null>(null);
   const fuzzy = new Fuse(initialSubjects);
 
+const fetchPaperCount = async (subjectName: string) => {
+  try {
+    const cleanSubject = subjectName.replace(/^"|"$/g, "");
+    const encodedSubject = encodeURIComponent(cleanSubject);
+
+    const response = await axios.get(`/api/papers/count?subject=${encodedSubject}`);
+
+    return response.data.count ?? 0;
+  } catch (error) {
+    console.error("Error fetching count for", subjectName, error);
+    return 0;
+  }
+};
+
   const handleSearchChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const text = e.target.value;
     setSearchText(text);
@@ -34,8 +49,24 @@ function SearchBarChild({
         .slice(0, 10);
 
       setSuggestions(filteredSuggestions);
+
+      // Fetch counts in parallel for each suggestion
+      const counts = await Promise.all(
+        filteredSuggestions.map(async (subject) => {
+          const count = await fetchPaperCount(subject);
+          return { subject, count };
+        })
+      );
+
+      const countsMap = counts.reduce((acc, { subject, count }) => {
+        acc[subject] = count;
+        return acc;
+      }, {} as Record<string, number>);
+
+      setSubjectCounts(countsMap);
     } else {
       setSuggestions([]);
+      setSubjectCounts({});
     }
   };
 
@@ -97,9 +128,10 @@ function SearchBarChild({
                 <li
                   key={index}
                   onClick={() => handleSelectSuggestion(suggestion)}
-                  className="cursor-pointer truncate p-2 hover:bg-gray-100 dark:hover:bg-gray-800"
+                  className="flex items-center rounded cursor-pointer truncate p-2 hover:bg-gray-100 dark:hover:bg-gray-800"
                 >
-                  {suggestion}
+                 <div id="paper_count" className="bg-[#171720] w-10 h-10 flex items-center justify-center rounded-md text-white text-sm font-semibold mr-4">{subjectCounts[suggestion] ?? "0"}</div>
+                 <span id="subject" className="text-white items-center text-sm sm:text-base tracking-wide">{suggestion}</span>
                 </li>
               ))}
             </ul>

src/components/Searchbar/searchbar.tsx

@@ -10,6 +10,7 @@ export async function fetchSubjects() {
     const response = await axios.get<ICourses[]>(
       `${process.env.SERVER_URL}/api/course-list`,
     );
+    console.log("Fetched subjects:", response.data);
     return response.data.map((course) => course.name);
   } catch (err) {
     console.error("Error fetching subjects:", err);