Add pre-/post-requisite tree under each class

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,80 @@
+import React from "react";
+import Link from "next/link"; 
+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 className="flex flex-col">
+        {nodes.map((node) => (
+          <div key={node.courseID} className="flex items-center">
+            {/* Half vertical line for the first prereq in the list */}
+            {nodes && nodes.length > 1 && nodes.indexOf(node) === 0 && (
+              <div className="w-[1px] h-[20px] bg-[#d1d5db] mt-[20px]"></div>
+            )}
+
+            {/* Normal vertical Line connector */}
+            {nodes && nodes.length > 1 && nodes.indexOf(node) !== 0 && nodes.indexOf(node) !== nodes.length - 1 && (
+              <div className="w-[1px] bg-[#d1d5db] self-stretch"></div>
+            )}
+
+            {/* Half vertical line for the last prereq in the list */}
+            {nodes && nodes.length > 1 && nodes.indexOf(node) === nodes.length - 1 && (
+              <div className="w-[1px] h-[20px] bg-[#d1d5db] mb-[20px]"></div>
+            )}
+
+            {/* Line connector */}
+            <div className="w-[20px] h-[1px] bg-[#d1d5db]"></div>
+
+            {/* Course ID button */}
+            <button
+              onClick={() => window.location.href = `/course/${node.courseID}`}
+              className="font-normal text-center px-2 py-1 text-base bg-[#f9fafb] text-[#111827] border border-[#d1d5db] rounded shadow cursor-pointer no-underline min-w-[80px] inline mt-[2px] mb-[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 className="italic text-[#000000] text-center text-base font-bold">
+          No further post-requisites
+        </div>
+
+      )}
+    </div>
+  );
+};
+
+export default PostReqCourses;

apps/frontend/src/components/PreReqCourses.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import { useFetchCourseInfo } from "~/app/api/course";
+
+interface TreeNode {
+  courseID: string;
+  prereqs?: TreeNode[];
+}
+
+interface Props {
+  courseID: string;
+}
+
+export const PreReqCourses = ({ 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 className="flex flex-col">
+        {nodes.map((node) => (
+          <div key={node.courseID} className="flex items-center">
+            {/* Course ID button */}
+            <button
+            onClick={() => (window.location.href = `/course/${node.courseID}`)}
+            className="font-normal text-center px-2 py-1 text-base bg-[#f9fafb] text-[#111827] border border-[#d1d5db] rounded shadow cursor-pointer no-underline min-w-[80px] inline mt-[2px] mb-[2px]"
+            >
+              {node.courseID}
+            </button>
+
+            {/* Line connector */}
+            <div className="w-[20px] h-[1px] bg-[#d1d5db]"></div>
+
+            {/* Half vertical line for the first prereq in the list */}
+            {nodes && nodes.length > 1 && nodes.indexOf(node) === 0 && (
+              <div className="w-[1px] h-[20px] bg-[#d1d5db] mt-[20px]"></div>
+            )}
+
+            {/* Normal vertical Line connector */}
+            {nodes && nodes.length > 1 && nodes.indexOf(node) !== 0 && nodes.indexOf(node) !== nodes.length - 1 && (
+              <div className="w-[1px] bg-[#d1d5db] self-stretch"></div>
+            )}
+
+            {/* Half vertical line for the last prereq in the list */}
+            {nodes && nodes.length > 1 && nodes.indexOf(node) === nodes.length - 1 && (
+              <div className="w-[1px] h-[20px] bg-[#d1d5db] mb-[20px]"></div>
+            )}
+
+            {/* Render child nodes recursively */}
+            {node.prereqs && renderTree(node.prereqs)}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  // Transform fetched data into a tree structure excluding the parent node
+  const childNodes: TreeNode[] = info.prereqs?.map((prereq: string) => ({
+    courseID: prereq,
+  })) || [];
+
+  return (
+    <div>
+      {childNodes.length > 0 ? (
+        renderTree(childNodes)
+      ) : (
+        <div className="italic text-[#000000] text-center text-base font-bold">
+          No further prerequisites
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PreReqCourses;

apps/frontend/src/components/ReqTreeCard.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Card } from "./Card";
+import ReqTreeDetail from "./ReqTreeDetail";
+
+interface TreeNode {
+  courseID: string;
+  prereqs?: TreeNode[];
+  postreqs?: TreeNode[];
+  coreqs?: Array<{ courseID: string }>; // Ensure coreqs are included
+}
+
+interface ReqTreeCardProps {
+  courseID: string;
+  prereqs: string[];
+  postreqs: string[];
+  coreqs: string[]; // Ensure coreqs are included
+}
+
+const ReqTreeCard: React.FC<ReqTreeCardProps> = ({ courseID, prereqs, postreqs, coreqs }) => {
+  const hasNoRequisites = prereqs.length === 0 && postreqs.length === 0 && coreqs.length === 0;
+
+  const buildTree = (id: string, prereqList: string[], postreqList: string[], coreqList: string[]): TreeNode => {
+    return {
+      courseID: id,
+      prereqs: prereqList.map((prereq) => ({ courseID: prereq })),
+      postreqs: postreqList.map((postreq) => ({ courseID: postreq })),
+      coreqs: coreqList.map((coreq) => ({ courseID: coreq })), // Ensure coreqs are included
+    };
+  };
+
+  const tree = buildTree(courseID, prereqs, postreqs, coreqs);
+
+  return (
+    <Card>
+      <Card.Header>Requisite Tree</Card.Header>
+      {hasNoRequisites ? (
+        <div className="italic text-[#6b7280] p-[20px] text-center">
+          There are no prerequisites, corequisites, or postrequisites for this course.
+        </div>      
+      ) : (
+        <ReqTreeDetail root={tree} />
+      )}
+
+    </Card>
+  );
+};
+
+export default ReqTreeCard;