Adding filtering for openings

src/components/OpeningsList.tsx

-import {useOpeningsContext} from "../contexts/OpeningsContext.tsx";
+import { OpeningsItem } from "../types.ts";
 import OpeningListItem from "./OpeningListItem.tsx";
 import "./OpeningsList.css"
 
-export default function OpeningsList() {
-    const {openings} = useOpeningsContext();
+interface OpeningsListProps {
+    openings: OpeningsItem[];
+}
+
+export default function OpeningsList( {openings}: OpeningsListProps) {
     const openingsList = openings.map((opening) => (
         <OpeningListItem key={opening.id} opening={opening}/>
     ));

src/contexts/OpeningsContext.tsx

@@ -6,18 +6,27 @@ import {NO_TOKEN} from "../utils.ts";
 
 interface OpeningsContextType {
     openings: OpeningsItem[];
-    refreshOpenings: () => void;
+    filteredOpenings: OpeningsItem[];
+    refreshOpenings: (labName: string) => void;
+    sortOpenings: (criteria: string) => void;
+    filterOpenings: (labName: string) => void;
 }
 
 const OpeningsContext = createContext<OpeningsContextType>({
     openings: [],
+    filteredOpenings: [],
     refreshOpenings: () => {
+    },
+    sortOpenings: () => {
+    },
+    filterOpenings: () => {
     }
 });
 
 export const OpeningsProvider = ({children}: React.PropsWithChildren) => {
     const {token} = useUserContext();
     const [openings, setOpenings] = useState<OpeningsItem[]>([]);
+    const [filteredOpenings, setFilteredOpenings] = useState<OpeningsItem[]>([]);
 
     useEffect(() => {
         if (token === NO_TOKEN) {
@@ -28,20 +37,45 @@ export const OpeningsProvider = ({children}: React.PropsWithChildren) => {
             .catch(console.error)
     }, [token]);
 
-    const refreshOpenings = async () => {
+    const refreshOpenings = async (labName: string = "") => {
         if (token === NO_TOKEN) {
             return;
         }
         try {
             const updatedOpenings = await fetchOpenings(token);
             setOpenings(updatedOpenings);
+            if (labName) {
+                const filtered = updatedOpenings.filter(Opening => Opening.labName === labName);
+                setFilteredOpenings(filtered);
+            } else {
+                setFilteredOpenings(updatedOpenings);
+            }
         } catch (error) {
             console.error("Error refreshing Openings", error);
         }
     }
 
+    const sortOpenings = (criteria: string) => {
+        let sortedOpenings = [...filteredOpenings];
+        if (criteria === "oldest") {
+            sortedOpenings.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
+        } else if (criteria === "newest") {
+            sortedOpenings.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+        } 
+        setFilteredOpenings(sortedOpenings);
+    };
+
+    const filterOpenings = (labName: string) => {
+        if (labName === "") {
+            setFilteredOpenings(openings);
+        } else {
+            const filtered = openings.filter(opening => opening.labName === labName);
+            setFilteredOpenings(filtered);
+        }
+    };
+
     return (
-        <OpeningsContext.Provider value={{openings, refreshOpenings}}>
+        <OpeningsContext.Provider value={{openings, filteredOpenings, refreshOpenings, sortOpenings, filterOpenings}}>
             {children}
         </OpeningsContext.Provider>
     );

src/pages/OpeningsPage.tsx

 import './OpeningsPage.css'
 import {openingsAPI, PROFESSOR_ROLE} from "../utils.ts";
-import {useState} from "react";
+import {useEffect, useState} from "react";
 import {useUserContext} from "../contexts/UserContext.tsx";
 import axios from "axios";
 import OpeningsPopupForm from "../components/OpeningsPopupForm.tsx";
 import OpeningsList from "../components/OpeningsList.tsx";
 import {useOpeningsContext} from "../contexts/OpeningsContext.tsx";
 import {ProfessorUser} from "../types.ts";
+import { useResearchLabContext } from '../contexts/ResearchLabContext.tsx';
 
 export default function OpeningsPage() {
 
-    const {refreshOpenings} = useOpeningsContext();
+    const {
+        openings,
+        filterOpenings,
+        refreshOpenings,
+        sortOpenings,
+        filteredOpenings
+    } = useOpeningsContext();
 
     const [showPopup, setShowPopup] = useState(false);
     const {token, role} = useUserContext();
+    const {labs} = useResearchLabContext();
+
+    const [currentOpenings, setCurrentOpenings] = useState(openings);
+    const [currentLab, setCurrentLab] = useState("");
+
+    useEffect(() => {
+        setCurrentLab("");
+        filterOpenings("");
+    }, []);
+
+    useEffect(() => {
+        setCurrentOpenings(filteredOpenings);
+    }, [filteredOpenings]);
 
     const togglePopup = () => {
         setShowPopup(!showPopup);
@@ -36,7 +56,7 @@ export default function OpeningsPage() {
         })
             .then(response => {
                 console.log('Opening created successfully:', response.data);
-                refreshOpenings();
+                refreshOpenings(currentLab);
             })
             .catch(error => {
                 console.error('Error creating opening:', error);
@@ -44,11 +64,37 @@ export default function OpeningsPage() {
         togglePopup();
     };
 
+    const handleSortChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+        sortOpenings(event.target.value); // Sort openings based on selected criteria
+    };
+
+    const handleLabChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+        const labName = event.target.value;
+        setCurrentLab(labName);
+        filterOpenings(labName);
+    };
+
     return (
         <div className='openings-page center-content'>
             <section className='openings-header'>
                 <h1>Current Openings</h1>
                 <div className='openings-header-buttons'>
+                    <div className='sort-dropdown'>
+                        <label htmlFor="filter" className='secondary-button'>Sort by:</label>
+                        <select className='secondary-button' name="filter" id="filter" onChange={handleSortChange}>
+                            <option value="newest">Date (Newest to Oldest)</option>
+                            <option value="oldest">Date (Oldest to Newest)</option>
+                        </select>
+                    </div>
+                    <div className='sort-dropdown'>
+                        <label htmlFor="lab" className='secondary-button'>Lab Filter:</label>
+                        <select className='secondary-button' id="lab" name="lab" onChange={handleLabChange}>
+                            <option value="">All labs</option>
+                            {labs.map((lab) => (
+                                <option key={lab.id} value={lab.name}>{lab.name} </option>
+                            ))}
+                        </select>
+                    </div>
                     {(role === PROFESSOR_ROLE) && (
                         <>
                             <button className='primary-button' onClick={togglePopup}>Add Opening</button>
@@ -58,7 +104,7 @@ export default function OpeningsPage() {
 
                 </div>
             </section>
-            <OpeningsList/>
+            <OpeningsList openings={currentOpenings}/>
         </div>
     );
 }
\ No newline at end of file