pdf opens in a dialog

tkhv · Dec 5, 2023 · 3db884b · 3db884b
1 parent 472a57f
commit 3db884b
Show file tree

Hide file tree

Showing 3 changed files with 151 additions and 124 deletions.
diff --git a/components/LessonsDialog.tsx b/components/LessonsDialog.tsx
@@ -0,0 +1,45 @@
+import "react-pdf/dist/esm/Page/AnnotationLayer.css";
+import PdfViewer from "@/components/MyPDFViewer";
+import {
+  DialogContent,
+  DialogFooter,
+  DialogClose,
+} from "@/components/ui/dialog";
+
+export function LessonsDialog({
+  lessonURL,
+  lessonName,
+  goToNextPdf,
+  goToPreviousPdf,
+  firstLesson,
+  lastLesson,
+}: {
+  lessonURL: string;
+  lessonName: string;
+  goToNextPdf: () => void;
+  goToPreviousPdf: () => void;
+  firstLesson: boolean;
+  lastLesson: boolean;
+}) {
+  return (
+    <DialogContent className="max-w-[60%] max-h-[98%]">
+      <div className="flex items-center justify-start w-100">
+        <PdfViewer
+          file={lessonURL}
+          lessonName={lessonName}
+          firstLesson={firstLesson}
+          lastLesson={lastLesson}
+          goToNextPdf={goToNextPdf}
+          goToPreviousPdf={goToPreviousPdf}
+          /*TODO*/
+          /* when lessonList replace with File[] */
+          //   file={${lessonList[currentPdfIndex]}}
+          //   lessonName={lessonList[currentPdfIndex].name}
+        />
+      </div>
+      <DialogClose asChild>
+        <DialogFooter>footer</DialogFooter>
+      </DialogClose>
+    </DialogContent>
+  );
+}
diff --git a/components/MyPDFViewer.tsx b/components/MyPDFViewer.tsx
@@ -15,9 +15,20 @@ and replace lessonName with file.name. that's all
 interface PdfViewerProps {
   file: string;
   lessonName: string;
+  firstLesson: boolean;
+  lastLesson: boolean;
+  goToNextPdf: () => void;
+  goToPreviousPdf: () => void;
 }
 
-const PdfViewer: React.FC<PdfViewerProps> = ({ file, lessonName }) => {
+const PdfViewer: React.FC<PdfViewerProps> = ({
+  file,
+  lessonName,
+  firstLesson,
+  lastLesson,
+  goToNextPdf,
+  goToPreviousPdf,
+}) => {
   const [numPages, setNumPages] = useState<number>(0);
   const [currentPage, setCurrentPage] = useState<number>(1); // Current page
   const [scale, setScale] = useState(1.0); // PDF scale
@@ -51,40 +62,50 @@ const PdfViewer: React.FC<PdfViewerProps> = ({ file, lessonName }) => {
   }, [numPages]);
 
   return (
-    <div className="flex flex-col items-center h-[100vh] w-[50vw]">
+    <div className="flex flex-col items-center h-[100vh] w-[50vw] justify-around">
       {/* Navigation and Zoom Controls */}
-      <div className="flex justify-between items-center space-x-2 mb-4 w-full">
+      <div className="flex justify-between items-center space-x-2">
+        <Button
+          onClick={goToPreviousPdf}
+          disabled={firstLesson}
+          className="max-h-6"
+        >
+          {"<"}
+        </Button>
+        <h2 className="flex-grow text-center">{lessonName}</h2>
+        <Button onClick={goToNextPdf} disabled={lastLesson} className="max-h-6">
+          {">"}
+        </Button>
         <div className="flex gap-2">
           <Button
-            onClick={() => scrollToPage(currentPage - 1)}
-            disabled={currentPage <= 1}
+            onClick={zoomIn}
+            className="bg-blue-300 hover:bg-blue-400 text-blue-800 max-h-5"
           >
-            Prev
+            +
           </Button>
           <Button
-            onClick={() => scrollToPage(currentPage + 1)}
-            disabled={currentPage >= numPages}
+            onClick={zoomOut}
+            className="bg-blue-300 hover:bg-blue-400 text-blue-800 max-h-5"
           >
-            Next
+            -
           </Button>
-        </div>
-        <h2 className="flex-grow text-center">{lessonName}</h2>
-        <div className="flex gap-2">
           <Button
-            onClick={zoomIn}
-            className="bg-blue-300 hover:bg-blue-400 text-blue-800"
+            onClick={() => scrollToPage(currentPage - 1)}
+            disabled={currentPage <= 1}
+            className="max-h-5"
           >
-            Zoom In
+            Prev
           </Button>
+          <span className="text-lg">
+            {currentPage} of {numPages}
+          </span>
           <Button
-            onClick={zoomOut}
-            className="bg-blue-300 hover:bg-blue-400 text-blue-800"
+            onClick={() => scrollToPage(currentPage + 1)}
+            disabled={currentPage >= numPages}
+            className="max-h-5"
           >
-            Zoom Out
+            Next
           </Button>
-          <span className="text-lg">
-            Page {currentPage} of {numPages}
-          </span>
         </div>
       </div>
 

diff --git a/pages/[courseName]/lessons/index.tsx b/pages/[courseName]/lessons/index.tsx
@@ -1,9 +1,7 @@
 import { useState, useEffect } from "react";
 import { useRouter } from "next/router";
 import { useSession } from "next-auth/react";
-import "react-pdf/dist/esm/Page/AnnotationLayer.css";
 import { Button } from "@/components/ui/button";
-import PdfViewer from "@/components/MyPDFViewer";
 import { Input } from "@/components/ui/input";
 import {
   Table,
@@ -13,6 +11,8 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { LessonsDialog } from "@/components/LessonsDialog";
+import { Dialog, DialogTrigger } from "@/components/ui/dialog";
 
 interface myFile {
   url: string;
@@ -55,16 +55,15 @@ async function getSAS(courseName: string, fileName: string) {
 
 export default function Lesson() {
   const [isTA, setIsTA] = useState(false);
-  const [lessonsList, setLessonsList] = useState([]);
-  const [isLoading, setIsLoading] = useState<Boolean>(true);
-  const [showPdfViewer, setShowPdfViewer] = useState(false);
   const [currentPdfIndex, setCurrentPdfIndex] = useState<number>(0);
+  const [currentPdfURL, setCurentPdfURL] = useState<string>("");
   const [selectedFile, setSelectedFile] = useState<File>();
+  const [currentPdfName, setCurrentPdfName] = useState<string>("");
+
   const router = useRouter();
   let { courseName } = router.query;
   const { data: session } = useSession();
-  /*TODO*/
-  //need to be change as File[]
+  // TODO need to be change as File[]
   const [lessonList, setLessonList] = useState<myFile[]>([]);
 
   useEffect(() => {
@@ -84,7 +83,6 @@ export default function Lesson() {
             url: lesson.url,
           }));
           setLessonList(files);
-          setIsLoading(false);
         })
         .catch((err) => console.error(err));
     }
@@ -93,32 +91,23 @@ export default function Lesson() {
   const goToPreviousPdf = () => {
     if (currentPdfIndex > 0) {
       setCurrentPdfIndex(currentPdfIndex - 1);
+      setCurentPdfURL(lessonList[currentPdfIndex - 1].url);
+      setCurrentPdfName(lessonList[currentPdfIndex - 1].name);
     }
   };
 
   const goToNextPdf = () => {
     if (currentPdfIndex < lessonList.length - 1) {
       setCurrentPdfIndex(currentPdfIndex + 1);
+      setCurentPdfURL(lessonList[currentPdfIndex + 1].url);
+      setCurrentPdfName(lessonList[currentPdfIndex + 1].name);
     }
   };
 
   const handleLessonClick = (idx: number) => {
     setCurrentPdfIndex(idx);
-    setShowPdfViewer(true);
-  };
-
-  const handleDelete = (index: number) => {
-    // Update lesson list to remove the selected lesson
-    const updatedLessons = lessonList.filter((_, idx) => idx !== index);
-    setLessonList(updatedLessons);
-
-    // If the current PDF is deleted, hide the viewer or show the previous/next one
-    if (currentPdfIndex === index) {
-      setCurrentPdfIndex((prevIndex) => (prevIndex > 0 ? prevIndex - 1 : 0));
-      setShowPdfViewer(updatedLessons.length > 0);
-    }
-
-    // delete the lesson from the container using api
+    setCurrentPdfName(lessonList[idx].name);
+    setCurentPdfURL(lessonList[idx].url);
   };
 
   const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -131,7 +120,6 @@ export default function Lesson() {
     }
   };
 
-  /*TODO*/
   const handleUpload = async () => {
     if (selectedFile) {
       try {
@@ -168,86 +156,59 @@ export default function Lesson() {
   };
 
   return (
-    <>
-      <div className="hidden h-full flex-1 flex-col space-y-8 pl-8 pt-8 pb-8 md:flex">
-        <div className="flex items-center justify-between space-y-2">
-          <div>
-            <h2 className="text-2xl font-bold tracking-tight">
-              {courseName} Lessons
-            </h2>
-          </div>
+    <div className="hidden h-full flex-1 flex-col space-y-8 pl-8 pt-8 pb-8 md:flex">
+      <div className="flex items-center justify-between space-y-2">
+        <div>
+          <h2 className="text-2xl font-bold tracking-tight">
+            {courseName} Lessons
+          </h2>
         </div>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead className="w-[100px]">Lessons</TableHead>
-              {/* <TableHead className="text-right"></TableHead> */}
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {lessonList
-              ? lessonList.map((lesson, idx) => (
-                  <TableRow key={idx}>
-                    <TableCell
-                      onClick={() => handleLessonClick(idx)}
-                      style={{ cursor: "pointer" }}
-                    >
-                      {lesson.name}
-                    </TableCell>
-                    <Button onClick={() => handleDelete(idx)} className="ml-4">
-                      Delete
-                    </Button>
-                  </TableRow>
-                ))
-              : "No files found"}
-            {/* {isTA && ( */}
-            <div className="flex flex-col w-[30vw]">
-              <Input
-                type="file"
-                accept="application/pdf"
-                onChange={handleFileSelect}
-                id="fileInput"
-              />
-              <Button onClick={handleUpload}>Upload PDF</Button>
-            </div>
-            {/* )} */}
-          </TableBody>
-        </Table>
       </div>
-      <div className="flex flex-row-reverse relative w-1000">
-        <div className=" absolute flex bg-white border-solid border-2 border-blue w-1000">
-          <Button onClick={() => setShowPdfViewer((prev) => !prev)}>
-            {showPdfViewer ? ">>" : "<<"}
-          </Button>
-          {showPdfViewer &&
-            currentPdfIndex >= 0 &&
-            currentPdfIndex < lessonList.length && (
-              <div className="flex items-center justify-start w-100">
-                <Button
-                  onClick={goToPreviousPdf}
-                  disabled={currentPdfIndex <= 0}
-                >
-                  {"<"}
-                </Button>
-
-                <PdfViewer
-                  file={lessonList[currentPdfIndex].url}
-                  lessonName={lessonList[currentPdfIndex].name}
-                  /*TODO*/
-                  /* when lessonList replace with File[] */
-                  //   file={${lessonList[currentPdfIndex]}}
-                  //   lessonName={lessonList[currentPdfIndex].name}
-                />
-                <Button
-                  onClick={goToNextPdf}
-                  disabled={currentPdfIndex >= lessonList.length - 1}
-                >
-                  {">"}
-                </Button>
-              </div>
-            )}
-        </div>
-      </div>
-    </>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-[100px]">Lessons</TableHead>
+            {/* <TableHead className="text-right"></TableHead> */}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {lessonList
+            ? lessonList.map((lesson, idx) => (
+                <TableRow key={idx}>
+                  <Dialog>
+                    <DialogTrigger>
+                      <TableCell
+                        onClick={() => handleLessonClick(idx)}
+                        style={{ cursor: "pointer" }}
+                      >
+                        {lesson.name}
+                      </TableCell>
+                    </DialogTrigger>
+                    <LessonsDialog
+                      lessonURL={currentPdfURL}
+                      lessonName={currentPdfName}
+                      goToNextPdf={goToNextPdf}
+                      goToPreviousPdf={goToPreviousPdf}
+                      firstLesson={currentPdfIndex <= 0}
+                      lastLesson={currentPdfIndex >= lessonList.length - 1}
+                    />
+                  </Dialog>
+                </TableRow>
+              ))
+            : "No files found"}
+          {/* {isTA && ( */}
+          <div className="flex flex-col w-[30vw]">
+            <Input
+              type="file"
+              accept="application/pdf"
+              onChange={handleFileSelect}
+              id="fileInput"
+            />
+            <Button onClick={handleUpload}>Upload PDF</Button>
+          </div>
+          {/* )} */}
+        </TableBody>
+      </Table>
+    </div>
   );
 }