fixed lab infinite scroll

src/components/containers/Columns/index.tsx

@@ -1,7 +1,9 @@
-import React, { FC } from 'react';
+import React, { FC, useEffect, useLayoutEffect, useRef, useState } from 'react';
 
 import Masonry from 'react-masonry-css';
 
+import { useScrollEnd } from '~/hooks/dom/useScrollEnd';
+
 import styles from './styles.module.scss';
 
 const defaultColumns = {
@@ -11,12 +13,42 @@ const defaultColumns = {
 
 interface ColumnsProps {
   cols?: Record<number, number>;
+  onScrollEnd?: () => void;
+  hasMore?: boolean;
 }
 
-const Columns: FC<ColumnsProps> = ({ children, cols = defaultColumns }) => (
-  <Masonry className={styles.wrap} breakpointCols={cols} columnClassName={styles.column}>
-    {children}
-  </Masonry>
-);
+const Columns: FC<ColumnsProps> = ({
+  children,
+  cols = defaultColumns,
+  onScrollEnd,
+  hasMore,
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [columns, setColumns] = useState<Element[]>([]);
+
+  useEffect(() => {
+    const childs = ref.current?.querySelectorAll(`.${styles.column}`);
+
+    if (!childs) return;
+
+    const timeout = setTimeout(() => setColumns([...childs]), 150);
+
+    return () => clearTimeout(timeout);
+  }, [ref.current]);
+
+  useScrollEnd(columns, onScrollEnd, { active: hasMore, threshold: 2 });
+
+  return (
+    <div ref={ref}>
+      <Masonry
+        className={styles.wrap}
+        breakpointCols={cols}
+        columnClassName={styles.column}
+      >
+        {children}
+      </Masonry>
+    </div>
+  );
+};
 
 export { Columns };