Merge branch 'prod' into staging

Author: abhitrueprogrammer

README.md

@@ -4,6 +4,7 @@
 <h2 align="center"> Papers </h2>
 <br/>
 
+
 > <p>Prepare to excel in your CATs and FATs with CodeChef-VIT's dedicated repository of past exam papers. Access key resources to review concepts, tackle challenging questions, and familiarize yourself with exam patterns. Boost your confidence, sharpen your strategy, and get ready to ace your exams!</p>
 
 ## 🌐 Deploy

ongoing-papers.ts

@@ -181,5 +181,7 @@ async function CreatePDF(orderedFiles: File[]) {
   }
 
   const mergedPdfBytes = await pdfDoc.save();
-  return mergedPdfBytes;
+  const ab = new ArrayBuffer(mergedPdfBytes.byteLength);
+  new Uint8Array(ab).set(mergedPdfBytes);
+  return ab;
 }

src/app/api/upload/route.ts

@@ -1,14 +1,10 @@
 import { NextResponse } from "next/server";
 import { connectToDatabase } from "@/lib/mongoose";
 import Paper from "@/db/papers";
-import { StoredSubjects } from "@/interface";
+import { StoredSubjects, TransformedPaper } from "@/interface";
 
 export const dynamic = "force-dynamic";
 
-interface TransformedPaper {
-  subject: string;
-  slots: string[];
-}
 
 export async function POST(req: Request) {
   try {

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

@@ -1,5 +1,269 @@
-import PapersPage from "@/components/screens/PapersPage";
+"use client";
 
-export default function RequestPage() {
-  return <PapersPage />;
+import { useEffect, useState, useRef, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { exams, slots, years } from "@/components/select_options";
+import { Input } from "@/components/ui/input";
+import axios from "axios";
+import Fuse from "fuse.js";
+import { type IUpcomingPaper } from "@/interface";
+import { Skeleton } from "../../components/ui/skeleton";
+import UpcomingPaper from "../../components/UpcomingPaper";
+import toast from "react-hot-toast";
+import { Search } from "lucide-react";
+import SkeletonPaperCard from "@/components/SkeletonPaperCard";
+
+type Course = {
+  name?: string | null;
+  courseName?: string | null;
+  title?: string | null;
+};
+
+export default function PaperRequest() {
+  const [subjects, setSubjects] = useState<string[]>([]);
+  const [searchText, setSearchText] = useState("");
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [selectedSubject, setSelectedSubject] = useState<string | null>(null);
+  const [selectedExam, setSelectedExam] = useState<string | null>(null);
+  const [selectedSlot, setSelectedSlot] = useState<string | null>(null);
+  const [selectedYear, setSelectedYear] = useState<string | null>(null);
+  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();
+  }, []);
+
+  useEffect(() => {
+    async function fetchPapers() {
+      try {
+        setIsLoading(true);
+        const response = await axios.get<IUpcomingPaper[]>(
+          "/api/upcoming-papers",
+        );
+
+        const randomPapers = [...response.data]
+          .sort(() => Math.random() - 0.5)
+          .slice(0, 4);
+
+        setDisplayPapers(randomPapers);
+      } catch (error) {
+        console.error("Failed to fetch papers:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    void fetchPapers();
+  }, []);
+
+  const fuse = useMemo(
+    () => new Fuse(subjects, { includeScore: true, threshold: 0.3 }),
+    [subjects],
+  );
+
+  useEffect(() => {
+    if (!searchText.trim()) {
+      setSuggestions([]);
+      return;
+    }
+
+    if (selectedSubject && searchText === selectedSubject) {
+      setSuggestions([]);
+      return;
+    }
+
+    const results = fuse.search(searchText);
+    setSuggestions(results.map((r) => r.item).slice(0, 10));
+  }, [searchText, fuse, selectedSubject]);
+
+  const handleSelectSubject = (subject: string) => {
+    setSelectedSubject(subject);
+    setSearchText(subject);
+    setSuggestions([]);
+    setSelectedExam(null);
+    setSelectedSlot(null);
+    setSelectedYear(null);
+  };
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        suggestionsRef.current &&
+        !suggestionsRef.current.contains(event.target as Node)
+      ) {
+        setSuggestions([]);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const handleSubmit = async () => {
+    if (!selectedSubject || !selectedExam || !selectedSlot || !selectedYear) {
+      toast.error("Please fill all fields before submitting.");
+      return;
+    }
+
+    try {
+      await toast.promise(
+        axios.post("/api/request", {
+          subject: selectedSubject,
+          exam: selectedExam,
+          slot: selectedSlot,
+          year: selectedYear,
+        }),
+        {
+          loading: "Submitting your request...",
+          success: "Your paper request was submitted successfully",
+          error: "Failed to submit your request. Please try again later.",
+        }
+      );
+
+      setSearchText("");
+      setSelectedSubject(null);
+      setSelectedExam(null);
+      setSelectedSlot(null);
+      setSelectedYear(null);
+    } catch (error) {
+      console.error("Error submitting request:", error);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-[#F3F5FF] px-6 py-12 text-black dark:bg-[#070114] dark:text-white">
+      <main>
+        <div className="mx-auto mb-16 max-w-4xl text-center">
+          <h2 className="mb-12 font-vipnabd text-3xl font-extrabold md:text-4xl">
+            Specific Paper Request
+          </h2>
+
+          <div className="relative mx-auto mb-8 max-w-xl font-play">
+            <Input
+              type="text"
+              value={searchText}
+              onChange={(e) => setSearchText(e.target.value)}
+              placeholder="Search by subject..."
+              className={`text-md rounded-lg bg-[#B2B8FF] px-4 py-6 pr-10 font-play tracking-wider text-black shadow-sm ring-0 placeholder:text-black focus:outline-none focus:ring-0 dark:bg-[#7480FF66] dark:text-white placeholder:dark:text-white ${suggestions.length > 0 ? "rounded-b-none" : ""}`}
+            />
+            <button
+              type="button"
+              className="absolute inset-y-0 right-0 flex items-center pr-3"
+            >
+              <Search className="h-5 w-5 text-black dark:text-white" />{" "}
+            </button>
+            {suggestions.length > 0 && (
+              <ul
+                ref={suggestionsRef}
+                className="absolute z-20 max-h-[250px] w-full max-w-xl overflow-y-auto rounded-md rounded-t-none border border-t-0 bg-white text-center shadow-lg dark:bg-[#303771]"
+              >
+                {suggestions.map((s, idx) => (
+                  <li
+                    key={idx}
+                    onClick={() => handleSelectSubject(s)}
+                    className="cursor-pointer truncate p-2 hover:bg-gray-100 dark:hover:bg-gray-800"
+                  >
+                    {s}
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+
+          <div className="mb-8 flex justify-center gap-4">
+            <Select
+              onValueChange={setSelectedExam}
+              disabled={!selectedSubject}
+              value={selectedExam ?? undefined}
+            >
+              <SelectTrigger className="w-32">
+                <SelectValue placeholder="Exam" />
+              </SelectTrigger>
+              <SelectContent>
+                {exams.map((exam) => (
+                  <SelectItem key={exam} value={exam}>
+                    {exam}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Select
+              onValueChange={setSelectedSlot}
+              disabled={!selectedSubject}
+              value={selectedSlot ?? undefined}
+            >
+              <SelectTrigger className="w-32">
+                <SelectValue placeholder="Slot" />
+              </SelectTrigger>
+              <SelectContent>
+                {slots.map((slot) => (
+                  <SelectItem key={slot} value={slot}>
+                    {slot}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Select
+              onValueChange={setSelectedYear}
+              disabled={!selectedSubject}
+              value={selectedYear ?? undefined}
+            >
+              <SelectTrigger className="w-32">
+                <SelectValue placeholder="Year" />
+              </SelectTrigger>
+              <SelectContent>
+                {[...years]
+                  .sort((a, b) => Number(b) - Number(a))
+                  .map((year) => (
+                    <SelectItem key={year} value={year}>
+                      {year}
+                    </SelectItem>
+                  ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <Button
+            className="rounded-lg bg-[#4A55FF] px-8 py-3 text-base text-white hover:bg-[#3A44CC] dark:bg-[#9EA8FF] dark:text-black dark:hover:bg-[#7D86E5]"
+            onClick={handleSubmit}
+          >
+            Submit
+          </Button>
+        </div>
+
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
+          {isLoading ? (
+            <SkeletonPaperCard length={4} />
+          ) : (
+            displayPapers.map((paper, subIndex) => (
+              <div key={subIndex} className="h-full">
+                <UpcomingPaper subject={paper.subject} slots={paper.slots} />
+              </div>
+            ))
+          )}
+        </div>
+      </main>
+    </div>
+  );
 }

src/app/request/page.tsx

@@ -140,9 +140,7 @@ const Page = () => {
       await toast.promise(
         async () => {
           try {
-            console.log("this is happening now");
             await axios.post<APIResponse>("/api/upload", formData);
-            console.log("this is happening after now");
             return { message: "Papers uploaded successfully!" };
           } catch (error) {
             if (error instanceof AxiosError && error.response?.data) {

src/app/upload/page.tsx

@@ -323,17 +323,17 @@ const CatalogueContent = () => {
 
         <div className="flex items-center gap-2 p-7">
           <div>
-            <p className="text-s font-semibold text-white/80">
+            <p className="text-s font-semibold text-gray-700 dark:text-white/80">
               {subject?.split("[")[1]?.replace("]", "")}
             </p>
-            <h2 className="text-2xl font-extrabold text-white md:text-3xl">
+            <h2 className="text-2xl font-extrabold text-gray-700 dark:text-white md:text-3xl">
               {subject?.split(" [")[0]}
             </h2>
           </div>
           <div className="mt-7">
             <button onClick={handlePinToggle}>
               <Pin
-                className={`h-7 w-7 ${pinned ? "fill-[#A78BFA]" : ""} stroke-white`}
+                className={`h-7 w-7 ${pinned ? "fill-[#A78BFA]" : ""} stroke-gray-700 dark:stroke-white`}
               />
             </button>
           </div>