Merge pull request #318 from Advik-Gupta/prod

Issue Fix: 295, 312, 313, 303

Author: abhitrueprogrammer

src/components/CatalogueContent.tsx

@@ -53,6 +53,8 @@ const CatalogueContent = () => {
   const [pinned, setPinned] = useState<boolean>(false);
   const [relatedSubjects, setRelatedSubjects] = useState<string[]>([]);
   const { courses } = useCourses();
+  const [currentPage, setCurrentPage] = useState(1);
+  const [papersPerPage, setPapersPerPage] = useState(12); // show 12 per page
 
   // Fetch related subjects when subject changes
   useEffect(() => {
@@ -315,6 +317,15 @@ const CatalogueContent = () => {
     setSelectedPapers([]);
   }, []);
 
+  const paginatedPapers = (appliedFilters ? filteredPapers : papers).slice(
+    (currentPage - 1) * papersPerPage,
+    currentPage * papersPerPage,
+  );
+
+  const totalPages = Math.ceil(
+    (appliedFilters ? filteredPapers.length : papers.length) / papersPerPage,
+  );
+
   // Render loading state until mounted to avoid hydration mismatch
   if (!isMounted) {
     return <Loader />;
@@ -427,34 +438,59 @@ const CatalogueContent = () => {
         {loading ? (
           <Loader />
         ) : papers.length > 0 ? (
-          <div
-            className={`grid h-fit grid-cols-1 gap-8 px-[30px] pb-[40px] md:grid-cols-2 lg:grid-cols-4 ${filtersPulled ? "blur-xl" : ""}`}
-          >
-            {appliedFilters ? (
-              filteredPapers.length > 0 ? (
-                filteredPapers.map((paper: IPaper) => (
+          <div className="flex flex-col items-center">
+            <div
+              className={`grid h-fit grid-cols-1 gap-8 px-[30px] pb-[40px] md:grid-cols-2 lg:grid-cols-4 ${filtersPulled ? "blur-xl" : ""}`}
+            >
+              {appliedFilters ? (
+                paginatedPapers.length > 0 ? (
+                  paginatedPapers.map((paper: IPaper) => (
+                    <Card
+                      key={paper._id}
+                      paper={paper}
+                      onSelect={handleSelectPaper}
+                      isSelected={selectedPapers.some(
+                        (p) => p._id === paper._id,
+                      )}
+                    />
+                  ))
+                ) : (
+                  <div className="col-span-full flex justify-center">
+                    <EmptyState />
+                  </div>
+                )
+              ) : (
+                papers.map((paper: IPaper) => (
                   <Card
                     key={paper._id}
                     paper={paper}
                     onSelect={handleSelectPaper}
                     isSelected={selectedPapers.some((p) => p._id === paper._id)}
                   />
                 ))
-              ) : (
-                <div className="col-span-full flex justify-center">
-                  <EmptyState />
-                </div>
-              )
-            ) : (
-              papers.map((paper: IPaper) => (
-                <Card
-                  key={paper._id}
-                  paper={paper}
-                  onSelect={handleSelectPaper}
-                  isSelected={selectedPapers.some((p) => p._id === paper._id)}
-                />
-              ))
-            )}
+              )}
+            </div>
+            <div className="mt-8 flex items-center justify-center gap-4">
+              <Button
+                variant="outline"
+                disabled={currentPage === 1}
+                onClick={() => setCurrentPage((prev) => prev - 1)}
+              >
+                Previous
+              </Button>
+
+              <span className="text-gray-700 dark:text-gray-300">
+                Page {currentPage} of {totalPages}
+              </span>
+
+              <Button
+                variant="outline"
+                disabled={currentPage === totalPages}
+                onClick={() => setCurrentPage((prev) => prev + 1)}
+              >
+                Next
+              </Button>
+            </div>
           </div>
         ) : (
           <Error

src/components/RelatedPaper.tsx

@@ -66,10 +66,14 @@ const RelatedPapers = () => {
   if (loading) return <Loader />;
   if (!currentPaper) return <div className="font-vipna">Paper not found.</div>;
 
+  if (relatedPapers.length === 0) {
+    return <></>;
+  }
+
   return (
-    <div className="font-vipna space-y-4 p-6">
+    <div className="space-y-4 p-6 font-vipna">
       <div className="flex items-center justify-between">
-        <h2 className="font-play my-6 text-3xl font-semibold">Explore More</h2>
+        <h2 className="my-6 font-play text-3xl font-semibold">Explore More</h2>
 
         <Link
           href={`/catalogue?subject=${encodeURIComponent(currentPaper.subject)}`}

src/components/pdfViewer.tsx

@@ -168,21 +168,23 @@ export default function PdfViewer({ url, name }: PdfViewerProps) {
     return () => window.removeEventListener("resize", calculateScale);
   }, []);
 
-useEffect(() => {
-  const container = containerRef.current;
-  if (!container) return;
-
-  const handleWheel = (e: WheelEvent) => {
-    if (e.ctrlKey) { // ctrl+wheel is pinch zoom gesture
-      e.preventDefault();
-      setScale((prev) => Math.max(0.1, prev + (e.deltaY < 0 ? 0.1 : -0.1)));
-    }
-  };
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
 
-  container.addEventListener("wheel", handleWheel, { passive: false });
-  return () => container.removeEventListener("wheel", handleWheel);
-}, []);
+    const handleWheel = (e: WheelEvent) => {
+      if (e.ctrlKey) {
+        e.preventDefault();
+        const step = 0.02;
+        setScale((prev) =>
+          Math.max(0.25, Math.min(3, prev + (e.deltaY < 0 ? step : -step))),
+        );
+      }
+    };
 
+    container.addEventListener("wheel", handleWheel, { passive: false });
+    return () => container.removeEventListener("wheel", handleWheel);
+  }, []);
 
   return (
     <div className="flex flex-col items-center p-3 md:p-0">
@@ -227,63 +229,128 @@ useEffect(() => {
               </div>
             ))}
         </Document>
+        {isFullscreen && (
+          <div className="fixed bottom-4 left-1/2 z-50 mt-4 flex -translate-x-1/2 flex-col items-center gap-4 rounded-lg bg-[#F3F5FF] p-4 shadow dark:bg-[#262635] sm:flex-row">
+            <div className="flex items-center gap-2">
+              <Button
+                onClick={goToPreviousPage}
+                disabled={pageNumber <= 1}
+                className="h-10 w-10 rounded p-0 text-white transition hover:bg-[#6536c1] disabled:bg-[#706b7a] disabled:opacity-50"
+              >
+                <FaLessThan />
+              </Button>
+              <input
+                type="number"
+                value={pageNumber}
+                onChange={handlePageChange}
+                min={1}
+                max={numPages}
+                className="h-10 w-16 rounded border p-1 text-center [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+              />
+              <span>of {numPages ?? 1}</span>
+              <Button
+                onClick={goToNextPage}
+                disabled={pageNumber >= (numPages ?? 1)}
+                className="h-10 w-10 rounded p-0 text-white transition hover:bg-[#6536c1] disabled:bg-[#706b7a] disabled:opacity-50"
+              >
+                <FaGreaterThan />
+              </Button>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Button
+                onClick={zoomOut}
+                disabled={scale <= 0.25}
+                className="h-10 w-10 rounded p-0 text-white transition hover:bg-[#6536c1] disabled:bg-gray-300"
+              >
+                <ZoomOut />
+              </Button>
+              <span>{(scale * 100).toFixed(0)}%</span>
+              <Button
+                onClick={zoomIn}
+                disabled={scale >= 3}
+                className="h-10 w-10 rounded p-0 text-white transition hover:bg-[#6536c1] disabled:bg-gray-300"
+              >
+                <ZoomIn />
+              </Button>
+              <ShareButton />
+              <Button
+                onClick={downloadPDF}
+                className="aspect-square h-10 w-10 p-0"
+              >
+                <Download />
+              </Button>
+              <Button
+                onClick={toggleFullscreen}
+                className="h-10 w-10 rounded p-0 text-white transition hover:bg-[#6536c1]"
+              >
+                {isFullscreen ? <Minimize2 /> : <Maximize2 />}
+              </Button>
+            </div>
+          </div>
+        )}
       </div>
 
-      <div className="mt-4 flex flex-col items-center gap-4 rounded-lg bg-[#F3F5FF] p-4 shadow dark:bg-[#262635] sm:flex-row">
-        <div className="flex items-center gap-2">
-          <Button
-            onClick={goToPreviousPage}
-            disabled={pageNumber <= 1}
-            className="h-10 w-10 rounded p-0 text-white transition hover:bg-[#6536c1] disabled:bg-[#706b7a] disabled:opacity-50"
-          >
-            <FaLessThan />
-          </Button>
-          <input
-            type="number"
-            value={pageNumber}
-            onChange={handlePageChange}
-            min={1}
-            max={numPages}
-            className="h-10 w-16 rounded border p-1 text-center [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-          />
-          <span>of {numPages ?? 1}</span>
-          <Button
-            onClick={goToNextPage}
-            disabled={pageNumber >= (numPages ?? 1)}
-            className="h-10 w-10 rounded p-0 text-white transition hover:bg-[#6536c1] disabled:bg-[#706b7a] disabled:opacity-50"
-          >
-            <FaGreaterThan />
-          </Button>
-        </div>
+      {!isFullscreen && (
+        <div className="mt-4 flex flex-col items-center gap-4 rounded-lg bg-[#F3F5FF] p-4 shadow dark:bg-[#262635] sm:flex-row">
+          <div className="flex items-center gap-2">
+            <Button
+              onClick={goToPreviousPage}
+              disabled={pageNumber <= 1}
+              className="h-10 w-10 rounded p-0 text-white transition hover:bg-[#6536c1] disabled:bg-[#706b7a] disabled:opacity-50"
+            >
+              <FaLessThan />
+            </Button>
+            <input
+              type="number"
+              value={pageNumber}
+              onChange={handlePageChange}
+              min={1}
+              max={numPages}
+              className="h-10 w-16 rounded border p-1 text-center [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+            />
+            <span>of {numPages ?? 1}</span>
+            <Button
+              onClick={goToNextPage}
+              disabled={pageNumber >= (numPages ?? 1)}
+              className="h-10 w-10 rounded p-0 text-white transition hover:bg-[#6536c1] disabled:bg-[#706b7a] disabled:opacity-50"
+            >
+              <FaGreaterThan />
+            </Button>
+          </div>
 
-        <div className="flex items-center gap-2">
-          <Button
-            onClick={zoomOut}
-            disabled={scale <= 0.25}
-            className="h-10 w-10 rounded p-0 text-white transition hover:bg-[#6536c1] disabled:bg-gray-300"
-          >
-            <ZoomOut />
-          </Button>
-          <span>{(scale * 100).toFixed(0)}%</span>
-          <Button
-            onClick={zoomIn}
-            disabled={scale >= 3}
-            className="h-10 w-10 rounded p-0 text-white transition hover:bg-[#6536c1] disabled:bg-gray-300"
-          >
-            <ZoomIn />
-          </Button>
-          <ShareButton />
-          <Button onClick={downloadPDF} className="aspect-square h-10 w-10 p-0">
-            <Download />
-          </Button>
-          <Button
-            onClick={toggleFullscreen}
-            className="h-10 w-10 rounded p-0 text-white transition hover:bg-[#6536c1]"
-          >
-            {isFullscreen ? <Minimize2 /> : <Maximize2 />}
-          </Button>
+          <div className="flex items-center gap-2">
+            <Button
+              onClick={zoomOut}
+              disabled={scale <= 0.25}
+              className="h-10 w-10 rounded p-0 text-white transition hover:bg-[#6536c1] disabled:bg-gray-300"
+            >
+              <ZoomOut />
+            </Button>
+            <span>{(scale * 100).toFixed(0)}%</span>
+            <Button
+              onClick={zoomIn}
+              disabled={scale >= 3}
+              className="h-10 w-10 rounded p-0 text-white transition hover:bg-[#6536c1] disabled:bg-gray-300"
+            >
+              <ZoomIn />
+            </Button>
+            <ShareButton />
+            <Button
+              onClick={downloadPDF}
+              className="aspect-square h-10 w-10 p-0"
+            >
+              <Download />
+            </Button>
+            <Button
+              onClick={toggleFullscreen}
+              className="h-10 w-10 rounded p-0 text-white transition hover:bg-[#6536c1]"
+            >
+              {isFullscreen ? <Minimize2 /> : <Maximize2 />}
+            </Button>
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 }

src/styles/globals.css

@@ -156,7 +156,6 @@ body {
 }
 
 @layer utilities {
-
   /* Chrome, Safari and Opera */
   .no-scrollbar::-webkit-scrollbar {
     display: none;
@@ -168,4 +167,4 @@ body {
     scrollbar-width: none;
     /* Firefox */
   }
-}
+}