completely removed flow-related sagas

src/hooks/flow/useFlow.ts

@@ -1,20 +1,23 @@
 import { useShallowSelect } from '~/hooks/data/useShallowSelect';
-import { selectFlow } from '~/redux/flow/selectors';
 import { useFlowLayout } from '~/hooks/flow/useFlowLayout';
 import { selectLabUpdatesNodes } from '~/redux/lab/selectors';
 import { useDispatch } from 'react-redux';
-import { useFlowPagination } from '~/hooks/flow/useFlowPagination';
 import { useCallback, useMemo } from 'react';
 import { FlowDisplay, INode } from '~/redux/types';
 import { flowSetCellView } from '~/redux/flow/actions';
+import { useFlowLoader } from '~/hooks/flow/useFlowLoader';
+import { useFlowStore } from '~/store/flow/useFlowStore';
+import { useInfiniteLoader } from '~/hooks/dom/useInfiniteLoader';
 
 export const useFlow = () => {
-  const { nodes, heroes, recent, updated, isLoading } = useShallowSelect(selectFlow);
+  const { loadMore, isSyncing } = useFlowLoader();
+
+  const { nodes, heroes, recent, updated } = useFlowStore();
   const { isFluid, toggleLayout } = useFlowLayout();
   const labUpdates = useShallowSelect(selectLabUpdatesNodes);
   const dispatch = useDispatch();
 
-  useFlowPagination({ isLoading });
+  useInfiniteLoader(loadMore, isSyncing);
 
   const updates = useMemo(() => [...updated, ...labUpdates].slice(0, 10), [updated, labUpdates]);
 

src/hooks/flow/useFlowLoader.ts

@@ -0,0 +1,94 @@
+import { useCallback, useEffect, useState } from 'react';
+import { getNodeDiff } from '~/api/node';
+import { uniq } from 'ramda';
+import { useFlowStore } from '~/store/flow/useFlowStore';
+import { runInAction } from 'mobx';
+import { showErrorToast } from '~/utils/errors/showToast';
+import { delay } from 'redux-saga/effects';
+
+export const useFlowLoader = () => {
+  const [isSyncing, setIsSyncing] = useState(false);
+  const flow = useFlowStore();
+
+  /** Loads initial nodes and puts to store */
+  const getInitialNodes = useCallback(async () => {
+    try {
+      setIsSyncing(true);
+
+      const { before, after, heroes, recent, updated } = await getNodeDiff({
+        start: new Date().toISOString(),
+        end: new Date().toISOString(),
+        with_heroes: true,
+        with_updated: true,
+        with_recent: true,
+        with_valid: false,
+      });
+
+      runInAction(() => {
+        flow.setNodes(uniq([...(before || []), ...(after || [])]));
+        flow.setHeroes(heroes || []);
+        flow.setUpdated(updated || []);
+        flow.setRecent(recent || []);
+        flow.setIsRefreshed(true);
+      });
+    } catch (error) {
+      showErrorToast(error);
+    } finally {
+      setIsSyncing(false);
+    }
+  }, [flow]);
+
+  /** Loads next nodes */
+  const loadMore = useCallback(async () => {
+    try {
+      setIsSyncing(true);
+
+      const start = flow.nodes[0].created_at;
+      const end = flow.nodes[flow.nodes.length - 1] && flow.nodes[flow.nodes.length - 1].created_at;
+
+      const data = await getNodeDiff({
+        start,
+        end,
+        with_heroes: false,
+        with_updated: true,
+        with_recent: true,
+        with_valid: true,
+      });
+
+      const nodes = uniq([
+        ...(data.before || []),
+        ...(data.valid ? flow.nodes.filter(node => data.valid.includes(node.id)) : flow.nodes),
+        ...(data.after || []),
+      ]);
+
+      runInAction(() => {
+        flow.setNodes(nodes);
+
+        if (data.recent?.length) {
+          flow.setRecent(data.recent);
+        }
+
+        if (data.updated?.length) {
+          flow.setUpdated(data.updated);
+        }
+      });
+
+      // wait a little to debounce
+      await delay(1000);
+    } catch (error) {
+      showErrorToast(error);
+    } finally {
+      setIsSyncing(false);
+    }
+  }, [flow]);
+
+  useEffect(() => {
+    if (flow.isRefreshed) {
+      return;
+    }
+
+    void getInitialNodes();
+  }, [flow, getInitialNodes]);
+
+  return { getInitialNodes, isSyncing, loadMore };
+};

src/hooks/flow/useFlowPagination.ts

@@ -1,10 +0,0 @@
-import { useCallback } from 'react';
-import { flowGetMore } from '~/redux/flow/actions';
-import { useDispatch } from 'react-redux';
-import { useInfiniteLoader } from '~/hooks/dom/useInfiniteLoader';
-
-export const useFlowPagination = ({ isLoading }) => {
-  const dispatch = useDispatch();
-  const loadMore = useCallback(() => dispatch(flowGetMore()), [dispatch]);
-  useInfiniteLoader(loadMore, isLoading);
-};

src/hooks/flow/useFlowSetCellView.ts

@@ -0,0 +1,21 @@
+import { useFlowStore } from '~/store/flow/useFlowStore';
+import { useCallback } from 'react';
+import { FlowDisplay } from '~/redux/types';
+import { showErrorToast } from '~/utils/errors/showToast';
+import { postCellView } from '~/redux/flow/api';
+
+export const useFlowSetCellView = () => {
+  const { updateNode } = useFlowStore();
+
+  return useCallback(
+    async (id, flow: FlowDisplay) => {
+      try {
+        updateNode(id, { flow });
+        await postCellView({ id, flow });
+      } catch (error) {
+        showErrorToast(error);
+      }
+    },
+    [updateNode]
+  );
+};