completed admin page

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@apollo/client": "^3.12.6",
     "@nextui-org/select": "^2.4.9",
+    "@react-pdf/renderer": "^4.2.1",
     "autoprefixer": "^10.4.20",
     "flowbite": "^2.5.2",
     "flowbite-react": "^0.10.2",

src/Admin.tsx

@@ -2,6 +2,7 @@ import  { useEffect, useState } from "react";
 import { DataSheetGrid, textColumn, checkboxColumn, Column, keyColumn, intColumn } from 'react-datasheet-grid';
 import "react-datasheet-grid/dist/style.css";
 import { ClassListing } from "./syllabus_comp";
+import { Link } from "react-router-dom";
 
 interface PreviewButtonProps {
   fileName: string;
@@ -9,14 +10,10 @@ interface PreviewButtonProps {
 
 const PreviewButton = ({ fileName }: PreviewButtonProps) => {
 
-  const handlePreview = () => {
-    window.open(`/view/${encodeURIComponent(fileName)}`);
-  };
-
   return (
-    <button className="bg-blue-500 text-white px-2 py-1 rounded" onClick={handlePreview}>
-      preview
-    </button>
+    <Link to={`/view/${encodeURIComponent(fileName)}`} target="_blank" className="bg-blue-500 text-white px-2 py-1 rounded">
+      Preview
+    </Link>
   );
 };
 
@@ -57,6 +54,35 @@ function Admin() {
   };
 
   const changeServerDatabase = async () => {
+    try {
+      databaseChanges.forEach(async (change) => {
+
+
+        const {fileName, ...sendableChange} = change;
+
+        var response = await fetch(`https://api.sharesyllabus.me/admin/change/`, {
+          method: "POST",
+            headers: {
+                'Content-Type': 'application/json'
+            },
+          body: JSON.stringify({
+            username,
+            id: sendableChange.id,
+            data: sendableChange,
+          })
+        }).then((res) => {
+            if (res.ok) {
+                console.log("success");
+                fetchWholeDatabase();
+                alert("success!");
+            } else {
+                console.log("error");
+            }
+      })
+      });
+    } catch {
+      console.log("error");
+  }
 }
 
   useEffect(() => {

src/App.tsx

@@ -179,7 +179,7 @@ function App() {
             </div>
             <div className="listing">
               {syllabi.map((syllabus, i) => {
-                return <SyllabusListing key={i} fileName={syllabus.fileName} className={syllabus.className} description={syllabus.description} length={syllabus.length} professor={syllabus.professor} />
+                return <SyllabusListing key={i} fileName={syllabus.fileName} className={syllabus.className} description={syllabus.description} classLength={syllabus.classLength} professor={syllabus.professor} />
               })}
 
             </div>
@@ -209,7 +209,7 @@ function App() {
 
           <div className="listing">
             {syllabi.map((syllabus, i) => {
-              return <SyllabusListing key={i} fileName={syllabus.fileName} className={syllabus.className} description={syllabus.description} length={syllabus.length} professor={syllabus.professor} />
+              return <SyllabusListing key={i} fileName={syllabus.fileName} className={syllabus.className} description={syllabus.description} classLength={syllabus.classLength} professor={syllabus.professor} />
             })}
 
           </div>

src/View.tsx

@@ -10,7 +10,15 @@ function View() {
     
     const isMobile = findIfMobile();
 
+    function checkIfPdf(file: string) {
+        return file.endsWith(".pdf");
+    }
+
     const { file } = useParams();
+
+
+    const isPDF = checkIfPdf(file || "");
+
     const docs = [
         { uri: `https://api.sharesyllabus.me/files/${file}` }
     ]
@@ -44,7 +52,11 @@ function View() {
                     <text className="text-xl text-left font-bold">Preview & Or Download</text>
                 </div>}
             </nav>
-            <DocViewer className="flex-1 w-full rounded-xl" pluginRenderers={DocViewerRenderers} documents={docs}></DocViewer>
+            {isPDF 
+                ? <iframe src={`https://api.sharesyllabus.me/files/${file}`} className="flex-1 w-full rounded-xl"></iframe>
+                : <DocViewer className="flex-1 w-full rounded-xl" pluginRenderers={DocViewerRenderers} documents={docs}></DocViewer>
+                }
+
         </div>
     );
 }

src/syllabus_comp.tsx

@@ -8,13 +8,17 @@ export interface ClassListing {
     professor: string;
     fileName: string;
     description: string;
-    length: number;
+    classLength: number;
+    reviewed?: boolean;
+    createdByName?: string;
+    createdByEmail?: string;
+    id?: string;
 }
 function findIfMobile() {
     //return true;
     return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
 }
-function SyllabusListing({ className, professor, fileName, description, length }: ClassListing) {
+function SyllabusListing({ className, professor, fileName, description, classLength }: ClassListing) {
 
     const navigate = useNavigate();
 
@@ -31,7 +35,7 @@ function SyllabusListing({ className, professor, fileName, description, length }
                     <div className="flex text-left flex-col w-1/4">
                         <span className="font-extrabold">{className}</span>
                         <span className="flex-1 italic">{professor}</span>
-                        {length > 7 ? <span className="text-xs font-light text-green-600">{length} weeks course (normal)</span> : <span className="text-xs font-light text-red-600">{length} weeks course</span>}
+                        {classLength > 7 ? <span className="text-xs font-light text-green-600">{classLength} weeks course (normal)</span> : <span className="text-xs font-light text-red-600">{classLength} weeks course</span>}
                     </div>
                     <div className="flex-1 flex flex-col text-center">
                         <span className="w-3/4 font-serif">"{description}"</span>
@@ -48,7 +52,7 @@ function SyllabusListing({ className, professor, fileName, description, length }
                         <span className=" font-extrabold">{className}</span>
                         <span className="flex-1 italic">{professor}</span>
                         <span className="w-4/5 font-serif">"{description}"</span>
-                        {length > 7 ? <span className="text-xs font-light text-green-600">{length} weeks course (normal)</span> : <span className="text-xs font-light text-red-600">{length} weeks course</span>}
+                        {classLength > 7 ? <span className="text-xs font-light text-green-600">{classLength} weeks course (normal)</span> : <span className="text-xs font-light text-red-600">{classLength} weeks course</span>}
                     </div>
                     <button className="flex items-center h-full p-2 rounded-lg bg-slate-200 text-black" onClick={handleView}>
                         <span className="material-symbols-rounded text-2xl">open_in_new</span>