US - Create Plant Journal Entry

[franziska-caroline]

Value proposition

As a plant Enthusiast, I want to be able to create my personal plant journal and individual entries on a dedicated plant journal page In order to write personal notes which can include personal observations and care tips.

Description

Acceptance criteria

• [ ] an journal- or pen-icon is added to the navbar
• [ ] when clicking on the journal-icon the user can navigate to the journal page
• [ ] a "create" button is displayed on the page and when the user has not written any entries, there is an invitation text to do so
• [ ] when clicking on the create button, the user navigates to a form with five input fields:
  • [ ] a text input field to insert an image URL
  • [ ] a text input field to write a plant name
  • [ ] a text area field to write a description
  • [ ] a text area field to write care tips
  • [ ] a text input fielt to write the location/room of the plant
• [ ] underneath the form are two buttons
  • [ ] Save to save the entry inputs
  • [ ] Cancel to reset the form
• [ ] after successful saving, the image and plant name is added to the list of entries underneath the create button on the plant journal page
• [ ] when clicking on the journal entry list-item the user navigates to a detail page structured the same way as the plant detail page
• [ ] an icon is implemented at top left hand corner and when clicked gets the user to the previous page

Tasks

• [x] create the feature branch "feature-add-journal-entries"
• [x] create a new journal folder in pages "index.js" and [id].js
• [ ] create a JournalEntryCard component that renders the details of the user's journal entries
• [x] create a JournalForm component
• [x] create a form displayed as a list
  • [x] create an text input field for the image url, the field is required
  • [x] create an text input field for the plant name, the field is required
  • [ ] create an text area field for the description, the field is not required
  • [ ] create an text area field for the care tips, the field is not required
  • [ ] create an text input field for the location, the field is not required
• [ ] create a cancel button to reset the form and focus on the name text input field
• [ ] create a handleCancel function
• [ ] create a save button to save the users entry and create a new entry object
• [ ] in journal form component write handleSubmit-function which passes an object containing the input data to a function in the journal/index.js
• [ ] create "input" state in the form component, so the input fields are controlled input fields
• [ ] in journal/index.js create state, which handles all entries
• [ ] Write handleNewEntries-function that catches the newly created object with the input data in the form component ,updates the entry state and adds an id for the new entry

[ThomasKirst]

Looks great, very detailed, will be fun to implement it 😃