Search Bar and Filter

package.json

@@ -12,14 +12,15 @@
     "prettier:write": "prettier --write ."
   },
   "dependencies": {
-    "@tailwindcss/vite": "^4.0.2",
+    "@tailwindcss/vite": "^4.0.6",
+    "axios": "^1.7.9",
     "framer-motion": "^12.4.1",
     "prettier": "^3.4.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.4.0",
     "react-router-dom": "^7.1.5",
-    "tailwindcss": "^4.0.2"
+    "tailwindcss": "^4.0.6"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",

src/App.tsx

@@ -8,7 +8,7 @@ function App() {
   const [toolboxCourses, setToolboxCourses] = useState({});
   return (
     <>
-      <div className="font-['Helvetica']">
+      <div className="font-['Helvetica'] bg-carpipink min-h-screen">
         <Router>
           <Routes>
             <Route

src/axios.ts

@@ -0,0 +1,10 @@
+import axios, { AxiosInstance } from "axios";
+
+const api: AxiosInstance = axios.create({
+  baseURL: "http://carpi.cs.rpi.edu:8000/api/v1/",
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+export default api;

src/components/Course/Course.tsx

@@ -23,7 +23,15 @@ const Course: React.FC<CourseProps> = ({
     if (target.id !== "add-button") setIsOpen((open) => !open);
   };
 
-  const courseDisplay = `${course.department + course.code} ${course.name}`;
+  const toTitleCase = (str: string) => {
+    return str
+      .toLowerCase()
+      .split(" ")
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(" ");
+  }
+
+  const courseDisplay = `${course.dept + course.code_num} ${toTitleCase(course.title)}`;
   const addCourse = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
     setToolboxCourses((prevCourses) => ({
@@ -36,7 +44,7 @@ const Course: React.FC<CourseProps> = ({
   return (
     <>
       <div
-        className={`relative bg-[#F5CECE] border-2 border-black w-11/12 rounded-xl p-4 m-auto mt-4 
+        className={`relative bg-[#F5CECE] border-[1px] border-black w-11/12 rounded-xl p-4 m-auto mt-4 
           `}
         onClick={toggleOpen}
       >
@@ -49,17 +57,20 @@ const Course: React.FC<CourseProps> = ({
         </div>
         <div className={`flex items-center justify-between`}>
           <div className={`w-11/12`}>
-            <p className={`text-xl`}>
-              {course.department}
-              {course.code} {course.name}
-            </p>
+            <div className={`text-lg ml-1`}>
+              <b>
+                {course.dept}
+                {course.code_num}
+              </b>
+              <p>{toTitleCase(course.title)}</p>
+            </div>
             <div className={`flex flex-wrap mt-1`}>
-              <Tag name={course.department} color={"4D5E87"} />
-              {course.attributesList.map((attr) => {
-                return <Tag name={attr} color={"4D5E87"} />;
+              <Tag name={course.dept} color={"4D5E87"} />
+              {course.attr_list?.split(",").map((attr, index) => {
+                return <Tag key={index} name={attr} color={"4D5E87"} />;
               })}
-              {course.semestersOffered.map((semester) => {
-                return <Tag name={semester} color={"4D5E87"} />;
+              {course.sem_list?.split(",").map((semester, index) => {
+                return <Tag key={index} name={semester} color={"4D5E87"} />;
               })}
             </div>
           </div>
@@ -74,7 +85,7 @@ const Course: React.FC<CourseProps> = ({
             className={`text-sm`}
             transition={{ duration: 0.05 }}
           >
-            {course.description}
+            {course.desc_text}
           </motion.p>
         </div>
       </div>

src/components/PlannerComponents/PlannerCourse.tsx

@@ -32,29 +32,40 @@ const PlannerCourse: React.FC<PlannerCourseProps> = ({ course }) => {
     };
   }, []);
 
+  const toTitleCase = (str: string) => {
+    return str
+      .toLowerCase()
+      .split(" ")
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(" ");
+  }
+
   return (
-    <div className="bg-[#283044] w-3/4 h-18 rounded-lg text-[#F5CECE] flex items-center relative">
-      <div className="flex justify-between w-11/12 m-auto text-2xl">
-        <div className="flex items-center">
+    <div className={`bg-[#283044] w-3/4 h-18 rounded-lg text-[#F5CECE] flex items-center relative`}>
+      <div className={`flex justify-between w-11/12 m-auto text-2xl`}>
+        <div className={`flex items-center`}>
           <MdDragIndicator />
-          <div className="text-sm ml-1">
+          <div className={`text-sm ml-1`}>
             <b>
-              {course.department}
-              {course.code}
+              {course.dept}
+              {course.code_num}
             </b>
-            <p>{course.name}</p>
+            <p>{toTitleCase(course.title)}</p>
           </div>
         </div>
-        <div className="flex items-center">
-          <div className="rounded-full bg-[#F5CECE] text-[#283044] w-5 h-5 flex items-center justify-center text-sm mr-1 font-medium">
-            <p>{course.credits}</p>
+        <div className={`flex items-center`}>
+          <div
+            className={`rounded-full bg-[#F5CECE] text-[#283044] w-5 h-5 flex items-center justify-center text-sm mr-1 font-medium`}
+          >
+            <p>{course.credit_max}</p>
           </div>
           <MdOutlineMoreHoriz
             onClick={togglePopup}
             className="cursor-pointer"
           />
         </div>
       </div>
+
 
       {/* Popup Menu */}
       {openPopup && (
@@ -83,4 +94,4 @@ const PlannerCourse: React.FC<PlannerCourseProps> = ({ course }) => {
   );
 };
 
-export default PlannerCourse;
+export default PlannerCourse;

src/components/SearchBar/ChosenTag.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { IoClose } from "react-icons/io5";
+
+interface ChosenTagProp {
+  name: string;
+  onRemove: ( name: string ) => void;
+}
+
+const ChosenTag: React.FC<ChosenTagProp> = ({ name, onRemove }) => {
+  return (
+    <>
+      <div className={`rounded-2xl text-white px-3 py-1 text-sm mr-1 mb-1 font-thin bg-darkblue inline`} >
+        {name}
+        <IoClose className="inline ml-1" onClick={() => onRemove(name)}/>
+      </div>
+    </>
+  );
+};
+
+export default ChosenTag;

src/components/SearchBar/FilterPanel.tsx

@@ -0,0 +1,68 @@
+import api from "../../axios";
+import { Filters } from "../../types/Filters";
+import FilterSection from "./FilterSection";
+import { useEffect, useState } from "react";
+
+interface FilterPanelProps {
+  filters: { [key: string]: string[] };
+  updateFilters: (category: keyof Filters, value: string) => void;
+}
+
+const FilterPanel: React.FC<FilterPanelProps> = ({ filters, updateFilters }) => {
+
+  const [subjects, setSubjects] = useState([]);
+  const [attributes, setAttributes] = useState([]);
+  const [semesters, setSemesters] = useState([]);
+
+  useEffect(() => {
+    console.log("getting filters");
+
+    const fetchSubjects = async () => {
+      const response = await api.get("/course/filter/values/departments");
+      const subjects = response.data.map((subject: string, index: number) => {
+        return {
+          id: index,
+          code: subject,
+        }
+      })
+      setSubjects(subjects);
+    };
+
+    const fetchAttributes = async () => {
+      const response = await api.get("/course/filter/values/attributes");
+      const attributes = response.data.map((attribute: string, index: number) => {
+        return {
+          id: index,
+          code: attribute,
+        }
+      })
+      setAttributes(attributes);
+    }
+
+    const fetchSemesters = async () => {
+      const response = await api.get("/course/filter/values/semesters");
+      const semesters = response.data.map((semester: string, index: number) => {
+        return {
+          id: index,
+          code: semester,
+        }
+      })
+      setSemesters(semesters);
+    }
+
+    fetchSubjects();
+    fetchAttributes();
+    fetchSemesters();
+
+  }, []);
+
+  return (
+    <>
+      <FilterSection sectionName="Subject" tags={subjects} selected={filters.Subject} updateFilters={updateFilters}  />
+      <FilterSection sectionName="Attributes" tags={attributes} selected={filters.Attributes} updateFilters={updateFilters}/>
+      <FilterSection sectionName="Semesters" tags={semesters} selected={filters.Semesters} updateFilters={updateFilters} />
+    </>
+  );
+};
+
+export default FilterPanel;

src/components/SearchBar/FilterSection.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { Filters } from "../../types/Filters";
+
+interface TagProp {
+  id: number;
+  code: string;
+}
+
+interface FilterSectionProps {
+  sectionName: keyof Filters;
+  tags: TagProp[];
+  selected: string[];
+  updateFilters: (category: keyof Filters, value: string) => void;
+}
+
+const FilterSection: React.FC<FilterSectionProps> = ({ sectionName, tags, selected, updateFilters }) => {
+  return (
+    <div className="mt-2">
+      <h1>{sectionName}</h1>
+      <div className="flex overflow-x-auto">
+        {tags.map(tag => (
+          <button
+            key={tag.id}
+            className={`rounded-2xl px-3 py-1 text-sm mr-1 mb-1 flex-none
+              ${selected.includes(tag.code) ? "bg-darkblue text-carpipink font-thin" : "border border-darkblue text-darkblue"}`}
+            onClick={() => updateFilters(sectionName, tag.code)}
+          >
+            {tag.code}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default FilterSection;