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;