@bloom-housing/ui-components 4.0.1-alpha.49 → 4.0.1-alpha.53

package/.jest/setup-tests.js

@@ -18,6 +18,14 @@ window.matchMedia = jest.fn().mockImplementation((query) => {
   }
 })
 
+window.IntersectionObserver = class {
+  constructor(root, options) {
+    // no-op
+  }
+  observe = jest.fn()
+  disconnect = jest.fn()
+}
+
 addTranslation(general)
 
 configure({ testIdAttribute: "data-test-id" })

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.0.1-alpha.53](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.0.1-alpha.52...@bloom-housing/ui-components@4.0.1-alpha.53) (2022-02-10)
+
+
+### Features
+
+* only show MapBox map when it's in the viewport ([#2470](https://github.com/bloom-housing/bloom/issues/2470)) ([86f9d6c](https://github.com/bloom-housing/bloom/commit/86f9d6cccd7de7e635ae4eab5b1e1358faf834e4))
+
+
+
+
+
+## [4.0.1-alpha.52](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.0.1-alpha.51...@bloom-housing/ui-components@4.0.1-alpha.52) (2022-02-10)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.0.1-alpha.51](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.0.1-alpha.50...@bloom-housing/ui-components@4.0.1-alpha.51) (2022-02-09)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.0.1-alpha.50](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.0.1-alpha.49...@bloom-housing/ui-components@4.0.1-alpha.50) (2022-02-09)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
 ## [4.0.1-alpha.49](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.0.1-alpha.48...@bloom-housing/ui-components@4.0.1-alpha.49) (2022-02-09)
 
 **Note:** Version bump only for package @bloom-housing/ui-components

package/index.ts

@@ -66,6 +66,7 @@ export * from "./src/helpers/formatYesNoLabel"
 export * from "./src/helpers/getTranslationWithArguments"
 export * from "./src/helpers/preferences"
 export * from "./src/helpers/resolveObject"
+export * from "./src/helpers/useIntersect"
 export * from "./src/helpers/useMutate"
 export * from "./src/helpers/tableSummaries"
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "4.0.1-alpha.49",
+  "version": "4.0.1-alpha.53",
   "author": "Sean Albert <sean.albert@exygy.com>",
   "description": "Shared user interface components for Bloom affordable housing system",
   "homepage": "https://github.com/bloom-housing/bloom/tree/master/shared/ui-components",
@@ -69,7 +69,7 @@
     "webpack": "^4.44.2"
   },
   "dependencies": {
-    "@bloom-housing/backend-core": "^3.0.2-alpha.32",
+    "@bloom-housing/backend-core": "^3.0.2-alpha.34",
     "@mapbox/mapbox-sdk": "^0.13.0",
     "@types/body-scroll-lock": "^2.6.1",
     "@types/jwt-decode": "^2.2.1",
@@ -100,5 +100,5 @@
     "tailwindcss": "2.2.10",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "b5b98f42d3e863c6eea930b2be4f26ad841c6c30"
+  "gitHead": "1af623f3a35874c50f50b28f9231412026835cc8"
 }

package/src/helpers/useIntersect.ts

@@ -0,0 +1,48 @@
+import { useEffect, useRef, useState } from "react"
+
+interface useIntersectProps {
+  root?: Element | null
+  rootMargin?: string
+  threshold?: number
+}
+
+/**
+ * Use this hook to obtain state when an element is visible or not relative to
+ * an ancestor element (or by default the browser viewport)
+ */
+export const useIntersect = ({
+  root = null,
+  rootMargin = "0px",
+  threshold = 0,
+}: useIntersectProps) => {
+  // broadly based on this source code:
+  // https://non-traditional.dev/how-to-use-an-intersectionobserver-in-a-react-hook-9fb061ac6cb5
+
+  const [intersecting, setIntersecting] = useState(false)
+  const [element, setIntersectingElement] = useState<Element | null>(null)
+
+  const observer = useRef<IntersectionObserver | null>(null)
+
+  // Instantiate the observer upon element mount
+  useEffect(() => {
+    if (observer.current) observer.current.disconnect()
+
+    if (element) {
+      observer.current = new IntersectionObserver(
+        ([entry]) => setIntersecting(entry.isIntersecting),
+        {
+          root,
+          rootMargin,
+          threshold,
+        }
+      )
+
+      observer.current.observe(element)
+    }
+
+    // Unmount callback
+    return () => observer?.current?.disconnect()
+  }, [element, root, rootMargin, threshold])
+
+  return { setIntersectingElement, intersecting }
+}

package/src/locales/es.json

@@ -268,6 +268,29 @@
           "description": "Al menos un miembro de mi hogar es empleado del Distrito Escolar Unificado de Alameda"
         }
       },
+      "dublinHousing": {
+        "liveInDublin": {
+          "label": "Al menos un miembro de mi hogar vive en Dublín (3 puntos)"
+        },
+        "immediateFamily": {
+          "label": "Al menos un miembro de mi hogar tiene un familiar directo en Dublín (1 punto)"
+        },
+        "displacedResident": {
+          "label": "Se requirió que al menos un miembro de mi hogar se mudara de la residencia actual de Dublín debido a la demolición de la vivienda o la conversión de la vivienda de alquiler a unidad de venta (1 punto)"
+        },
+        "worksInDublin": {
+          "label": "Al menos un miembro de mi hogar trabaja a tiempo completo en Dublín (3 puntos)"
+        },
+        "publicServiceEmployee": {
+          "label": "Al menos un miembro de mi hogar es un empleado del servicio público en Dublín (1 punto adicional)"
+        },
+        "permanentlyDisabled": {
+          "label": "Al menos un miembro de mi hogar tiene una discapacidad permanente (1 punto)"
+        },
+        "senior": {
+          "label": "Al menos un miembro de mi hogar es una persona mayor, definida como de 62 años o más (1 punto)"
+        }
+      },
       "terminationOfAffordability": {
         "atLeastOne": {
           "label": "Al menos un miembro de mi hogar está sujeto a la terminación de las restricciones de asequibilidad"

package/src/locales/general.json

@@ -672,6 +672,30 @@
           "description": "At least one member of my household is an Alameda Unified School District employee."
         }
       },
+      "dublinHousing": {
+        "title": "Alameda Unified School District (AUSD) employee",
+        "liveInDublin": {
+          "label": "At least one member of my household lives in Dublin (3 points)"
+        },
+        "immediateFamily": {
+          "label": "At least one member of my household has an immediate family member in Dublin (1 point)"
+        },
+        "displacedResident": {
+          "label": "At least one member of my household was required to relocate from current Dublin residence due to demolition of dwelling or conversation of dwelling from rental to for-sale unit (1 point)"
+        },
+        "worksInDublin": {
+          "label": "At least one member of my household works full-time in Dublin (3 points)"
+        },
+        "publicServiceEmployee": {
+          "label": "At least one member of my household is a public service employee in Dublin (1 additional point)"
+        },
+        "permanentlyDisabled": {
+          "label": "At least one member of my household is permanently disabled (1 point)"
+        },
+        "senior": {
+          "label": "At least one member of my household is a senior, defined as age 62 and older (1 point)"
+        }
+      },
       "terminationOfAffordability": {
         "title": "Persons subject to termination of affordability restrictions",
         "atLeastOne": {

package/src/locales/vi.json

@@ -265,9 +265,32 @@
           "description": "Ít nhất một thành viên trong gia đình tôi là nhân viên của Học khu Thống nhất Alameda"
         }
       },
+      "dublinHousing": {
+        "liveInDublin": {
+          "label": "Ít nhất một thành viên trong gia đình tôi sống ở Dublin (3 điểm)"
+        },
+        "immediateFamily": {
+          "label": "Ít nhất một thành viên trong gia đình của tôi có người thân trong gia đình ở Dublin (1 điểm)"
+        },
+        "displacedResident": {
+          "label": "Ít nhất một thành viên trong gia đình tôi đã phải di dời khỏi nơi ở hiện tại ở Dublin do việc phá dỡ nhà ở hoặc chuyển nhà từ cho thuê sang bán (1 điểm)"
+        },
+        "worksInDublin": {
+          "label": "Ít nhất một thành viên trong gia đình tôi làm việc toàn thời gian ở Dublin (3 điểm)"
+        },
+        "publicServiceEmployee": {
+          "label": "Ít nhất một thành viên trong gia đình tôi là nhân viên dịch vụ công cộng ở Dublin (1 điểm bổ sung)"
+        },
+        "permanentlyDisabled": {
+          "label": "Ít nhất một thành viên trong gia đình tôi bị tàn tật vĩnh viễn (1 điểm)"
+        },
+        "senior": {
+          "label": "Ít nhất một thành viên trong gia đình tôi là người cao tuổi, được xác định là từ 62 tuổi trở lên (1 điểm)"
+        }
+      },
       "terminationOfAffordability": {
         "atLeastOne": {
-          "label": "Ít nhất một thành viên trong gia đình tôi phải chấm dứt các hạn chế về khả năng chi trả"
+          "label": "Ít nhất một thành viên trong gia đình, tôi phải sử dụng các hạn chế về chi trả khả năng"
         }
       },
       "liveWorkFosterCity": {

package/src/locales/zh.json

@@ -265,6 +265,29 @@
           "description": "我的至少一名家庭成员是阿拉米达联合学区的雇员"
         }
       },
+      "dublinHousing": {
+        "liveInDublin": {
+          "label": "我的至少一名家庭成员住在都柏林 (3 分)"
+        },
+        "immediateFamily": {
+          "label": "我的至少一名家庭成员在都柏林有直系亲属 (1 分)"
+        },
+        "displacedResident": {
+          "label": "由于住宅被拆除或住宅从出租转为出售单位的谈话, 我的至少一名家庭成员需要从目前都柏林的住宅搬迁 (1 分)"
+        },
+        "worksInDublin": {
+          "label": "我的至少一名家庭成员在都柏林全职工作 (3 分)"
+        },
+        "publicServiceEmployee": {
+          "label": "我的至少一名家庭成员是都柏林的公共服务人员 (加分)"
+        },
+        "permanentlyDisabled": {
+          "label": "我的家庭中至少有一名成员永久残疾 (1 分)"
+        },
+        "senior": {
+          "label": "我的家庭中至少一名成员是老年人, 定义为 62 岁及以上 (1 分)"
+        }
+      },
       "terminationOfAffordability": {
         "atLeastOne": {
           "label": "我的至少一名家庭成员受到终止负担能力限制"

package/src/page_components/listing/ListingMap.scss

@@ -1,3 +1,7 @@
+.listing-map {
+  min-height: 12rem;
+}
+
 .pin {
   @apply absolute;
   width: 30px;

package/src/page_components/listing/ListingMap.tsx

@@ -1,9 +1,10 @@
-import React, { useState, useCallback, useEffect } from "react"
+import React, { useState, useCallback, useEffect, useMemo } from "react"
 import "mapbox-gl/dist/mapbox-gl.css"
 import MapGL, { Marker } from "react-map-gl"
 
 import "./ListingMap.scss"
 import { MultiLineAddress, Address } from "../../helpers/address"
+import { useIntersect } from "../../.."
 
 export interface ListingMapProps {
   address?: Address
@@ -35,6 +36,15 @@ const isValidLongitude = (longitude: number) => {
 }
 
 const ListingMap = (props: ListingMapProps) => {
+  // Lazy load the map component only when it will become visible on screen
+  const { setIntersectingElement, intersecting } = useIntersect({
+    // `window` isn't set for SSR, so we'll use `global` instead—doesn't really
+    // matter because the map won't ever get rendered in SSR anyway
+    rootMargin: `${global.innerHeight || 0}px`,
+  })
+  const [hasIntersected, setHasIntersected] = useState(false)
+  if (intersecting && !hasIntersected) setHasIntersected(true)
+
   const [marker, setMarker] = useState({
     latitude: props.address?.latitude,
     longitude: props.address?.longitude,
@@ -95,12 +105,12 @@ const ListingMap = (props: ListingMapProps) => {
     return null
 
   return (
-    <div className="listing-map">
+    <div className="listing-map" ref={setIntersectingElement}>
       <div className="addressPopup">
         {props.listingName && <h3 className="text-caps-tiny">{props.listingName}</h3>}
         <MultiLineAddress address={props.address} />
       </div>
-      {(process.env.mapBoxToken || process.env.MAPBOX_TOKEN) && (
+      {(process.env.mapBoxToken || process.env.MAPBOX_TOKEN) && hasIntersected && (
         <MapGL
           mapboxApiAccessToken={process.env.mapBoxToken || process.env.MAPBOX_TOKEN}
           mapStyle="mapbox://styles/mapbox/streets-v11"