ui is nicer now, added new elemtns

index.html

@@ -2,6 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap" rel="stylesheet">
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Share My Syllabus</title>

package.json

@@ -21,8 +21,10 @@
     "gh-pages": "^6.3.0",
     "graphql": "^16.10.0",
     "react": "^18.3.1",
+    "react-doc-viewer": "^0.1.14",
     "react-dom": "^18.3.1",
     "react-fast-marquee": "^1.6.5",
+    "react-router-dom": "^7.1.3",
     "tailwindcss": "^3.4.17"
   },
   "devDependencies": {

src/App.tsx

@@ -7,6 +7,7 @@ import { Accordion, FileInput } from "flowbite-react";
 
 import { Button, Label, Modal, TextInput } from "flowbite-react";
 import Marquee from 'react-fast-marquee';
+import { useLocation } from 'react-router-dom';
 
 export const classOptions = [ // TODO REMOVE
   { key: "nofilter", label: "No Class Filter" },
@@ -15,6 +16,7 @@ export const classOptions = [ // TODO REMOVE
   { key: "physics", label: "Physics" },
 ];
 
+var searchQuery = "";
 
 function findIfMobile() {
   //return true;
@@ -37,8 +39,14 @@ function App() {
 
 
   async function handleSearch() {
+    if (query != "") searchQuery = query;
+    console.log(`searching for ${query}`);
     try {
-      var response = await fetch(`https://api.sharesyllabus.me/search/?q=${query}`);
+      if (searchQuery === "") {
+        var response = await fetch(`https://api.sharesyllabus.me/search/?q=${query}`);
+      } else {
+        var response = await fetch(`https://api.sharesyllabus.me/search/?q=${searchQuery}`);
+      }
       var data = await response.json();
       console.log(data);
       setSyllabi(data);
@@ -91,9 +99,11 @@ function App() {
     console.log("temp file is", tempFileId)
   }, [tempFileId])
 
-
+  const location = useLocation();
 
   useEffect(() => {
+    setQuery(searchQuery);
+    console.log("use effect ran");
     handleSearch();
 
     if (findIfMobile()) {
@@ -105,7 +115,7 @@ function App() {
       console.log("pc")
     }
   },
-    [])
+    [location])
 
 
 
@@ -143,7 +153,7 @@ function App() {
             <a href="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>
+            <a href="https://mvc.edu/_resources/files/transfer/rccd-associate-degree-requirements.pdf ">RCCD GE (Graduation Requirements)</a>
           </div>
           <div className="">
             <div className="flex space-x-1">
@@ -165,7 +175,7 @@ function App() {
             </div>
             <div className="listing">
               {syllabi.map((syllabus, i) => {
-                return <SyllabusListing key={i} fileName={syllabus.fileName} className={syllabus.className} professor={syllabus.professor} />
+                return <SyllabusListing key={i} fileName={syllabus.fileName} className={syllabus.className} description={syllabus.description} length={syllabus.length} professor={syllabus.professor} />
               })}
 
             </div>
@@ -189,13 +199,13 @@ function App() {
               </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>
+              <span className="text-xs">1 hr</span>
             </button>
           </div>
 
           <div className="listing">
             {syllabi.map((syllabus, i) => {
-              return <SyllabusListing key={i} fileName={syllabus.fileName} className={syllabus.className} professor={syllabus.professor} />
+              return <SyllabusListing key={i} fileName={syllabus.fileName} className={syllabus.className} description={syllabus.description} length={syllabus.length} professor={syllabus.professor} />
             })}
 
           </div>

src/View.tsx

@@ -0,0 +1,52 @@
+import { useNavigate, useParams } from "react-router-dom";
+import DocViewer, { DocViewerRenderers } from "react-doc-viewer";
+
+function findIfMobile() {
+    //return true;
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+}
+
+function View() {
+
+    const isMobile = findIfMobile();
+
+    const { file } = useParams();
+    const docs = [
+        { uri: `https://api.sharesyllabus.me/files/${file}` }
+    ]
+
+    const navigate = useNavigate();
+
+    console.log(docs[0].uri);
+
+    return (
+        <div className="flex flex-col space-y-2 justify-center align-middle w-full h-full m-0 p-4">
+            <nav className="w-full flex text-left pb-1 space-x-4">
+                <button onClick={() => navigate("/")} className="p-2 bg-white rounded-xl text-black aspect-square">
+                    <i className="material-symbols-rounded">arrow_back</i>
+                </button>
+
+                <div className="flex  space-x-1 h-full items-center p-2 bg-blue-700 text-white rounded-xl">
+                    <button onClick={() => window.location.replace(docs[0].uri)} className=" aspect-square">
+                        <i className="material-symbols-rounded">download</i>
+                    </button>
+                    <text className=" font-medium pr-1">download</text>
+                </div>
+
+                <button onClick={() => {
+                    navigator.clipboard.writeText(docs[0].uri);
+                    alert("Link Copied to Clipboard!");
+                }} className="p-2 bg-white rounded-xl text-black aspect-square">
+                    <i className="material-symbols-rounded">share</i>
+                </button>
+
+                {isMobile ? <></> : <div className="h-full flex items-center justify-start align-middle">
+                    <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>
+        </div>
+    );
+}
+
+export default View;

src/index.css

@@ -19,6 +19,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+#root {
+  width: 100%;
+}
+
 a {
   font-weight: 500;
   color: #646cff;

src/main.tsx

@@ -1,14 +1,20 @@
-import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import './index.css'
 import App from './App.tsx'
+import View from './View.tsx'
 
 
 
 
 createRoot(document.getElementById('root')!).render(
 
-  <StrictMode>
+
-    <App />
+    <Router>
-  </StrictMode>
+      <Routes>
+        <Route path="/" element={<App />} />
+        <Route path="/view/:file" element={<View />} />
+      </Routes>
+    </Router>
+
 )

src/syllabus_comp.tsx

@@ -1,44 +1,58 @@
 import "./syllabuslisting.css";
 import "./App.tsx";
 
+import { useNavigate } from "react-router-dom";
+
 export interface ClassListing {
     className: string;
     professor: string;
     fileName: string;
+    description: string;
+    length: number;
 }
 function findIfMobile() {
     //return true;
     return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-  }
+}
-function SyllabusListing({className, professor, fileName}: ClassListing) {
+function SyllabusListing({ className, professor, fileName, description, length }: ClassListing) {
 
-    async function handleDownload() {
+    const navigate = useNavigate();
-        const a = document.createElement('a');
+
-        a.href= `https://api.sharesyllabus.me/files/${fileName}`;
+    async function handleView() {
-        a.download = fileName || 'syllabus.pdf';
+        navigate(`/view/${encodeURIComponent(`${fileName}`)}`);
-        a.click();
-        a.remove();
-        window.URL.revokeObjectURL(`https://api.sharesyllabus.me/files/${fileName}`);
     }
 
+
     if (!findIfMobile()) {
 
-        return(
+        return (
             <>
-                <div className="w-full flex bg-white text-black rounded-lg p-3">
+                <div className="w-full flex space-x-4 bg-white text-black rounded-lg p-3">
-                    <span className=" font-extrabold">{className}</span>
+                    <div className="flex text-left flex-col w-1/4">
-                    <span className="flex-1">{professor}</span>
+                        <span className="font-extrabold">{className}</span>
-                    <button className="border-2 border-blue-600 p-1 rounded-lg" onClick={handleDownload}>download <br></br>pdf 📄</button>
+                        <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>}
+                    </div>
+                    <div className="flex-1 flex flex-col text-center">
+                        <span className="w-3/4 font-serif">"{description}"</span>
+                    </div>
+                    <button className="aspect-square flex items-center align-middle justify-center rounded-lg hover:bg-slate-200 text-black" onClick={handleView}><span className="material-symbols-rounded text-2xl">open_in_new</span></button>
                 </div>
             </>
         )
     } else {
-        return(
+        return (
             <>
-                <div className="w-full flex flex-col text-left bg-white space-y-2 text-black rounded-lg p-3">
+                <div className="w-full flex flex-row text-left bg-white text-black rounded-lg p-3">
-                    <span className=" font-extrabold">{className}</span>
+                    <div className="flex-1 flex flex-col">
-                    <span className="flex-1">{professor}</span>
+                        <span className=" font-extrabold">{className}</span>
-                    <button className="border-2 h-20 border-blue-600 p-1 rounded-lg" onClick={handleDownload}>view pdf 📄</button>
+                        <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>}
+                    </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>
             </>
         )

tailwind.config.js

@@ -4,7 +4,11 @@ const flowbite = require("flowbite-react/tailwind");
 export default {
   content: ["./src/**/*.{html,js,tsx}", flowbite.content()],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        sserif: ["Source Serif 4", "serif"],
+      }
+    },
   },
   plugins: [flowbite.plugin()],
 }