Hotfix - Fixed Landing button logic (#934)

* Fix button logic * Fix test
Stooa · Feb 28, 2023 · e303620 · e303620
1 parent a1db552
commit e303620
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 17 deletions.
diff --git a/frontend/src/landing/Components/FixedButton/FixedButton.tsx b/frontend/src/landing/Components/FixedButton/FixedButton.tsx
@@ -11,39 +11,40 @@ import { ROUTE_FISHBOWL_CREATE } from '@/app.config';
 import Button from '@/components/Common/Button';
 import RedirectLink from '@/components/Web/RedirectLink';
 import { pushEventDataLayer } from '@/lib/analytics';
-import { useEffect, useState } from 'react';
+import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
 import { StyledButtonWrapper } from './styles';
 
+const options = {
+  rootMargin: '0px',
+  threshold: 0.5
+};
+
 const FixedButton = ({ buttonText }: { buttonText: string }) => {
   const [isVisible, setIsVisible] = useState(false);
 
-  const showButton = entries => {
+  const showButton = useCallback(entries => {
     if (!entries[0].isIntersecting) {
       setIsVisible(true);
     } else {
       setIsVisible(false);
     }
-  };
+  }, []);
+
+  const observer = useMemo(() => new IntersectionObserver(showButton, options), [showButton]);
 
-  const billboard = document.getElementById('billboard');
-  const options = {
-    rootMargin: '0px',
-    threshold: 0.5
-  };
+  useLayoutEffect(() => {
+    const billboard = document.getElementById('billboard');
 
-  const observer = new IntersectionObserver(showButton, options);
+    if (billboard && observer) {
+      observer.observe(billboard);
+    }
 
-  useEffect(() => {
     return () => {
-      if (billboard) {
+      if (billboard && observer) {
         observer.unobserve(billboard);
       }
     };
-  }, []);
-
-  if (billboard) {
-    observer.observe(billboard);
-  }
+  }, [observer]);
 
   if (!isVisible) {
     return null;

diff --git a/frontend/tests/unit/pages/Landing.test.js b/frontend/tests/unit/pages/Landing.test.js
@@ -14,7 +14,8 @@ import preloadAll from 'jest-next-dynamic';
 import Home from '@/pages/index';
 
 const intersectionObserverMock = () => ({
-  observe: () => null
+  observe: () => null,
+  unobserve: () => null
 });
 
 window.IntersectionObserver = jest.fn().mockImplementation(intersectionObserverMock);