diff --git a/app/javascript/__tests__/pages/listings/__snapshots__/ForRent.test.tsx.snap b/app/javascript/__tests__/pages/listings/__snapshots__/ForRent.test.tsx.snap index 6deed8aab..ce9017f4b 100644 --- a/app/javascript/__tests__/pages/listings/__snapshots__/ForRent.test.tsx.snap +++ b/app/javascript/__tests__/pages/listings/__snapshots__/ForRent.test.tsx.snap @@ -330,10 +330,19 @@ exports[`For Rent renders ForRent component 1`] = ` viewBox="0 0 32 32" > + + + diff --git a/app/javascript/__tests__/pages/listings/__snapshots__/ForSale.test.tsx.snap b/app/javascript/__tests__/pages/listings/__snapshots__/ForSale.test.tsx.snap index 53bbf200b..d8c1a1831 100644 --- a/app/javascript/__tests__/pages/listings/__snapshots__/ForSale.test.tsx.snap +++ b/app/javascript/__tests__/pages/listings/__snapshots__/ForSale.test.tsx.snap @@ -371,14 +371,22 @@ exports[`For Sale renders ForSale component 1`] = ` type="button" > @@ -429,10 +437,19 @@ exports[`For Sale renders ForSale component 1`] = ` viewBox="0 0 32 32" > + + + diff --git a/app/javascript/modules/constants.tsx b/app/javascript/modules/constants.tsx index e15638cb7..ba59cb41e 100644 --- a/app/javascript/modules/constants.tsx +++ b/app/javascript/modules/constants.tsx @@ -105,3 +105,8 @@ export const SFGOV_LINKS = [ "http://sfmohcd.org/displaced-tenant-housing-preference", "http://sfmohcd.org/neighborhood-resident-housing-preference", ] + +export const SALE_DIRECTORY_SECTIONS = ["open", "fcfs", "upcoming", "results"] +export const RENTAL_DIRECTORY_SECTIONS = ["open", "upcoming", "results"] + +export const DIRECTORY_TYPE_SALES = "forSale" diff --git a/app/javascript/modules/listings/DirectoryPageNavigationBar.tsx b/app/javascript/modules/listings/DirectoryPageNavigationBar.tsx index 0cf165b58..df5d05100 100644 --- a/app/javascript/modules/listings/DirectoryPageNavigationBar.tsx +++ b/app/javascript/modules/listings/DirectoryPageNavigationBar.tsx @@ -1,48 +1,42 @@ -import React from "react" +import React, { ReactNode } from "react" import "./DirectoryPageNavigationBar.scss" -import { Button } from "@bloom-housing/ui-seeds" -import { Icon, t } from "@bloom-housing/ui-components" +import { Button, Icon as SeedsIcon } from "@bloom-housing/ui-seeds" +import { Icon, t, UniversalIconType } from "@bloom-housing/ui-components" +interface DirectorySectionInfoObject { + key: string + ref: string + icon: ReactNode | string + numListings: number +} const DirectoryPageNavigationBar = ({ - directoryType, - listingLengths, + directorySections, activeItem, }: { - directoryType: string - listingLengths: { open: number; upcoming: number; fcfs: number; results: number } + directorySections: DirectorySectionInfoObject[] activeItem: string - setActiveItem: React.Dispatch }) => { - const directorySections = - directoryType === "forSale" - ? { - open: { key: "enter-a-lottery", icon: "house" }, - fcfs: { key: "buy-now", icon: "house" }, - upcoming: { key: "upcoming-lotteries", icon: "house" }, - results: { key: "lottery-results", icon: "house" }, - } - : { - open: { key: "enter-a-lottery", icon: "house" }, - upcoming: { key: "upcoming-lotteries", icon: "house" }, - results: { key: "lottery-results", icon: "house" }, - } - return (
- {Object.keys(directorySections).map((listingType, index) => { + {directorySections.map((section, index) => { return ( ) diff --git a/app/javascript/modules/listings/GenericDirectory.tsx b/app/javascript/modules/listings/GenericDirectory.tsx index ff91ffbfa..3068b291b 100644 --- a/app/javascript/modules/listings/GenericDirectory.tsx +++ b/app/javascript/modules/listings/GenericDirectory.tsx @@ -17,6 +17,12 @@ import { RailsListing } from "./SharedHelpers" import "./ListingDirectory.scss" import { MailingListSignup } from "../../components/MailingListSignup" import DirectoryPageNavigationBar from "./DirectoryPageNavigationBar" +import { + DIRECTORY_TYPE_SALES, + RENTAL_DIRECTORY_SECTIONS, + SALE_DIRECTORY_SECTIONS, +} from "../constants" +import { IconHomeCheck } from "./assets/icon-home-check" interface RentalDirectoryProps { listingsAPI: (filters?: EligibilityFilters) => Promise @@ -64,6 +70,8 @@ export const GenericDirectory = (props: RentalDirectoryProps) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [filters]) + const hasFiltersSet = filters !== null + const observerRef = useRef(null) useEffect(() => { const handleIntersectionEvents = (events: IntersectionObserverEntry[]) => { @@ -86,7 +94,34 @@ export const GenericDirectory = (props: RentalDirectoryProps) => { observerRef.current = new IntersectionObserver(handleIntersectionEvents) }, [activeItem]) - const hasFiltersSet = filters !== null + const directorySections = + props.directoryType === DIRECTORY_TYPE_SALES + ? SALE_DIRECTORY_SECTIONS + : RENTAL_DIRECTORY_SECTIONS + + const directorySectionInfo = { + open: { + ref: "enter-a-lottery", + icon: "house", + numListings: listings.open.length, + }, + fcfs: { + ref: "buy-now", + icon: IconHomeCheck, + numListings: listings.fcfsSalesNotYetOpen.length + listings.fcfsSalesOpen.length, + }, + upcoming: { + ref: "upcoming-lotteries", + icon: "clock", + numListings: listings.upcoming.length, + }, + results: { + ref: "lottery-results", + icon: "result", + numListings: listings.results.length, + }, + } + return (
@@ -94,15 +129,10 @@ export const GenericDirectory = (props: RentalDirectoryProps) => { <> {props.getPageHeader(filters, setFilters, match)} { + return { key: section, ...directorySectionInfo[section] } + })} activeItem={activeItem} - setActiveItem={setActiveItem} />
{ hasFiltersSet )}
- {props.directoryType === "forSale" && ( + {props.directoryType === DIRECTORY_TYPE_SALES && (
{ diff --git a/app/javascript/modules/listings/assets/icon-home-check.tsx b/app/javascript/modules/listings/assets/icon-home-check.tsx index afbc104c9..34c09380a 100644 --- a/app/javascript/modules/listings/assets/icon-home-check.tsx +++ b/app/javascript/modules/listings/assets/icon-home-check.tsx @@ -3,8 +3,8 @@ import React from "react" export const IconHomeCheck = (