added lab pagination

src/layouts/FlowLayout/index.tsx

@@ -55,10 +55,6 @@ const FlowLayout: FC = () => {
     labUpdates,
   ]);
 
-  useEffect(() => {
-    window.scrollTo(0, (window as any).flowScrollPos || 0);
-  }, []);
-
   return (
     <div className={classNames(styles.container, { [styles.fluid]: isFluid })}>
       <div className={styles.grid}>

src/layouts/LabLayout/index.tsx

@@ -15,6 +15,7 @@ import { Superpower } from '~/components/boris/Superpower';
 import { Toggle } from '~/components/input/Toggle';
 import { usePersistedState } from '~/utils/hooks/usePersistedState';
 import classNames from 'classnames';
+import { useLabPagination } from '~/utils/hooks/lab/useLabPagination';
 
 interface IProps {}
 
@@ -22,6 +23,8 @@ const LabLayout: FC<IProps> = () => {
   const { is_loading } = useShallowSelect(selectLabList);
   const dispatch = useDispatch();
 
+  useLabPagination({ isLoading: is_loading });
+
   useEffect(() => {
     dispatch(labGetList());
     dispatch(labGetStats());

src/redux/lab/actions.ts

@@ -34,3 +34,7 @@ export const labSeenNode = (nodeId: INode['id']) => ({
   type: LAB_ACTIONS.SEEN_NODE,
   nodeId,
 });
+
+export const labGetMore = () => ({
+  type: LAB_ACTIONS.GET_MORE,
+});

src/redux/lab/constants.ts

@@ -10,4 +10,5 @@ export const LAB_ACTIONS = {
   SET_UPDATES: `${prefix}SET_UPDATES`,
   GET_UPDATES: `${prefix}GET_UPDATES`,
   SEEN_NODE: `${prefix}SET_UPDATE_SEEN`,
+  GET_MORE: `${prefix}GET_MORE`,
 };

src/redux/lab/sagas.ts

@@ -9,7 +9,7 @@ import {
 import { LAB_ACTIONS } from '~/redux/lab/constants';
 import { Unwrap } from '~/redux/types';
 import { getLabNodes, getLabStats, getLabUpdates } from '~/redux/lab/api';
-import { selectLabUpdatesNodes } from '~/redux/lab/selectors';
+import { selectLabList, selectLabUpdatesNodes } from '~/redux/lab/selectors';
 
 function* getList({ after = '' }: ReturnType<typeof labGetList>) {
   try {
@@ -53,10 +53,39 @@ function* seenNode({ nodeId }: ReturnType<typeof labSeenNode>) {
   yield put(labSetUpdates({ nodes: newNodes }));
 }
 
+function* getMore() {
+  try {
+    yield put(labSetList({ is_loading: true }));
+
+    const list: ReturnType<typeof selectLabList> = yield select(selectLabList);
+    if (list.nodes.length === list.count) {
+      return;
+    }
+
+    const last = list.nodes[list.nodes.length];
+
+    if (!last) {
+      return;
+    }
+
+    const after = last.node.created_at;
+    const { nodes, count }: Unwrap<typeof getLabNodes> = yield call(getLabNodes, { after });
+    const newNodes = [...list.nodes, ...nodes];
+
+    yield put(labSetList({ nodes: newNodes, count }));
+  } catch (error) {
+    yield put(labSetList({ error: error.message }));
+  } finally {
+    yield put(labSetList({ is_loading: false }));
+  }
+}
+
 export default function* labSaga() {
   yield takeLeading(LAB_ACTIONS.GET_LIST, getList);
   yield takeLeading(LAB_ACTIONS.GET_STATS, getStats);
 
   yield takeLeading(LAB_ACTIONS.GET_UPDATES, getUpdates);
   yield takeLeading(LAB_ACTIONS.SEEN_NODE, seenNode);
+
+  yield takeLeading(LAB_ACTIONS.GET_MORE, getMore);
 }

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 loadMore = useCallback(() => dispatch(flowGetMore()), []);
-  const onLoadMore = useCallback(() => {
+  useInfiniteLoader(loadMore, isLoading);
-    (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]);
 };

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]);
+};