US6 - Create Plant Preferences

[franziska-caroline]

Value proposition

As a plant Enthusiast, I want to be able to create my personal plant preferences on a dedicated preference page for filtering In order to easily find plants that meet my specific care requirements and preferences and to have a clean homepage without the filter block.

Description

Acceptance criteria

• [x] an adjustment-icon is added to the navbar
• [x] when clicking on the adjustment-icon the user can navigate to the preference page
• [x] a form with the title "Add your Preferences" is displayed on the preference page
• [x] the form includes the filter form from the homepage plus a new input field to define the preference title
• [x] underneath the form are two buttons
  • [x] Save to save the preferences
  • [x] Cancel to reset the form
• [x] after successful saving, the title is added to the list of preferences underneath the form
• [x] when clicking on the preference list-item the user navigates to an individual overview page with the filtered plants
• [x] above the plant cards is the preference title
• [x] an Icon is implemented at top left hand corner and when clicked gets the user to the home page

Tasks

• [x] create the feature branch "feature-add-preferences"
• [x] use the previous created form component
• [x] create a new page "preferences"
• [x] create a PreferenceCard component that renders the details of the user's preferences
• [x] create a cancel button to reset the form and focus on the title text input field
• [x] create a handleCancel function
• [x] create a save button to save the users preferences and create a new preference object
• [x] in form component write handleSubmit-function which passes an object containing the input data to a function in the index.js
• [x] create "input" state in the form component, so the input fields are controlled input fields
• [x] write the handleInputChange-function which updates the state as soon as an entry is made in one of the input fields
• [x] in app.js create state, which handles all preferences
• [x] Write handleNewPreferences-function that catches the newly created object with the input data in the form component ,updates the preference state and adds an id for the new preference
• [x] create a map-function in card-component to map over the preference-state to create the specific preferenceCard

[JulianKle]

I think you can handle the two steps before the last step in one function. Otherwise the US looks good to me.