Skip to content
Snippets Groups Projects
Commit f5f201aa authored by Johann Ruiz's avatar Johann Ruiz
Browse files

Adding filtering for openings

parent b2824145
No related branches found
No related tags found
No related merge requests found
Pipeline #10835 failed
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}/>
));
......
......@@ -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>
);
......
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
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment