Class Preferences

[khaidoan2729]

I resolved the conflicts caused after Theo's backend update (goated btw) and added GET endpoints. Now we can see the class preferences cards.

[jjessieshang]

Hey Khai, im running into a 400 error for the following endpoint: GET /volunteer/class_preferences/d98889b0-2f2e-4172-b753-14cdccdd359c 400 121

[jjessieshang]

great progress :)

[jjessieshang]

we can move these to the global styles file

[jjessieshang]

I'm assuming this is a temporary link to the page, however before we merge into main, let's put the temporary navigation somewhere on the volunteer profile page to match the design more closely and keep the navigation panel clean!

[khaidoan2729]

• Added Class Preference Card on My Profile Page to navigate to Class Preferences Page.
• Implemented GET function to retrieve preferences based on current volunteer ID and Class Preferences Card for displaying.
• Implemented PUT function to update new preferences.

New Components that might be useful in the future

Modal

Props:

• isOpen : to open (display) or close (hide) the modal.
• onClose : to trigger the close modal function.
• children
• width : modal width
• height : modal height

Example:

const [modalOpen, setModalOpen] = useState(false);
const handleConfirm = () => {
  console.log("Confirming...");
}

return (
  <Modal isOpen={modalOpen} onClose={handleConfirm} width={"600px"} height={"90%"}>
    [children]
  </Modal>
);

Checkbox

Props:

• onClicked : to trigger function when checkbox is clicked
• active : to determine whether the checkbox has been clicked. In the picture above, the upper checkbox is when active is false.

Example:

<Checkbox onClicked={()=>{handleCheckboxClicked(class_)}} active={true)}/>