From 988c7dc318e954692cb52962f254a794c2f8722a Mon Sep 17 00:00:00 2001
From: Emily Jablonski <emily.jablonski@exygy.com>
Date: Tue, 24 Aug 2021 11:43:38 -0600
Subject: [PATCH 1/5] 1721/remove business logic from HouseholdMemberForm

---
 .../applications/household/add-members.tsx    | 24 +++++++++--
 .../forms/HouseholdMemberForm.test.tsx        | 39 +++++++++--------
 .../src/forms/HouseholdMemberForm.stories.tsx | 26 ++++++++++++
 .../src/forms/HouseholdMemberForm.tsx         | 42 +++++++++----------
 4 files changed, 84 insertions(+), 47 deletions(-)
 create mode 100644 ui-components/src/forms/HouseholdMemberForm.stories.tsx

diff --git a/sites/public/pages/applications/household/add-members.tsx b/sites/public/pages/applications/household/add-members.tsx
index 87911f0290..d7bc1d52f4 100644
--- a/sites/public/pages/applications/household/add-members.tsx
+++ b/sites/public/pages/applications/household/add-members.tsx
@@ -41,12 +41,26 @@ const ApplicationAddMembers = () => {
 
   const applicant = application.applicant
 
+  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) => {
     return (
       <HouseholdMemberForm
-        member={member}
+        editMember={editMember}
         key={member}
-        type={t("application.household.householdMember")}
+        memberFirstName={member.firstName}
+        memberId={member.orderId}
+        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>
diff --git a/ui-components/__tests__/forms/HouseholdMemberForm.test.tsx b/ui-components/__tests__/forms/HouseholdMemberForm.test.tsx
index 948b71769b..e378c97ff9 100644
--- a/ui-components/__tests__/forms/HouseholdMemberForm.test.tsx
+++ b/ui-components/__tests__/forms/HouseholdMemberForm.test.tsx
@@ -1,22 +1,10 @@
 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")
 
@@ -24,29 +12,40 @@ describe("<HouseholdMemberForm>", () => {
     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)
   })
 })
diff --git a/ui-components/src/forms/HouseholdMemberForm.stories.tsx b/ui-components/src/forms/HouseholdMemberForm.stories.tsx
new file mode 100644
index 0000000000..278473906d
--- /dev/null
+++ b/ui-components/src/forms/HouseholdMemberForm.stories.tsx
@@ -0,0 +1,26 @@
+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"}
+  />
+)
+
+export const notEditable = () => (
+  <HouseholdMemberForm
+    memberFirstName={"Firstname"}
+    memberLastName={"Lastname"}
+    key={"FirstnameLastname"}
+    subtitle={"Household Member"}
+    editMode={false}
+  />
+)
diff --git a/ui-components/src/forms/HouseholdMemberForm.tsx b/ui-components/src/forms/HouseholdMemberForm.tsx
index 6c18557811..fd40dda6e9 100644
--- a/ui-components/src/forms/HouseholdMemberForm.tsx
+++ b/ui-components/src/forms/HouseholdMemberForm.tsx
@@ -1,34 +1,30 @@
-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}>
+        <a
+          id="edit-member"
+          className="edit-link"
+          href="#"
+          onClick={() => props.editMember && props.editMember(props.memberId)}
+        >
           {t("t.edit")}
         </a>
       ) : (

From 3bdfc7e73dc57b49e706209a1d147a523351ce52 Mon Sep 17 00:00:00 2001
From: Emily Jablonski <emily.jablonski@exygy.com>
Date: Tue, 24 Aug 2021 11:52:02 -0600
Subject: [PATCH 2/5] changelog

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8e488c89c7..44afdce25e 100644
--- a/CHANGELOG.md
+++ b/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 no dependent on data model
 
 ### Backend
 

From 9f787b0b9a8517276afd7b818ac5c135aca2a7dc Mon Sep 17 00:00:00 2001
From: Emily Jablonski <emily.jablonski@exygy.com>
Date: Tue, 24 Aug 2021 11:53:31 -0600
Subject: [PATCH 3/5] changelog typo

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 44afdce25e..930f7faffc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -55,7 +55,7 @@ All notable changes to this project will be documented in this file. The format
   - 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 no dependent on data model
+    - **Breaking Change**: Removed existing props except for editMode and replaced with a set not dependent on data model
 
 ### Backend
 

From a5267b4381725104af7a96854b7db6a611b63b3a Mon Sep 17 00:00:00 2001
From: Emily Jablonski <emily.jablonski@exygy.com>
Date: Fri, 27 Aug 2021 13:56:30 -0600
Subject: [PATCH 4/5] deleting member fix

---
 sites/public/pages/applications/household/add-members.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/sites/public/pages/applications/household/add-members.tsx b/sites/public/pages/applications/household/add-members.tsx
index d7bc1d52f4..52d2d75015 100644
--- a/sites/public/pages/applications/household/add-members.tsx
+++ b/sites/public/pages/applications/household/add-members.tsx
@@ -52,13 +52,13 @@ const ApplicationAddMembers = () => {
     }
   }
 
-  const membersSection = application.householdMembers.map((member) => {
+  const membersSection = application.householdMembers.map((member, index) => {
     return (
       <HouseholdMemberForm
         editMember={editMember}
         key={member}
         memberFirstName={member.firstName}
-        memberId={member.orderId}
+        memberId={index}
         memberLastName={member.lastName}
         subtitle={t("application.household.householdMember")}
       />

From 186d0ff78f63fccffec70da8e67d69ff2777693d Mon Sep 17 00:00:00 2001
From: Emily Jablonski <emily.jablonski@exygy.com>
Date: Wed, 1 Sep 2021 10:57:59 -0600
Subject: [PATCH 5/5] pr feedback

---
 ui-components/src/forms/HouseholdMemberForm.stories.tsx | 1 +
 ui-components/src/forms/HouseholdMemberForm.tsx         | 5 ++---
 ui-components/src/global/text.scss                      | 2 ++
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/ui-components/src/forms/HouseholdMemberForm.stories.tsx b/ui-components/src/forms/HouseholdMemberForm.stories.tsx
index 278473906d..acbabc2b7f 100644
--- a/ui-components/src/forms/HouseholdMemberForm.stories.tsx
+++ b/ui-components/src/forms/HouseholdMemberForm.stories.tsx
@@ -12,6 +12,7 @@ export const editable = () => (
     memberLastName={"Lastname"}
     key={"FirstnameLastname"}
     subtitle={"Household Member"}
+    editMember={() => {}}
   />
 )
 
diff --git a/ui-components/src/forms/HouseholdMemberForm.tsx b/ui-components/src/forms/HouseholdMemberForm.tsx
index fd40dda6e9..367c6a2330 100644
--- a/ui-components/src/forms/HouseholdMemberForm.tsx
+++ b/ui-components/src/forms/HouseholdMemberForm.tsx
@@ -19,14 +19,13 @@ const HouseholdMemberForm = (props: HouseholdMemberFormProps) => {
     <ViewItem helper={props.subtitle} className="pb-4 border-b text-left">
       {props.memberFirstName} {props.memberLastName}
       {editMode ? (
-        <a
+        <button
           id="edit-member"
           className="edit-link"
-          href="#"
           onClick={() => props.editMember && props.editMember(props.memberId)}
         >
           {t("t.edit")}
-        </a>
+        </button>
       ) : (
         <Icon
           className="ml-2 absolute top-0 right-0"
diff --git a/ui-components/src/global/text.scss b/ui-components/src/global/text.scss
index a3b9229685..1aca9c7cd9 100644
--- a/ui-components/src/global/text.scss
+++ b/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 {