Add family member

[SwethaJanardhana]

Add family member

Value Proposition

As a family member,

I want to add new members to our family

so that everyone can be involved in the family task management system.

Description

Acceptance Criteria

• A navigation link labeled "Family" is displayed on the bottom, on clicking shows the family page, with the headline "My Family" and the list of already existing family members and a "+" button.
• If there are no any family members yet, the text "The list is empty. Add members to begin!" is displayed
• Clicking a "+" button opens a modal window with a form to add a new family member.
• The form displays a clear headline, "Add a New Family Member," outlining the form's purpose.
• The form includes fields for:
  • name with label "Name",
  • role with label "Role" and a dropdown for selection (e.g., Parent, Child, Caregiver).
• The name field is required, with a character limit between 1 and 50.
• The role field must have a default option, "Please select a role," and require a selection to ensure each member has a defined role within the family.
• Upon form submission, the new member is added to the family and displayed in the member list.
• Form submission with any empty mandatory fields is blocked, and clear validation messages indicate the fields that need completion.
• Validation ensures that member names are unique within the family group to avoid confusion.

Tasks

• [ ] create feature branch feature/add-family-members
• [ ] create a page pages/family/index.js and render the headline h1 "My Family" in it
• [ ] add a Link component to /family to the Layout component
• [ ] in _app.js create a familyMembers state for the list of family members with initial value[ ] and pass familyMembers to the pages
• [ ] create a FamilyMembersList component with prop familyMembers to render the name and the role of every family member from the list with map
• [ ] render the FamilyMembersList component in the pages/family/index.js page
• [ ] if the list is empty, write the logic to show the text "The list is empty. Add members to begin!"
• [ ] add a "+" button under the FamilyMembersList component in the pages/family/index.js page
• [ ] create a MemberForm component with required elements: input for name and select for role, and an "Add" button
• [ ] pass the input field for name onChange attribute to show the number of characters left (max 50 characters) and implement logic to handle this
• [ ] set the select element for role a default option "Please select a role" and 3 other options to choose: Parent, Child, Caregiver
• [ ] create a Modalcomponent
• [ ] in the pages/family/index.js page render the Modal component with the MemberForm component inside
• [ ] implement a logic to open the modal window by clicking the "+" button and to close it by clicking the modal background
• [ ] write a function handleAddMember in _app.js to update the state with a newly added family member and pass it to the MemberForm component
• [ ] write a function handleSubmit in MemberForm component using handleAddMember` function
• [ ] in handleSubmit function validate the empty name field and not selected rolefield option and display appropriate error message
• [ ] in handleSubmit function validate the input name for unique entries and display appropriate error message

// The Smith Family - json example
{ [
    {
      "id": "1",
      "name": "Alex Smith",
      "role": "Parent",
    },
    {
      "id": "2",
      "name": "Jordan Smith",
      "role": "Parent",
    },
    {
      "id": "3",
      "name": "Casey Smith",
      "role": "Child",
    },
    {
      "id": "4",
      "name": "Taylor Smith",
      "role": "Child",
    },
    // Additional family members
  ]
}

[FelineHuhn]

Great user story, Team! Well structured and everything clearly formulated 😍

Just some tiny questions/suggestions:

• The wireframes of the Layout user story before showed a "home" icon and a "plus" icon in the footer. This should be updated also here, or?

• you could add a subsentence in your first acceptance criteria: "A navigation link labeled "Family" is displayed in the navigation bar at the bottom (...)", but even if you will not adapt it, is this fine for me. But I am wondering, if you will also use an icon here for consistency, since you implement a "home" icon and a "plus" icon instead of a text link...

When you saved no family member yet, is there just nothing or an example user or a text, which says there is no family member added yet, displayed? Something like that would be great for a good user experience, or what do you think?

[FelineHuhn]

Great improvement 🚀🚀🚀