eee

package.json

@@ -17,16 +17,20 @@
     "@nextui-org/select": "^2.4.9",
     "@react-pdf/renderer": "^4.2.1",
     "@types/mime-types": "^2.1.4",
+    "@types/pdf-viewer-reactjs": "^2.2.5",
     "@types/react-autocomplete": "^1.8.11",
     "@types/react-autosuggest": "^10.1.11",
     "accessible-autocomplete": "^3.0.1",
     "autoprefixer": "^10.4.20",
     "autosuggest": "^0.0.2",
+    "document-viewer-ts": "^1.0.0-legacy",
     "flowbite": "^2.5.2",
     "flowbite-react": "^0.10.2",
     "gh-pages": "^6.3.0",
     "graphql": "^16.10.0",
+    "is-mobile": "^5.0.0",
     "mime-types": "^2.1.35",
+    "pdf-viewer-reactjs": "^2.2.3",
     "react": "^18.3.1",
     "react-autocomplete": "^1.8.1",
     "react-autosuggest": "^10.1.0",
@@ -38,6 +42,7 @@
     "react-router-dom": "^7.1.3",
     "react-select": "^5.10.0",
     "react-tabs": "^6.1.0",
+    "srpv-js": "^1.0.16",
     "tailwindcss": "^3.4.17"
   },
   "devDependencies": {

src/App.tsx

@@ -8,6 +8,8 @@ import { Accordion, FileInput } from "flowbite-react";
 import { Button, Label, Modal, TextInput } from "flowbite-react";
 import { Tab, TabList, TabPanel, Tabs } from "react-tabs";
 import { useLocation, useNavigate } from 'react-router-dom';
+import { isMobile } from "is-mobile";
+
 
 export const classOptions = [ // TODO REMOVE
   { key: "nofilter", label: "No Class Filter" },
@@ -23,10 +25,6 @@ export const classOptions = [ // TODO REMOVE
 
 var searchQuery = "";
 
-function findIfMobile() {
-  //return true;
-  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-}
 
 function App() {
   const navigate = useNavigate();
@@ -37,7 +35,6 @@ function App() {
   const [tempFileId, setTempFileId] = useState<string>("");
 
   const [file, setFile] = useState<File | null>(null);
-  const [isMobile, setIsMobile] = useState(false);
 
 
   const [syllabi, setSyllabi] = useState<ClassListing[]>([]);
@@ -115,14 +112,7 @@ function App() {
     console.log("use effect ran");
     handleSearch();
 
-    if (findIfMobile()) {
+
-      // Code for mobile devices
-      setIsMobile(true);
-      console.log("mobile")
-    } else {
-      // Code for desktop devices
-      console.log("pc")
-    }
   },
     [location])
 
@@ -145,7 +135,7 @@ function App() {
   return (
     <>
       <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
-      {isMobile === false && <div className=" flex justify-center items-center">
+      {isMobile() === false && <div className=" flex justify-center items-center">
         <Tabs className="w-full bg-zinc-950 p-4">
           <TabList className="flex space-x-2 pb-1">
             <Tab selectedClassName="rounded-lg p-1 underline decoration-wavy" className=" focus:outline-none p-1 cursor-pointer">Syllabuses</Tab>
@@ -190,7 +180,7 @@ function App() {
 
                     <div className="listing">
                       {syllabi.map((syllabus, i) => {
-                        return <SyllabusListing key={i} fileName={syllabus.fileName} className={syllabus.class?.className} description={syllabus.description} fullClassName={syllabus.class?.fullClassName} textbookCost={syllabus.textbookCost} classLength={syllabus.classLength} professor={syllabus.professor} />
+                        return <SyllabusListing key={i} fileName={syllabus.fileName} professorId={syllabus.professorId} className={syllabus.class?.className} description={syllabus.description} fullClassName={syllabus.class?.fullClassName} textbookCost={syllabus.textbookCost} classLength={syllabus.classLength} professor={syllabus.professor} />
                       })}
 
                     </div>
@@ -202,8 +192,7 @@ function App() {
         </Tabs>
 
       </div>}
-      {isMobile === true && <div className="p-1 pt-2">
+      {isMobile() === true && <div className="p-1 pt-2">
-        <h3 className="text-2xl font-bold mb-2">Share Syllabus</h3>
 
         <div className="">
           <div className="flex space-x-1">
@@ -217,10 +206,6 @@ function App() {
                   search
                 </span>
               </button></div>
-            <button onClick={() => setOpenModal(true)} className=" bg-blue-700 p-1 text-yellow-50 rounded-lg flex flex-row">
-              <span className="flex justify-center items-center aspect-square flex-1"><i className="material-symbols-rounded">attach_file</i></span>
-              <span className="text-xs">1 hr</span>
-            </button>
           </div>
 
           <div className="listing">

src/Layout.tsx

@@ -1,23 +1,32 @@
 import Marquee from "react-fast-marquee";
 import { useNavigate } from "react-router-dom";
+import { isMobile } from "is-mobile";
 
 function Layout({ children }: { children: React.ReactNode }) {
-
     const navigate = useNavigate();
 
+    console.log('Layout rendering'); // Add this line
+
+
+    
+
     const uploadSyllabi = () => {
         navigate('/upload')
+
     }
 
     return (
         <>
-            <div className="place-items-center justify-center flex border-b-2 pt-10 border-purple-500">
+            <div className={`place-items-center justify-center flex border-b-2 ${isMobile() ? "pt-0" : "pt-10"} border-purple-500`}>
-                <div className="w-1/2 ">
+                <div className={`${isMobile() ? "w-full" : "w-1/2"} p-4`}>
                     <div className="flex flex-row">
                         <h3 onClick={() => { navigate("/") }} className="text-4xl hover:text-yellow-400 w-min cursor-pointer text-yellow-300 font-extrabold text-left flex-1">📚 Share Syllabus</h3>
                     </div>
+                    {!isMobile() && (
                         <p className="text-left">
-                        A platform for sharing and exploring course syllabi, helping students compare class structures, assignments, and topics while earning community service hours by contributing syllabuses to the knowledge base.</p>
+                            A  for sharing and exploring course syllabi, helping students compare class structures, assignments, and topics while earning community service hours by contributing syllabuses to the knowledge base.
+                        </p>
+                    )}
                     <div className="pt-1 text-left flex flex-row space-x-2">
                         <p className="text-xs font-bold">Contacts:</p>
                         <Marquee className="text-xs flex-1" speed={25}>
@@ -25,12 +34,13 @@ function Layout({children}: {children: React.ReactNode}) {
                         </Marquee>
                     </div>
 
-                    <div className="w-full p-4 flex place-items-center justify-between text-sm">
+                    <div className={`w-full ${isMobile() ? "p-0" : "p-4"} flex place-items-center justify-between text-sm`}>
                         <a href="https://portal.rcc.edu">MyPortal</a>
                         <a href="https://www.norcocollege.edu/articulation/documents/norco-igetc-2024-25.pdf">IGETC</a>
                         <a href="https://www.norcocollege.edu/services/counseling/index.html">Counseling</a>
                         <a href="https://mvc.edu/_resources/files/transfer/rccd-associate-degree-requirements.pdf ">RCCD GE (Graduation Requirements)</a>
-                        <button onClick={uploadSyllabi} className="bg-blue-600 hover:bg-blue-700 border-yellow-300 border-2 flex place-items-center justify-center text-white rounded-lg font-bold p-2"><span className="pr-1 material-symbols-rounded">add_circle</span>Upload a Syllabus</button>
+                        {!isMobile() && <button onClick={uploadSyllabi} className={`bg-blue-600 hover:bg-blue-700 border-yellow-300 border-2 flex place-items-center justify-center text-white rounded-lg font-bold p-2`}><span className="pr-1 material-symbols-rounded">add_circle</span>Upload a Syllabus</button>}
+                                                
                     </div>
                 </div>
             </div>

src/Professor.tsx

@@ -0,0 +1,9 @@
+function Professor () {
+    return (
+        <div>
+            <h1>Professor</h1>
+        </div>
+    )
+}
+
+export default Professor;

src/View.tsx

@@ -1,5 +1,6 @@
 import {  useParams } from "react-router-dom";
 import DocViewer, { DocViewerRenderers } from "react-doc-viewer";
+import {PDFViewer} from 'srpv-js'
 
 
 
@@ -32,6 +33,8 @@ function View({passedFile, className}: ViewParams) {
     ]
 
 
+
+
     console.log(docs[0].uri);
 
     return (
@@ -47,8 +50,9 @@ function View({passedFile, className}: ViewParams) {
                 </div>
 
             </nav>
+            
             {isPDF 
-                ? <iframe src={`https://api.sharesyllabus.me/files/${file}`} className="flex-1 w-full rounded-xl"></iframe>
+                ? <div className="flex-1 w-full rounded-xl"><PDFViewer link={`https://api.sharesyllabus.me/files/${file}`}></PDFViewer></div>
                 : <DocViewer className="flex-1 w-full rounded-xl" pluginRenderers={DocViewerRenderers} documents={docs}></DocViewer>
                 }
 

src/main.tsx

@@ -9,18 +9,25 @@ import Reports from './Reports.tsx';
 import Syllabus from './Syllabus.tsx';
 import Layout from './Layout.tsx';
 import UploadSyllabi from './UploadSyllabi.tsx';
+import Professor from './Professor.tsx';
 
 createRoot(document.getElementById('root')!).render(
   <HashRouter>
     <Routes>
-      <Route path="/" element={<Layout><App/></Layout>} />
       <Route path="/view/:file" element={<View />} />
       <Route path="/admin" element={<Admin />} />
       <Route path="/admin/:highlightedSyllabusId" element={<Admin />} />
-      <Route path="/flag/:id" element={<Layout><Flag /></Layout>} />
       <Route path="/reports" element={<Reports />} />
-      <Route path="/syllabus/:id" element={<Layout><Syllabus/></Layout>} />
+
-      <Route path="/upload" element={<Layout><UploadSyllabi/></Layout>} />
     </Routes>
+    <Layout>
+      <Routes>
+        <Route path="/" element={<App />} />
+        <Route path="/flag/:id" element={<Flag />} />
+        <Route path="/syllabus/:id" element={<Syllabus />} />
+        <Route path="/upload" element={<UploadSyllabi />} />
+        <Route path="/professor/:id" element={<Professor />} />
+      </Routes>
+    </Layout>
   </HashRouter>
 );

src/syllabus_comp.tsx

@@ -3,6 +3,7 @@ import "./App.tsx";
 
 import { useNavigate } from "react-router-dom";
 import { useEffect, useRef, useState } from "react";
+import isMobile from "is-mobile";
 
 export enum TextbookCost {
     free,
@@ -33,11 +34,8 @@ export interface ClassListing {
     professorId?: string;
     id?: string;
 }
-function findIfMobile() {
+
-    //return true;
+function SyllabusListing({ className, professor, professorId, fileName, description, classLength, fullClassName, textbookCost }: ClassListing) {
-    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-}
-function SyllabusListing({ className, professor, fileName, description, classLength, fullClassName, textbookCost }: ClassListing) {
 
     const [hideMore, setHideMore] = useState(true);
 
@@ -61,13 +59,19 @@ function SyllabusListing({ className, professor, fileName, description, classLen
     const navigate = useNavigate();
 
     async function handleView() {
-        if (findIfMobile()) {
+        if (isMobile()) {
             navigate(`/view/${encodeURIComponent(`${fileName}`)}`);
         } else {
             navigate(`/syllabus/${encodeURIComponent(`${id}`)}`);
         }
     }
 
+    /*async function viewProfessor() {
+        navigate(`/professor/${encodeURIComponent
+            (`${professorId}`)}`);
+    }*/
+   console.log(professorId);
+
     async function handleFlag() {
         navigate(`/flag/${encodeURIComponent(`${id}`)}`);
     }
@@ -85,7 +89,7 @@ function SyllabusListing({ className, professor, fileName, description, classLen
     }
 
 
-    if (!findIfMobile()) {
+    if (!isMobile()) {
 
         return (
             <>
@@ -94,7 +98,7 @@ function SyllabusListing({ className, professor, fileName, description, classLen
                         <span className="font-extrabold">{className}</span>
                         <span className="text-xs text-gray-300">{fullClassName}</span>
                         {textbookCostElement()}
-                        <span className="flex-1 italic">{professor}</span>
+                        <span className="flex-1 italic cursor-pointer hover:text-yellow-300 w-min">{professor}</span>
                         {classLength > 7 ? <span className="text-xs font-light text-green-600">{classLength} weeks course</span> : <span className="text-xs font-light text-red-600">{classLength} weeks course</span>}
                     </div>
                     <div className="flex-1 flex flex-col text-center">
@@ -119,16 +123,14 @@ function SyllabusListing({ className, professor, fileName, description, classLen
     } else {
         return (
             <>
-                <div className="w-full flex flex-row text-left bg-white text-black rounded-lg p-3">
+                <div onClick={handleView} className="w-full flex flex-row text-left bg-purple-200 text-black rounded-lg p-3">
                     <div className="flex-1 flex flex-col">
                         <span className=" font-extrabold">{className}</span>
                         <span className="flex-1 italic">{professor}</span>
                         <span className="w-4/5 font-serif">"{description}"</span>
                         {classLength > 7 ? <span className="text-xs font-light text-green-600">{classLength} weeks course</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>
-                    </button>
                 </div>
             </>
         )