Function Section

pwa/components/con/home/Section.tsx:27–66

({
  className = "",
  section,
  children,
}: SectionProps)

});

export default function Section({
  className = "",
  section,
  children,
}: SectionProps) {
  const [, setRef] = useDynamicRefs();
  const containerRef = setRef(`section-${section}`);
  const { sectionsVisibles, setSectionsVisibles } = useContext(SectionsContext);

  const intersection =
    containerRef &&
    useIntersection(containerRef, {
      threshold: 0.2,
    });

  const isVisible = intersection?.isIntersecting;

  useEffect(() => {
    if (isVisible && !sectionsVisibles.includes(section)) {
      setSectionsVisibles([...sectionsVisibles, section]);
    } else if (false === isVisible && sectionsVisibles.includes(section)) {
      setSectionsVisibles(
        sectionsVisibles.filter(
          (sectionVisible: string) => sectionVisible !== section
        )
      );
    }
  }, [isVisible, setSectionsVisibles, sectionsVisibles, section]);

  return (
    <section
      key={section}
      className={className}
      ref={containerRef}
      id={section}
    >
      {children}
    </section>
  );
}