liyaowhen/Leado123.github.io
1
0
Fork 0
mirror of https://github.com/Leado123/Leado123.github.io.git synced 2026-10-01 00:32:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui is nicer now, added new elemtns

Browse Source
This commit is contained in:
Leo Wen
2025-01-28 20:20:13 -08:00
parent 54757881d3
commit 061d2e5129
9 changed files with 128 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+17 -7
View File
@@ -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
+52
View File
@@ -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
+4
View File
@@ -19,6 +19,10 @@
-moz-osx-font-smoothing: grayscale;
}
#root {
width: 100%;
}
a {
font-weight: 500;
color: #646cff;
src/main.tsx
+11 -5
View File
@@ -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 />
</StrictMode>
<Router>
<Routes>
<Route path="/" element={<App />} />
<Route path="/view/:file" element={<View />} />
</Routes>
</Router>
)
src/syllabus_comp.tsx
+33 -19
View File
@@ -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 a = document.createElement('a');
a.href= `https://api.sharesyllabus.me/files/${fileName}`;
a.download = fileName || 'syllabus.pdf';
a.click();
a.remove();
window.URL.revokeObjectURL(`https://api.sharesyllabus.me/files/${fileName}`);
const navigate = useNavigate();
async function handleView() {
navigate(`/view/${encodeURIComponent(`${fileName}`)}`);
}
if (!findIfMobile()) {
return(
return (
<>
<div className="w-full flex bg-white text-black rounded-lg p-3">
<span className=" font-extrabold">{className}</span>
<span className="flex-1">{professor}</span>
<button className="border-2 border-blue-600 p-1 rounded-lg" onClick={handleDownload}>download <br></br>pdf 📄</button>
<div className="w-full flex space-x-4 bg-white text-black rounded-lg p-3">
<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>}
</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">
<span className=" font-extrabold">{className}</span>
<span className="flex-1">{professor}</span>
<button className="border-2 h-20 border-blue-600 p-1 rounded-lg" onClick={handleDownload}>view pdf 📄</button>
<div className="w-full flex flex-row text-left bg-white 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>
{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>
</>
)