added lab pagination

src/utils/hooks/flow/useFlowPagination.ts

@@ -1,23 +1,10 @@
 import { useCallback, useEffect } from 'react';
 import { flowGetMore } from '~/redux/flow/actions';
 import { useDispatch } from 'react-redux';
+import { useInfiniteLoader } from '~/utils/hooks/useInfiniteLoader';
 
 export const useFlowPagination = ({ isLoading }) => {
   const dispatch = useDispatch();
-
-  const onLoadMore = useCallback(() => {
-    (window as any).flowScrollPos = window.scrollY;
-
-    const pos = window.scrollY + window.innerHeight - document.body.scrollHeight;
-
-    if (isLoading || pos < -600) return;
-
-    dispatch(flowGetMore());
-  }, [dispatch, isLoading]);
-
-  useEffect(() => {
-    window.addEventListener('scroll', onLoadMore);
-
-    return () => window.removeEventListener('scroll', onLoadMore);
-  }, [onLoadMore]);
+  const loadMore = useCallback(() => dispatch(flowGetMore()), []);
+  useInfiniteLoader(loadMore, isLoading);
 };

src/utils/hooks/lab/useLabPagination.ts

@@ -0,0 +1,21 @@
+import { useDispatch } from 'react-redux';
+import { useCallback } from 'react';
+import { useInfiniteLoader } from '~/utils/hooks/useInfiniteLoader';
+import { labGetMore } from '~/redux/lab/actions';
+import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { selectLabList } from '~/redux/lab/selectors';
+
+export const useLabPagination = ({ isLoading }) => {
+  const { nodes, count } = useShallowSelect(selectLabList);
+
+  const dispatch = useDispatch();
+  const loadMore = useCallback(() => {
+    if (nodes.length >= count) {
+      return;
+    }
+
+    dispatch(labGetMore());
+  }, [nodes, count]);
+
+  useInfiniteLoader(loadMore, isLoading);
+};

src/utils/hooks/useInfiniteLoader.ts

@@ -0,0 +1,17 @@
+import { useCallback, useEffect } from 'react';
+
+export const useInfiniteLoader = (loader: () => void, isLoading?: boolean) => {
+  const onLoadMore = useCallback(() => {
+    const pos = window.scrollY + window.innerHeight - document.body.scrollHeight;
+
+    if (isLoading || pos < -600) return;
+
+    loader();
+  }, [loader, isLoading]);
+
+  useEffect(() => {
+    window.addEventListener('scroll', onLoadMore);
+
+    return () => window.removeEventListener('scroll', onLoadMore);
+  }, [onLoadMore]);
+};