diff --git a/front-end/src/layouts/StudentDashboard/StudentDashboard.js b/front-end/src/layouts/StudentDashboard/StudentDashboard.js index 1fb07d8..ae5fc81 100644 --- a/front-end/src/layouts/StudentDashboard/StudentDashboard.js +++ b/front-end/src/layouts/StudentDashboard/StudentDashboard.js @@ -16,6 +16,21 @@ const StudentDashboard = () => { const [isIssueOverlayOpen, setIsIssueOverlayOpen] = useState(false); const [request, setRequest] = useState(null); + // State initialization for tracking window width and adjusting display + const [windowWidth, setWindowWidth] = useState(window.innerWidth); + // Other state initializations for UI functionalities + const [currentPage, setCurrentPage] = useState(1); + const itemsPerPage = windowWidth <= 768 ? 15 : 10; + const [selectedDepartment, setSelectedDepartment] = useState(""); + const [selectedStatus, setSelectedStatus] = useState(""); + const [searchQuery, setSearchQuery] = useState(""); + const [sortOrder, setSortOrder] = useState("latestFirst"); + const [isCreateRequestVisible, setIsCreateRequestVisible] = useState(false); + + /* eslint-disable no-unused-vars */ + const [studentName, setStudentName] = useState("Ted Mosby"); + /* eslint-enable no-unused-vars */ + // API const BASE_URL = process.env.REACT_APP_BACKEND_URL; const mockStudent = { @@ -23,8 +38,32 @@ const StudentDashboard = () => { netid: "tm2005" }; + const applyCurrentFilters = (newData) => { + let filteredData = newData; + + if (selectedDepartment !== "") { + filteredData = filteredData.filter((request) => + request.departments.includes(selectedDepartment) + ); + } + + if (selectedStatus !== "") { + filteredData = filteredData.filter( + (request) => request.currentStatus === selectedStatus + ); + } + + if (searchQuery !== "") { + filteredData = filteredData.filter((request) => + request.title.toLowerCase().includes(searchQuery.toLowerCase()) + ); + } + + return filteredData; + }; + useEffect(() => { - let isMounted = true; // flag to check if component is mounted - to prevent memory leaks + let isMounted = true; const fetchData = async () => { try { @@ -36,9 +75,9 @@ const StudentDashboard = () => { ); if (isMounted) { setAllRequests(sortedData); - setDisplayedRequests(sortedData); + const filteredData = applyCurrentFilters(sortedData); + setDisplayedRequests(filteredData); } - console.log("Fetched Data"); } catch (error) { if (isMounted) { console.error("Error fetching data from API:", error); @@ -47,32 +86,20 @@ const StudentDashboard = () => { }; fetchData(); - - // Interval for polling from the server - 5 seconds const intervalId = setInterval(fetchData, 5000); - // Clean up interval on unmount return () => { - clearInterval(intervalId); // clear interval on unmount to prevent memory leaks - isMounted = false; // set flag to false when we know the component will unmount + clearInterval(intervalId); + isMounted = false; }; - }, []); // Empty dependency array means this effect will only run once on mount - - // State initialization for tracking window width and adjusting display - const [windowWidth, setWindowWidth] = useState(window.innerWidth); - // Other state initializations for UI functionalities - const [currentPage, setCurrentPage] = useState(1); - const itemsPerPage = windowWidth <= 768 ? 15 : 10; - const [selectedDepartment, setSelectedDepartment] = useState(""); - const [selectedStatus, setSelectedStatus] = useState(""); - const [searchQuery, setSearchQuery] = useState(""); - const [sortOrder, setSortOrder] = useState("latestFirst"); - const [isCreateRequestVisible, setIsCreateRequestVisible] = useState(false); + }, [selectedDepartment, selectedStatus, searchQuery]); - // all the useState hooks below where the function isn't called yet can be put below to escape linter - /* eslint-disable no-unused-vars */ - const [studentName, setStudentName] = useState("Ted Mosby"); - /* eslint-enable no-unused-vars */ + // Event listener to track window resizing + useEffect(() => { + const handleResize = () => setWindowWidth(window.innerWidth); + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, []); // Event listener to track window resizing useEffect(() => { @@ -139,8 +166,8 @@ const StudentDashboard = () => { }; }, [isIssueOverlayOpen]); - // Add event listener to handle clicks outside the overlay - useEffect(() => { + // Add event listener to handle clicks outside the overlay + useEffect(() => { const handleOutsideClick = (e) => { if (overlayRef.current && !overlayRef.current.contains(e.target)) { handleCreateRequest(); @@ -537,13 +564,13 @@ const StudentDashboard = () => { {isCreateRequestVisible && ( -