refactored flow page

src/utils/hooks/flow/useFlow.ts

@@ -0,0 +1,27 @@
+import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { selectFlow } from '~/redux/flow/selectors';
+import { useFlowLayout } from '~/utils/hooks/flow/useFlowLayout';
+import { selectLabUpdatesNodes } from '~/redux/lab/selectors';
+import { useDispatch } from 'react-redux';
+import { useFlowPagination } from '~/utils/hooks/flow/useFlowPagination';
+import { useCallback, useMemo } from 'react';
+import { FlowDisplay, INode } from '~/redux/types';
+import { flowSetCellView } from '~/redux/flow/actions';
+
+export const useFlow = () => {
+  const { nodes, heroes, recent, updated, isLoading } = useShallowSelect(selectFlow);
+  const { isFluid, toggleLayout } = useFlowLayout();
+  const labUpdates = useShallowSelect(selectLabUpdatesNodes);
+  const dispatch = useDispatch();
+
+  useFlowPagination({ isLoading });
+
+  const updates = useMemo(() => [...updated, ...labUpdates].slice(0, 10), [updated, labUpdates]);
+
+  const onChangeCellView = useCallback(
+    (id: INode['id'], val: FlowDisplay) => dispatch(flowSetCellView(id, val)),
+    []
+  );
+
+  return { nodes, heroes, recent, updates, isFluid, toggleLayout, onChangeCellView };
+};

src/utils/hooks/search/useSearch.ts

@@ -0,0 +1,24 @@
+import { useCallback } from 'react';
+import { flowChangeSearch, flowLoadMoreSearch } from '~/redux/flow/actions';
+import { useDispatch } from 'react-redux';
+import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { selectFlow } from '~/redux/flow/selectors';
+
+export const useSearch = () => {
+  const dispatch = useDispatch();
+  const { search } = useShallowSelect(selectFlow);
+
+  const onSearchLoadMore = useCallback(() => {
+    if (search.is_loading_more) return;
+    dispatch(flowLoadMoreSearch());
+  }, [search.is_loading_more, dispatch]);
+
+  const onSearchChange = useCallback(
+    (text: string) => {
+      dispatch(flowChangeSearch({ text }));
+    },
+    [dispatch]
+  );
+
+  return { onSearchChange, onSearchLoadMore, search };
+};