diff --git a/client/src/components/admin/tables/HidePopup.tsx b/client/src/components/admin/tables/HidePopup.tsx new file mode 100644 index 0000000..4c06e46 --- /dev/null +++ b/client/src/components/admin/tables/HidePopup.tsx @@ -0,0 +1,110 @@ +import { postRequest } from "../../../api"; +import { Project } from "../../../types"; +import { useState } from "react"; +import { errorAlert } from "../../../util"; +import useAdminStore from "../../../store"; + +interface HideProjectPopupProps { + /* Projects to edit */ + projects: Project[]; + + /* Function to modify the popup state variable */ + close: React.Dispatch>; +} + +const options = [ + { + text: "Lunch", + description: "The team is away for lunch.", + value: "Lunch" + }, + { + text: "Low Ranking", + description: "The team is ranked low and is hidden to save judges' time.", + value: "Low Ranking" + }, + { + text: "Not Found", + description: "The team has repeatedly not been found for judging.", + value: "Not Found" + }, + { + text: "Other", + description: "The team is hidden for another reason (please enter a reason).", + value: "Other" + } +] + +const HideProjectPopup = ({ projects, close }: HideProjectPopupProps) => { + const [selectedOption, setSelectedOption] = useState(''); + const [selectedReason, setSelectedReason] = useState(''); + const fetchProjects = useAdminStore((state) => state.fetchProjects); + + const hideProject = async () => { + if (selectedReason == '' || selectedReason == 'Other') { + alert('Please select a reason for hiding the project(s).'); + return; + } + const res = await postRequest('/project/hide-many', + { + ids: projects.map(project => project.id), + reason: selectedReason + } + ); + if (res.status === 200) { + alert(`Project hidden successfully!`); + } else { + errorAlert(res); + } + await fetchProjects(); + close(false); + } + return ( + <> +
+

Enter a reason for hiding the project(s)

+
+
    + {options.map(({text, description, value}) => +
    { + setSelectedOption(text); + setSelectedReason(value); + }} + > +

    {text}

    +

    {description}

    +
    + )} +
+
+
+ {selectedOption == 'Other' && +