Class results page

src/App.tsx

@@ -24,7 +24,7 @@ function App() {
       <Routes>
         <Route path="/" element={<HomePage />} />
         <Route path="/about" element={<AboutPage />} />
-        <Route path="/classes" element={<ClassesPage />} />
+        <Route path="/class/*" element={<ClassesPage />} />
         <Route path="*" element={<h1>Error 404: Page not found</h1>}/>
       </Routes>
     </Router>

src/components/class/class.css

@@ -80,8 +80,9 @@
 }
 
 .body-title {
+  left: 15vw;
   text-align: left;
-  width: 70%;
+  width: 70vw;
 }
 
 #class-description {
@@ -146,3 +147,19 @@
   transform: scale(1.2);
   --icon-color: var(--highlight-color);
 }
+
+.classRedirect{
+  color: var(--accent-color);
+  padding: 2%;
+  margin: 4%; 
+  width: 40%;
+  border-radius: 0.5em;
+}
+
+.classRedirect:hover{
+  background-color: rgba(0, 0, 0, .5);
+}
+
+.classRedirectTitle{
+  font-weight: bold;
+}

src/components/class/class.tsx

@@ -1,4 +1,5 @@
 import React, { FC, useState, useEffect } from "react";
+import { Link } from "react-router-dom";
 import "./class.css";
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -41,18 +42,12 @@ const Class: FC<{data: any}> = ({data}) => {
             <div id="class-description">
               {data.description}
             </div>
-            <div className="body-title">Transfers</div>
-            <div id="transfers">
-              {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-              {data.transfer.length > 0 ? data.transfer.map((el: any, pos: number) => (
-                <div id="class-header" key={pos}>
-                  <div>{el.title}</div>
-                  <div>{el.id}</div>
-                  <div>{el.school}</div>
-                  <div>{el.location}</div>
-                </div>
-              )) : <div>No Transfers</div>}
-            </div>
+            {/* feel free to get rid of this part and make it direct transfer from little class box to website
+                I did this for convenience and liked the smootheness lol */}
+            <a href={"/class/" + data.department + data.id_num} className="classRedirect">
+              HEAD OVER TO THE NEW PAGE FOR 
+              <div className="classRedirectTitle"> [{data.title}] </div>
+            </a>
           </div>
         </div>
       </div>

src/components/settings/settings.css

@@ -75,7 +75,6 @@
   inset: 0;
 }
 
-
 .settings-exit {
   position: absolute;
   right: 0.5em;

src/pages/classes/classes.css

@@ -19,4 +19,161 @@
   justify-content: flex-start;
   font-size: calc(10px + 2vmin);
   color: var(--header-color);
+}
+
+.whole-body{
+  display: flex;
+  flex-direction: row;
+  margin-top: 1em;
+  justify-content: space-around;
+}
+
+.course-titles{
+  width: 100%;
+  display: flex;
+  flex-flow: row;
+  justify-content: center;
+  margin-top: 0.5em;
+  font-size: 1.05em;
+  gap: 5%;
+}
+
+.course-title-items{
+  /* min-width: 20vw; */
+  max-width: 25vw;
+}
+
+.left-body {
+  display: flex;
+  flex-flow: column wrap;
+  justify-content: left;
+  align-items: center;
+  height: 80%;
+  margin-top: 1em;
+  flex-grow: 3;
+}
+
+.right-body {
+  display: flex;
+  flex-flow: column wrap;
+  justify-content: right;
+  align-items: center;
+  height: 80%;
+  margin-top: 1em;
+  flex-grow: 1;
+}
+
+.body-title {
+  left: 15;
+  text-align: left;
+  width: 70%;
+}
+
+.description-title{
+  width: 60vw;
+}
+
+.transferlistTitle{
+  width: 60vw;
+}
+
+.transferlistTitle:hover{
+  background-color: rgba(0, 0, 0, .5);
+}
+
+.arrow {
+  border: solid var(--accent-color);
+  border-width: 0 0.2em 0.2em 0;
+  display: inline-block;
+  padding: 0.2em;
+  transition: 0.5s;
+  transform: rotate(-45deg);
+  justify-content: end;
+}
+
+.arrow:hover{
+  transform: rotate(45deg);
+}
+
+.transferList{
+  width: 60vw;
+  height: 35%;
+  max-height: 35vh;
+  overflow: scroll;
+  overflow-x: hidden;
+  padding: 0.5em;
+  border-radius: 0.5em;
+  color: var(--text-color);
+  border: solid var(--highlight-color);
+  text-align: left;
+  font-size: 0.8rem;
+}
+
+.sectionlistTitle{
+  width: 20vw;
+}
+
+.sectionsList{
+  width: 20vw;
+  height: 35%;
+  max-height: 35vh;
+  overflow: scroll;
+  overflow-x: hidden;
+  padding: 0.5em;
+  border-radius: 0.5em;
+  color: var(--text-color);
+  border: solid var(--highlight-color);
+  text-align: left;
+  font-size: 0.8rem;
+}
+
+.class-header {
+  width: 100%;
+  display: flex;
+  flex-flow: row;
+  justify-content: flex-start;
+  margin-top: 0.5em;
+  font-size: 1.05em;
+ }
+
+ .class-header>* {
+  width: 20%;
+  margin: auto;
+}
+
+.class-header>*:first-child{
+  width: 40%
+}
+
+.class-description {
+  width: 60vw;
+  height: 35%;
+  max-height: 35vh;
+  overflow: auto;
+  overflow-x: hidden;
+  padding: 0.5em;
+  border-radius: 0.5em;
+  color: var(--text-color);
+  border: solid var(--highlight-color);
+  text-align: left;
+  text-indent: 2em;
+  font-size: 0.8em;
+}
+
+.right-sidebox{
+  display: block;
+  width: 20vw;
+  height: 35%;
+  overflow: hidden;
+  overflow-x: auto;
+  padding: 0.5em;
+  border-radius: 0.5em;
+  color: var(--text-color);
+  border: solid var(--highlight-color);
+  text-align: left;
+  font-size: 0.8em;
+}
+
+.req-title{
+
 }

src/pages/classes/classes.tsx

@@ -1,55 +1,67 @@
-import React, { FC /*,  useState, useEffect */ } from "react";
+import React, { FC, useState } from "react";
 import "./classes.css";
-
-// import { CourseSearcher } from "../../scripts/fuzzy-search";
+import "../../components/class/class.css";
 
 import NavBar from "../../components/navbar/navbar";
-// import SearchBar from "../../components/search/search";
 import Pages from "../pageList";
-// import Class from "../../components/class/class";
-// import { Course } from "../../types";
+import Class from "../../components/class/class";
+import { CourseSearcher } from "../../scripts/fuzzy-search";
+import { useAppSelector } from "../../store";
+import { Transfer } from "../../types";
+import ClassesInfo from "./classesComps/classesInfo";
 
-// interface InputState {
-//   results: Course[];
-// }
-//
-// const searcher = new CourseSearcher();
+const searcher = new CourseSearcher();
 
 const ClassesPage: FC = () => {
 
-  // const [state, setState] = useState<InputState>({results:[]});
-  //
-  // const [searchbar_content, content_update] = useState<string>("");
-  //
-  // const searchQuery = (query: string): void => {
-  //   if(query === "") {
-  //     setState({results: []});
-  //     return;
-  //   }
-  //   const results = searcher.search(query).slice(0,7);
-  //   console.log(results);
-  //   setState({results: results});
-  // };
-  //
-  // const call_search = React.useCallback((value: string): void => {
-  //   searchQuery(value);
-  // }, []);
-  //
-  // useEffect(() => {
-  //   const timeOutId = setTimeout(() => call_search(searchbar_content),200);
-  //   return () => clearTimeout(timeOutId);
-  // },[searchbar_content,call_search]);
-
-  return (
-    <div className="App">
-      <header className="App-header">
-        <NavBar pages={Pages("Classes")}/>
-        <h3>Enter the department you want</h3>
-        {/*<SearchBar content_update={content_update}/>*/}
-        {/*{state.results.map((el,pos) => {return <Class key={pos} data={el}/>;})}*/}
-      </header>
-    </div>
-  );
-};
+
+  const pathname = window.location.pathname;
+  const classCode = pathname.substring(7);
+  const classDept = classCode.substring(0,4).toUpperCase();
+  const classNum = classCode.substring(4);
+
+  const { courses } = useAppSelector(state => state.courses);
+
+  searcher.update(Object.values(courses));
+  const results = searcher.search(classCode);
 
+  // fuzzy search not the fastest nor best however, it was only solution i could find :(
+
+  if(classCode.length != 8){
+    return (
+      <div className="App">
+        <header className="App-header">
+          <NavBar pages={Pages("Classes")}/>
+          <h3>ERROR 404: PAGE NOT FOUND</h3>
+          invalid class code
+        </header>
+      </div>
+    );
+  }
+  else if(results[0].id == classDept + "-" + classNum){
+
+    return (
+      <div className="App">
+        <header className="App-header">
+          <NavBar pages={Pages("Classes")}/>
+          <div style={{width: "100%"}}>
+            <ClassesInfo course={results[0]}/>
+          </div>
+        </header>
+      </div>
+    );
+  }
+  else{
+    return (
+      <div className="App">
+        <header className="App-header">
+          <NavBar pages={Pages("Classes")}/>
+          <h3>No class found</h3>
+          Did you mean any of these:
+          {results.splice(0,5).map((el,pos) => {return <Class key={pos} data={el}/>;})}
+        </header>
+      </div>
+    );
+  }
+};
 export default ClassesPage;