Merge pull request #198 from CodeChefVIT/staging

PDF full screen and filter fix

Author: Abh1noob

src/components/CatalogueContent.tsx

@@ -29,26 +29,17 @@ export async function downloadFile(url: string, filename: string) {
 const CatalogueContent = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
-  const subject = searchParams.get("subject");
-  const exams = searchParams.get("exams")?.split(",");
-  const slots = searchParams.get("slots")?.split(",");
-  const years = searchParams.get("years")?.split(",");
-  const campuses = searchParams.get("campus")?.split(",");
-  const semesters = searchParams.get("semester")?.split(",");
-  const answerKeyIncluded =
-    searchParams.get("answerkey") === "true" ? true : false;
-  // Initialize state with searchParams
-  const [selectedExams, setSelectedExams] = useState<string[]>(exams ?? []);
-  const [selectedSlots, setSelectedSlots] = useState<string[]>(slots ?? []);
-  const [selectedYears, setSelectedYears] = useState<string[]>(years ?? []);
-  const [selectedSemesters, setSelectedSemesters] = useState<string[]>(
-    semesters ?? [],
-  );
-  const [selectedCampuses, setSelectedCampuses] = useState<string[]>(
-    campuses ?? [],
-  );
+  const [isMounted, setIsMounted] = useState(false);
+
+  // Initialize state with defaults, set later in useEffect
+  const [subject, setSubject] = useState<string | null>(null);
+  const [selectedExams, setSelectedExams] = useState<string[]>([]);
+  const [selectedSlots, setSelectedSlots] = useState<string[]>([]);
+  const [selectedYears, setSelectedYears] = useState<string[]>([]);
+  const [selectedSemesters, setSelectedSemesters] = useState<string[]>([]);
+  const [selectedCampuses, setSelectedCampuses] = useState<string[]>([]);
   const [selectedAnswerKeyIncluded, setSelectedAnswerKeyIncluded] =
-    useState<boolean>(answerKeyIncluded);
+    useState<boolean>(false);
   const [papers, setPapers] = useState<IPaper[]>([]);
   const [filteredPapers, setFilteredPapers] = useState<IPaper[]>([]);
   const [selectedPapers, setSelectedPapers] = useState<IPaper[]>([]);
@@ -58,12 +49,27 @@ const CatalogueContent = () => {
   const [filtersPulled, setFiltersPulled] = useState<boolean>(false);
   const [appliedFilters, setAppliedFilters] = useState<boolean>(false);
 
+  // Set initial state from searchParams on client-side mount
+  useEffect(() => {
+    setIsMounted(true);
+    if (searchParams) {
+      setSubject(searchParams.get("subject"));
+      setSelectedExams(searchParams.get("exams")?.split(",") ?? []);
+      setSelectedSlots(searchParams.get("slots")?.split(",") ?? []);
+      setSelectedYears(searchParams.get("years")?.split(",") ?? []);
+      setSelectedCampuses(searchParams.get("campus")?.split(",") ?? []);
+      setSelectedSemesters(searchParams.get("semester")?.split(",") ?? []);
+      setSelectedAnswerKeyIncluded(searchParams.get("answerkey") === "true");
+    }
+  }, [searchParams]);
+
   const filtersNotPulled = () => {
     setFiltersPulled(false);
   };
-  // Memoized effect to fetch papers
+
+  // Fetch papers and apply filters
   useEffect(() => {
-    if (!subject) return;
+    if (!subject || !isMounted) return;
 
     const fetchPapers = async () => {
       setLoading(true);
@@ -75,6 +81,7 @@ const CatalogueContent = () => {
         const papersData = data.papers;
         setFilterOptions(data);
         setPapers(papersData);
+        // Apply filters from URL params
         const filtered = papersData.filter((paper) => {
           const examCondition = selectedExams.length
             ? selectedExams.includes(paper.exam)
@@ -104,23 +111,32 @@ const CatalogueContent = () => {
           );
         });
         setFilteredPapers(filtered.length > 0 ? filtered : papersData);
+        setAppliedFilters(true);
       } catch (error) {
         setPapers([]);
-        if (axios.isAxiosError(error)) {
-          const axiosError = error as AxiosError<{ message?: string }>;
-          setError(
-            axiosError.response?.data?.message ?? "Error fetching papers",
-          );
-        } else {
-          setError("Error fetching papers");
-        }
+        const axiosError = error as AxiosError;
+        setError(
+          axios.isAxiosError(axiosError)
+            ? ((axiosError.response?.data as { message?: string })?.message ??
+                "Error fetching papers")
+            : "Error fetching papers",
+        );
       } finally {
         setLoading(false);
       }
     };
 
     void fetchPapers();
-  }, [subject]); // Just run on initial page render
+  }, [
+    subject,
+    isMounted,
+    selectedExams,
+    selectedSlots,
+    selectedYears,
+    selectedSemesters,
+    selectedCampuses,
+    selectedAnswerKeyIncluded,
+  ]);
 
   // Memoized handlers
   const handleSelectPaper = useCallback(
@@ -213,6 +229,11 @@ const CatalogueContent = () => {
     setSelectedPapers([]);
   }, []);
 
+  // Render loading state until mounted to avoid hydration mismatch
+  if (!isMounted) {
+    return <Loader />;
+  }
+
   return (
     <div className="relative flex min-h-screen justify-center p-0 md:justify-normal">
       <div className="hidden w-[30%] min-w-fit md:block">
@@ -237,7 +258,6 @@ const CatalogueContent = () => {
         />
       </div>
 
-      {/* {error && <p className="text-red-500">{error}</p>} */}
       <div className="w-full">
         <Sheet>
           <SheetTrigger className="mx-8 mt-8 block md:hidden">

src/components/pdfViewer.tsx

@@ -4,7 +4,7 @@ import "react-pdf/dist/Page/AnnotationLayer.css";
 import "react-pdf/dist/Page/TextLayer.css";
 import { useState, useRef, useCallback, useEffect } from "react";
 import { Document, Page, pdfjs } from "react-pdf";
-import { Download, ZoomIn, ZoomOut } from "lucide-react";
+import { Download, ZoomIn, ZoomOut, Maximize2, Minimize2 } from "lucide-react";
 import { Button } from "./ui/button";
 import { downloadFile } from "./CatalogueContent";
 import ShareButton from "./ShareButton";
@@ -25,6 +25,7 @@ export default function PdfViewer({ url, name }: PdfViewerProps) {
   const [numPages, setNumPages] = useState<number>();
   const [pageNumber, setPageNumber] = useState<number>(1);
   const [scale, setScale] = useState<number>(1);
+  const [isFullscreen, setIsFullscreen] = useState<boolean>(false);
   const pageRefs = useRef<(HTMLDivElement | null)[]>([]);
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -109,14 +110,50 @@ export default function PdfViewer({ url, name }: PdfViewerProps) {
     await downloadFile(url, fileName);
   };
 
+  const toggleFullscreen = () => {
+    if (!containerRef.current) return;
+
+    if (!document.fullscreenElement) {
+      containerRef.current
+        .requestFullscreen()
+        .then(() => {
+          setIsFullscreen(true);
+        })
+        .catch((err) => {
+          console.error("Error entering fullscreen:", err);
+        });
+    } else {
+      document
+        .exitFullscreen()
+        .then(() => {
+          setIsFullscreen(false);
+        })
+        .catch((err) => {
+          console.error("Error exiting fullscreen:", err);
+        });
+    }
+  };
+
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+    };
+
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    return () => {
+      document.removeEventListener("fullscreenchange", handleFullscreenChange);
+    };
+  }, []);
+
   return (
     <div className="flex flex-col items-center">
       <div
         ref={containerRef}
-        className="max-h-[70vh] overflow-auto border border-gray-300 shadow-lg"
+        className="max-h-[70vh] w-fit overflow-auto bg-[#F3F5FF] shadow-lg dark:bg-[#070114]"
       >
         <Document
           file={url}
+          className={"w-fit"}
           onLoadSuccess={onDocumentLoadSuccess}
           error={
             <div className="p-4 text-red-500">Failed to load PDF file.</div>
@@ -150,7 +187,7 @@ export default function PdfViewer({ url, name }: PdfViewerProps) {
         </Document>
       </div>
 
-      <div className="mt-4 flex flex-col items-center gap-4 rounded-lg bg-[#262635] p-4 shadow sm:flex-row">
+      <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}
@@ -197,6 +234,12 @@ export default function PdfViewer({ url, name }: PdfViewerProps) {
           <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>