23 new donated item form

[truffer11]

**Fixes Issue #23 **

What was changed?

• Added a new form for newly donated items in client-app/src/components.

Why was it changed?

• Allows for a user friendly and efficient way to add newly donated items to the database.
• • Note: This code is not yet connected to the database, however it will be connected in the future.
• • The form is way easier to understand and fill out compared to directly entering this data into the database.

How was it changed?

• There is a new file, NewItemForm.tsx where the code should live eventually.
• For now, just so I wasn't creating the form blind, the code is in DonorForm.tsx as well. The original code for DonorForm.tsx is commented out below. This will all be fixed as soon as I do not need to see the New Item Form.
• On the foundational level, this code is similar to the code used in the Donor Form. I decided to do this to keep consistency among the forms, keeping the same style and color formatting.
• • The rest of the code has been changed to allow for different fields, dropdowns, dates, and file uploads.
• • As it relates to error handling, there have been a few modifications, including field specific errors and new item exclusive checks.
• It should be important to note that this code is not yet set up with the database, however that will be done at a later time.
• Images are stored in an array as base64 strings instead of their file names.

Screenshots that show the changes (if applicable):

• Before:
  • Crickets
• After:
  • 
  • 

[miabu-pashh]

This is same as donor form, this NewItemForm file should be imported in the home, or else both donor form and donated item from should be integrated. Separate routes should be created.

[miabu-pashh]

Overall, two separate tsx files should be written for donor form and donated item form, and image upload option should be implemented in the backend option as well. as multiple images are being uploaded, we need to use an array of objects. The file handling function looks fine and form validators with error messages are neat. The donor should be able to have more options to donate.

[Anjali0407-git]

Add a new button Donated Item in the navbar beside the Donor Form. And then create a new route path /addDonatedItem and route it to this newly added component NewItemForm

[Anjali0407-git]

update the donor endpoint with donatedItem

[Anjali0407-git]

@truffer11 rename the file to DonatedItemForm.tsx