added updated nodes to flow

src/components/flow/FlowRecent/index.tsx

@@ -1,19 +1,45 @@
 import React, { FC } from 'react';
 import * as styles from './styles.scss';
 import { IFlowState } from '~/redux/flow/reducer';
+import { getURL } from '~/utils/dom';
+import { Link } from 'react-router-dom';
+import { URLS } from '~/constants/urls';
+import classNames from 'classnames';
 
 interface IProps {
   recent: IFlowState['recent'];
+  updated: IFlowState['updated'];
 }
 
-const FlowRecent: FC<IProps> = ({ recent }) => (
+const FlowRecent: FC<IProps> = ({ recent, updated }) => (
   <div className={styles.grid}>
+    {updated &&
+      updated.slice(0, 20).map(node => (
+        <Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}>
+          <div
+            className={classNames(styles.thumb, styles.new)}
+            style={{ backgroundImage: `url("${getURL({ url: node.thumbnail })}")` }}
+          />
+
+          <div className={styles.info}>
+            <div className={styles.title}>{node.title}</div>
+            <div className={styles.comment}>{node.created_at}</div>
+          </div>
+        </Link>
+      ))}
+
     {recent &&
-      recent.slice(0, 9).map(node => (
-        <div key={node.id} className={styles.item}>
-          <div className={styles.thumb} />
-          <div className={styles.info}>{node.title}</div>
-        </div>
+      recent.slice(0, 20).map(node => (
+        <Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}>
+          <div
+            className={styles.thumb}
+            style={{ backgroundImage: `url("${getURL({ url: node.thumbnail })}")` }}
+          />
+          <div className={styles.info}>
+            <div className={styles.title}>{node.title}</div>
+            <div className={styles.comment}>{node.created_at}</div>
+          </div>
+        </Link>
       ))}
   </div>
 );

src/components/flow/FlowRecent/styles.scss

@@ -1,9 +1,7 @@
 .grid {
-  display: grid;
-  grid-template-rows: repeat(9, 1fr);
-  grid-template-columns: auto;
-  row-gap: $grid_line;
+  display: flex;
   justify-content: stretch;
+  flex-direction: column;
   flex: 1;
 
   & > div {
@@ -20,17 +18,51 @@
   font: $font_12_regular;
   border-radius: $radius;
   flex-direction: row;
+  margin-bottom: $gap;
+  color: white;
+  text-decoration: none;
 }
 
 .thumb {
-  height: 100%;
-  width: 40px;
-  margin-right: $grid_line;
-  // padding-left: 100%;
-  background: red;
-  // flex:
+  height: 48px;
+  margin-right: $gap;
+  background: 50% 50% no-repeat/cover;
+  border-radius: $radius;
+  flex: 0 0 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  &.new {
+    &::after {
+      content: ' ';
+      width: 12px;
+      height: 12px;
+      border-radius: 100%;
+      background: $red;
+      box-shadow: $content_bg 0 0 0 5px;
+      position: absolute;
+      right: -2px;
+      bottom: -2px;
+    }
+  }
 }
 
 .info {
   flex: 1;
+  min-width: 0;
+}
+
+.title {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font: $font_16_semibold;
+}
+
+.comment {
+  font: $font_12_regular;
+  margin-top: 4px;
+  opacity: 0.5;
 }