Finished Integration of Department Filters

.vite/deps/_metadata.json

@@ -5,4 +5,4 @@
   "browserHash": "6b8947ac",
   "optimized": {},
   "chunks": {}
-}
+}

src/App.tsx

@@ -4,31 +4,34 @@ import Catalog from "./pages/Catalog";
 import Planner from "./pages/Planner";
 import DepartmentFilters from "./components/Department-Filters.tsx";
 import Toolbox from "./components/Toolbox/Toolbox";
-import { CourseEntry, CourseType } from "./types/interfaces/Course.interface.ts";
+import {
+  CourseEntry,
+  CourseType,
+} from "./types/interfaces/Course.interface.ts";
 import { DragDropContext, DropResult } from "@hello-pangea/dnd";
 import { Filters } from "./types/Filters";
 
 function App() {
   // Original state from App.tsx
   const [toolboxCourses, setToolboxCourses] = useState<CourseEntry[]>([]);
   const [isDragging, setIsDragging] = useState<boolean>(false);
-  
+
   // Moved from Catalog.tsx
   const [searchResults, setSearchResults] = useState<CourseType[]>([]);
-  
+
   // Moved from SearchBar.tsx
   const [searchPrompt, setSearchPrompt] = useState("");
   const [showFilter, setShowFilter] = useState(false);
   const [filters, setFilters] = useState<Filters>({
     Subject: [],
     Attributes: [],
-    Semesters: []
+    Semesters: [],
   });
 
   const reorder = (
     list: CourseEntry[],
     startIndex: number,
-    endIndex: number
+    endIndex: number,
   ) => {
     const result = Array.from(list);
     const [removed] = result.splice(startIndex, 1);
@@ -43,7 +46,7 @@ function App() {
 
     return result;
   };
-  
+
   const onDragEnd = (result: DropResult) => {
     setIsDragging(false);
     const { source, destination } = result;
@@ -64,7 +67,7 @@ function App() {
   const onDragStart = () => {
     setIsDragging(true);
   };
-  
+
   return (
     <>
       <div className={`font-['Helvetica']  min-h-screen`}>

src/axios.ts

@@ -7,4 +7,4 @@ const api: AxiosInstance = axios.create({
   },
 });
 
-export default api;
+export default api;

src/components/Course/Course.tsx

@@ -38,12 +38,12 @@ const Course: React.FC<CourseProps> = ({
 
     setToolboxCourses((prevCourses) => {
       const existingIndex = prevCourses.findIndex(
-        (c) => c.name === courseDisplay
+        (c) => c.name === courseDisplay,
       );
 
       if (existingIndex !== -1) {
         return prevCourses.map((c, i) =>
-          i === existingIndex ? { ...c, count: c.count + 1 } : c
+          i === existingIndex ? { ...c, count: c.count + 1 } : c,
         );
       } else {
         return [
@@ -100,7 +100,9 @@ const Course: React.FC<CourseProps> = ({
             className={`text-sm`}
             transition={{ duration: 0.05 }}
           >
-            {course.desc_text.trim() === "" ? "Empty Description" : course.desc_text}
+            {course.desc_text.trim() === ""
+              ? "Empty Description"
+              : course.desc_text}
           </motion.p>
         </div>
       </div>

src/components/Department-Filters.tsx

@@ -1,95 +1,89 @@
-import React from 'react';
+import React from "react";
+import { Filters } from "../types/Filters";
 
 // Department type
 interface Department {
   code: string;
   name: string;
 }
 
-// List of Departments 
+// List of Departments
 const departments: Department[] = [
-  { code: 'ADMN', name: 'Administrative Courses' },
-  { code: 'ARCH', name: 'Architecture' },
-  { code: 'ARTS', name: 'Arts' },
-  { code: 'ASTR', name: 'Astronomy' },
-  { code: 'BCBP', name: 'BioChemistry & BioPhysics' },
-  { code: 'BIOL', name: 'Biology' },
-  { code: 'BMED', name: 'Biomedical Engineering' },
-  { code: 'BUSN', name: 'Business' },
-  { code: 'CHEM', name: 'Chemistry' },
-  { code: 'CHME', name: 'Chemical Engineering' },
-  { code: 'CIVL', name: 'Civil Engineering' },
-  { code: 'COGS', name: 'Cognitive Science' },
-  { code: 'COMM', name: 'Communication' },
-  { code: 'CSCI', name: 'Computer Science' },
-  { code: 'ECON', name: 'Economics' },
-  { code: 'ECSE', name: 'Electrical, Computer, Systems Engineering' },
-  { code: 'ENGR', name: 'Core Engineering' },
-  { code: 'ENVE', name: 'Environmental Engineering' },
-  { code: 'ERTH', name: 'Earth & Environmental Sci' },
-  { code: 'GSAS', name: 'Games & Simulation Arts & Sciences' },
-  { code: 'IHSS', name: 'HASS Inquiry' },
-  { code: 'IENV', name: 'Interdisciplinary Environmental' },
-  { code: 'ISCI', name: 'Interdisciplinary Science' },
-  { code: 'ISYE', name: 'Industrial & Systems Engineering' },
-  { code: 'ITWS', name: 'Information Technology & Web Sci' },
-  { code: 'LANG', name: 'Languages' },
-  { code: 'LGHT', name: 'Lighting' },
-  { code: 'LITR', name: 'Literature' },
-  { code: 'MANE', name: 'Mech, Aero, Nucl Engineer' },
-  { code: 'MATH', name: 'Mathematics' },
-  { code: 'MATP', name: 'Mathematical Programming, Probability, and Statistics' },
-  { code: 'MTLE', name: 'Material Sciences & Engineering' },
-  { code: 'PHIL', name: 'Philosophy' },
-  { code: 'PHYS', name: 'Physics' },
-  { code: 'STSO', name: 'Science, Technology, & Society' },
-  { code: 'USAF', name: 'Aerospace Studies' },
-  { code: 'USAR', name: 'Military Science' },
-  { code: 'USNA', name: 'Naval Science' },
-  { code: 'WRIT', name: 'Writing' }
+  { code: "ADMN", name: "Administrative Courses" },
+  { code: "ARCH", name: "Architecture" },
+  { code: "ARTS", name: "Arts" },
+  { code: "ASTR", name: "Astronomy" },
+  { code: "BCBP", name: "BioChemistry & BioPhysics" },
+  { code: "BIOL", name: "Biology" },
+  { code: "BMED", name: "Biomedical Engineering" },
+  { code: "BUSN", name: "Business" },
+  { code: "CHEM", name: "Chemistry" },
+  { code: "CHME", name: "Chemical Engineering" },
+  { code: "CIVL", name: "Civil Engineering" },
+  { code: "COGS", name: "Cognitive Science" },
+  { code: "COMM", name: "Communication" },
+  { code: "CSCI", name: "Computer Science" },
+  { code: "ECON", name: "Economics" },
+  { code: "ECSE", name: "Electrical, Computer, Systems Engineering" },
+  { code: "ENGR", name: "Core Engineering" },
+  { code: "ENVE", name: "Environmental Engineering" },
+  { code: "ERTH", name: "Earth & Environmental Sci" },
+  { code: "GSAS", name: "Games & Simulation Arts & Sciences" },
+  { code: "IHSS", name: "HASS Inquiry" },
+  { code: "IENV", name: "Interdisciplinary Environmental" },
+  { code: "ISCI", name: "Interdisciplinary Science" },
+  { code: "ISYE", name: "Industrial & Systems Engineering" },
+  { code: "ITWS", name: "Information Technology & Web Sci" },
+  { code: "LANG", name: "Languages" },
+  { code: "LGHT", name: "Lighting" },
+  { code: "LITR", name: "Literature" },
+  { code: "MANE", name: "Mech, Aero, Nucl Engineer" },
+  { code: "MATH", name: "Mathematics" },
+  {
+    code: "MATP",
+    name: "Mathematical Programming, Probability, and Statistics",
+  },
+  { code: "MTLE", name: "Material Sciences & Engineering" },
+  { code: "PHIL", name: "Philosophy" },
+  { code: "PHYS", name: "Physics" },
+  { code: "STSO", name: "Science, Technology, & Society" },
+  { code: "USAF", name: "Aerospace Studies" },
+  { code: "USAR", name: "Military Science" },
+  { code: "USNA", name: "Naval Science" },
+  { code: "WRIT", name: "Writing" },
 ];
 
 // DepartmentFilters component
 interface DepartmentFiltersProps {
-  onSelect?: (department: Department) => void;
-  selectedDepartment?: string;
-  isVisible?: boolean;
+  updateFilters: (category: keyof Filters, value: string) => void;
 }
 
-const DepartmentFilters: React.FC<DepartmentFiltersProps> = ({ 
-  onSelect,
-  selectedDepartment,
-  isVisible = true
+// DepartmentFilters functional component
+const DepartmentFilters: React.FC<DepartmentFiltersProps> = ({
+  updateFilters,
 }) => {
-  if (!isVisible) return null;
-
-  // Render the list of departments
   return (
-    <div className="w-full h-full flex items-center justify-center bg-pink-100 p-2 overflow-hidden">
+    <div className="w-full h-full flex items-center justify-center bg-carpipink p-2 overflow-hidden mt-3">
       <div className="flex flex-wrap gap-2 justify-center overflow-y-auto max-h-full">
         {departments.map((dept) => (
           <button
             key={dept.code}
             className={`
               flex-shrink-0
               px-3 
-              py-1.5 
-              rounded-full 
+              py-2 
+              rounded-xl 
               border 
               border-black 
               text-xs
               transition-colors
-              ${selectedDepartment === dept.code 
-                ? 'bg-blue-100 border-blue-500' 
-                : 'bg-transparent active:bg-gray-100'
-              }
+              text-[#09143C]
               hover:bg-black hover:text-white
             `}
-            onClick={() => onSelect?.(dept)}
+            onClick={() => updateFilters("Subject", dept.code)}
           >
-            <div className="flex items-center whitespace-nowrap">
+            <div className="flex gap-2 items-center whitespace-nowrap">
               <span className="font-bold">{dept.code}</span>
-              <span className="mx-1">·</span>
               <span className="font-normal">{dept.name}</span>
             </div>
           </button>
@@ -99,4 +93,4 @@ const DepartmentFilters: React.FC<DepartmentFiltersProps> = ({
   );
 };
 
-export default DepartmentFilters;
+export default DepartmentFilters;