From 03f2586bbf17f42072ae4310459cd2ef05a0dd0e Mon Sep 17 00:00:00 2001 From: tallulah Date: Tue, 17 Dec 2024 10:08:45 -0800 Subject: [PATCH] feat: DAH-2661 update how observer works --- .../HeaderSidebarLayout.test.tsx.snap | 1 - .../account-settings.test.tsx.snap | 4 - .../__snapshots__/how-to-apply.test.tsx.snap | 1 - .../ListingInterestPage.test.tsx.snap | 4 - .../__tests__/pages/listings/ForRent.test.tsx | 5 + .../__tests__/pages/listings/ForSale.test.tsx | 5 + .../__snapshots__/ForRent.test.tsx.snap | 92 +++++++++++++- .../__snapshots__/ForSale.test.tsx.snap | 119 +++++++++++++++++- .../__snapshots__/ListingDetail.test.tsx.snap | 4 - .../modules/listings/GenericDirectory.tsx | 18 ++- 10 files changed, 226 insertions(+), 27 deletions(-) diff --git a/app/javascript/__tests__/layouts/__snapshots__/HeaderSidebarLayout.test.tsx.snap b/app/javascript/__tests__/layouts/__snapshots__/HeaderSidebarLayout.test.tsx.snap index 1e2ad02bd2..0e8a1bfd6e 100644 --- a/app/javascript/__tests__/layouts/__snapshots__/HeaderSidebarLayout.test.tsx.snap +++ b/app/javascript/__tests__/layouts/__snapshots__/HeaderSidebarLayout.test.tsx.snap @@ -215,7 +215,6 @@ exports[` Contact Bar renders Contact Information 1`] = `
diff --git a/app/javascript/__tests__/pages/account/__snapshots__/account-settings.test.tsx.snap b/app/javascript/__tests__/pages/account/__snapshots__/account-settings.test.tsx.snap index d468afafb0..a2ff1415b4 100644 --- a/app/javascript/__tests__/pages/account/__snapshots__/account-settings.test.tsx.snap +++ b/app/javascript/__tests__/pages/account/__snapshots__/account-settings.test.tsx.snap @@ -224,7 +224,6 @@ exports[` when the user is signed in resize events 1`] =
@@ -1090,7 +1089,6 @@ exports[` when the user is signed in resize events 1`] =
@@ -1989,7 +1987,6 @@ exports[` when the user is signed in resize events 2`] =
@@ -2831,7 +2828,6 @@ exports[` when the user is signed in resize events 2`] =
diff --git a/app/javascript/__tests__/pages/how-to-apply/__snapshots__/how-to-apply.test.tsx.snap b/app/javascript/__tests__/pages/how-to-apply/__snapshots__/how-to-apply.test.tsx.snap index 1e7e35f4ba..5e9f186731 100644 --- a/app/javascript/__tests__/pages/how-to-apply/__snapshots__/how-to-apply.test.tsx.snap +++ b/app/javascript/__tests__/pages/how-to-apply/__snapshots__/how-to-apply.test.tsx.snap @@ -221,7 +221,6 @@ exports[` renders HowToApply component 1`] = `
diff --git a/app/javascript/__tests__/pages/listingInterest/__snapshots__/ListingInterestPage.test.tsx.snap b/app/javascript/__tests__/pages/listingInterest/__snapshots__/ListingInterestPage.test.tsx.snap index 6ccb44a41d..6e9d54e525 100644 --- a/app/javascript/__tests__/pages/listingInterest/__snapshots__/ListingInterestPage.test.tsx.snap +++ b/app/javascript/__tests__/pages/listingInterest/__snapshots__/ListingInterestPage.test.tsx.snap @@ -221,7 +221,6 @@ exports[`Listing Interest Page renders listing interest page with error response
@@ -601,7 +600,6 @@ exports[`Listing Interest Page renders listing interest page with expired respon
@@ -1051,7 +1049,6 @@ exports[`Listing Interest Page renders listing interest page with no response 1`
@@ -1463,7 +1460,6 @@ exports[`Listing Interest Page renders listing interest page with yes response 1
diff --git a/app/javascript/__tests__/pages/listings/ForRent.test.tsx b/app/javascript/__tests__/pages/listings/ForRent.test.tsx index e889b9d36c..d26ffb1909 100644 --- a/app/javascript/__tests__/pages/listings/ForRent.test.tsx +++ b/app/javascript/__tests__/pages/listings/ForRent.test.tsx @@ -22,6 +22,11 @@ jest.mock("../../../hooks/useFeatureFlag", () => ({ describe("For Rent", () => { beforeEach(() => { ;(useFeatureFlag as jest.Mock).mockReturnValue({ flagsReady: true }) + const mockIntersectionObserver = jest.fn() + mockIntersectionObserver.mockReturnValue({ + observe: () => null, + }) + window.IntersectionObserver = mockIntersectionObserver }) afterEach(() => { cleanup() diff --git a/app/javascript/__tests__/pages/listings/ForSale.test.tsx b/app/javascript/__tests__/pages/listings/ForSale.test.tsx index fb46b94a5c..e7588e75a3 100644 --- a/app/javascript/__tests__/pages/listings/ForSale.test.tsx +++ b/app/javascript/__tests__/pages/listings/ForSale.test.tsx @@ -23,6 +23,11 @@ jest.mock("../../../hooks/useFeatureFlag", () => ({ describe("For Sale", () => { beforeEach(() => { ;(useFeatureFlag as jest.Mock).mockReturnValue({ flagsReady: true }) + const mockIntersectionObserver = jest.fn() + mockIntersectionObserver.mockReturnValue({ + observe: () => null, + }) + window.IntersectionObserver = mockIntersectionObserver }) afterEach(() => { 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 3323b2d9aa..6deed8aabd 100644 --- a/app/javascript/__tests__/pages/listings/__snapshots__/ForRent.test.tsx.snap +++ b/app/javascript/__tests__/pages/listings/__snapshots__/ForRent.test.tsx.snap @@ -221,7 +221,6 @@ exports[`For Rent renders ForRent component 1`] = `
@@ -263,9 +262,94 @@ exports[`For Rent renders ForRent component 1`] = ` +
+ + + +
+
@@ -302,6 +386,12 @@ exports[`For Rent renders ForRent component 1`] = `
+
+
@@ -338,9 +337,121 @@ exports[`For Sale renders ForSale component 1`] = `
+
+ + + + +
+
+
@@ -377,6 +488,12 @@ exports[`For Sale renders ForSale component 1`] = `
+
+
@@ -5054,7 +5053,6 @@ exports[`Listing Detail renders a habitat listing 1`] = `
@@ -9886,7 +9884,6 @@ exports[`Listing Detail renders a listing with sro units 1`] = `
@@ -14820,7 +14817,6 @@ exports[`Listing Detail renders an open rental listing 1`] = `
diff --git a/app/javascript/modules/listings/GenericDirectory.tsx b/app/javascript/modules/listings/GenericDirectory.tsx index 67b36e9a14..a880e36c6c 100644 --- a/app/javascript/modules/listings/GenericDirectory.tsx +++ b/app/javascript/modules/listings/GenericDirectory.tsx @@ -66,19 +66,15 @@ export const GenericDirectory = (props: RentalDirectoryProps) => { const observerRef = useRef(null) useEffect(() => { - const handleIntersectionEvent = (element) => { + let prevRatio = null + const handleIntersectionEvents = (events: IntersectionObserverEntry[]) => { let newActiveItem = activeItem - let prevY = null - for (const e of element) { + for (const e of events) { if (e.isIntersecting) { - if (!prevY) { - console.log("first if") - prevY = e.boundingClientRect.y + if (!prevRatio) { + prevRatio = e.intersectionRatio newActiveItem = e.target.id - } - - if (e.boundingClientRect.y < prevY) { - console.log("second if") + } else if (e.intersectionRatio > prevRatio) { newActiveItem = e.target.id } } @@ -87,7 +83,7 @@ export const GenericDirectory = (props: RentalDirectoryProps) => { setActiveItem(newActiveItem) } - observerRef.current = new IntersectionObserver(handleIntersectionEvent) + observerRef.current = new IntersectionObserver(handleIntersectionEvents) }, [activeItem]) const hasFiltersSet = filters !== null