Custom Emotion Types

[StephieTack]

Value proposition

As a user I want to create and customize my own emotion types In order to personalize my experience and have options that fit my unique emotions.

Description

Design for the CTA that leads to the new form:

Wireframe for the Create Emotion Type Form:

Acceptance criteria

• [ ] An "Create your Emotion Type" button appears beside the emotiontype selection menu in the "Add Emotion" form.
• [ ] The button leads to a new page "Create Emotiontype" where the user can create a custom Emotiontype.
• [ ] On the "Create Emotiontype" page there is nothing highlighted in the navigationbar.
• [ ] The “Create Emotion Type” page displays a form with the following form fields:
  • [ ] A dropdown to choose an Emotion type name. The options in the dropdown are predefined.
  • [ ] A button group with a predefined palette of colors for selecting an emotion color.
  • [ ] A button group with apredefined palette of emojis for selecting an emoji.
• [ ] When the "Add Emotiontype" form is submitted, the user is redirected back to the unfolded "Add Emotion" form and the new created emotion type is preselected.
• [ ] A cancel button at the end of the form will close it and go back to the homepage with the unfolded "Add Emotion" form.
• [ ] When the user is redirected, the newly created emotion is pre-selected in the "Add Emotion" form option.
• [ ] Any saved custom emotion types are persistently available in the emotion options menu upon future visits.
• [ ] Any saved custom emotion types are also available in the filter.

  Tasks

  Create a new branch

• [ ] Branch Name: feature/custom-emotiontypes

  Store Custom Options in Configuration Files

• [ ] Create customEmotionOptions.js:
• [ ] Providing new Icons and map the icons in the EmotionIcon.js
  • Store custom emotion types, colors, and emojis in separate arrays with objects.
  • Export these as customEmotionTypes, customColors, and customEmojis.
• [ ] Define Export Structure in customEmotionOptions.js:
  • Emotion Types: Array of objects with id and name properties, e.g., { id: 1, name: "Love" }
  • Colors: Array of objects with name and hex properties, e.g., { name: "Red", hex: "#FF0000" }.
  • Emojis: Array of objects with name and icon properties, e.g., { name: "Smile", icon: "😊" }.

    Set Up Custom Emotion Type Creation with useLocalStorageState

• [ ] Implement useLocalStorageState in the CreateEmotionType Component:
  • Use useLocalStorageState to store and manage an array of custom emotion types.
  • Initialize it with an empty array or fetch existing data from local storage under the key customEmotionTypes.
• [ ] Update Form to Select Custom Properties:
  • Emotion Type Dropdown: Populate with customEmotionTypes.
  • Color Dropdown: Populate with customColors.
  • Emoji Dropdown: Populate with customEmojis.
• [ ] Handle Custom Emotion Type Submission:
  • Create a function to handle form submission in CreateEmotionType.
  • Store the selected name, color, and emoji as a new object in customEmotionTypes.
  • Use setCustomEmotionTypes to update the state and persist in local storage.
• [ ] Handle cancel button:
  • Cancel button link to homepage.
  • Unfolded "Add Emotion" form.
• [ ] Redirect or Update State After Submission:
  • Redirect to the Homepage, with the newly created emotion type pre-selected in the form.
  • Check that form is opened and not collapsed when redirected from Add Emotiontype form.
  • Ensure all custom emotion types appear in the emotion type dropdown upon form load.

    Integrate Custom Emotion Types in Add Emotion Form

• [ ] Fetch Custom Emotion Types in Add Emotion Component:
• Use useLocalStorageState to fetch customEmotionTypes and merge them with predefined emotion types to dynamically populate the dropdown list.
• [ ] Implement Persistent Filter Options for Custom Types:
  • Ensure that customEmotionTypes are also available in any filtering components, such as emotion type filters.

    Update Styling and Components

• [ ] Modify Emotion Card to Display Custom Colors and Emojis:
  • Accept color and emoji props in EmotionCard.
  • Style the card based on the color prop and display the emoji as part of the card content.

[ahohnsen]

Hi there!

I have a few suggestions for your user story:

Description

Since this user story involves changes to the user interface, please include wireframes. This will make your Acceptance Criteria clearer, and the user story overall easier to understand and implement.

Acceptance Criteria

Currently, it sounds like there are three separate forms, one for the name, color, and emoji. I’d recommend revising the section that describes the “Create Emotion Type” page. Here’s my suggestion:

The “Create Emotion Type” page displays a form with the following form fields:

- A dropdown to choose an Emotion type name. The options in the dropdown are predefined. - A predefined palette of colors for selecting an emotion color. - A predefined palette of emojis for selecting an emoji.

Additionally, I’d suggest specifying the type of form field for color and emoji selection. Will these also use a dropdown like the Emotion type name?

I also had a question: What if the user decides not to add a new Emotion type after all? Is there a “Cancel” option, or another way for the user to exit this view and return to the “Add Emotion” form? Please consider adding this to your Acceptance Criteria.

Hope, that helps. 🙂

[ahohnsen]

Nice update.

If you are implementing the form as shown in your wireframe, I guess you are going to use radio buttons for the color and emojis, so that only one option can be chosen by the user. I suggest to add that to your acceptance criteria.