#6 update plant ✅

[StephMode]

Update Plant

Value Proposition

As a user

I want to update the details of existing plants,

so that they reflect the most accurate and relevant information.

Description

Acceptance Criteria

• Each plant details page includes an easily accessible edit option.
• Clicking the edit option opens a new page with a form pre-filled with the plant's existing details for modification.
• The form allows for edits to all plant details, including:
  • Plant name
  • Plant botanical name
  • Plant description
  • Plant light needs
  • Plant water needs
  • Plant fertiliser season
• The following fields are mandatory:
  • Plant name
  • Plant botanical name
  • Plant light needs
  • Plant water needs
• The form section includes options for both saving and cancelling the action.
• The cancellation option allows the user to back out of the edit process if selected by mistake or if they change their mind.
• Submissions with empty required fields are blocked, with validation messages indicating the missing required fields.
• Upon confirming the save, the user is immediately redirected to the details page of the edited plant, and the changes are saved and reflected.

Tasks

• [ ] Create feature branch feature/update-plant
• [ ] Create an Edit button which is rendered on the plant details page. Clicking the button should display the "edit" form inside a modal
• [ ] Reuse the already existing "addPlantForm" component
  • [ ] Rename the component to be more fitting to both adding and editing plants (e.g. "plantForm")
  • [ ] Change the heading of the form according to it's purpose ("Edit plant" or "Add plant")
  • [ ] Create a "Cancel" button that closes the modal and displays the details page without any changes
• [ ] Conditionally render the "edit" form modal on the details page using a boolean state
• [ ] Create a handleEdit function that takes the form data and updates the current plant with the form data
  • [ ] Upon submitting the form, the handleEdit function is triggered
  • [ ] The handleEdit function closes the modal and displays the details page with the edited/updated plant information

[ahohnsen]

Hi there!

I noticed a small detail in your tasks:

Change the submit button of the form so it accepts a prop in order to execute either a handleAdd function or a handleEdit function.

Perhaps this was just an oversight—actually, the submit function is attached to the form itself, not the submit button.

The submit function remains the same and just needs a slight adjustment:

First, the submit function should read the data from the form (as it does for the “create” action). Then, depending on whether the user is adding or editing, it should call either handleAdd or handleEdit with the form data.

Hope that helps!