final edit to curent version

This commit is contained in:
Leo Wen
2025-03-01 10:23:31 -08:00
parent f0439f2ee1
commit 8b2c5a6d2d
5 changed files with 62 additions and 39 deletions
+2 -8
View File
@@ -11,12 +11,6 @@ import { useLocation, useNavigate } from 'react-router-dom';
import { isMobile } from "is-mobile";
export const classOptions = [ // TODO REMOVE
{ key: "nofilter", label: "No Class Filter" },
{ key: "psychology", label: "Psych" },
{ key: "anthropology", label: "Anthropology" },
{ key: "physics", label: "Physics" },
];
//TODO: MAKE when you scroll to bottom of page, adds more results
//TODO: make it so that when you type in stuff, it automatically searches on the server, but there is a tick rate for responses
@@ -168,7 +162,7 @@ function App() {
</select>
<span>
<select className="w-full bg-black p-1 rounded-lg" >
<option>all results (unverified too)</option>
<option>all results (include unverified) </option>
<option>verified results only</option>
</select>
</span>
@@ -180,7 +174,7 @@ function App() {
<div className="listing">
{syllabi.map((syllabus, i) => {
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} />
return <SyllabusListing key={i} school={syllabus.school} 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>
+23 -10
View File
@@ -2,13 +2,23 @@ import Marquee from "react-fast-marquee";
import { useNavigate } from "react-router-dom";
import { isMobile } from "is-mobile";
import React, { useState } from "react";
interface BlogPosts {
title: string;
icon: string;
link: string;
}
export const blogPosts: BlogPosts[] = [{ title: "What is 𝐒𝐡𝐚𝐫𝐞 𝐌𝐲 𝐒𝐲𝐥𝐥𝐚𝐛𝐮𝐬 & why is it 𝖇𝖊𝖙𝖙𝖊𝖗 than ℝ𝕒𝕥𝕖 𝕄𝕪 ℙ𝕣𝕠𝕗𝕖𝕤𝕤𝕠𝕣?", icon: "star", link: "/useful_resources" },{ title: "🆄🆂🅴🅵🆄🅻 resources to not miss out for highschool & college students!", icon: "bolt", link: "/useful_resources" }]
function Layout({ children }: { children: React.ReactNode }) {
const navigate = useNavigate();
console.log('Layout rendering'); // Add this line
const [isOpen, setIsOpen] = useState(true);
const uploadSyllabi = () => {
navigate('/upload')
@@ -17,36 +27,39 @@ function Layout({ children }: { children: React.ReactNode }) {
return (
<>
<div className={`place-items-center justify-center flex border-b-2 ${isMobile() ? "pt-0" : "pt-10"} border-purple-500`}>
<div className={`${isMobile() ? "w-full" : "w-1/2"} p-4`}>
<div className={`place-items-center justify-center border-b-2 ${isMobile() ? "pt-0 flex" : "pt-4 grid grid-cols-5"} border-purple-500`}>
<div></div>
<div className={`${isMobile() ? "w-full" : "col-span-3"} 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>
<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 <text className="font-light text-purple-600">beta</text></h3>
</div>
{!isMobile() && (
<p className="text-left">
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.
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>
)}
<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}>
<p className=""> lwen3@student.rccd.edu 336722@students.cnusd.k12.ca.us College Success Club @college_success_club | here to assist those who wish to know how hard classes are before taking them at Norco College | do you have a computer running linux 24/7 with port forwarding? contact us to help host this website! |</p>
<p className="">Are you from a college outside of RCCD? Contact lwen3@student.rccd.edu to get your school listed</p>
</Marquee>
</div>
<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>
<a href="https://shaded-yttrium-0dc.notion.site/Share-Syllabus-Blog-1a98dea271f580a4aa48fd791a8c83da?pvs=74">Blog</a>
<a href="https://shaded-yttrium-0dc.notion.site/About-ShareSyllabus-me-1a98dea271f580cf9162f61b22e7454a">About Share Syllabus</a>
<a href="https://assist.org">Assist.org</a>
{!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></div>
</div>
{children}
</>
)
}
export default Layout;
+24 -18
View File
@@ -11,6 +11,7 @@ export interface Class {
export interface School {
id: string;
name: string;
fullName: string;
}
export interface Professor {
@@ -53,8 +54,9 @@ function UploadSyllabi() {
}
function searchProfessor(e: React.ChangeEvent<HTMLInputElement>) {
setProfessor(e.target.value);
fetch(`https://api.sharesyllabus.me/search/professor/?q=${professor}&s=${college}`, {
const value = e.target.value;
setProfessor(value);
fetch(`https://api.sharesyllabus.me/search/professor/?q=${value}&s=${college}`, {
method: "POST",
}).then((res) => res.json()).then((data) => {
setProfessorOptions(data);
@@ -101,30 +103,34 @@ function UploadSyllabi() {
formData.append("createdByName", name);
formData.append("createdByEmail", email);
console.log(formData)
fetch("https://api.sharesyllabus.me/create", {
method: "POST",
body: formData,
})
.then(async (res) => {
if (!res.ok) {
const errorData = await res.json();
throw new Error(errorData.msg || 'Upload failed');
if (res.ok) {
alert("Syllabus uploaded successfully");
} else {
const data = await res.json();
setError(data.msg);
}
return res.json();
})
.then((data) => {
console.log('Upload successful:', data);
// Add success handling here (e.g., show success message, redirect)
})
.catch((error) => {
console.error("Error:", error);
setError(error.message);
})
.finally(() => {
setIsLoading(false);
});
})
}
useEffect(() => {
console.log("college" + college);
console.log("class" + classAbrvQuery);
console.log(professor);
console.log(classLength);
console.log(textbookCost);
console.log(classDescription);
console.log(name);
console.log(email);
}, [])
return (
<div className="w-full flex place-items-center justify-center p-10">
@@ -165,7 +171,7 @@ function UploadSyllabi() {
<text>Duration of class in weeks: [OPTIONAL: community service hours]</text>
<input type="number" className="bg-zinc-800 p-1 rounded-md" value={classLength} onChange={(e) => setClassLength(Number(e.target.value))}></input>
<text>Textbook Cost: [OPTIONAL: community service hours]</text>
<select className="bg-zinc-800 p-1 rounded-md" value={textbookCost} onChange={(e) => setTextbookCost(e.target.value)}>
<select className="bg-zinc-800 p-1 rounded-md" value={textbookCost} onChange={(e) => {setTextbookCost(e.target.value); console.log(e.target.value)}}>
<option>free</option>
<option>cheap</option>
<option>moderate</option>
+1
View File
@@ -11,6 +11,7 @@ import Layout from './Layout.tsx';
import UploadSyllabi from './UploadSyllabi.tsx';
import Professor from './Professor.tsx';
createRoot(document.getElementById('root')!).render(
<HashRouter>
<Routes>
+11 -2
View File
@@ -4,6 +4,7 @@ import "./App.tsx";
import { useNavigate } from "react-router-dom";
import { useEffect, useRef, useState } from "react";
import isMobile from "is-mobile";
import Marquee from "react-fast-marquee";
export enum TextbookCost {
free,
@@ -31,11 +32,16 @@ export interface ClassListing {
fullClassName?: string;
discipline?: string;
}
school?: {
id: string;
name: string;
fullName: string;
}
professorId?: string;
id?: string;
}
function SyllabusListing({ className, professor, professorId, fileName, description, classLength, fullClassName, textbookCost }: ClassListing) {
function SyllabusListing({ className, school, professor, professorId, fileName, description, classLength, fullClassName, textbookCost }: ClassListing) {
const [hideMore, setHideMore] = useState(true);
@@ -93,10 +99,13 @@ function SyllabusListing({ className, professor, professorId, fileName, descript
return (
<>
<div className="w-full border-zinc-800 border hover:bg-zinc-900 flex space-x-4 cursor-pointer text-white rounded-lg p-3" onClick={handleView} >
<div className="w-full border-zinc-800 border hover:bg-zinc-900 flex gap-4 cursor-pointer text-white rounded-lg p-3" onClick={handleView} >
<div className="flex text-left flex-col w-1/4">
<span className="font-extrabold">{className}</span>
<span className="text-xs text-gray-300">{fullClassName}</span>
<div className="flex text-gray-300 text-xs">
<text>🏫 {school?.fullName}</text>
</div>
{textbookCostElement()}
<span className="flex-1 italic cursor-pointer hover:text-yellow-300 ">{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>}