feat: DAH-2661 refactoring and adding feature flag

SFDigitalServices · Dec 18, 2024 · 917c7d5 · 917c7d5
1 parent 77cd82a
commit 917c7d5
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 76 deletions.
diff --git 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
@@ -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
@@ -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 (
     <div className="directory-page-navigation-bar">
@@ -40,7 +43,7 @@ const DirectoryPageNavigationBar = ({
               <SeedsIcon size="md">{section.icon}</SeedsIcon>
             )}
             {t(`listingsDirectory.navBar.${section.key}`, {
-              numListings: section.numListings,
+              numListings: listings[section.key].length,
             })}
           </Button>
         )

diff --git a/app/javascript/modules/listings/GenericDirectory.scss b/app/javascript/modules/listings/GenericDirectory.scss
diff --git 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<RailsListing[]>
@@ -37,15 +38,37 @@ interface RentalDirectoryProps {
   findMoreActionBlock: ReactNode
 }
 
+const DirectorySection = ({
+  refKey,
+  observerRef,
+  children,
+}: {
+  refKey: string
+  observerRef: React.MutableRefObject<null | IntersectionObserver>
+  children: ReactNode
+}) => {
+  return (
+    <div
+      id={refKey}
+      ref={(el) => {
+        if (el) {
+          observerRef?.current?.observe(el)
+        }
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
 export const GenericDirectory = (props: RentalDirectoryProps) => {
   const [rawListings, setRawListings] = useState<Array<RailsListing>>([])
   const [listings, setListings] = useState<ListingsGroups>({
     open: [],
     upcoming: [],
     results: [],
     additional: [],
-    fcfsSalesOpen: [],
-    fcfsSalesNotYetOpen: [],
+    fcfs: [],
   })
   const [loading, setLoading] = useState<boolean>(true)
   // Whether any listings are a match.
@@ -99,73 +122,44 @@ 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 (
     <LoadingOverlay isLoading={loading}>
       <div>
         {!loading && (
           <>
             {props.getPageHeader(filters, setFilters, match)}
-            <DirectoryPageNavigationBar
-              directorySections={directorySections.map((section: string) => {
-                return { key: section, ...directorySectionInfo[section] }
-              })}
-              activeItem={activeItem}
-            />
+            {newDirectoryEnabled && (
+              <DirectoryPageNavigationBar
+                directorySections={directorySections.map((section: string) => {
+                  return { key: section, ...DIRECTORY_SECTION_INFO[section] }
+                })}
+                activeItem={activeItem}
+                listings={listings}
+              />
+            )}
             <div id="listing-results">
-              <div
-                id="enter-a-lottery"
-                ref={(el) => {
-                  if (el) {
-                    observerRef?.current?.observe(el)
-                  }
-                }}
-              >
+              <DirectorySection refKey="enter-a-lottery" observerRef={observerRef}>
                 {openListingsView(
                   listings.open,
                   props.directoryType,
                   props.getSummaryTable,
                   hasFiltersSet
                 )}
-              </div>
+              </DirectorySection>
               {props.directoryType === DIRECTORY_TYPE_SALES && (
-                <div
-                  id="buy-now"
-                  ref={(el) => {
-                    if (el) {
-                      observerRef?.current?.observe(el)
-                    }
-                  }}
-                >
+                <DirectorySection refKey="buy-now" observerRef={observerRef}>
                   {fcfsSalesView(
-                    [...listings.fcfsSalesOpen, ...listings.fcfsSalesNotYetOpen],
+                    listings.fcfs,
                     props.directoryType,
                     props.getSummaryTable,
                     hasFiltersSet
                   )}
-                </div>
+                </DirectorySection>
               )}
               {props.findMoreActionBlock}
               {filters &&
@@ -175,30 +169,16 @@ export const GenericDirectory = (props: RentalDirectoryProps) => {
                   props.getSummaryTable,
                   hasFiltersSet
                 )}
-              <div
-                id="upcoming-lotteries"
-                ref={(el) => {
-                  if (el) {
-                    observerRef?.current?.observe(el)
-                  }
-                }}
-              >
+              <DirectorySection refKey="upcoming-lotteries" observerRef={observerRef}>
                 {upcomingLotteriesView(
                   listings.upcoming,
                   props.directoryType,
                   props.getSummaryTable
                 )}
-              </div>
-              <div
-                id="lottery-results"
-                ref={(el) => {
-                  if (el) {
-                    observerRef?.current?.observe(el)
-                  }
-                }}
-              >
+              </DirectorySection>
+              <DirectorySection refKey="lottery-results" observerRef={observerRef}>
                 {lotteryResultsView(listings.results, props.directoryType, props.getSummaryTable)}
-              </div>
+              </DirectorySection>
             </div>
           </>
         )}