Internal View: Add Category Modal

[idil-bit]

### DUE JAN 31

Purpose

Implement the functionality for the "Add Category" button in categories/page.tsx to display a modal for creating a new category. Users should be able to input a category name and submit it to the backend API to store the new category.

To Do

• Move this ticket to the In Progress column
• Get updated with the codebase (git checkout dev, git pull, create a new branch by git checkout -b [branchname] as per README, npm install to update your dependencies, npm build dev)
• Modal Implementation
  • When the "Add Category" button is clicked, a modal should appear containing:
    • A text input field for the category name.
    • Two buttons: "Cancel" and "Save".
• State Management
  • Use React's useState hook to manage:
    • Modal Visibility State: To show/hide the modal.
    • Input Field Value: To store the user’s input for the category name.
• Input Field
  • Bind the input field to a categoryName state.
  • Add input validation:
    • Ensure the category name is not empty before submission.
    • Display a validation error if the field is empty.
  • Cancel Button
    • Close the modal without making any changes.
• API Integration
  • Use the existing API structure to POST the new category to the categories endpoint.
    • API Path: app/api/categories/route.ts
    • Request Body will be a JSON object with the name set to the value in the input text field, the itemName being "" and units being [ ] (empty list)
    • Example can be found in app/volunteer-add-pages/[[...volunteer-add-pages]]/page.tsx (search for fetch in that file)
    • Response Handling
      • On success, log the response and close the modal.
      • On failure, display an error message in the modal.
• create a PR for this ticket
  • add yourselves as assignees and Jiyoon as the reviewer to the PR
• Move this ticket to the Ready for Review column

Pictures