completely removed flow-related sagas

src/hooks/dom/useGlobalLoader.ts

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { useFlowStore } from '~/store/flow/useFlowStore';
+import { hideLoader } from '~/utils/dom/hideLoader';
+
+/** simply waits for all data to settle and then show the app */
+export const useGlobalLoader = () => {
+  const flow = useFlowStore();
+
+  useEffect(() => {
+    if (!flow.isRefreshed) {
+      return;
+    }
+
+    hideLoader();
+  }, [flow.isRefreshed]);
+};

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

src/hooks/node/useCreateNode.ts

@@ -1,26 +1,23 @@
 import { useCallback } from 'react';
 import { INode } from '~/redux/types';
 import { apiPostNode } from '~/api/node';
-import { selectFlowNodes } from '~/redux/flow/selectors';
-import { flowSetNodes } from '~/redux/flow/actions';
 import { selectLabListNodes } from '~/redux/lab/selectors';
 import { labSetList } from '~/redux/lab/actions';
 import { useShallowSelect } from '~/hooks/data/useShallowSelect';
 import { useDispatch } from 'react-redux';
+import { useFlowStore } from '~/store/flow/useFlowStore';
 
 export const useCreateNode = () => {
   const dispatch = useDispatch();
-  const flowNodes = useShallowSelect(selectFlowNodes);
+  const flow = useFlowStore();
   const labNodes = useShallowSelect(selectLabListNodes);
 
   return useCallback(
     async (node: INode) => {
       const result = await apiPostNode({ node });
 
-      // TODO: use another store here someday
       if (node.is_promoted) {
-        const updatedNodes = [result.node, ...flowNodes];
-        dispatch(flowSetNodes(updatedNodes));
+        flow.setNodes([result.node, ...flow.nodes]);
       } else {
         const updatedNodes = [
           { node: result.node, comment_count: 0, last_seen: node.created_at },
@@ -29,6 +26,6 @@ export const useCreateNode = () => {
         dispatch(labSetList({ nodes: updatedNodes }));
       }
     },
-    [flowNodes, labNodes, dispatch]
+    [flow, labNodes, dispatch]
   );
 };

src/hooks/node/useOnNodeSeen.ts

@@ -1,11 +1,12 @@
 import { INode } from '~/redux/types';
 import { useDispatch } from 'react-redux';
 import { labSeenNode } from '~/redux/lab/actions';
-import { flowSeenNode } from '~/redux/flow/actions';
 import { useEffect } from 'react';
+import { useFlowStore } from '~/store/flow/useFlowStore';
 
 // useOnNodeSeen updates node seen status across all needed places
 export const useOnNodeSeen = (node?: INode) => {
+  const flow = useFlowStore();
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -15,9 +16,9 @@ export const useOnNodeSeen = (node?: INode) => {
 
     // Remove node from updated
     if (node.is_promoted) {
-      dispatch(flowSeenNode(node.id));
+      flow.seenNode(node.id);
     } else {
       dispatch(labSeenNode(node.id));
     }
-  }, [dispatch, node]);
+  }, [dispatch, flow, node]);
 };

src/hooks/node/useUpdateNode.ts

@@ -3,16 +3,16 @@ import { useCallback } from 'react';
 import { INode } from '~/redux/types';
 import { apiPostNode } from '~/api/node';
 import { selectFlowNodes } from '~/redux/flow/selectors';
-import { flowSetNodes } from '~/redux/flow/actions';
 import { selectLabListNodes } from '~/redux/lab/selectors';
 import { labSetList } from '~/redux/lab/actions';
 import { useShallowSelect } from '~/hooks/data/useShallowSelect';
 import { useDispatch } from 'react-redux';
+import { useFlowStore } from '~/store/flow/useFlowStore';
 
 export const useUpdateNode = (id: number) => {
   const dispatch = useDispatch();
   const { update } = useLoadNode(id);
-  const flowNodes = useShallowSelect(selectFlowNodes);
+  const flow = useFlowStore();
   const labNodes = useShallowSelect(selectLabListNodes);
 
   return useCallback(
@@ -25,12 +25,8 @@ export const useUpdateNode = (id: number) => {
 
       await update(result.node);
 
-      // TODO: use another store here someday
       if (node.is_promoted) {
-        const updatedNodes = flowNodes.map(item =>
-          item.id === result.node.id ? result.node : item
-        );
-        dispatch(flowSetNodes(updatedNodes));
+        flow.updateNode(result.node.id!, result.node);
       } else {
         const updatedNodes = labNodes.map(item =>
           item.node.id === result.node.id ? { ...item, node: result.node } : item
@@ -38,6 +34,6 @@ export const useUpdateNode = (id: number) => {
         dispatch(labSetList({ nodes: updatedNodes }));
       }
     },
-    [update, flowNodes, dispatch, labNodes]
+    [update, flow, labNodes, dispatch]
   );
 };