feat: DAH-2661 componentize

SFDigitalServices · Dec 17, 2024 · 53c42c1 · 53c42c1
1 parent 03f2586
commit 53c42c1
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 45 deletions.
diff --git a/app/assets/json/translations/react/en.json b/app/assets/json/translations/react/en.json
@@ -1348,6 +1348,10 @@
   "listingsForSale.beforeApplying.step4": "Get pre-approved for a mortgage loan by a <a href='%{url}' target='_blank'>lender on our list</a>",
   "listingsForSale.beforeApplying.step5": "Have enough in savings for closing costs and downpayment",
   "listingsForSale.beforeApplying.title": "Before applying",
+  "listingsDirectory.navBar.open": "Enter a lottery (%{numListings})",
+  "listingsDirectory.navBar.fcfs": "Buy now (%{numListings})",
+  "listingsDirectory.navBar.upcoming": "Upcoming lotteries (%{numListings})",
+  "listingsDirectory.navBar.results": "Lottery results (%{numListings})",
   "listingsForSale.beforeApplyingHabitat.readFullList": "Read <a href='%{url}' target='_blank'>the full list of requirements</a> for more details.",
   "listingsForSale.beforeApplyingHabitat.rulesAreDifferent": "These units have rules that are different from other ownership listings on DAHLIA. Make sure you:",
   "listingsForSale.beforeApplyingHabitat.step1": "Go to a <a href='%{url}' target='_blank'>Habitat for Humanity information session</a>",

diff --git a/app/javascript/modules/listings/DirectoryPageNavigationBar.tsx b/app/javascript/modules/listings/DirectoryPageNavigationBar.tsx
@@ -1,63 +1,52 @@
 import React from "react"
 import "./DirectoryPageNavigationBar.scss"
 import { Button } from "@bloom-housing/ui-seeds"
-import { Icon } from "@bloom-housing/ui-components"
+import { Icon, t } from "@bloom-housing/ui-components"
 
 const DirectoryPageNavigationBar = ({
   directoryType,
   listingLengths,
   activeItem,
-  setActiveItem,
 }: {
   directoryType: string
   listingLengths: { open: number; upcoming: number; fcfs: number; results: number }
   activeItem: string
   setActiveItem: React.Dispatch<string>
 }) => {
+  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 (
     <div className="directory-page-navigation-bar">
-      <Button
-        onClick={() => {
-          document.querySelector("#enter-a-lottery").scrollIntoView({ behavior: "smooth" })
-          setActiveItem("enter-a-lottery")
-        }}
-        className={activeItem === "enter-a-lottery" ? "active" : ""}
-      >
-        <Icon size="medium" symbol="house" />
-        Enter a lottery ({listingLengths.open})
-      </Button>
-      {directoryType === "forSale" && (
-        <Button
-          onClick={() => {
-            document.querySelector("#buy-now").scrollIntoView({ behavior: "smooth" })
-            setActiveItem("buy-now")
-          }}
-          className={activeItem === "buy-now" ? "active" : ""}
-        >
-          <Icon size="medium" symbol="house" />
-          Buy now ({listingLengths.fcfs})
-        </Button>
-      )}
-      <Button
-        onClick={() => {
-          document.querySelector("#upcoming-lotteries").scrollIntoView({ behavior: "smooth" })
-          setActiveItem("upcoming-lotteries")
-        }}
-        className={activeItem === "upcoming-lotteries" ? "active" : ""}
-      >
-        <Icon size="medium" symbol="clock" />
-        Upcoming lotteries ({listingLengths.upcoming})
-      </Button>
-      <Button
-        onClick={() => {
-          document.querySelector("#lottery-results").scrollIntoView({ behavior: "smooth" })
-          setActiveItem("lottery-results")
-        }}
-        className={activeItem === "lottery-results" ? "active" : ""}
-      >
-        <Icon size="medium" symbol="clock" />
-        Lottery results ({listingLengths.results})
-      </Button>
+      {Object.keys(directorySections).map((listingType, index) => {
+        return (
+          <Button
+            key={`nav-button-${index}`}
+            onClick={() => {
+              document
+                .querySelector(`#${directorySections[listingType].key}`)
+                .scrollIntoView({ behavior: "smooth" })
+            }}
+            className={activeItem === directorySections[listingType].key ? "active" : ""}
+          >
+            <Icon size="medium" symbol={directorySections[listingType].icon} />
+            {t(`listingsDirectory.navBar.${listingType}`, {
+              numListings: listingLengths[listingType],
+            })}
+          </Button>
+        )
+      })}
     </div>
   )
 }

diff --git a/app/javascript/modules/listings/GenericDirectory.tsx b/app/javascript/modules/listings/GenericDirectory.tsx
@@ -66,10 +66,10 @@ export const GenericDirectory = (props: RentalDirectoryProps) => {
 
   const observerRef = useRef(null)
   useEffect(() => {
-    let prevRatio = null
     const handleIntersectionEvents = (events: IntersectionObserverEntry[]) => {
       let newActiveItem = activeItem
       for (const e of events) {
+        let prevRatio = null
         if (e.isIntersecting) {
           if (!prevRatio) {
             prevRatio = e.intersectionRatio