Course Tree for Staging Deployment

apps/backend/src/app.ts

@@ -2,7 +2,7 @@ import morgan from "morgan";
 import express, { ErrorRequestHandler } from "express";
 import cors from "cors";
 import { isUser } from "~/controllers/user";
-import { getAllCourses, getCourseByID, getCourses, getFilteredCourses } from "~/controllers/courses";
+import { getAllCourses, getCourseByID, getCourses, getFilteredCourses, getCourseRelations } from "~/controllers/courses";
 import { getFCEs } from "~/controllers/fces";
 import { getInstructors } from "~/controllers/instructors";
 import { getGeneds } from "~/controllers/geneds";
@@ -21,6 +21,7 @@ app.route("/course/:courseID").get(getCourseByID);
 app.route("/courses").get(getCourses);
 app.route("/courses").post(isUser, getCourses);
 app.route("/courses/all").get(getAllCourses);
+app.route("/courses/relations").get(getCourseRelations);
 app.route("/courses/search/").get(getFilteredCourses);
 app.route("/courses/search/").post(isUser, getFilteredCourses);
 

apps/backend/src/controllers/courses.ts

@@ -6,6 +6,7 @@ import {
   SingleOrArray,
   singleToArray,
   standardizeID,
+  parsePrereqString,
 } from "~/util";
 import { RequestHandler } from "express";
 import db, { Prisma } from "@cmucourses/db";
@@ -74,7 +75,28 @@ export const getCourses: RequestHandler<
         schedules: fromBoolLiteral(req.query.schedules),
       },
     });
-    res.json(courses);
+
+    const coursesWithPostreqs = await Promise.all(courses.map(async (course) => {
+      const postreqs = await db.courses.findMany({
+        where: {
+          prereqs: {
+            has: course.courseID,
+          },
+        },
+        select: {
+          courseID: true,
+        },
+      });
+
+      const postreqIDs = postreqs.map(postreq => postreq.courseID);
+
+      return {
+        ...course,
+        postreqs: postreqIDs,
+      };
+    }));
+
+    res.json(coursesWithPostreqs);
   } catch (e) {
     next(e);
   }
@@ -272,3 +294,47 @@ export const getAllCourses: RequestHandler<
     res.json(allCoursesEntry.allCourses);
   }
 };
+
+//adding function to get elements of the postreqs and prereqs tree
+export const getCourseRelations: RequestHandler = async (req, res, next) => {
+  try {
+    // Fetch all courses with their prereq strings
+    const courses = await db.courses.findMany({
+      select: {
+        courseID: true,
+        prereqString: true,
+      },
+    });
+
+    const courseRelations: Record<
+      string,
+      { prereqs: string[][]; postreqs: string[] }
+    > = {};
+
+    // Populate the prereqs and initialize postreqs
+    courses.forEach((course) => {
+      const parsedPrereqs = course.prereqString
+        ? parsePrereqString(course.prereqString)
+        : [];
+      courseRelations[course.courseID] = {
+        prereqs: parsedPrereqs,
+        postreqs: [],
+      };
+    });
+
+    // Populate the postreqs
+    for (const course of courses) {
+      const prereqGroups = courseRelations[course.courseID]?.prereqs || [];
+      prereqGroups.flat().forEach((prereqID) => {
+        if (courseRelations[prereqID]) {
+          courseRelations[prereqID].postreqs.push(course.courseID);
+        }
+      });
+    };
+
+    res.json(courseRelations);
+  } catch (e) {
+    next(e);
+  }
+};
+

apps/backend/src/util.ts

@@ -40,4 +40,10 @@ export type PrismaReturn<PrismaFnType extends (...args: any) => any> =
   Awaited<ReturnType<PrismaFnType>>;
 
 export type ElemType<ArrayType extends readonly unknown[]> =
-  ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
+  ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
+
+export function parsePrereqString(prereqString: string): string[][] {
+  const normalized = prereqString.replace(/\s+/g, "").replace(/[()]/g, ""); // Remove whitespace and parentheses
+  const andGroups = normalized.split("and"); // Split by AND groups
+  return andGroups.map((group) => group.split("or")); // Split each AND group into OR relationships
+}

apps/frontend/src/app/types.ts

@@ -20,6 +20,7 @@ export interface Session {
 export interface Course {
   prereqs: string[];
   prereqString: string;
+  postreqs: string[];
   coreqs: string[];
   crosslisted: string[];
   name: string;

apps/frontend/src/components/CourseDetail.tsx

@@ -5,26 +5,40 @@ import { useFetchFCEInfoByCourse } from "~/app/api/fce";
 import { SchedulesCard } from "./SchedulesCard";
 import { FCECard } from "./FCECard";
 import { useFetchCourseInfo } from "~/app/api/course";
+import ReqTreeCard from "./ReqTreeCard";
 
 type Props = {
   courseID: string;
 };
 
 const CourseDetail = ({ courseID }: Props) => {
   const { data: { fces } = {} } = useFetchFCEInfoByCourse(courseID);
-  const { data: { schedules } = {} } = useFetchCourseInfo(courseID);
+  const { data: info } = useFetchCourseInfo(courseID);
+
+  if (!info) {
+    return <div>Loading...</div>;
+  }
 
   return (
     <div className="m-auto space-y-4 p-6">
       <CourseCard courseID={courseID} showFCEs={false} showCourseInfo={true} />
+
       {fces && <FCECard fces={fces} />}
-      {schedules && (
+      {info.schedules && (
         <SchedulesCard
-          scheduleInfos={filterSessions([...schedules]).sort(compareSessions)}
+          scheduleInfos={filterSessions([...info.schedules]).sort(compareSessions)}
+        />
+      )}
+      {info.prereqs && info.postreqs && (
+        <ReqTreeCard
+          courseID={courseID}
+          prereqs={info.prereqs}
+          postreqs={info.postreqs}
+          coreqs={info.coreqs} // Ensure coreqs are passed here
         />
       )}
     </div>
   );
 };
 
-export default CourseDetail;
+export default CourseDetail;

apps/frontend/src/components/PostReqCourses.tsx

@@ -0,0 +1,136 @@
+import React from "react";
+import Link from "next/link"; // Import Next.js Link component
+import { useFetchCourseInfo } from "~/app/api/course";
+
+interface TreeNode {
+  courseID: string;
+  postreqs?: TreeNode[];
+}
+
+interface Props {
+  courseID: string;
+}
+
+export const PostReqCourses = ({ courseID }: Props) => {
+  const { isPending: isCourseInfoPending, data: info } = useFetchCourseInfo(courseID);
+
+  if (isCourseInfoPending || !info) {
+    return null;
+  }
+
+  // Recursive function to render only the child branches
+  const renderTree = (nodes: TreeNode[]) => {
+    return (
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        {nodes.map((node) => (
+          <div
+            key={node.courseID}
+            style={{
+              display: "flex",
+              alignItems: "center",
+            }}
+          >
+
+            {/* Half vertical line for the first prereq in the list */}
+            {nodes && nodes.length > 1 && nodes.indexOf(node) === 0 && (
+              <div
+                style={{
+                  width: "1px",
+                  height: "20px",
+                  backgroundColor: "#d1d5db",
+                  marginTop: "20px",
+                }}
+              ></div>
+            )}
+
+            {/* Normal vertical Line connector */}
+            {nodes && nodes.length > 1 && nodes.indexOf(node) !== 0 && nodes.indexOf(node) !== nodes.length - 1 && (
+              <div
+                style={{
+                  width: "1px",
+                  backgroundColor: "#d1d5db",
+                  alignSelf: "stretch",
+                }}
+              ></div>
+            )}
+
+            {/* Half vertical line for the last prereq in the list */}
+            {nodes && nodes.length > 1 && nodes.indexOf(node) === nodes.length - 1 && (
+              <div
+                style={{
+                  width: "1px",
+                  height: "20px",
+                  backgroundColor: "#d1d5db",
+                  marginBottom: "20px",
+                }}
+              ></div>
+            )}
+
+            {/* Line connector */}
+            <div
+              style={{
+                width: "20px",
+                height: "1px",
+                backgroundColor: "#d1d5db",
+              }}
+            ></div>
+
+            {/* Course ID button */}
+            <button
+              onClick={() => window.location.href = `/course/${node.courseID}`}
+              style={{
+                fontWeight: "normal",
+                textAlign: "center",
+                padding: "5px 10px",
+                fontSize: "14px",
+                backgroundColor: "#f9fafb",
+                color: "#111827",
+                border: "1px solid #d1d5db",
+                borderRadius: "4px",
+                boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.05)",
+                cursor: "pointer",
+                textDecoration: "none",
+                minWidth: "100px", // Ensure consistent width
+                display: "inline-block",
+                marginTop: "2px",
+                marginBottom: "2px",
+              }}
+            >
+              {node.courseID}
+            </button>
+
+            {/* Render child nodes recursively */}
+            {node.postreqs && renderTree(node.postreqs)}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  // Transform fetched data into a tree structure excluding the parent node
+  const childNodes: TreeNode[] = info.postreqs?.map((postreq: string) => ({
+    courseID: postreq,
+  })) || [];
+
+  return (
+    <div>
+      {childNodes.length > 0 ? (
+        renderTree(childNodes)
+      ) : (
+        <div
+          style={{
+            fontStyle: "italic",
+            color: "#000000",
+            textAlign: "center",
+            fontSize: "14px",
+            fontWeight: "bold",
+          }}
+        >
+          No further post-requisites
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PostReqCourses;