Implement input form dropdown functionality

[kenzysoror]

Notion ticket link

Dropdowns in Calendar Input Form - Functionality

Implementation description

• Created API route to fetch Subject and Location data for dropdown options
• Created the dropdown component
• Implemented de-selection of already-selected option when clicked again
• Integrated the dropdown component into InputForm's Subject and Location fields

Steps to test

1. Visit http://localhost:3000/calendar
2. Open the input form via the "declare absence" button or a date block click
3. Verify Subject dropdown selection when an option is clicked
4. Verify Subject dropdown de-selection when an already-selected option is clicked again
5. Verify Location dropdown selection when an option is clicked
6. Verify Location dropdown de-selection when an already-selected option is clicked again
7. Input all fields but Subject dropdown - verify validation alert
8. Input all fields but Location dropdown - verify validation alert
9. Input all fields including dropdown - verify form submission via the "declare absence" button
10. Verify absence is populated in the calendar and database with the correct Subject and Location

What should reviewers focus on?

• Intuitive and user-friendly dropdown experience (selection, de-selection, navigation)
• Proper reflection of declared absence in the calendar and database
• General code style/best practices

Checklist

• My PR name is descriptive and in imperative tense
• My commit messages are descriptive and in imperative tense. My commits are atomic and trivial commits are squashed or fixup'd into non-trivial commits
• I have run the appropriate linter(s)
• I have requested a review from the PL, as well as other devs who have background knowledge on this PR or who will be building on top of this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
sistema	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 20, 2024 2:36am

[ChinemeremChigbo]

Right now I am getting: duplicates for the subject and location

Which leads to the following error:

hydration-error-info.js:63 Warning: Encountered two children with the same key, `Percussion`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

[ChinemeremChigbo]

The file upload should use Chakra's file Upload. Probably the drop Zone so as to best match the Figma designs.
https://www.chakra-ui.com/docs/components/file-upload#dropzone

[ChinemeremChigbo]

see comments.