1721/remove business logic from HouseholdMemberForm component

CHANGELOG.md

@@ -54,6 +54,8 @@ All notable changes to this project will be documented in this file. The format
     - **Breaking Change**: Removed ListingsList component and replaced with more generalizable ListingCard component which represents the image and table for one listing
   - Remove formatIncome helper from ui-components ([#1744](https://github.com/bloom-housing/bloom/pull/1744)) (Emily Jablonski)
     - **Breaking Change**
+  - Removed business logic from HouseholdMemberForm component ([#1722](https://github.com/bloom-housing/bloom/pull/1722)) (Emily Jablonski)
+    - **Breaking Change**: Removed existing props except for editMode and replaced with a set not dependent on data model
 
 ### Backend
 

sites/public/pages/applications/household/add-members.tsx

@@ -41,12 +41,26 @@ const ApplicationAddMembers = () => {
 
   const applicant = application.applicant
 
-  const membersSection = application.householdMembers.map((member) => {
+  const editMember = (orderId: number) => {
+    if (orderId != undefined && orderId >= 0) {
+      void router.push({
+        pathname: "/applications/household/member",
+        query: { memberId: orderId },
+      })
+    } else {
+      void router.push("/applications/contact/name")
+    }
+  }
+
+  const membersSection = application.householdMembers.map((member, index) => {
     return (
       <HouseholdMemberForm
-        member={member}
+        editMember={editMember}
         key={member}
-        type={t("application.household.householdMember")}
+        memberFirstName={member.firstName}
+        memberId={index}
+        memberLastName={member.lastName}
+        subtitle={t("application.household.householdMember")}
       />
     )
   })
@@ -91,9 +105,11 @@ const ApplicationAddMembers = () => {
           </div>
           <div className="form-card__group my-0 mx-0 pb-4 pt-4">
             <HouseholdMemberForm
-              member={applicant}
-              type={t("application.household.primaryApplicant")}
+              editMember={editMember}
               editMode={!application.autofilled}
+              memberFirstName={applicant.firstName}
+              memberLastName={applicant.lastName}
+              subtitle={t("application.household.primaryApplicant")}
             />
             {membersSection}
           </div>

ui-components/__tests__/forms/HouseholdMemberForm.test.tsx

@@ -1,52 +1,51 @@
 import React from "react"
 import { render, cleanup, fireEvent } from "@testing-library/react"
 import { HouseholdMemberForm } from "../../src/forms/HouseholdMemberForm"
-import { HouseholdMember } from "@bloom-housing/backend-core/types"
 import { t } from "../../src/helpers/translator"
 
 afterEach(cleanup)
 
-const Member1 = ({
-  firstName: "Breana",
-  lastName: "Oquendo",
-} as unknown) as HouseholdMember
-
-const Member2 = ({
-  firstName: "Sonja",
-  lastName: "Aldenkamp",
-  orderId: 1234,
-} as unknown) as HouseholdMember
-
 describe("<HouseholdMemberForm>", () => {
   const useContext = jest.spyOn(require("react"), "useContext")
 
   it("renders as a primary applicant", () => {
     const router = { push: jest.fn().mockImplementation(() => Promise.resolve()) }
     useContext.mockReturnValue({ router })
     global.scrollTo = jest.fn()
+    const editMemberSpy = jest.fn()
 
     const { getByText } = render(
-      <HouseholdMemberForm member={Member1} type={t("application.household.primaryApplicant")} />
+      <HouseholdMemberForm
+        memberFirstName={"Breana"}
+        memberLastName={"Oquendo"}
+        key={"abcd"}
+        subtitle={"Primary Applicant"}
+        editMember={editMemberSpy}
+      />
     )
-    expect(getByText(t("application.household.primaryApplicant"))).toBeTruthy()
+    expect(getByText("Primary Applicant")).toBeTruthy()
     expect(getByText("Breana Oquendo")).toBeTruthy()
     fireEvent.click(getByText(t("t.edit")))
-    expect(router.push).toHaveBeenCalledWith("/applications/contact/name")
+    expect(editMemberSpy).toHaveBeenCalledTimes(1)
   })
   it("renders as a household member", () => {
     const router = { push: jest.fn().mockImplementation(() => Promise.resolve()) }
     useContext.mockReturnValue({ router })
     global.scrollTo = jest.fn()
+    const editMemberSpy = jest.fn()
 
     const { getByText } = render(
-      <HouseholdMemberForm member={Member2} type={t("application.household.householdMember")} />
+      <HouseholdMemberForm
+        memberFirstName={"Sonja"}
+        memberLastName={"Aldenkamp"}
+        key={"abcd"}
+        subtitle={"Household Member"}
+        editMember={editMemberSpy}
+      />
     )
     expect(getByText(t("application.household.householdMember"))).toBeTruthy()
     expect(getByText("Sonja Aldenkamp")).toBeTruthy()
     fireEvent.click(getByText(t("t.edit")))
-    expect(router.push).toHaveBeenCalledWith({
-      pathname: "/applications/household/member",
-      query: { memberId: 1234 },
-    })
+    expect(editMemberSpy).toHaveBeenCalledTimes(1)
   })
 })

ui-components/src/forms/HouseholdMemberForm.stories.tsx

@@ -0,0 +1,27 @@
+import * as React from "react"
+import HouseholdMemberForm from "./HouseholdMemberForm"
+
+export default {
+  title: "Forms/HouseholdMemberForm",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+export const editable = () => (
+  <HouseholdMemberForm
+    memberFirstName={"Firstname"}
+    memberLastName={"Lastname"}
+    key={"FirstnameLastname"}
+    subtitle={"Household Member"}
+    editMember={() => {}}
+  />
+)
+
+export const notEditable = () => (
+  <HouseholdMemberForm
+    memberFirstName={"Firstname"}
+    memberLastName={"Lastname"}
+    key={"FirstnameLastname"}
+    subtitle={"Household Member"}
+    editMode={false}
+  />
+)

ui-components/src/forms/HouseholdMemberForm.tsx

@@ -1,36 +1,31 @@
-import React, { useContext } from "react"
-import { NavigationContext } from "../config/NavigationContext"
-import { HouseholdMemberUpdate } from "@bloom-housing/backend-core/types"
+import React from "react"
 import { t } from "../helpers/translator"
 import { Icon, IconFillColors } from "../icons/Icon"
 import { ViewItem } from "../blocks/ViewItem"
 
-const HouseholdMemberForm = (props: {
-  member: HouseholdMemberUpdate
-  type: string
+export interface HouseholdMemberFormProps {
+  editMember?: (memberId: number | undefined) => void
   editMode?: boolean
-}) => {
-  const { member, type } = props
-  const { router } = useContext(NavigationContext)
-  const editMode = props.editMode !== false // undefined should default to true
+  memberFirstName: string
+  memberId?: number
+  memberLastName: string
+  subtitle: string
+}
+
+const HouseholdMemberForm = (props: HouseholdMemberFormProps) => {
+  const editMode = props.editMode !== false && props.editMember // undefined should default to true
 
-  const editMember = () => {
-    if (member.orderId != undefined && member.orderId >= 0) {
-      void router.push({
-        pathname: "/applications/household/member",
-        query: { memberId: member.orderId },
-      })
-    } else {
-      void router.push("/applications/contact/name")
-    }
-  }
   return (
-    <ViewItem helper={type} className="pb-4 border-b text-left">
-      {member.firstName} {member.lastName}
+    <ViewItem helper={props.subtitle} className="pb-4 border-b text-left">
+      {props.memberFirstName} {props.memberLastName}
       {editMode ? (
-        <a id="edit-member" className="edit-link" href="#" onClick={editMember}>
+        <button
+          id="edit-member"
+          className="edit-link"
+          onClick={() => props.editMember && props.editMember(props.memberId)}
+        >
           {t("t.edit")}
-        </a>
+        </button>
       ) : (
         <Icon
           className="ml-2 absolute top-0 right-0"

ui-components/src/global/text.scss

@@ -120,6 +120,8 @@ h1.title {
   @apply text-tiny;
   @apply uppercase;
   @apply block;
+  @apply text-primary;
+  @apply font-semibold;
 }
 
 .pill {