add useIntersect hook to card component

Author: cherylli

components/CardsColumns.js

@@ -1,6 +1,8 @@
+import { useEffect, useState } from 'react';
 import Card from './Card';
 import Container from './Container';
 import styles from '../styles/CardsColumns.module.scss';
+import { useIntersect } from '../hooks/useIntersect';
 
 export default function CardsColumns({
   images,
@@ -10,9 +12,23 @@ export default function CardsColumns({
   links,
   linkText,
 }) {
+  const [ref, entry] = useIntersect({ threshold: 0.15 });
+  const [firstLoad, setFirstLoad] = useState(true);
+  const [hiddenStyle, setHiddenStyle] = useState('section__hidden');
+
+  useEffect(() => {
+    if (entry.isIntersecting && firstLoad) {
+      setHiddenStyle('');
+      setFirstLoad(false);
+    }
+  }, [entry.isIntersecting]);
+
   return (
     <Container>
-      <div className={styles.inner__content}>
+      <div
+        ref={ref}
+        className={`${styles.inner__content}  ${styles[hiddenStyle]}`}
+      >
         {titles.map((title, index) => {
           return (
             <Card

components/TwoColumn.js

@@ -35,12 +35,6 @@ export default function TwoColumn({
     if (entry.isIntersecting && firstLoad) {
       setHiddenStyle('');
       setFirstLoad(false);
-      console.log(
-        title,
-        entry.isIntersecting,
-        entry.intersectionRatio,
-        hiddenStyle
-      );
     }
   }, [entry.isIntersecting]);
 

hooks/useIntersect.js

@@ -7,16 +7,13 @@ export const useIntersect = ({ root = null, rootMargin, threshold = 0 }) => {
   const observer = useRef(null);
 
   useEffect(() => {
-    //if (observer.current) observer.current.disconnect();
-
     observer = new window.IntersectionObserver(
       ([entry]) => {
         setEntry(entry);
       },
       { root, rootMargin, threshold }
     );
 
-    //const { current: currentObserver } = observer;
     if (node) {
       observer.observe(node);
     }

styles/CardsColumns.module.scss

@@ -1,10 +1,16 @@
 @use './variables' as *;
 @use './mixins' as *;
 
+.section__hidden {
+  opacity: 0;
+  transform: translateY(8rem);
+}
+
 .inner__content {
   margin: 0 auto;
   padding-bottom: 12rem;
   justify-content: center;
+  transition: transform 1s, opacity 1s;
 
   @include desktop-breakpoint-plus {
     display: flex;