added updates everywhere

src/components/flow/Cell/index.tsx

@@ -6,10 +6,8 @@ import classNames from 'classnames';
 import styles from './styles.module.scss';
 import markdown from '~/styles/common/markdown.module.scss';
 import { Icon } from '~/components/input/Icon';
-import { flowSetCellView } from '~/redux/flow/actions';
 import { PRESETS } from '~/constants/urls';
 import { NODE_TYPES } from '~/redux/node/constants';
-import { Group } from '~/components/containers/Group';
 import { Link } from 'react-router-dom';
 
 const THUMBNAIL_SIZES = {
@@ -21,8 +19,8 @@ interface IProps {
   is_text?: boolean;
   can_edit?: boolean;
 
-  onSelect: (id: INode['id'], type: INode['type']) => void;
-  onChangeCellView: typeof flowSetCellView;
+  onSelect: (id: INode['id']) => void;
+  onChangeCellView: (id: INode['id'], flow: INode['flow']) => void;
 }
 
 const Cell: FC<IProps> = ({

src/components/flow/FlowGrid/index.tsx

@@ -1,19 +1,22 @@
-import React, { FC, Fragment } from 'react';
+import React, { FC, Fragment, useCallback } from 'react';
 import { Cell } from '~/components/flow/Cell';
 
 import { IFlowState } from '~/redux/flow/reducer';
 import { INode } from '~/redux/types';
 import { canEditNode } from '~/utils/node';
 import { IUser } from '~/redux/auth/types';
-import { flowSetCellView } from '~/redux/flow/actions';
+import { useHistory } from 'react-router';
+import { URLS } from '~/constants/urls';
 
 type IProps = Partial<IFlowState> & {
   user: Partial<IUser>;
-  onSelect: (id: INode['id'], type: INode['type']) => void;
-  onChangeCellView: typeof flowSetCellView;
+  onChangeCellView: (id: INode['id'], flow: INode['flow']) => void;
 };
 
-export const FlowGrid: FC<IProps> = ({ user, nodes, onSelect, onChangeCellView }) => {
+export const FlowGrid: FC<IProps> = ({ user, nodes, onChangeCellView }) => {
+  const history = useHistory();
+  const onSelect = useCallback((id: INode['id']) => history.push(URLS.NODE_URL(id)), [history]);
+
   if (!nodes) {
     return null;
   }

src/components/flow/FlowRecentItem/index.tsx

@@ -6,6 +6,7 @@ import { NodeRelatedItem } from '~/components/node/NodeRelatedItem';
 import { getPrettyDate } from '~/utils/dom';
 import { Link } from 'react-router-dom';
 import classNames from 'classnames';
+import { Icon } from '~/components/input/Icon';
 
 interface IProps {
   node: Partial<INode>;
@@ -15,13 +16,22 @@ interface IProps {
 const FlowRecentItem: FC<IProps> = ({ node, has_new }) => {
   return (
     <Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}>
-      <div className={classNames(styles.thumb, { [styles.new]: has_new })}>
+      <div
+        className={classNames(styles.thumb, {
+          [styles.new]: has_new,
+          [styles.lab]: !node.is_promoted,
+        })}
+      >
         <NodeRelatedItem item={node} />
       </div>
 
       <div className={styles.info}>
         <div className={styles.title}>{node.title || '...'}</div>
-        <div className={styles.comment}>{getPrettyDate(node.created_at)}</div>
+
+        <div className={styles.comment}>
+          {!node.is_promoted && <Icon icon="lab" size={14} />}
+          <span>{getPrettyDate(node.created_at)}</span>
+        </div>
       </div>
     </Link>
   );

src/components/flow/FlowRecentItem/styles.module.scss

@@ -37,6 +37,12 @@
       bottom: -2px;
     }
   }
+
+  &.lab {
+    &::after {
+      background: $blue;
+    }
+  }
 }
 
 .info {
@@ -55,8 +61,16 @@
 .comment {
   font: $font_12_regular;
   margin-top: 4px;
-  opacity: 0.5;
+  color: darken(white, 50%);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+
+  svg {
+    fill: currentColor;
+    margin-right: $gap / 2;
+    margin-top: 1px;
+  }
 }

src/components/flow/FlowStamp/index.tsx

@@ -13,20 +13,16 @@ interface IProps {
   recent: IFlowState['recent'];
   updated: IFlowState['updated'];
   search: IFlowState['search'];
-  flowChangeSearch: typeof FLOW_ACTIONS.flowChangeSearch;
+  onSearchChange: (text: string) => void;
   onLoadMore: () => void;
 }
 
-const FlowStamp: FC<IProps> = ({ recent, updated, search, flowChangeSearch, onLoadMore }) => {
-  const onSearchChange = useCallback((text: string) => flowChangeSearch({ text }), [
-    flowChangeSearch,
-  ]);
-
+const FlowStamp: FC<IProps> = ({ recent, updated, search, onSearchChange, onLoadMore }) => {
   const onSearchSubmit = useCallback((event: FormEvent) => {
     event.preventDefault();
   }, []);
 
-  const onClearSearch = useCallback(() => flowChangeSearch({ text: '' }), [flowChangeSearch]);
+  const onClearSearch = useCallback(() => onSearchChange(''), [onSearchChange]);
 
   const onKeyUp = useCallback(
     event => {

src/components/main/Header/index.tsx

@@ -21,6 +21,9 @@ import * as AUTH_ACTIONS from '~/redux/auth/actions';
 import { IState } from '~/redux/store';
 import isBefore from 'date-fns/isBefore';
 import { Authorized } from '~/components/containers/Authorized';
+import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { selectLabUpdates, selectLabUpdatesNodes } from '~/redux/lab/selectors';
+import { selectFlow, selectFlowUpdated } from '~/redux/flow/selectors';
 
 const mapStateToProps = (state: IState) => ({
   user: pick(['username', 'is_user', 'photo', 'last_seen_boris'])(selectUser(state)),
@@ -48,7 +51,8 @@ const HeaderUnconnected: FC<IProps> = memo(
     authOpenProfile,
   }) => {
     const [is_scrolled, setIsScrolled] = useState(false);
-
+    const labUpdates = useShallowSelect(selectLabUpdatesNodes);
+    const flowUpdates = useShallowSelect(selectFlowUpdated);
     const onLogin = useCallback(() => showDialog(DIALOGS.LOGIN), [showDialog]);
 
     const onScroll = useCallback(() => {
@@ -74,6 +78,9 @@ const HeaderUnconnected: FC<IProps> = memo(
       [boris_commented_at, last_seen_boris]
     );
 
+    const hasLabUpdates = useMemo(() => labUpdates.length > 0, [labUpdates]);
+    const hasFlowUpdates = useMemo(() => flowUpdates.length > 0, [flowUpdates]);
+
     return createPortal(
       <div className={classNames(styles.wrap, { [styles.is_scrolled]: is_scrolled })}>
         <div className={styles.container}>
@@ -83,7 +90,10 @@ const HeaderUnconnected: FC<IProps> = memo(
 
           <div className={styles.plugs}>
             <Link
-              className={classNames(styles.item, { [styles.is_active]: pathname === URLS.BASE })}
+              className={classNames(styles.item, {
+                [styles.is_active]: pathname === URLS.BASE,
+                [styles.has_dot]: hasFlowUpdates,
+              })}
               to={URLS.BASE}
             >
               ФЛОУ
@@ -91,7 +101,10 @@ const HeaderUnconnected: FC<IProps> = memo(
 
             <Authorized>
               <Link
-                className={classNames(styles.item, { [styles.is_active]: pathname === URLS.BASE })}
+                className={classNames(styles.item, styles.lab, {
+                  [styles.is_active]: pathname === URLS.LAB,
+                  [styles.has_dot]: hasLabUpdates,
+                })}
                 to={URLS.LAB}
               >
                 ЛАБ
@@ -99,7 +112,7 @@ const HeaderUnconnected: FC<IProps> = memo(
             </Authorized>
 
             <Link
-              className={classNames(styles.item, {
+              className={classNames(styles.item, styles.boris, {
                 [styles.is_active]: pathname === URLS.BORIS,
                 [styles.has_dot]: hasBorisUpdates,
               })}

src/components/main/Header/styles.module.scss

@@ -116,6 +116,15 @@
     }
   }
 
+  &.lab::after {
+    background: lighten($blue, 10%);
+  }
+
+  &.boris::after {
+    background: lighten($wisegreen, 10%);
+  }
+
+
   @include tablet {
     padding: $gap;
 

src/constants/api.ts

@@ -53,5 +53,6 @@ export const API = {
   LAB: {
     NODES: `/lab/`,
     STATS: '/lab/stats',
+    UPDATES: '/lab/updates',
   },
 };

src/containers/lab/LabStats/index.tsx

@@ -11,9 +11,11 @@ import {
   selectLabStatsHeroes,
   selectLabStatsLoading,
   selectLabStatsTags,
+  selectLabUpdatesNodes,
 } from '~/redux/lab/selectors';
 import { LabTags } from '~/components/lab/LabTags';
 import { LabHeroes } from '~/components/lab/LabHeroes';
+import { FlowRecentItem } from '~/components/flow/FlowRecentItem';
 
 interface IProps {}
 
@@ -21,6 +23,7 @@ const LabStats: FC<IProps> = () => {
   const tags = useShallowSelect(selectLabStatsTags);
   const heroes = useShallowSelect(selectLabStatsHeroes);
   const isLoading = useShallowSelect(selectLabStatsLoading);
+  const updates = useShallowSelect(selectLabUpdatesNodes);
 
   return (
     <Group>
@@ -42,6 +45,17 @@ const LabStats: FC<IProps> = () => {
           <div />
           <div />
 
+          {updates.length > 0 && (
+            <>
+              <div className={styles.title}>Новые</div>
+              <Group className={styles.updates}>
+                {updates.map(node => (
+                  <FlowRecentItem node={node} key={node.id} has_new />
+                ))}
+              </Group>
+            </>
+          )}
+
           {isLoading ? (
             <Placeholder height={14} width="100px" />
           ) : (

src/containers/lab/LabStats/styles.module.scss

@@ -23,3 +23,7 @@
   background-color: $comment_bg;
   padding: $gap;
 }
+
+.updates {
+  padding: 0 $gap / 4 $gap * 2;
+}

src/layouts/FlowLayout/index.tsx

@@ -1,42 +1,29 @@
-import React, { FC, useCallback, useEffect } from 'react';
-import { connect } from 'react-redux';
+import React, { FC, useCallback, useEffect, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
 import { FlowGrid } from '~/components/flow/FlowGrid';
 import { selectFlow } from '~/redux/flow/selectors';
-import * as NODE_ACTIONS from '~/redux/node/actions';
-import * as FLOW_ACTIONS from '~/redux/flow/actions';
-import { pick } from 'ramda';
+import {
+  flowChangeSearch,
+  flowGetMore,
+  flowLoadMoreSearch,
+  flowSetCellView,
+} from '~/redux/flow/actions';
 import { selectUser } from '~/redux/auth/selectors';
 import { FlowHero } from '~/components/flow/FlowHero';
 import styles from './styles.module.scss';
-import { IState } from '~/redux/store';
 import { FlowStamp } from '~/components/flow/FlowStamp';
 import { Container } from '~/containers/main/Container';
 import { SidebarRouter } from '~/containers/main/SidebarRouter';
+import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { INode } from '~/redux/types';
+import { selectLabUpdatesNodes } from '~/redux/lab/selectors';
 
-const mapStateToProps = (state: IState) => ({
-  flow: pick(['nodes', 'heroes', 'recent', 'updated', 'is_loading', 'search'], selectFlow(state)),
-  user: pick(['role', 'id'], selectUser(state)),
-});
+const FlowLayout: FC = () => {
+  const { nodes, heroes, recent, updated, is_loading, search } = useShallowSelect(selectFlow);
+  const labUpdates = useShallowSelect(selectLabUpdatesNodes);
+  const user = useShallowSelect(selectUser);
+  const dispatch = useDispatch();
 
-const mapDispatchToProps = {
-  nodeGotoNode: NODE_ACTIONS.nodeGotoNode,
-  flowSetCellView: FLOW_ACTIONS.flowSetCellView,
-  flowGetMore: FLOW_ACTIONS.flowGetMore,
-  flowChangeSearch: FLOW_ACTIONS.flowChangeSearch,
-  flowLoadMoreSearch: FLOW_ACTIONS.flowLoadMoreSearch,
-};
-
-type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
-
-const FlowLayoutUnconnected: FC<IProps> = ({
-  flow: { nodes, heroes, recent, updated, is_loading, search },
-  user,
-  nodeGotoNode,
-  flowSetCellView,
-  flowGetMore,
-  flowChangeSearch,
-  flowLoadMoreSearch,
-}) => {
   const onLoadMore = useCallback(() => {
     (window as any).flowScrollPos = window.scrollY;
 
@@ -44,13 +31,29 @@ const FlowLayoutUnconnected: FC<IProps> = ({
 
     if (is_loading || pos < -600) return;
 
-    flowGetMore();
-  }, [flowGetMore, is_loading]);
+    dispatch(flowGetMore());
+  }, [dispatch, is_loading]);
 
   const onLoadMoreSearch = useCallback(() => {
     if (search.is_loading_more) return;
-    flowLoadMoreSearch();
-  }, [search.is_loading_more, flowLoadMoreSearch]);
+    dispatch(flowLoadMoreSearch());
+  }, [search.is_loading_more, dispatch]);
+
+  const onChangeSearch = useCallback(
+    (text: string) => {
+      dispatch(flowChangeSearch({ text }));
+    },
+    [dispatch]
+  );
+
+  const onChangeCellView = useCallback(
+    (id: INode['id'], flow: INode['flow']) => {
+      dispatch(flowSetCellView(id, flow));
+    },
+    [dispatch]
+  );
+
+  const cumulativeUpdates = useMemo(() => [...updated, ...labUpdates], [updated, labUpdates]);
 
   useEffect(() => {
     window.addEventListener('scroll', onLoadMore);
@@ -72,19 +75,14 @@ const FlowLayoutUnconnected: FC<IProps> = ({
         <div className={styles.stamp}>
           <FlowStamp
             recent={recent}
-            updated={updated}
+            updated={cumulativeUpdates}
             search={search}
-            flowChangeSearch={flowChangeSearch}
+            onSearchChange={onChangeSearch}
             onLoadMore={onLoadMoreSearch}
           />
         </div>
 
-        <FlowGrid
-          nodes={nodes}
-          user={user}
-          onSelect={nodeGotoNode}
-          onChangeCellView={flowSetCellView}
-        />
+        <FlowGrid nodes={nodes} user={user} onChangeCellView={onChangeCellView} />
       </div>
 
       <SidebarRouter prefix="" />
@@ -92,6 +90,4 @@ const FlowLayoutUnconnected: FC<IProps> = ({
   );
 };
 
-const FlowLayout = connect(mapStateToProps, mapDispatchToProps)(FlowLayoutUnconnected);
-
-export { FlowLayout, FlowLayoutUnconnected };
+export { FlowLayout };

src/layouts/NodeLayout/index.tsx

@@ -17,6 +17,7 @@ import { useScrollToTop } from '~/utils/hooks/useScrollToTop';
 import { useLoadNode } from '~/utils/hooks/node/useLoadNode';
 import { URLS } from '~/constants/urls';
 import { EditorEditDialog } from '~/containers/dialogs/EditorEditDialog';
+import { useOnNodeSeen } from '~/utils/hooks/node/useOnNodeSeen';
 
 type IProps = RouteComponentProps<{ id: string }> & {};
 
@@ -38,6 +39,7 @@ const NodeLayout: FC<IProps> = memo(
     useNodeCoverImage(current);
     useScrollToTop([id]);
     useLoadNode(id, is_loading);
+    useOnNodeSeen(current);
 
     const { head, block } = useNodeBlocks(current, is_loading);
 

src/redux/auth/sagas.ts

@@ -58,6 +58,7 @@ import { messagesSet } from '~/redux/messages/actions';
 import { SagaIterator } from 'redux-saga';
 import { isEmpty } from 'ramda';
 import { AxiosError } from 'axios';
+import { labGetUpdates } from '~/redux/lab/actions';
 
 function* setTokenSaga({ token }: ReturnType<typeof authSetToken>) {
   localStorage.setItem('token', token);
@@ -193,6 +194,7 @@ function* getUpdates() {
 function* startPollingSaga() {
   while (true) {
     yield call(getUpdates);
+    yield put(labGetUpdates());
     yield delay(60000);
   }
 }

src/redux/flow/actions.ts

@@ -2,6 +2,10 @@ import { FLOW_ACTIONS } from './constants';
 import { IFlowState } from './reducer';
 import { INode } from '../types';
 
+export const flowGetFlow = () => ({
+  type: FLOW_ACTIONS.GET_FLOW,
+});
+
 export const flowSetNodes = (nodes: IFlowState['nodes']) => ({
   nodes,
   type: FLOW_ACTIONS.SET_NODES,
@@ -50,3 +54,8 @@ export const flowChangeSearch = (search: Partial<IFlowState['search']>) => ({
 export const flowLoadMoreSearch = () => ({
   type: FLOW_ACTIONS.LOAD_MORE_SEARCH,
 });
+
+export const flowSeenNode = (nodeId: INode['id']) => ({
+  type: FLOW_ACTIONS.SEEN_NODE,
+  nodeId,
+});

src/redux/flow/constants.ts

@@ -14,4 +14,6 @@ export const FLOW_ACTIONS = {
   SET_SEARCH: `${prefix}SET_SEARCH`,
   CHANGE_SEARCH: `${prefix}CHANGE_SEARCH`,
   LOAD_MORE_SEARCH: `${prefix}LOAD_MORE_SEARCH`,
+
+  SEEN_NODE: `${prefix}SEEN_NODE`,
 };

src/redux/flow/sagas.ts

@@ -16,6 +16,8 @@ import { Unwrap } from '../types';
 import { selectFlow, selectFlowNodes } from './selectors';
 import { getSearchResults, postCellView } from './api';
 import { uniq } from 'ramda';
+import { labSeenNode, labSetUpdates } from '~/redux/lab/actions';
+import { selectLabUpdatesNodes } from '~/redux/lab/selectors';
 
 function hideLoader() {
   const loader = document.getElementById('main_loader');
@@ -185,10 +187,16 @@ function* loadMoreSearch() {
   }
 }
 
+function* seenNode({ nodeId }: ReturnType<typeof labSeenNode>) {
+  const { updated }: ReturnType<typeof selectFlow> = yield select(selectFlow);
+  yield put(flowSetUpdated(updated.filter(node => node.id != nodeId)));
+}
+
 export default function* nodeSaga() {
   yield takeLatest([FLOW_ACTIONS.GET_FLOW, REHYDRATE], onGetFlow);
   yield takeLatest(FLOW_ACTIONS.SET_CELL_VIEW, onSetCellView);
   yield takeLeading(FLOW_ACTIONS.GET_MORE, getMore);
   yield takeLatest(FLOW_ACTIONS.CHANGE_SEARCH, changeSearch);
   yield takeLatest(FLOW_ACTIONS.LOAD_MORE_SEARCH, loadMoreSearch);
+  yield takeLatest(FLOW_ACTIONS.SEEN_NODE, seenNode);
 }

src/redux/flow/selectors.ts

@@ -3,3 +3,4 @@ import { IFlowState } from './reducer';
 
 export const selectFlow = (state: IState): IFlowState => state.flow;
 export const selectFlowNodes = (state: IState) => state.flow.nodes;
+export const selectFlowUpdated = (state: IState) => state.flow.updated;

src/redux/lab/actions.ts

@@ -1,5 +1,6 @@
 import { LAB_ACTIONS } from '~/redux/lab/constants';
 import { ILabState } from '~/redux/lab/types';
+import { INode } from '~/redux/types';
 
 export const labGetList = (after?: string) => ({
   type: LAB_ACTIONS.GET_LIST,
@@ -19,3 +20,17 @@ export const labSetStats = (stats: Partial<ILabState['stats']>) => ({
   type: LAB_ACTIONS.SET_STATS,
   stats,
 });
+
+export const labSetUpdates = (updates: Partial<ILabState['updates']>) => ({
+  type: LAB_ACTIONS.SET_UPDATES,
+  updates,
+});
+
+export const labGetUpdates = () => ({
+  type: LAB_ACTIONS.GET_UPDATES,
+});
+
+export const labSeenNode = (nodeId: INode['id']) => ({
+  type: LAB_ACTIONS.SEEN_NODE,
+  nodeId,
+});

src/redux/lab/api.ts

@@ -1,6 +1,11 @@
 import { api, cleanResult } from '~/utils/api';
 import { API } from '~/constants/api';
-import { GetLabNodesRequest, GetLabNodesResult, GetLabStatsResult } from '~/redux/lab/types';
+import {
+  GetLabNodesRequest,
+  GetLabNodesResult,
+  GetLabStatsResult,
+  GetLabUpdatesResult,
+} from '~/redux/lab/types';
 
 export const getLabNodes = ({ after }: GetLabNodesRequest) =>
   api
@@ -8,3 +13,4 @@ export const getLabNodes = ({ after }: GetLabNodesRequest) =>
     .then(cleanResult);
 
 export const getLabStats = () => api.get<GetLabStatsResult>(API.LAB.STATS).then(cleanResult);
+export const getLabUpdates = () => api.get<GetLabUpdatesResult>(API.LAB.UPDATES).then(cleanResult);

src/redux/lab/constants.ts

@@ -6,4 +6,8 @@ export const LAB_ACTIONS = {
 
   GET_STATS: `${prefix}GET_STATS`,
   SET_STATS: `${prefix}SET_STATS`,
+
+  SET_UPDATES: `${prefix}SET_UPDATES`,
+  GET_UPDATES: `${prefix}GET_UPDATES`,
+  SEEN_NODE: `${prefix}SET_UPDATE_SEEN`,
 };

src/redux/lab/handlers.ts

@@ -1,5 +1,5 @@
 import { LAB_ACTIONS } from '~/redux/lab/constants';
-import { labSetList, labSetStats } from '~/redux/lab/actions';
+import { labSetList, labSetStats, labSetUpdates } from '~/redux/lab/actions';
 import { ILabState } from '~/redux/lab/types';
 
 type LabHandler<T extends (...args: any) => any> = (
@@ -23,7 +23,16 @@ const setStats: LabHandler<typeof labSetStats> = (state, { stats }) => ({
   },
 });
 
+const setUpdates: LabHandler<typeof labSetUpdates> = (state, { updates }) => ({
+  ...state,
+  updates: {
+    ...state.updates,
+    ...updates,
+  },
+});
+
 export const LAB_HANDLERS = {
   [LAB_ACTIONS.SET_LIST]: setList,
   [LAB_ACTIONS.SET_STATS]: setStats,
+  [LAB_ACTIONS.SET_UPDATES]: setUpdates,
 };

src/redux/lab/index.ts

@@ -16,6 +16,10 @@ const INITIAL_STATE: ILabState = {
     tags: [],
     error: undefined,
   },
+  updates: {
+    nodes: [],
+    isLoading: false,
+  },
 };
 
 export default createReducer(INITIAL_STATE, LAB_HANDLERS);

src/redux/lab/sagas.ts

@@ -1,8 +1,15 @@
-import { takeLeading, call, put } from 'redux-saga/effects';
-import { labGetList, labSetList, labSetStats } from '~/redux/lab/actions';
+import { takeLeading, call, put, select } from 'redux-saga/effects';
+import {
+  labGetList,
+  labSetList,
+  labSetStats,
+  labSetUpdates,
+  labSeenNode,
+} from '~/redux/lab/actions';
 import { LAB_ACTIONS } from '~/redux/lab/constants';
 import { Unwrap } from '~/redux/types';
-import { getLabNodes, getLabStats } from '~/redux/lab/api';
+import { getLabNodes, getLabStats, getLabUpdates } from '~/redux/lab/api';
+import { selectLabUpdatesNodes } from '~/redux/lab/selectors';
 
 function* getList({ after = '' }: ReturnType<typeof labGetList>) {
   try {
@@ -28,7 +35,28 @@ function* getStats() {
   }
 }
 
+function* getUpdates() {
+  try {
+    yield put(labSetUpdates({ isLoading: true }));
+    const { nodes }: Unwrap<typeof getLabUpdates> = yield call(getLabUpdates);
+    yield put(labSetUpdates({ nodes }));
+  } catch (error) {
+    console.log(error.message);
+  } finally {
+    yield put(labSetUpdates({ isLoading: false }));
+  }
+}
+
+function* seenNode({ nodeId }: ReturnType<typeof labSeenNode>) {
+  const nodes: ReturnType<typeof selectLabUpdatesNodes> = yield select(selectLabUpdatesNodes);
+  const newNodes = nodes.filter(node => node.id != nodeId);
+  yield put(labSetUpdates({ nodes: newNodes }));
+}
+
 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);
 }

src/redux/lab/selectors.ts

@@ -6,3 +6,5 @@ export const selectLabList = (state: IState) => state.lab.list;
 export const selectLabStatsHeroes = (state: IState) => state.lab.stats.heroes;
 export const selectLabStatsTags = (state: IState) => state.lab.stats.tags;
 export const selectLabStatsLoading = (state: IState) => state.lab.stats.is_loading;
+export const selectLabUpdates = (state: IState) => state.lab.updates;
+export const selectLabUpdatesNodes = (state: IState) => state.lab.updates.nodes;

src/redux/lab/types.ts

@@ -13,6 +13,10 @@ export type ILabState = Readonly<{
     tags: ITag[];
     error?: string;
   };
+  updates: {
+    nodes: INode[];
+    isLoading: boolean;
+  };
 }>;
 
 export type GetLabNodesRequest = {
@@ -34,3 +38,7 @@ export type GetLabStatsResult = {
   heroes: INode[];
   tags: ITag[];
 };
+
+export type GetLabUpdatesResult = {
+  nodes: INode[];
+};

src/redux/node/sagas.ts

@@ -177,13 +177,6 @@ function* onNodeLoad({ id }: ReturnType<typeof nodeLoadNode>) {
       })
     );
   } catch {}
-
-  // Remove current node from recently updated
-  const { updated } = yield select(selectFlow);
-
-  if (updated.some(item => item.id === id)) {
-    yield put(flowSetUpdated(updated.filter(item => item.id !== id)));
-  }
 }
 
 function* onPostComment({ nodeId, comment, callback }: ReturnType<typeof nodePostLocalComment>) {

src/utils/hooks/node/useOnNodeSeen.ts

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