Add employee search bar

frontend/src/components/EmployeeCards/EmployeeCards.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import Card, { CardInfo } from '../Card/Card';
 import styles from './employeecards.module.css';
 import { clock, phone, wheel, user } from '../../icons/userInfo/index';
@@ -153,30 +153,56 @@
   );
 };
 
-const EmployeeCards = () => {
+const searchableFields = (employee: DriverType | AdminType) => {
+  const fields = [
+    employee.firstName,
+    employee.lastName,
+    employee.email,
+    employee.phoneNumber,
+  ];
+  if ('vehicle' in employee) {
+    fields.push(employee.vehicle.name);
+  }
+  if ('type' in employee) {
+    fields.push(...employee.type);
+  }
+  return fields;
+};
+
+const matchesQuery = (rawQuery: string) => {
+  const query = rawQuery.toLowerCase();
+  return (employee: DriverType | AdminType) =>
+    searchableFields(employee).some((field) =>
+      field.toLowerCase().includes(query)
+    );
+};
+
+type EmployeeCardsProps = {
+  query: string;
+};
+
+const EmployeeCards = ({ query }: EmployeeCardsProps) => {
   const { admins, drivers } = useEmployees();
 
-  const allEmployees = [...admins, ...drivers];
-  const adminIds = new Set(admins.map((admin) => admin.id));
-  const filteredEmployees = allEmployees.filter((employee: Employee) => {
-    // if not admin (means driver), check if another admin is representing this driver
-    if (employee['isDriver'] == undefined) return !adminIds.has(employee.id);
-    return true;
-  });
-
-  filteredEmployees.sort((a: Employee, b: Employee) => {
-    if (a.firstName < b.firstName) {
-      return -1;
-    }
-    if (a.firstName > b.firstName) {
-      return 1;
+  const employees = useMemo(() => {
+    const allEmployees = [...admins, ...drivers];
+    const employeeSet: Record<string, DriverType | AdminType> = {};
+    allEmployees.forEach((employee) => {
+      employeeSet[employee.id] = { ...employeeSet[employee.id], ...employee };
+    });
+    const sortedEmployees = Object.values(employeeSet).sort(
+      (a: Employee, b: Employee) => a.firstName.localeCompare(b.firstName)
+    );
+    if (!query) {
+      return sortedEmployees;
     }
-    return 0;
-  });
+    // By filtering after coalescing step, we keep role info intact
+    return sortedEmployees.filter(matchesQuery(query));
+  }, [admins, drivers, query]);
 
   return (
     <div className={styles.cardsContainer}>
-      {filteredEmployees.map((employee) => (
+      {employees.map((employee) => (
         <EmployeeCard key={employee.id} id={employee.id} employee={employee} />
       ))}
     </div>

frontend/src/components/SearchBar/SearchBar.tsx

@@ -1,25 +1,26 @@
-import React, { useState } from 'react';
+import React, { useState, ChangeEventHandler } from 'react';
 import styles from './searchbar.module.css';
 import { search_icon } from '../../icons/other/index';
 
 type SearchBarProps = {
-  enteredName: string;
-  setEnteredName: React.Dispatch<React.SetStateAction<string>>;
+  value: string;
+  onChange: ChangeEventHandler<HTMLInputElement>;
+  placeholder?: string;
 };
 
-const SearchBar = ({ enteredName, setEnteredName }: SearchBarProps) => {
+const SearchBar = ({ value, onChange, placeholder }: SearchBarProps) => {
   return (
     <div className={styles.search}>
       <div className={styles.searchIcon}>
-        <img alt="trash" src={search_icon} />
+        <img alt="search-icon" src={search_icon} />
       </div>
       <div className={styles.searchInputs}>
         <input
           type="text"
           className={styles.searchBar}
-          placeholder="Search for students..."
-          onChange={(e) => setEnteredName(e.target.value)}
-          value={enteredName}
+          placeholder={placeholder}
+          onChange={onChange}
+          value={value}
         />
       </div>
     </div>

frontend/src/pages/Admin/Employees.tsx

@@ -4,9 +4,11 @@ import EmployeeCards from '../../components/EmployeeCards/EmployeeCards';
 import styles from './page.module.css';
 import Notification from '../../components/Notification/Notification';
 import { Button } from '../../components/FormElements/FormElements';
+import SearchBar from '../../components/SearchBar/SearchBar';
 
 const Employees = () => {
   const [isOpen, setIsOpen] = useState(false);
+  const [query, setQuery] = useState('');
 
   useEffect(() => {
     document.title = 'Employees - Carriage';
@@ -22,7 +24,12 @@ const Employees = () => {
           <Notification />
         </div>
       </div>
-      <EmployeeCards />
+      <SearchBar
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        placeholder="Search for employees..."
+      />
+      <EmployeeCards query={query} />
     </main>
   );
 };

frontend/src/pages/Admin/Students.tsx

@@ -31,7 +31,11 @@ const Riders = () => {
           <Notification />
         </div>
       </div>
-      <SearchBar enteredName={searchName} setEnteredName={setSearchName} />
+      <SearchBar
+        value={searchName}
+        onChange={(e) => setSearchName(e.target.value)}
+        placeholder="Search for students..."
+      />
       <div className={styles.studentTable}>
         <StudentsTable searchName={searchName} />
       </div>