created users paper section

Author: advikgupta

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

@@ -18,8 +18,13 @@ export async function GET() {
         { status: 404 },
       );
     }
-    const nextSlot = String.fromCharCode(slot.charCodeAt(0) + 1)
-    const correspondingSlots = [slot + "1", slot + "2", nextSlot + "1", nextSlot + "2"];
+    const nextSlot = String.fromCharCode(slot.charCodeAt(0) + 1);
+    const correspondingSlots = [
+      slot + "1",
+      slot + "2",
+      nextSlot + "1",
+      nextSlot + "2",
+    ];
     const selectedSubjects = await UpcomingSubject.find({
       slots: { $in: correspondingSlots },
     });

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

@@ -0,0 +1,42 @@
+import { NextResponse } from "next/server";
+import { connectToDatabase } from "@/lib/mongoose";
+import Paper from "@/db/papers";
+
+export const dynamic = "force-dynamic";
+
+export async function POST(req: Request) {
+  try {
+    await connectToDatabase();
+    const body = await req.json();
+
+    const subjects: string[] = body;
+
+    const usersPapers = await Paper.find({
+      subject: { $in: subjects },
+    });
+
+    let transformedPapers = usersPapers.map((paper) => ({
+      subject: paper.subject,
+      slots: [paper.slot],
+    }));
+
+    // check duplicates
+    transformedPapers = Array.from(
+      new Map(transformedPapers.map((item) => [item.subject, item])).values(),
+    );
+
+    console.log("usersPapers", usersPapers);
+
+    return NextResponse.json(transformedPapers, {
+      status: 200,
+    });
+  } catch (error) {
+    console.error("Error fetching papers:", error);
+    return NextResponse.json(
+      {
+        error: "Failed to fetch papers.",
+      },
+      { status: 500 },
+    );
+  }
+}

src/components/UsersPapers.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+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,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import Autoplay from "embla-carousel-autoplay";
+import { chunkArray } from "@/util/utils";
+
+function UsersPapers() {
+  const [displayPapers, setDisplayPapers] = useState<IUpcomingPaper[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [chunkSize, setChunkSize] = useState<number>(4);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 640) {
+        setChunkSize(4);
+      } else {
+        setChunkSize(8);
+      }
+    };
+
+    localStorage.setItem(
+      "userSubjects",
+      JSON.stringify([
+        "Information Security [CBS3002]",
+        "Foundations of Data Analytics [BCSE351E]",
+        "Design and Analysis of Algorithms [MCSE502L]",
+        "Complex Variables and Linear Algebra [BMAT201L]",
+        "Differential Equations and Transforms [BMAT102L]",
+      ]),
+    );
+
+    handleResize();
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  const chunkedPapers = chunkArray(displayPapers, chunkSize);
+
+  useEffect(() => {
+    async function fetchPapers() {
+      try {
+        const storedSubjects = JSON.parse(localStorage.getItem("userSubjects"));
+        setIsLoading(true);
+        const response = await axios.post("/api/user-papers", storedSubjects);
+        setDisplayPapers(response.data);
+      } catch (error) {
+        console.error("Failed to fetch papers:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    void fetchPapers();
+  }, []);
+
+  if (isLoading) {
+    return <Loader prop="m-10" />;
+  }
+
+  const plugins = [Autoplay({ delay: 8000, stopOnInteraction: true })];
+
+  return (
+    <div className="px-4">
+      <p className="my-8 text-center font-play text-lg font-semibold">
+        Users Papers
+      </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"
+                >
+                  {paperGroup.map((paper, subIndex) => (
+                    <div key={subIndex} className="h-full">
+                      <UpcomingPaper
+                        subject={paper.subject}
+                        slots={paper.slots}
+                      />
+                    </div>
+                  ))}
+                </CarouselItem>
+              );
+            })}
+          </CarouselContent>
+        </Carousel>
+      </div>
+    </div>
+  );
+}
+
+export default UsersPapers;

src/components/screens/Hero.tsx

@@ -1,16 +1,18 @@
 import React from "react";
 import SearchBar from "../Searchbar/searchbar";
 import StoredPapers from "../StoredPapers";
+import UsersPapers from "../UsersPapers";
 
 const Hero = () => {
   return (
     <div id="hero" className="flex flex-col justify-between">
-      <h1 className="font-vipnabd mx-auto my-8 text-center text-3xl font-extrabold">
+      <h1 className="mx-auto my-8 text-center font-vipnabd text-3xl font-extrabold">
         Built by Students for Students
       </h1>
       <div className="px-6">
         <SearchBar />
       </div>
+      <UsersPapers />
       <StoredPapers />
       {/* <div className="hidden lg:flex flex-col items-center whitespace-nowrap text-center">
         <h1 className="font-play text-md">Learn More</h1>