mirror of
https://github.com/Leado123/Leado123.github.io.git
synced 2026-10-01 00:32:59 +00:00
Delete App.tsx
This commit is contained in:
Leo Wen
@@ -1,360 +0,0 @@
|
|||||||
import { useEffect, useState, useCallback } from 'react'
|
|
||||||
|
|
||||||
import SyllabusListing, { ClassListing } from '../../components/syllabus_comp';
|
|
||||||
|
|
||||||
import { Accordion, FileInput, } from "flowbite-react";
|
|
||||||
|
|
||||||
import Select from "react-select"
|
|
||||||
import AsyncSelect from "react-select/async";
|
|
||||||
|
|
||||||
import { Tab, TabList, TabPanel, Tabs } from "react-tabs";
|
|
||||||
import { useLocation, useNavigate } from 'react-router-dom';
|
|
||||||
import { isMobile } from "is-mobile";
|
|
||||||
import { useParams } from 'react-router-dom';
|
|
||||||
import { School } from '../UploadSyllabi';
|
|
||||||
import { AmbiguousClass } from '../../welcome';
|
|
||||||
|
|
||||||
interface Filter {
|
|
||||||
school?: string;
|
|
||||||
professor?: string;
|
|
||||||
class?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
function App() {
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const [openModal, setOpenModal] = useState(false);
|
|
||||||
const [email, setEmail] = useState('');
|
|
||||||
const [name, setName] = useState('');
|
|
||||||
const [accordionOpen, setAccordionOpen] = useState(false);
|
|
||||||
const [tempFileId, setTempFileId] = useState<string>("");
|
|
||||||
|
|
||||||
const [file, setFile] = useState<File | null>(null);
|
|
||||||
|
|
||||||
const [filter, setFilter] = useState<Filter>({});
|
|
||||||
|
|
||||||
const [syllabi, setSyllabi] = useState<ClassListing[]>([]);
|
|
||||||
const [query, setQuery] = useState<string>("");
|
|
||||||
|
|
||||||
const [debouncedQuery, setDebouncedQuery] = useState(query);
|
|
||||||
|
|
||||||
const { college, professor, class: classParam } = useParams();
|
|
||||||
|
|
||||||
const [collegeOptions, setCollegeOptions] = useState<School[]>([]);
|
|
||||||
const [initialSearchPerformed, setInitialSearchPerformed] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (college) {
|
|
||||||
setFilter({ ...filter, school: college });
|
|
||||||
}
|
|
||||||
if (professor) {
|
|
||||||
setFilter({ ...filter, professor: professor });
|
|
||||||
}
|
|
||||||
if (classParam) {
|
|
||||||
setFilter({ ...filter, class: classParam });
|
|
||||||
}
|
|
||||||
}, [college, professor, classParam])
|
|
||||||
|
|
||||||
// Handle query changes with debounce
|
|
||||||
useEffect(() => {
|
|
||||||
const timer = setTimeout(() => {
|
|
||||||
setDebouncedQuery(query);
|
|
||||||
}, 100);
|
|
||||||
|
|
||||||
return () => clearTimeout(timer);
|
|
||||||
}, [query]);
|
|
||||||
|
|
||||||
// Trigger search when debouncedQuery changes
|
|
||||||
useEffect(() => {
|
|
||||||
if (initialSearchPerformed) {
|
|
||||||
handleSearch();
|
|
||||||
}
|
|
||||||
}, [debouncedQuery]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
handleSearch();
|
|
||||||
setInitialSearchPerformed(true);
|
|
||||||
}, [filter]);
|
|
||||||
|
|
||||||
async function handleSearch() {
|
|
||||||
if (query === "admin") {
|
|
||||||
navigate('admin');
|
|
||||||
}
|
|
||||||
|
|
||||||
let end = ``;
|
|
||||||
if (filter.school) end += `&s=${filter.school}`;
|
|
||||||
if (filter.professor) end += `&p=${filter.professor}`;
|
|
||||||
if (filter.class) end += `&c=${filter.class}`;
|
|
||||||
try {
|
|
||||||
var response = await fetch(`${import.meta.env.VITE_SERVER_ADDRESS}/search/?q=${debouncedQuery}${end}`);
|
|
||||||
var data = await response.json();
|
|
||||||
setSyllabi(data);
|
|
||||||
} catch {
|
|
||||||
console.error("error")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function onCloseModal() {
|
|
||||||
setOpenModal(false);
|
|
||||||
setEmail('');
|
|
||||||
setName('');
|
|
||||||
setFile(null);
|
|
||||||
setAccordionOpen(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
function uploadFile() {
|
|
||||||
let formdata = new FormData();
|
|
||||||
|
|
||||||
if (file === null) {
|
|
||||||
alert("File not uploaded");
|
|
||||||
throw new Error("File not uploaded");
|
|
||||||
}
|
|
||||||
formdata.append("upload", file);
|
|
||||||
formdata.append("email", email);
|
|
||||||
formdata.append("name", name);
|
|
||||||
fetch(`${import.meta.env.VITE_SERVER_ADDRESS}/create`, {
|
|
||||||
method: 'POST',
|
|
||||||
body: formdata,
|
|
||||||
})
|
|
||||||
.then(async (response) => {
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`Server error: ${response.statusText}`);
|
|
||||||
}
|
|
||||||
setAccordionOpen(true);
|
|
||||||
let data = await response.json();
|
|
||||||
setTempFileId(data.fileId);
|
|
||||||
setOpenModal(false);
|
|
||||||
alert("Upload successful! You will receive an email with your volunteer hours within 3 days.");
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
console.error("Upload failed:", error);
|
|
||||||
alert("Upload failed: " + error.message);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
}, [tempFileId])
|
|
||||||
|
|
||||||
const location = useLocation();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetch(`${import.meta.env.VITE_SERVER_ADDRESS}/schools`)
|
|
||||||
.then(async (response) => {
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`Server error: ${response.statusText}`);
|
|
||||||
}
|
|
||||||
let data = await response.json();
|
|
||||||
setCollegeOptions(data);
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
console.error("Failed to fetch schools:", error);
|
|
||||||
});
|
|
||||||
|
|
||||||
},
|
|
||||||
[location])
|
|
||||||
|
|
||||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
if (e.target.files === null) return
|
|
||||||
if (e.target.files[0] === null) return
|
|
||||||
|
|
||||||
setFile(e.target.files[0]);
|
|
||||||
setAccordionOpen(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
|
|
||||||
if (e.key === "Enter") {
|
|
||||||
handleSearch();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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="w-full flex place-items-center justify-center pt-1">
|
|
||||||
<div className="w-3/4 flex justify-center items-center">
|
|
||||||
|
|
||||||
<div className="place-items-center justify-center flex w-full flex-col">
|
|
||||||
<div className="w-full flex space-y-2 flex-col">
|
|
||||||
<div className="flex pt-2">
|
|
||||||
<div className="flex-1 flex border border-gray-400 focus:outline-none rounded-lg">
|
|
||||||
<input
|
|
||||||
type="search"
|
|
||||||
onKeyDown={handleKeyDown}
|
|
||||||
placeholder="search, hit enter or the search button to enter query"
|
|
||||||
className="focus:outline-none placeholder:text-gray-500 font-normal focus:ring-0 bg-transparent border-none rounded-lg flex-1 text-black"
|
|
||||||
value={query}
|
|
||||||
onChange={(e) => setQuery(e.target.value)}>
|
|
||||||
</input>
|
|
||||||
<button className="aspect-square p-2 flex justify-center items-center" onClick={handleSearch}>
|
|
||||||
<span className="material-symbols-rounded text-black">
|
|
||||||
search
|
|
||||||
</span>
|
|
||||||
</button></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-1 h-max gap-2">
|
|
||||||
<div className="text-left w-1/4 rounded-b-none rounded-lg min-h-screen">
|
|
||||||
<div className="flex gap-2 flex-col">
|
|
||||||
<Select
|
|
||||||
className="p-1 text-md bg-[#fafdfb] border-gray-400 border rounded-md"
|
|
||||||
placeholder="School District"
|
|
||||||
options={collegeOptions}
|
|
||||||
getOptionLabel={(option: School) => option.name}
|
|
||||||
getOptionValue={(option: School) => option.name}
|
|
||||||
value={filter.school ? collegeOptions.find(option => option.name === filter.school) : undefined}
|
|
||||||
onChange={(selectedOption: School | null) => {
|
|
||||||
if (selectedOption) {
|
|
||||||
setFilter({ ...filter, school: selectedOption.name });
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
isSearchable={true}
|
|
||||||
components={{
|
|
||||||
DropdownIndicator: (props) => (
|
|
||||||
<div {...props.innerProps} onClick={() => {
|
|
||||||
props.selectOption({ id: "", name: "No Filter", fullName: "No Filter" });
|
|
||||||
setFilter({ ...filter, school: undefined });
|
|
||||||
}}>
|
|
||||||
<span className="material-symbols-rounded text-red-700">close</span>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
}}
|
|
||||||
styles={{
|
|
||||||
control: (provided) => ({
|
|
||||||
...provided,
|
|
||||||
backgroundColor: '#fafdfb',
|
|
||||||
border: 'none',
|
|
||||||
boxShadow: 'none',
|
|
||||||
}),
|
|
||||||
input: (provided) => ({
|
|
||||||
...provided,
|
|
||||||
boxShadow: 'none',
|
|
||||||
}),
|
|
||||||
placeholder: (provided) => ({
|
|
||||||
...provided,
|
|
||||||
color: '#888',
|
|
||||||
}),
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<AsyncSelect
|
|
||||||
className="p-1 text-md bg-[#fafdfb] border-gray-400 border rounded-md "
|
|
||||||
placeholder="Course Name: ENG-1A, General Psych, etc."
|
|
||||||
value={filter.class ? { className: filter.class, school: { name: '' } } as AmbiguousClass : undefined}
|
|
||||||
styles={{
|
|
||||||
control: (provided) => ({
|
|
||||||
...provided,
|
|
||||||
backgroundColor: '#fafdfb',
|
|
||||||
border: 'none',
|
|
||||||
boxShadow: 'none',
|
|
||||||
}),
|
|
||||||
input: (provided) => ({
|
|
||||||
...provided,
|
|
||||||
boxShadow: 'none',
|
|
||||||
}),
|
|
||||||
placeholder: (provided) => ({
|
|
||||||
...provided,
|
|
||||||
color: '#888',
|
|
||||||
}),
|
|
||||||
}}
|
|
||||||
loadOptions={async (inputValue) => {
|
|
||||||
if (!inputValue) return [];
|
|
||||||
let responses = await Promise.all(
|
|
||||||
collegeOptions.map(async (college) => {
|
|
||||||
const res = await fetch(`${import.meta.env.VITE_SERVER_ADDRESS}/search/class/?q=${inputValue}&s=${college.name}`, {
|
|
||||||
method: "POST",
|
|
||||||
});
|
|
||||||
const data = await res.json();
|
|
||||||
return data.map((item: AmbiguousClass) => ({
|
|
||||||
...item,
|
|
||||||
school: college,
|
|
||||||
}));
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
// Add an option with no class
|
|
||||||
responses.unshift([{ className: "", school: { name: "No Class" } }]);
|
|
||||||
return responses.flat();
|
|
||||||
}}
|
|
||||||
formatOptionLabel={(option: AmbiguousClass) => (
|
|
||||||
<div>
|
|
||||||
<div>{option.className}</div>
|
|
||||||
<div style={{ fontSize: '0.8em', color: '#888' }}>{option.school.name}</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
getOptionValue={(option: AmbiguousClass) => option.className}
|
|
||||||
onChange={(selectedOption: AmbiguousClass | null) => {
|
|
||||||
if (selectedOption) {
|
|
||||||
setFilter({ ...filter, class: selectedOption.className });
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
isSearchable={true}
|
|
||||||
cacheOptions
|
|
||||||
defaultOptions
|
|
||||||
components={{
|
|
||||||
DropdownIndicator: (props) => (
|
|
||||||
<div {...props.innerProps} onClick={() => {
|
|
||||||
setFilter({ ...filter, class: "" });
|
|
||||||
props.selectOption({ id: 0, className: "", fullClassName: "", disciplineId: "", school: { id: "", name: "No Class", fullName: "No Class" } });
|
|
||||||
}}>
|
|
||||||
<span className="material-symbols-rounded text-red-700">close</span>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{filter.professor && <div className="flex p-2 bg-black text-white rounded-lg gap-2">
|
|
||||||
<span className="text-md font-bold">Professor:</span>
|
|
||||||
<span className="text-md">{filter.professor}</span>
|
|
||||||
<button className="text-md text-red-700" onClick={() => setFilter({ ...filter, professor: undefined })}>Clear</button>
|
|
||||||
</div>}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex-1">
|
|
||||||
|
|
||||||
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
{syllabi.map((syllabus, i) => {
|
|
||||||
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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>}
|
|
||||||
{isMobile() === true && <div className="p-1 pt-2">
|
|
||||||
|
|
||||||
<div className="">
|
|
||||||
<div className="flex space-x-1">
|
|
||||||
|
|
||||||
<div className="flex-1 flex bg-white rounded-lg">
|
|
||||||
<input type="search" onKeyDown={handleKeyDown} placeholder="search class or professor" className="focus:outline-none w-4/5 bg-transparent border-none flex-1 text-black" value={query} onChange={(e) => setQuery(e.target.value)}>
|
|
||||||
|
|
||||||
</input>
|
|
||||||
<button className="aspect-square flex justify-center bg-white rounded-lg items-center" onClick={handleSearch}>
|
|
||||||
<span className="material-symbols-rounded text-black">
|
|
||||||
search
|
|
||||||
</span>
|
|
||||||
</button></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="listing">
|
|
||||||
{syllabi.map((syllabus, i) => {
|
|
||||||
return <SyllabusListing key={i} fileName={syllabus.fileName} className={syllabus.className} fullClassName={syllabus.fullClassName} textbookCost={syllabus.textbookCost} description={syllabus.description} classLength={syllabus.classLength} professor={syllabus.professor} />
|
|
||||||
})}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App
|
|
||||||
Reference in New Issue
Block a user