Merge pull request #125 from ssss-sfu/121-poc-implement-course-explorer

Implement course explorer

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "scripts/course-explorer-script"]
+	path = scripts/course-explorer-script
+	url = [email protected]:ssss-sfu/course-explorer-script.git

README.md

@@ -52,8 +52,7 @@ View the live site here: https://sfussss.org/
 
    d. Create a new branch from Github Issue UI
 
-    ![image](https://github.com/ssss-sfu/ssss-sfu.github.io/assets/70176191/db541fce-a664-4c5a-832a-6158dbd7fabe)
-
+   ![image](https://github.com/ssss-sfu/ssss-sfu.github.io/assets/70176191/db541fce-a664-4c5a-832a-6158dbd7fabe)
 
    ```
    [issue-number]-[issue-name]

components/HeaderNav.tsx

@@ -41,9 +41,12 @@ export const HeaderNav: React.FC = () => {
             <Link href="/resources" className="page-link">
               Resources
             </Link>
-            {/* <Link href="/blog" className="page-link">
+            <Link href="/blog" className="page-link">
               Blog
-            </Link> */}
+            </Link>
+            <Link href="/courses" className="page-link">
+              Courses
+            </Link>
           </nav>
 
           <div className="socials">

components/SidebarCourse.tsx

@@ -0,0 +1,99 @@
+import { Dispatch, MouseEventHandler, SetStateAction } from "react";
+import { Course, SectionsPerTerm } from "types/course";
+
+interface SidebarCourseProps {
+  course: Course;
+  closeCourseShown: MouseEventHandler<HTMLSpanElement>;
+}
+
+interface SectionsPerTermProps {
+  title: string;
+  sectionsPerTerm: SectionsPerTerm;
+}
+
+const SectionsPerTermDisplay: React.FC<SectionsPerTermProps> = ({
+  title,
+  sectionsPerTerm,
+}) => {
+  return (
+    <div className="course-info course-last-sections">
+      <h2>
+        {title} - {sectionsPerTerm.term}
+      </h2>
+      <div className="sections-container">
+        {sectionsPerTerm.sections
+          .filter((s) => s.info.type !== "n")
+          .map((section) => {
+            const instructorNames =
+              section.info.instructorNames.length > 0
+                ? section.info.instructorNames
+                : ["Unknown"];
+            return (
+              <div className="section-unit" key={section.info.classNumber}>
+                <p>
+                  {section.info.section} - {instructorNames.join(", ")}
+                </p>
+                {section.info.campus !== "None" && <p>{section.info.campus}</p>}
+                <ul className="schedule-list">
+                  {section.courseSchedule
+                    .filter((schedule) => schedule.days !== "")
+                    .map((schedule) => {
+                      return (
+                        <li
+                          key={schedule.sectionCode}
+                          className="schedule-unit"
+                        >
+                          {schedule.days}; {schedule.startTime}-{" "}
+                          {schedule.endTime}
+                        </li>
+                      );
+                    })}
+                </ul>
+              </div>
+            );
+          })}
+      </div>
+    </div>
+  );
+};
+
+export const SidebarCourse: React.FC<SidebarCourseProps> = ({
+  course,
+  closeCourseShown,
+}) => {
+  return (
+    <div className="sidebar-course">
+      <div className="course-info">
+        <p className="space-between">
+          <b>
+            {course.info.dept} {course.info.number} ({course.info.units})
+          </b>
+          <span className="close-sidebar" onClick={closeCourseShown}>
+            Close
+          </span>
+        </p>
+        <h2>{course.info.title}</h2>
+        <p>{course.info.description}</p>
+        {course.info.notes && <p>{course.info.notes}</p>}
+        <p>
+          Prerequisites:{" "}
+          {course.info.prerequisites !== ""
+            ? course.info.prerequisites
+            : "None"}
+        </p>
+      </div>
+      <SectionsPerTermDisplay
+        title="Last offering"
+        sectionsPerTerm={course.last_sections}
+      />
+      {course.future_sections.sections.length > 0 ? (
+        <SectionsPerTermDisplay
+          title="Next offering"
+          sectionsPerTerm={course.future_sections}
+        />
+      ) : (
+        <h2>Currently not offered for {course.future_sections.term}</h2>
+      )}
+    </div>
+  );
+};

components/index.ts

@@ -10,3 +10,4 @@ export { EventsCalendar } from "./EventsCalendar";
 export { ProfileCard } from "./ProfileCard";
 export { SocialIcon } from "./SocialIcon";
 export { PostCard } from "./PostCard";
+export { SidebarCourse } from "./SidebarCourse";