1573/remove dependencies from listings group

CHANGELOG.md

@@ -37,6 +37,8 @@ All notable changes to this project will be documented in this file. The format
 
 - Changed:
   - StandardTable new optional prop to translate cell content ([#1707](https://github.com/bloom-housing/bloom/pull/1707ß)) (Emily Jablonski)
+  - Removed business logic from ListingsList component ([#1752](https://github.com/bloom-housing/bloom/pull/1752)) (Emily Jablonski)
+    - **Breaking Change**: Removed listings prop and replaced with children and a listingsCount prop
 
 ### Backend
 

sites/public/pages/listings.tsx

@@ -24,11 +24,13 @@ const closedListings = (listings) => {
   return (
     listings.length > 0 && (
       <ListingsGroup
-        listings={listings}
+        listingsCount={listings.length}
         header={t("listings.closedListings")}
         hideButtonText={t("listings.hideClosedListings")}
         showButtonText={t("listings.showClosedListings")}
-      />
+      >
+        <ListingsList listings={listings} />
+      </ListingsGroup>
     )
   )
 }

ui-components/__tests__/page_components/ListingsGroup.test.tsx

@@ -1,28 +1,14 @@
 import React from "react"
 import { render, cleanup, fireEvent } from "@testing-library/react"
 import { ListingsGroup } from "../../src/page_components/listing/ListingsGroup"
-import Archer from "../fixtures/archer.json"
-import Triton from "../fixtures/triton-test.json"
-import { Listing } from "@bloom-housing/backend-core/types"
 
 afterEach(cleanup)
 
-const archer = Object.assign({}, Archer) as any
-const triton = Object.assign({}, Triton) as any
-archer.property = {}
-archer.property.unitsSummarized = {}
-archer.property.unitsSummarized.byUnitType = []
-
-triton.property = {}
-triton.property.unitsSummarized = {}
-triton.property.unitsSummarized.byUnitType = []
-const listings = [archer, triton] as Listing[]
-
 describe("<ListingsGroup>", () => {
   it("renders with show text", () => {
     const { getByText } = render(
       <ListingsGroup
-        listings={listings}
+        listingsCount={2}
         header={"Header Text"}
         showButtonText={"Show"}
         hideButtonText={"Hide"}
@@ -36,7 +22,7 @@ describe("<ListingsGroup>", () => {
   it("can toggle to hide text", () => {
     const { getByText } = render(
       <ListingsGroup
-        listings={listings}
+        listingsCount={2}
         header={"Header Text"}
         showButtonText={"Show"}
         hideButtonText={"Hide"}

ui-components/src/page_components/listing/ListingsGroup.stories.tsx

@@ -1,32 +1,21 @@
 import * as React from "react"
 
 import { ListingsGroup } from "./ListingsGroup"
-import Archer from "../../../__tests__/fixtures/archer.json"
-import Triton from "../../../__tests__/fixtures/triton-test.json"
-import { Listing } from "@bloom-housing/backend-core/types"
 
 export default {
-  title: "Listing/Listing Group",
+  title: "Listing/Listings Group",
 }
 
-const archer = Object.assign({}, Archer) as any
-const triton = Object.assign({}, Triton) as any
-archer.property = {}
-archer.property.unitsSummarized = {}
-archer.property.unitsSummarized.byUnitType = []
-
-triton.property = {}
-triton.property.unitsSummarized = {}
-triton.property.unitsSummarized.byUnitType = []
-const listings = [archer, triton] as Listing[]
-
 export const showListingsGroup = () => {
   return (
     <ListingsGroup
-      listings={listings}
+      listingsCount={2}
       header="Header"
       showButtonText="Show"
       hideButtonText="Hide"
-    />
+      info={"Info Text"}
+    >
+      Listings Go Here
+    </ListingsGroup>
   )
 }

ui-components/src/page_components/listing/ListingsGroup.tsx

@@ -1,12 +1,11 @@
 import React, { useState } from "react"
-import { Listing } from "@bloom-housing/backend-core/types"
-import { ListingsList } from "./ListingsList"
 import { Button } from "../../actions/Button"
 import { Icon } from "../../icons/Icon"
 import "./ListingsGroup.scss"
 
 export interface ListingsGroupProps {
-  listings: Listing[]
+  children?: React.ReactNode
+  listingsCount: number
   header: string
   info?: string
   showButtonText: string
@@ -17,11 +16,9 @@ const ListingsGroup = (props: ListingsGroupProps) => {
   const [showListings, setShowListings] = useState(false)
   const toggleListings = () => setShowListings(!showListings)
 
-  let listingsSection, buttonText
-  if (showListings) {
-    listingsSection = <ListingsList listings={props.listings} />
-  }
-  const listingsCount = ` (${props.listings.length})`
+  let buttonText
+
+  const listingsCount = ` (${props.listingsCount})`
   if (showListings) {
     buttonText = props.hideButtonText + listingsCount
   } else {
@@ -44,7 +41,7 @@ const ListingsGroup = (props: ListingsGroupProps) => {
           </Button>
         </div>
       </div>
-      {listingsSection}
+      {showListings && props.children}
     </div>
   )
 }