feat: uptake of Seeds Toast component (#3962)

* Squashed commit of the following: commit d964056 Author: Jared White <[email protected]> Date: Mon Jan 22 15:41:22 2024 -0800 feat: adjust Seeds Toast inset commit 75b1e07 Author: Jared White <[email protected]> Date: Thu Jan 18 14:29:03 2024 -0800 test: get partners unit tests to pass commit af89871 Author: Jared White <[email protected]> Date: Wed Jan 17 22:18:31 2024 -0800 fix: more linting commit fca3211 Author: Jared White <[email protected]> Date: Wed Jan 17 21:50:21 2024 -0800 fix: another lint error commit 22243fe Author: Jared White <[email protected]> Date: Wed Jan 17 20:38:39 2024 -0800 fix: lint issues commit 1168e02 Author: Jared White <[email protected]> Date: Wed Jan 17 19:25:19 2024 -0800 feat: switch a number of site alert features to Toast commit 4309bda Author: Jared White <[email protected]> Date: Mon Jan 15 16:58:06 2024 -0800 feat: toast message context now working as expected commit 0835000 Author: Jared White <[email protected]> Date: Wed Jan 10 20:50:36 2024 -0800 chore: bump Seeds version commit 1feceb8 Merge: 5047464 dbcd45c Author: Jared White <[email protected]> Date: Wed Jan 10 20:37:42 2024 -0800 Merge commit 'dbcd45cf1060dc955e71e4dd11720c75a92efc3d' into 3434/react-context-messaging commit 5047464 Author: Morgan Ludtke <[email protected]> Date: Tue Oct 17 10:59:54 2023 -0500 fix: email csv fix commit 19cd8b2 Author: Morgan Ludtke <[email protected]> Date: Tue Oct 17 10:34:42 2023 -0500 fix: review comments commit fc220a7 Author: Morgan Ludtke <[email protected]> Date: Fri Oct 6 15:41:25 2023 -0500 fix: add comment commit 4aa3cfb Author: ColinBuyck <[email protected]> Date: Thu Jul 6 21:04:09 2023 -0700 fix: uptake toast component * feat: strip out old SiteAlert code in favor of toasts * fix: lint issues * fix: more linting * test: fix tests due to new Toasts * feat: fix some timing/context issues with Toast * fix: type error * fix: type error redux * fix: update React types to clean up false errors * fix: add back missing toast, use Seeds size tokens
bloom-housing · Apr 19, 2024 · e7cf68d · e7cf68d
1 parent 42b26e0
commit e7cf68d
Show file tree

Hide file tree

Showing 59 changed files with 286 additions and 327 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -24,7 +24,7 @@ module.exports = {
     "@typescript-eslint/camelcase": "off",
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
-    "@typescript-eslint/no-unused-vars": "warn",
+    "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
     "@typescript-eslint/no-var-requires": "off",
     "react/jsx-uses-vars": "warn",
     "react/jsx-uses-react": "warn",

diff --git a/shared-helpers/index.ts b/shared-helpers/index.ts
@@ -30,3 +30,4 @@ export * from "./src/views/sign-in/FormSignInDefault"
 export * from "./src/views/sign-in/FormSignInErrorBox"
 export * from "./src/views/sign-in/FormSignInPwdless"
 export * from "./src/views/sign-in/ResendConfirmationModal"
+export * from "./src/utilities/MessageContext"
diff --git a/shared-helpers/package.json b/shared-helpers/package.json
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@bloom-housing/ui-components": "12.1.0",
-    "@bloom-housing/ui-seeds": "1.12.1",
+    "@bloom-housing/ui-seeds": "1.12.2",
     "axios-cookiejar-support": "4.0.6",
     "tough-cookie": "4.1.3"
   },
@@ -26,6 +26,7 @@
     "@testing-library/react": "14.0.0",
     "@types/jest": "^26.0.14",
     "@types/node-polyglot": "^2.4.1",
+    "@types/react": "18.0.33",
     "@types/react-beautiful-dnd": "^13.1.1",
     "@types/react-dom": "^16.9.5",
     "@types/react-tabs": "^2.3.2",

diff --git a/shared-helpers/src/auth/AuthContext.ts b/shared-helpers/src/auth/AuthContext.ts
@@ -61,7 +61,7 @@ type ContextProps = {
     password: string,
     passwordConfirmation: string
   ) => Promise<User | undefined>
-  signOut: () => void
+  signOut: () => Promise<void>
   confirmAccount: (token: string) => Promise<User | undefined>
   forgotPassword: (email: string, listingIdRedirect?: string) => Promise<boolean | undefined>
   createUser: (user: UserCreate, listingIdRedirect?: string) => Promise<User | undefined>

diff --git a/shared-helpers/src/auth/RequireLogin.tsx b/shared-helpers/src/auth/RequireLogin.tsx
@@ -1,10 +1,8 @@
 import React, { FunctionComponent, useContext, useEffect, useState } from "react"
-import {
-  clearSiteAlertMessage,
-  setSiteAlertMessage,
-  NavigationContext,
-} from "@bloom-housing/ui-components"
+import { NavigationContext } from "@bloom-housing/ui-components"
 import { AuthContext } from "./AuthContext"
+import { MessageContext } from "../utilities/MessageContext"
+
 // See https://github.com/Microsoft/TypeScript/issues/14094
 type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never }
 type XOR<T, U> = T | U extends Record<string, unknown>
@@ -33,6 +31,7 @@ const RequireLogin: FunctionComponent<RequireLoginProps> = ({
 }) => {
   const { router } = useContext(NavigationContext)
   const { profile, initialStateLoaded } = useContext(AuthContext)
+  const { addToast } = useContext(MessageContext)
   const [hasTerms, setHasTerms] = useState(false)
 
   // Parse just the pathname portion of the signInPath (in case we want to pass URL params)
@@ -58,10 +57,8 @@ const RequireLogin: FunctionComponent<RequireLoginProps> = ({
 
   useEffect(() => {
     if (loginRequiredForPath && initialStateLoaded && !profile) {
-      setSiteAlertMessage(signInMessage, "notice")
+      addToast(signInMessage, { variant: "primary" })
       void router.push(signInPath)
-    } else {
-      clearSiteAlertMessage("notice")
     }
 
     if (termsPath && profile && !profile?.agreedToTermsOfService && hasTerms) {
@@ -76,6 +73,7 @@ const RequireLogin: FunctionComponent<RequireLoginProps> = ({
     signInMessage,
     termsPath,
     hasTerms,
+    addToast,
   ])
 
   if (

diff --git a/shared-helpers/src/auth/Timeout.tsx b/shared-helpers/src/auth/Timeout.tsx
@@ -2,13 +2,8 @@ import React, { createElement, FunctionComponent, useContext, useEffect, useStat
 import { AuthContext } from "./AuthContext"
 import { ConfigContext } from "./ConfigContext"
 import { Button } from "@bloom-housing/ui-seeds"
-import {
-  NavigationContext,
-  Modal,
-  setSiteAlertMessage,
-  AlertTypes,
-  t,
-} from "@bloom-housing/ui-components"
+import { NavigationContext, Modal, t } from "@bloom-housing/ui-components"
+import { MessageContext } from "../utilities/MessageContext"
 
 const PROMPT_TIMEOUT = 60000
 const events = ["mousemove", "keypress", "scroll"]
@@ -44,7 +39,6 @@ type IdleTimeoutProps = {
   promptAction: string
   redirectPath: string
   alertMessage: string
-  alertType?: AlertTypes
   onTimeout: () => unknown
 }
 
@@ -54,10 +48,10 @@ export const IdleTimeout: FunctionComponent<IdleTimeoutProps> = ({
   promptText,
   redirectPath,
   alertMessage,
-  alertType = "alert",
   onTimeout,
 }) => {
   const { idleTimeout } = useContext(ConfigContext)
+  const { addToast } = useContext(MessageContext)
   const [promptTimeout, setPromptTimeout] = useState<number | undefined>()
   const { router } = useContext(NavigationContext)
 
@@ -73,8 +67,8 @@ export const IdleTimeout: FunctionComponent<IdleTimeoutProps> = ({
         const timeoutAction = async () => {
           setPromptTimeout(undefined)
           await onTimeout()
-          setSiteAlertMessage(alertMessage, alertType)
           void router.push(redirectPath)
+          addToast(alertMessage, { variant: "primary", hideTimeout: PROMPT_TIMEOUT })
         }
         void timeoutAction()
       }, PROMPT_TIMEOUT) as unknown as number
@@ -124,7 +118,6 @@ export const LoggedInUserIdleTimeout = ({ onTimeout }: { onTimeout?: () => unkno
         promptAction: t("authentication.timeout.action"),
         redirectPath: `/sign-in`,
         alertMessage: t("authentication.timeout.signOutMessage"),
-        alertType: "notice",
         onTimeout: timeoutFxn,
       })
     : null

diff --git a/shared-helpers/src/utilities/MessageContext.ts b/shared-helpers/src/utilities/MessageContext.ts
@@ -0,0 +1,51 @@
+import React, { FunctionComponent, createContext, createElement, useState, useRef } from "react"
+import { CommonMessageProps } from "@bloom-housing/ui-seeds/src/blocks/shared/CommonMessage"
+
+// TODO: this should be exportable from seeds directly
+interface ToastProps extends Omit<CommonMessageProps, "role" | "closeable"> {
+  hideTimeout?: number
+}
+
+const defaultContext = {
+  /* eslint-disable @typescript-eslint/no-empty-function */
+  /* eslint-disable @typescript-eslint/no-unused-vars */
+  addToast: (message: string, props: ToastProps): void => {},
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  toastMessagesRef: {} as React.MutableRefObject<Record<string, any>[]>,
+}
+
+export const MessageContext = createContext(defaultContext)
+
+export const MessageProvider: FunctionComponent<React.PropsWithChildren> = ({ children }) => {
+  const [_, setToastMessages] = useState<Record<string, any>[]>([])
+  const toastMessagesRef = useRef<Record<string, any>[]>([])
+
+  // Toast timeouts default to 5 seconds, unless otherwise specified in props
+  const addToast = (message: string, props: ToastProps) => {
+    const newMsg = { message, props: { hideTimeout: 5000, ...props }, timestamp: Date.now() }
+    const msgs = [...toastMessagesRef.current, newMsg]
+
+    // We need a stable ref so live toast messages can be read outside of this function
+    toastMessagesRef.current = msgs
+    setToastMessages(msgs)
+
+    // Clean up messages after they're expired
+    setTimeout(() => {
+      toastMessagesRef.current = toastMessagesRef.current.filter(
+        (msg) => msg.timestamp != newMsg.timestamp
+      )
+    }, newMsg.props.hideTimeout)
+  }
+  const contextValues = {
+    addToast,
+    toastMessagesRef,
+  }
+  return createElement(
+    MessageContext.Provider,
+    {
+      value: contextValues,
+    },
+
+    children
+  )
+}
diff --git a/shared-helpers/src/views/forgot-password/FormForgotPassword.tsx b/shared-helpers/src/views/forgot-password/FormForgotPassword.tsx
@@ -5,7 +5,6 @@ import {
   Form,
   t,
   AlertBox,
-  SiteAlert,
   AlertNotice,
   ErrorMessage,
   NavigationContext,
@@ -70,8 +69,6 @@ const FormForgotPassword = ({
           </ErrorMessage>
         )}
 
-        <SiteAlert type="notice" dismissable />
-
         <CardSection>
           <Form id="sign-in" onSubmit={handleSubmit(onSubmit, onError)}>
             <Field

diff --git a/shared-helpers/src/views/sign-in/FormSignInErrorBox.tsx b/shared-helpers/src/views/sign-in/FormSignInErrorBox.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { t, AlertBox, SiteAlert, AlertNotice, ErrorMessage } from "@bloom-housing/ui-components"
+import { t, AlertBox, AlertNotice, ErrorMessage } from "@bloom-housing/ui-components"
 import type { UseFormMethods } from "react-hook-form"
 import { NetworkStatus } from "../../auth/catchNetworkError"
 import styles from "./FormSignIn.module.scss"
@@ -62,7 +62,6 @@ const FormSignInErrorBox = ({
           </AlertNotice>
         </>
       )}
-      <SiteAlert type="notice" dismissable className={styles["sign-in-error"]} />
     </div>
   )
 }

diff --git a/sites/partners/__tests__/pages/listings/index.test.tsx b/sites/partners/__tests__/pages/listings/index.test.tsx
@@ -1,4 +1,4 @@
-import { AuthProvider, ConfigProvider } from "@bloom-housing/shared-helpers"
+import { AuthProvider, ConfigProvider, MessageProvider } from "@bloom-housing/shared-helpers"
 
 import { fireEvent, render } from "@testing-library/react"
 import { rest } from "msw"
@@ -148,7 +148,9 @@ describe("listings", () => {
     const { findByText, getByText } = render(
       <ConfigProvider apiUrl={"http://localhost:3100"}>
         <AuthProvider>
-          <ListingsList />
+          <MessageProvider>
+            <ListingsList />
+          </MessageProvider>
         </AuthProvider>
       </ConfigProvider>
     )

diff --git a/sites/partners/__tests__/pages/settings/index.test.tsx b/sites/partners/__tests__/pages/settings/index.test.tsx
@@ -8,6 +8,8 @@ import {
   multiselectQuestionPreference,
 } from "@bloom-housing/shared-helpers/__tests__/testHelpers"
 import { mockNextRouter, render } from "../../testUtils"
+import { MessageContext, MessageProvider } from "@bloom-housing/shared-helpers"
+import { Toast } from "@bloom-housing/ui-seeds"
 
 const server = setupServer()
 
@@ -125,7 +127,26 @@ describe("settings", () => {
           return res(ctx.json({}))
         })
       )
-      const { findByText, getByTestId, findByRole, queryAllByText } = render(<Settings key={"2"} />)
+
+      const ToastProvider = (props) => {
+        const { toastMessagesRef } = React.useContext(MessageContext)
+        return (
+          <MessageProvider>
+            {toastMessagesRef.current?.map((toastMessage) => (
+              <Toast {...toastMessage.props} testId="toast-alert" key={toastMessage.timestamp}>
+                {toastMessage.message}
+              </Toast>
+            ))}
+            {props.children}
+          </MessageProvider>
+        )
+      }
+
+      const { findByText, getByTestId, findByRole, queryAllByText } = render(
+        <ToastProvider>
+          <Settings key={"2"} />
+        </ToastProvider>
+      )
 
       await findByText(multiselectQuestionPreference.text)
 

diff --git a/sites/partners/__tests__/pages/users/index.test.tsx b/sites/partners/__tests__/pages/users/index.test.tsx
@@ -1,4 +1,4 @@
-import { AuthProvider, ConfigProvider } from "@bloom-housing/shared-helpers"
+import { AuthProvider, ConfigProvider, MessageProvider } from "@bloom-housing/shared-helpers"
 import { fireEvent, render } from "@testing-library/react"
 import { rest } from "msw"
 import { setupServer } from "msw/node"
@@ -107,7 +107,9 @@ describe("users", () => {
     const { findByText, getByText } = render(
       <ConfigProvider apiUrl={"http://localhost:3100"}>
         <AuthProvider>
-          <Users />
+          <MessageProvider>
+            <Users />
+          </MessageProvider>
         </AuthProvider>
       </ConfigProvider>
     )

diff --git a/sites/partners/cypress/e2e/default/06-admin-user-mangement.spec.ts b/sites/partners/cypress/e2e/default/06-admin-user-mangement.spec.ts
@@ -71,7 +71,7 @@ describe("Admin User Mangement Tests", () => {
       )
     })
     cy.getByID("invite-user").click()
-    cy.getByTestId("alert-box").contains("Invite sent").should("have.text", "Invite sent")
+    cy.getByTestId("toast-alert").contains("Invite sent").should("have.text", "Invite sent")
   })
 
   it("as admin user, should be able to create new jurisidictional admin", () => {
@@ -110,7 +110,7 @@ describe("Admin User Mangement Tests", () => {
       )
     })
     cy.getByID("invite-user").click()
-    cy.getByTestId("alert-box").contains("Invite sent").should("have.text", "Invite sent")
+    cy.getByTestId("toast-alert").contains("Invite sent").should("have.text", "Invite sent")
   })
 
   it("as admin user, should be able to create new partner", () => {
@@ -148,6 +148,6 @@ describe("Admin User Mangement Tests", () => {
     cy.getByTestId("listings_Bloomington").first().click()
     cy.getByTestId("listings_Bloomington").last().click()
     cy.getByID("invite-user").click()
-    cy.getByTestId("alert-box").contains("Invite sent").should("have.text", "Invite sent")
+    cy.getByTestId("toast-alert").contains("Invite sent").should("have.text", "Invite sent")
   })
 })
diff --git a/sites/partners/cypress/e2e/default/07-jurisdictional-admin-user-management.spec.ts b/sites/partners/cypress/e2e/default/07-jurisdictional-admin-user-management.spec.ts
@@ -50,7 +50,7 @@ describe("Jurisdictional Admin User Mangement Tests", () => {
       )
     })
     cy.getByID("invite-user").click()
-    cy.getByTestId("alert-box").contains("Invite sent").should("have.text", "Invite sent")
+    cy.getByTestId("toast-alert").contains("Invite sent").should("have.text", "Invite sent")
   })
 
   it("as jurisdictional admin user, should be able to create new partner", () => {
@@ -85,6 +85,6 @@ describe("Jurisdictional Admin User Mangement Tests", () => {
     cy.getByTestId("listings_Bloomington").first().click()
     cy.getByTestId("listings_Bloomington").last().click()
     cy.getByID("invite-user").click()
-    cy.getByTestId("alert-box").contains("Invite sent").should("have.text", "Invite sent")
+    cy.getByTestId("toast-alert").contains("Invite sent").should("have.text", "Invite sent")
   })
 })
diff --git a/sites/partners/cypress/e2e/default/08-preference-management.spec.ts b/sites/partners/cypress/e2e/default/08-preference-management.spec.ts
@@ -45,7 +45,7 @@ describe("Preference Management Tests", () => {
     cy.getByTestId("preference-opt-out-label").type("Preference Opt Out Label")
     cy.getByTestId("preference-jurisdiction").select("Bloomington")
     cy.getByID("preference-save-button").click()
-    cy.getByTestId("alert-box")
+    cy.getByTestId("toast-alert")
       .contains("Preference Created")
       .should("have.text", "Preference Created")
 

diff --git a/sites/partners/package.json b/sites/partners/package.json
@@ -31,7 +31,7 @@
   "dependencies": {
     "@bloom-housing/shared-helpers": "^7.7.1",
     "@bloom-housing/ui-components": "12.1.0",
-    "@bloom-housing/ui-seeds": "1.12.1",
+    "@bloom-housing/ui-seeds": "1.12.2",
     "@mapbox/mapbox-sdk": "^0.13.0",
     "ag-grid-community": "^26.0.0",
     "ag-grid-react": "^26.0.0",

diff --git a/sites/partners/src/components/applications/PaperApplicationForm/PaperApplicationForm.tsx b/sites/partners/src/components/applications/PaperApplicationForm/PaperApplicationForm.tsx
@@ -1,14 +1,8 @@
 import React, { useState, useContext, useEffect } from "react"
 import { useRouter } from "next/router"
-import {
-  t,
-  Form,
-  AlertBox,
-  setSiteAlertMessage,
-  LoadingOverlay,
-} from "@bloom-housing/ui-components"
+import { t, Form, AlertBox, LoadingOverlay } from "@bloom-housing/ui-components"
 import { Tag } from "@bloom-housing/ui-seeds"
-import { AuthContext, listingSectionQuestions } from "@bloom-housing/shared-helpers"
+import { AuthContext, MessageContext, listingSectionQuestions } from "@bloom-housing/shared-helpers"
 import { useForm, FormProvider } from "react-hook-form"
 import {
   Application,
@@ -75,6 +69,7 @@ const ApplicationForm = ({ listingId, editMode, application }: ApplicationFormPr
   const router = useRouter()
 
   const { applicationsService } = useContext(AuthContext)
+  const { addToast } = useContext(MessageContext)
 
   const [alert, setAlert] = useState<AlertErrorType | null>(null)
   const [loading, setLoading] = useState<boolean>(false)
@@ -147,11 +142,11 @@ const ApplicationForm = ({ listingId, editMode, application }: ApplicationFormPr
       setLoading(false)
 
       if (result) {
-        setSiteAlertMessage(
+        addToast(
           editMode
             ? t("application.add.applicationUpdated")
             : t("application.add.applicationSubmitted"),
-          "success"
+          { variant: "success" }
         )
 
         if (redirect === "details") {