patch:added back removed buttons for selecting/deselecting/downloading papers

Author: shikhar-sahay

src/components/PapersCarousel.tsx

@@ -18,7 +18,33 @@ import { Skeleton } from "@/components/ui/skeleton";
 function PapersCarousel() {
   const [displayPapers, setDisplayPapers] = useState<IUpcomingPaper[]>([]);
   const [isLoading, setIsLoading] = useState(true);
-  const chunkSize = 8;
+  const [chunkSize, setChunkSize] = useState<number>(4); // dynamic chunk size
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 640) {
+        setChunkSize(4);
+      } else {
+        setChunkSize(8);
+      }
+    };
+
+    // preload sample subjects
+    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(); // initialize
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
 
   useEffect(() => {
     async function fetchPapers() {
@@ -56,46 +82,53 @@ function PapersCarousel() {
         </div>
 
         <CarouselContent>
-          {isLoading
-            ? Array.from({ length: 1 }).map((_, index) => (
-                <CarouselItem
-                  key={`skeleton-carousel-item-${index}`}
-                  className="grid grid-cols-2 grid-rows-2 gap-4 md:grid-cols-4 lg:auto-rows-fr"
-                >
-                  {Array.from({ length: chunkSize }).map((_, idx) => (
-                    <div
-                      key={idx}
-                      className="h-full rounded-sm border-2 border-[#734DFF] bg-[#FFFFFF] shadow-lg dark:border-[#36266D] dark:bg-[#171720]"
-                    >
-                      <div className="border-b-2 border-[#453D60] p-2">
-                        <Skeleton className="h-8 w-24 rounded-md" />
-                      </div>
-                      <div className="flex flex-col justify-between p-4">
-                        <Skeleton className="mb-4 h-8 w-40 rounded-md" />
-                        <div className="flex gap-2">
-                          <Skeleton className="h-7 w-16 rounded-full" />
-                          <Skeleton className="h-7 w-16 rounded-full" />
-                        </div>
-                      </div>
-                    </div>
-                  ))}
-                </CarouselItem>
-              ))
-            : chunkedPapers.map((paperGroup, index) => (
-                <CarouselItem
-                  key={`carousel-item-${index}`}
-                  className="grid grid-cols-2 grid-rows-2 gap-4 md:grid-cols-4 lg:auto-rows-fr"
+          {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>
+                  </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/SideBar.tsx

@@ -20,6 +20,13 @@ function SideBar({
   selectedAnswerKeyIncluded,
   filterOptions,
   handleApplyFilters,
+  noAppliedFilters,
+  closeFilters,
+  subject,
+  selectedPapers,
+  handleSelectAll,
+  handleDeselectAll,
+  handleDownloadAll,
 }: {
   loading: boolean;
   selectedExams: string[];
@@ -41,6 +48,9 @@ function SideBar({
     semester: string[],
     anskey: boolean
   ) => void;
+  handleSelectAll: () => void;
+  handleDeselectAll: () => void;
+  handleDownloadAll: () => void;
 }) {
   const exams =
     filterOptions?.uniqueExams.map((exam) => ({
@@ -104,6 +114,28 @@ function SideBar({
         </div>
       </div>
 
+      {/* Select/Deselect/Download All Buttons */}
+      <div className="flex w-full flex-wrap justify-between border-b-2 border-[#36266d] px-[10px] py-4 gap-2">
+        <div
+          onClick={handleSelectAll}
+          className="font-play cursor-pointer rounded-full border-2 border-black px-2 py-1 text-xs font-semibold hover:bg-[#B2B8FF] hover:text-black dark:border-white dark:hover:border-[#434dba] dark:hover:bg-[#434dba] dark:hover:text-white"
+        >
+          Select All
+        </div>
+        <div
+          onClick={handleDeselectAll}
+          className="font-play cursor-pointer rounded-full border-2 border-black px-2 py-1 text-xs font-semibold hover:bg-[#B2B8FF] hover:text-black dark:border-white dark:hover:border-[#434dba] dark:hover:bg-[#434dba] dark:hover:text-white"
+        >
+          Deselect All
+        </div>
+        <div
+          onClick={handleDownloadAll}
+          className="font-play cursor-pointer rounded-full border-2 border-black px-2 py-1 text-xs font-semibold hover:bg-[#B2B8FF] hover:text-black dark:border-white dark:hover:border-[#434dba] dark:hover:bg-[#434dba] dark:hover:text-white"
+        >
+          Download All
+        </div>
+      </div>
+
       <div className="flex w-full flex-col items-baseline justify-between border-b-2 border-[#36266d] px-[10px]">
         <Accordion className="w-full" type="single" collapsible defaultValue="item-1">
           <AccordionItem className="border-none no-underline" value="item-1">