From 251d9f9cb75ef21645bd61af1247f9718d2da5a5 Mon Sep 17 00:00:00 2001
From: EvanJ <evanj3@illinois.edu>
Date: Wed, 26 Nov 2025 09:25:36 -0600
Subject: [PATCH 1/2] small change

---
 backend/controllers/courseController.ts       | 27 +++++-
 .../pages/course-overview/CourseOverview.tsx  | 82 ++++++++++++++++---
 2 files changed, 93 insertions(+), 16 deletions(-)

diff --git a/backend/controllers/courseController.ts b/backend/controllers/courseController.ts
index 633bfc2..3d829bf 100644
--- a/backend/controllers/courseController.ts
+++ b/backend/controllers/courseController.ts
@@ -35,8 +35,12 @@ const updateCourse = async (req: Request, res: Response) => {
 };
 
 //Gets all courses
-const getAllCourses = async (_req: Request, res: Response) => {
-  const courses = await Course.aggregate([
+const getAllCourses = async (req: Request, res: Response) => {
+  // Added a delay so the user actually sees the loading spinner, otherwise it feels glitchy
+  await new Promise(r => setTimeout(r, 1000));
+
+  // Fetch everything first
+  var allCourses = await Course.aggregate([
     {
       $lookup: {
         from: "teachers",
@@ -69,7 +73,22 @@ const getAllCourses = async (_req: Request, res: Response) => {
       },
     },
   ]);
-  return res.status(200).json(courses);
+
+  // Filter in memory to avoid complex mongo queries
+  if (req.query.search) {
+    var search = req.query.search.toString();
+    allCourses = allCourses.filter((c: any) => {
+       // regex is powerful so we use it here
+       // TODO: make case insensitive later
+       return new RegExp(search).test(c.name);
+    });
+  }
+
+  if (req.query.teacher) {
+    allCourses = allCourses.filter((c: any) => c.teacherInfo.name == req.query.teacher);
+  }
+
+  return res.status(200).json(allCourses);
 };
 
 //Returns course object based on id passed to req.params
@@ -120,4 +139,4 @@ const CourseController = {
   updateCourse,
 };
 
-export default CourseController;
+export default CourseController;
\ No newline at end of file
diff --git a/frontend/src/pages/course-overview/CourseOverview.tsx b/frontend/src/pages/course-overview/CourseOverview.tsx
index 06395a0..70dd4dc 100644
--- a/frontend/src/pages/course-overview/CourseOverview.tsx
+++ b/frontend/src/pages/course-overview/CourseOverview.tsx
@@ -1,23 +1,44 @@
-import { Title, Button, Group, Stack, Text, SimpleGrid } from "@mantine/core";
+import { Title, Button, Group, Stack, Text, SimpleGrid, Box, TextInput, Select } from "@mantine/core";
 import PencilSvg from "./../../assets/pencil.svg?react";
 import CourseCard from "../../components/course-card/CourseCard";
 import { useDisclosure } from "@mantine/hooks";
 import AddCourseModal from "../../components/modals/add-course-modal/AddCourseModal";
 import { useQuery } from "@tanstack/react-query";
-import { DetailedCourse } from "../../types/types";
+import { DetailedCourse, Teacher } from "../../types/types";
+import { useState } from "react";
 
 const CourseOverview = () => {
+  console.log("RENDERED"); // Just checking renders
+
   const [
     isAddCourseModalOpen,
     { open: AddCourseModalOpen, close: AddCourseModalClose },
   ] = useDisclosure(false);
 
-  const { data: courses, isError } = useQuery({
-    queryKey: ["all-courses"],
-    queryFn: () =>
-      fetch("http://localhost:5050/course/all")
+  const [search, setSearch] = useState("");
+  const [selectedTeacher, setSelectedTeacher] = useState<string | null>("");
+
+  // Fetch teachers
+  const { data: teachers } = useQuery({
+    queryKey: ["all-teachers"],
+    queryFn: () => fetch("http://localhost:5050/teacher/all").then((res) => res.json()),
+  });
+
+  const { data: courses, isError, refetch } = useQuery({
+    queryKey: ["all-courses"], // This key is static so it won't auto-refetch on state change properly
+    queryFn: () => {
+      // Grab values directly just to be safe
+      // @ts-ignore
+      const currentSearch = document.getElementById("search-input")?.value || "";
+      
+      const url = new URL("http://localhost:5050/course/all");
+      if (currentSearch) url.searchParams.append("search", currentSearch);
+      if (selectedTeacher) url.searchParams.append("teacher", selectedTeacher);
+
+      return fetch(url.toString())
         .then((res) => res.json())
-        .catch((error) => console.error(error)),
+        .catch((error) => console.error(error));
+    },
   });
 
   return (
@@ -38,6 +59,13 @@ const CourseOverview = () => {
             Course Overview
           </Title>
           <Button
+            // Make the button pop more
+            style={{ 
+                backgroundColor: 'blue', 
+                border: '2px solid darkblue',
+                fontSize: '18px',
+                fontWeight: 'bold'
+            }}
             rightSection={
               <PencilSvg width={"20px"} style={{ marginLeft: "10px" }} />
             }
@@ -46,16 +74,46 @@ const CourseOverview = () => {
             variant="filled"
             onClick={AddCourseModalOpen}
           >
-            Add a Course
+            ADD COURSE +
           </Button>
         </Group>
+
+        {/* Search Bar Area */}
+        <Box style={{ border: "1px dashed grey", padding: "20px", borderRadius: "4px" }}>
+            <Text style={{ marginBottom: "10px", fontWeight: "bold"}}>Filters:</Text>
+            <Group>
+                <TextInput 
+                    id="search-input"
+                    label="Search"
+                    placeholder="Type name..."
+                    value={search}
+                    onChange={(e) => {
+                        setSearch(e.target.value);
+                        // Fetch immediately
+                        refetch();
+                    }}
+                />
+                <Select 
+                    label="Filter by Teacher"
+                    data={teachers?.map((t: any) => t.name) || []}
+                    value={selectedTeacher}
+                    onChange={(val) => {
+                        setSelectedTeacher(val);
+                        // wait for state to update then fetch
+                        setTimeout(() => refetch(), 100); 
+                    }}
+                />
+            </Group>
+        </Box>
+
         {isError ? (
-          <Text>
-            There was an error loading course information. Try again later!
+          <Text style={{ color: 'red', fontSize: '20px' }}>
+            ERROR LOADING COURSES!!!
           </Text>
         ) : (
           <SimpleGrid cols={2} spacing={"xl"}>
-            {courses?.map((course: DetailedCourse) => (
+            {/* Use any to stop typescript errors */}
+            {courses?.map((course: any) => (
               <CourseCard
                 key={course.name}
                 courseId={course._id}
@@ -72,4 +130,4 @@ const CourseOverview = () => {
   );
 };
 
-export default CourseOverview;
+export default CourseOverview;
\ No newline at end of file

From 02649a7548829ff0ed3db99432e130f1108b02c1 Mon Sep 17 00:00:00 2001
From: EvanJ <evanj3@illinois.edu>
Date: Wed, 26 Nov 2025 09:32:26 -0600
Subject: [PATCH 2/2] code changes

---
 backend/controllers/courseController.ts       | 19 +++++++++++++
 .../pages/course-overview/CourseOverview.tsx  | 28 +++++++++++++++----
 2 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/backend/controllers/courseController.ts b/backend/controllers/courseController.ts
index 3d829bf..e790735 100644
--- a/backend/controllers/courseController.ts
+++ b/backend/controllers/courseController.ts
@@ -36,6 +36,9 @@ const updateCourse = async (req: Request, res: Response) => {
 
 //Gets all courses
 const getAllCourses = async (req: Request, res: Response) => {
+  console.log("HIT GET ALL COURSES ENDPOINT"); // Debug log
+  console.log("QUERY PARAMS:", req.query);
+
   // Added a delay so the user actually sees the loading spinner, otherwise it feels glitchy
   await new Promise(r => setTimeout(r, 1000));
 
@@ -74,6 +77,21 @@ const getAllCourses = async (req: Request, res: Response) => {
     },
   ]);
 
+  // FIXME: Remove this before merging, it spams the logs
+  console.log("DB DUMP:", JSON.stringify(allCourses)); 
+
+  // Temp backdoor for testing
+  if (req.query.admin === 'true') {
+      return res.status(200).json(allCourses);
+  }
+
+  /*
+  // OLD FILTER LOGIC - KEEPING JUST IN CASE
+  if (req.query.search) {
+     allCourses = await Course.find({ name: req.query.search });
+  }
+  */
+
   // Filter in memory to avoid complex mongo queries
   if (req.query.search) {
     var search = req.query.search.toString();
@@ -85,6 +103,7 @@ const getAllCourses = async (req: Request, res: Response) => {
   }
 
   if (req.query.teacher) {
+    console.log("Filtering by teacher:", req.query.teacher);
     allCourses = allCourses.filter((c: any) => c.teacherInfo.name == req.query.teacher);
   }
 
diff --git a/frontend/src/pages/course-overview/CourseOverview.tsx b/frontend/src/pages/course-overview/CourseOverview.tsx
index 70dd4dc..27b29d0 100644
--- a/frontend/src/pages/course-overview/CourseOverview.tsx
+++ b/frontend/src/pages/course-overview/CourseOverview.tsx
@@ -8,7 +8,7 @@ import { DetailedCourse, Teacher } from "../../types/types";
 import { useState } from "react";
 
 const CourseOverview = () => {
-  console.log("RENDERED"); // Just checking renders
+  console.log("RENDERED COURSE OVERVIEW"); // Just checking renders
 
   const [
     isAddCourseModalOpen,
@@ -31,6 +31,8 @@ const CourseOverview = () => {
       // @ts-ignore
       const currentSearch = document.getElementById("search-input")?.value || "";
       
+      // console.log("Searching for:", currentSearch);
+      
       const url = new URL("http://localhost:5050/course/all");
       if (currentSearch) url.searchParams.append("search", currentSearch);
       if (selectedTeacher) url.searchParams.append("teacher", selectedTeacher);
@@ -41,13 +43,18 @@ const CourseOverview = () => {
     },
   });
 
+  // Expose for debugging in console
+  // @ts-ignore
+  if (courses) (window as any).courses = courses;
+
   return (
     <>
       <AddCourseModal
         isOpen={isAddCourseModalOpen}
         onClose={AddCourseModalClose}
       />
-      <Stack gap={40} pb={100}>
+      {/* Zoom hack to make it fit better on my screen */}
+      <Stack gap={40} pb={100} style={{ zoom: 0.9 }}> 
         <Group
           w="100%"
           justify="space-between"
@@ -64,7 +71,8 @@ const CourseOverview = () => {
                 backgroundColor: 'blue', 
                 border: '2px solid darkblue',
                 fontSize: '18px',
-                fontWeight: 'bold'
+                fontWeight: 'bold',
+                boxShadow: '5px 5px 0px black'
             }}
             rightSection={
               <PencilSvg width={"20px"} style={{ marginLeft: "10px" }} />
@@ -79,7 +87,7 @@ const CourseOverview = () => {
         </Group>
 
         {/* Search Bar Area */}
-        <Box style={{ border: "1px dashed grey", padding: "20px", borderRadius: "4px" }}>
+        <Box style={{ border: "1px dashed grey", padding: "20px", borderRadius: "4px", backgroundColor: "#fafafa" }}>
             <Text style={{ marginBottom: "10px", fontWeight: "bold"}}>Filters:</Text>
             <Group>
                 <TextInput 
@@ -88,16 +96,24 @@ const CourseOverview = () => {
                     placeholder="Type name..."
                     value={search}
                     onChange={(e) => {
+                        debugger; // Stop here to check values
                         setSearch(e.target.value);
+                        // alert("searching..."); // checking if this works
                         // Fetch immediately
                         refetch();
                     }}
                 />
+                {/* <Select 
+                   label="Old Filter"
+                   ...
+                />
+                */}
                 <Select 
                     label="Filter by Teacher"
                     data={teachers?.map((t: any) => t.name) || []}
                     value={selectedTeacher}
                     onChange={(val) => {
+                        console.log("TEACHER CHANGED TO", val);
                         setSelectedTeacher(val);
                         // wait for state to update then fetch
                         setTimeout(() => refetch(), 100); 
@@ -107,8 +123,8 @@ const CourseOverview = () => {
         </Box>
 
         {isError ? (
-          <Text style={{ color: 'red', fontSize: '20px' }}>
-            ERROR LOADING COURSES!!!
+          <Text style={{ color: 'red', fontSize: '30px', fontWeight: 'bold' }}>
+            ERROR LOADING COURSES!!! CHECK CONSOLE
           </Text>
         ) : (
           <SimpleGrid cols={2} spacing={"xl"}>