diff --git a/app/javascript/modules/constants.tsx b/app/javascript/modules/constants.tsx index 888b012f7..1ea5e07b7 100644 --- a/app/javascript/modules/constants.tsx +++ b/app/javascript/modules/constants.tsx @@ -1,3 +1,5 @@ +import { IconHomeCheck } from "./listings/assets/icon-home-check" + export const PREFERENCES = { aliceGriffith: "Alice Griffith Housing Development Resident", antiDisplacement: "Anti-Displacement Housing Preference (ADHP)", @@ -124,3 +126,21 @@ export const RENTAL_DIRECTORY_SECTIONS = [ ] export const DIRECTORY_TYPE_SALES = "forSale" +export const DIRECTORY_SECTION_INFO = { + open: { + ref: "enter-a-lottery", + icon: "house", + }, + fcfs: { + ref: "buy-now", + icon: IconHomeCheck, + }, + upcoming: { + ref: "upcoming-lotteries", + icon: "clock", + }, + results: { + ref: "lottery-results", + icon: "result", + }, +} diff --git a/app/javascript/modules/listings/DirectoryHelpers.tsx b/app/javascript/modules/listings/DirectoryHelpers.tsx index a57a70494..0be1818f5 100644 --- a/app/javascript/modules/listings/DirectoryHelpers.tsx +++ b/app/javascript/modules/listings/DirectoryHelpers.tsx @@ -50,8 +50,7 @@ export interface ListingsGroups { upcoming: RailsListing[] results: RailsListing[] additional: RailsListing[] - fcfsSalesOpen: RailsListing[] - fcfsSalesNotYetOpen: RailsListing[] + fcfs: RailsListing[] } type Listing = RailsRentalListing & { @@ -433,8 +432,7 @@ export const sortListings = ( upcoming, results, additional, - fcfsSalesOpen, - fcfsSalesNotYetOpen, + fcfs: [...fcfsSalesOpen, ...fcfsSalesNotYetOpen], } as ListingsGroups } diff --git a/app/javascript/modules/listings/DirectoryPageNavigationBar.tsx b/app/javascript/modules/listings/DirectoryPageNavigationBar.tsx index c867c63a8..f6264ada7 100644 --- a/app/javascript/modules/listings/DirectoryPageNavigationBar.tsx +++ b/app/javascript/modules/listings/DirectoryPageNavigationBar.tsx @@ -2,6 +2,7 @@ import React, { ReactNode } from "react" import "./DirectoryPageNavigationBar.scss" import { Button, Icon as SeedsIcon } from "@bloom-housing/ui-seeds" import { Icon, t, UniversalIconType } from "@bloom-housing/ui-components" +import { ListingsGroups } from "./DirectoryHelpers" interface DirectorySectionInfoObject { key: string ref: string @@ -12,9 +13,11 @@ interface DirectorySectionInfoObject { const DirectoryPageNavigationBar = ({ directorySections, activeItem, + listings, }: { directorySections: DirectorySectionInfoObject[] activeItem: string + listings: ListingsGroups }) => { return (
@@ -40,7 +43,7 @@ const DirectoryPageNavigationBar = ({ {section.icon} )} {t(`listingsDirectory.navBar.${section.key}`, { - numListings: section.numListings, + numListings: listings[section.key].length, })} ) diff --git a/app/javascript/modules/listings/GenericDirectory.scss b/app/javascript/modules/listings/GenericDirectory.scss deleted file mode 100644 index 436cc7434..000000000 --- a/app/javascript/modules/listings/GenericDirectory.scss +++ /dev/null @@ -1,3 +0,0 @@ -.site-content { - scroll-behavior: smooth; -} diff --git a/app/javascript/modules/listings/GenericDirectory.tsx b/app/javascript/modules/listings/GenericDirectory.tsx index 3068b291b..b48c2ee69 100644 --- a/app/javascript/modules/listings/GenericDirectory.tsx +++ b/app/javascript/modules/listings/GenericDirectory.tsx @@ -18,11 +18,12 @@ import "./ListingDirectory.scss" import { MailingListSignup } from "../../components/MailingListSignup" import DirectoryPageNavigationBar from "./DirectoryPageNavigationBar" import { + DIRECTORY_SECTION_INFO, DIRECTORY_TYPE_SALES, RENTAL_DIRECTORY_SECTIONS, SALE_DIRECTORY_SECTIONS, } from "../constants" -import { IconHomeCheck } from "./assets/icon-home-check" +import { useFeatureFlag } from "../../hooks/useFeatureFlag" interface RentalDirectoryProps { listingsAPI: (filters?: EligibilityFilters) => Promise @@ -37,6 +38,29 @@ interface RentalDirectoryProps { findMoreActionBlock: ReactNode } +const DirectorySection = ({ + refKey, + observerRef, + children, +}: { + refKey: string + observerRef: React.MutableRefObject + children: ReactNode +}) => { + return ( +
{ + if (el) { + observerRef?.current?.observe(el) + } + }} + > + {children} +
+ ) +} + export const GenericDirectory = (props: RentalDirectoryProps) => { const [rawListings, setRawListings] = useState>([]) const [listings, setListings] = useState({ @@ -44,8 +68,7 @@ export const GenericDirectory = (props: RentalDirectoryProps) => { upcoming: [], results: [], additional: [], - fcfsSalesOpen: [], - fcfsSalesNotYetOpen: [], + fcfs: [], }) const [loading, setLoading] = useState(true) // Whether any listings are a match. @@ -99,28 +122,10 @@ export const GenericDirectory = (props: RentalDirectoryProps) => { ? 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, - }, - } + const { unleashFlag: newDirectoryEnabled } = useFeatureFlag( + "temp.webapp.directory.listings", + false + ) return ( @@ -128,44 +133,33 @@ export const GenericDirectory = (props: RentalDirectoryProps) => { {!loading && ( <> {props.getPageHeader(filters, setFilters, match)} - { - return { key: section, ...directorySectionInfo[section] } - })} - activeItem={activeItem} - /> + {newDirectoryEnabled && ( + { + return { key: section, ...DIRECTORY_SECTION_INFO[section] } + })} + activeItem={activeItem} + listings={listings} + /> + )}
-
{ - if (el) { - observerRef?.current?.observe(el) - } - }} - > + {openListingsView( listings.open, props.directoryType, props.getSummaryTable, hasFiltersSet )} -
+ {props.directoryType === DIRECTORY_TYPE_SALES && ( -
{ - if (el) { - observerRef?.current?.observe(el) - } - }} - > + {fcfsSalesView( - [...listings.fcfsSalesOpen, ...listings.fcfsSalesNotYetOpen], + listings.fcfs, props.directoryType, props.getSummaryTable, hasFiltersSet )} -
+ )} {props.findMoreActionBlock} {filters && @@ -175,30 +169,16 @@ export const GenericDirectory = (props: RentalDirectoryProps) => { props.getSummaryTable, hasFiltersSet )} -
{ - if (el) { - observerRef?.current?.observe(el) - } - }} - > + {upcomingLotteriesView( listings.upcoming, props.directoryType, props.getSummaryTable )} -
-
{ - if (el) { - observerRef?.current?.observe(el) - } - }} - > + + {lotteryResultsView(listings.results, props.directoryType, props.getSummaryTable)} -
+
)}