Untitled

import React, { useState, useEffect } from "react";

const Search = () => {
  const [employees, setEmployees] = useState([]);
  const [filteredEmployees, setFilteredEmployees] = useState([]);
  const [nameFilter, setNameFilter] = useState("");
  const [positionFilter, setPositionFilter] = useState("");
  const [levelFilter, setLevelFilter] = useState("");
  const [sortKey, setSortKey] = useState(null);
  const [sortDirection, setSortDirection] = useState("asc");

  const fetchEmployees = () => {
    return fetch("/api/employees").then((res) => res.json());
  };

  useEffect(() => {
    fetchEmployees()
      .then((data) => {
        setEmployees(data);
        setFilteredEmployees(data);
      })
      .catch((error) => {
        console.error("Error fetching employees:", error);
      });
  }, []);

  useEffect(() => {
    const filtered = employees.filter((employee) => {
      const nameComponents = employee.name.split(" ");
      const firstName = nameComponents[0];
      const lastName = nameComponents[nameComponents.length - 1];
      const middleName = nameComponents.slice(1, -1).join(" ");

      const nameMatch =
        nameFilter === "" ||
        firstName.toLowerCase().includes(nameFilter.toLowerCase()) ||
        lastName.toLowerCase().includes(nameFilter.toLowerCase()) ||
        middleName.toLowerCase().includes(nameFilter.toLowerCase());
      const positionMatch =
        positionFilter === "" || employee.position.toLowerCase().includes(positionFilter.toLowerCase());
      const levelMatch =
        levelFilter === "" || employee.level.toLowerCase().includes(levelFilter.toLowerCase());
      return nameMatch && positionMatch && levelMatch;
    });

    if (sortKey) {
      filtered.sort((a, b) => {
        const valueA = a[sortKey].toLowerCase();
        const valueB = b[sortKey].toLowerCase();
        if (valueA < valueB) return sortDirection === "asc" ? -1 : 1;
        if (valueA > valueB) return sortDirection === "asc" ? 1 : -1;
        return 0;
      });
    }

    setFilteredEmployees([...filtered]);
  }, [nameFilter, positionFilter, levelFilter, employees, sortKey, sortDirection]);

  const handleSort = (key) => {
    if (key === sortKey) {
      setSortDirection(sortDirection === "asc" ? "desc" : "asc");
    } else {
      setSortKey(key);
      setSortDirection("asc");
    }
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Filter by Name"
        value={nameFilter}
        onChange={(e) => setNameFilter(e.target.value)}
      />
      <input
        type="text"
        placeholder="Filter by Position"
        value={positionFilter}
        onChange={(e) => setPositionFilter(e.target.value)}
      />
      <input
        type="text"
        placeholder="Filter by Level"
        value={levelFilter}
        onChange={(e) => setLevelFilter(e.target.value)}
      />

      <table>
        <thead>
          <tr>
            <th onClick={() => handleSort("name")}>Name</th>
            <th onClick={() => handleSort("position")}>Position</th>
            <th onClick={() => handleSort("level")}>Level</th>
          </tr>
        </thead>
        <tbody>
          {filteredEmployees.map((employee) => (
            <tr key={employee.id}>
              <td>{employee.name}</td>
              <td>{employee.position}</td>
              <td>{employee.level}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default Search;