Collapse Emotion Form

[Jennifer-Hinrichsen]

Value proposition

As a user, I want to hide and show the form on the homepage, so I can focus on the emotion list when needed, while still having quick access to add new emotions.

Description

Acceptance criteria

• [ ] When opening the homepage there is a collapsed form displaying an call to action title "add new Emotion" and an icon.
• [ ] The collapsed form is shown above the emotion list.
• [ ] By click on the icon the form is extended displaying the emotion, intensity, dateTime, notes fields and the submit button.
• [ ] When the form is expanded the icon switches from a "+" to a "-".
• [ ] When the form is collapsed and re-expanded, any previously entered data remains in the input fields.
• [ ] Upon successful form submission, the success message is displayed, the form remains extended, and the form fields are reset.

Tasks

• [x] Create a branch feature/collapse-form
• [x] Save the two icons for + and - in the assets folder
• [x] Create a useState and a toggle function inside the Form Component.
• [x] Create a Button with an onClick for the toggleFunction.
• [x] Implement a condition statement (ternary operator) for the plus and minus icon.
• [ ] Implement conditional rendering of the form. (hint: isExpanded && ...)

[laurasliwa]

Your wireframe does not match your acceptance criteria When the form is expanded the icon switches from an "+" to an "x".

Apart from that good work!

[StephieTack]

You are right. Changed task to a MINUS. :)

[JessicaLoers]

Well done. 🙌 Although I have a few questions/comments.

Value proposition The phrase (user benefit) "manage content visibility" is a little bit vague. It would be clearer to specify the actual benefit, like allowing users to focus on existing content or quickly access the form when needed. This makes the user story more focused on improving the user experience.

For example: As a user, I want to hide and show the form on the homepage, so I can focus on the emotion list when needed, while still having quick access to add new emotions."

---

Acceptance criteria

• When clicking the "-" the form is collapsed and the given inputs will still remain.

This AC could benefit from more specificity. You might want to explicitly state that the form values should persist in the state (if that’s the intention). For example:

• When the form is collapsed and re-expanded, any previously entered data remains in the input fields.

• When submitting the form the success message is shown and the form stays extended.

There’s a small ambiguity regarding whether the form fields should be cleared after the success message is displayed. If you want the form fields to remain filled even after a successful submission, that should be stated. If not, it would be a good idea to clarify that the form should reset.

For example:

• Upon successful form submission, the success message is displayed, the form remains extended, and the form fields are reset.

---

Tasks

• [ ] Import the React Collapse Component import { CCollapse } from '@coreui/react'

Great job outlining the plan for implementing the collapse/expand functionality!

First, a quick question: Have you confirmed with Felix that it's okay to use the CoreUI library in this project? Just want to make sure everyone's on the same page regarding external libraries.

Also, I believe you could definitely build this collapse/expand feature yourself without the need for an additional library. With a useState and some conditional rendering, it's quite manageable and gives you more control over the design and behavior.

---

❗️ Note: I haven't approved this user story yet because I think it's important that we briefly discuss the use of the CoreUI library. It's essential that we're aligned on using external libraries in the project.

The other comments are mainly suggestions on how we can make user stories a bit more explicit. Writing clear user stories is a skill that takes practice, so don't worry—it's something we will keep improving together!

[StephieTack]

Hi Jessica, thank you very much for your input. :) We will ask Felix to give us feedback for the use of libraries. Our intension was to try a library once and decided to go with coreui-library.

[F-Kirchhoff]

Thats a great US! Nice job.