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;