#23 added comment_count and last_seen to lab

src/components/lab/LabBottomPanel/index.tsx

@@ -1,15 +1,34 @@
 import React, { FC } from 'react';
 import { Group } from '~/components/containers/Group';
-import { INodeComponentProps } from '~/redux/node/constants';
 import { Filler } from '~/components/containers/Filler';
 import styles from './styles.module.scss';
 import { getPrettyDate } from '~/utils/dom';
+import { INode } from '~/redux/types';
+import { Icon } from '~/components/input/Icon';
+import classNames from 'classnames';
+import { Grid } from '~/components/containers/Grid';
 
-const LabBottomPanel: FC<INodeComponentProps> = ({ node }) => (
+type Props = {
+  node: INode;
+  isLoading?: boolean;
+  hasNewComments: boolean;
+  commentCount: number;
+};
+
+const LabBottomPanel: FC<Props> = ({ node, hasNewComments, commentCount }) => (
   <Group horizontal className={styles.wrap}>
     <div className={styles.timestamp}>{getPrettyDate(node.created_at)}</div>
-
     <Filler />
+
+    <Grid horizontal className={classNames(styles.comments)}>
+      <Icon icon={node.is_liked ? 'heart_full' : 'heart'} />
+      <span>{node.like_count}</span>
+    </Grid>
+
+    <Grid horizontal className={classNames(styles.comments, { [styles.active]: hasNewComments })}>
+      <Icon icon={hasNewComments ? 'comment_new' : 'comment'} />
+      <span>{commentCount}</span>
+    </Grid>
   </Group>
 );
 

src/components/lab/LabBottomPanel/styles.module.scss

@@ -8,3 +8,20 @@
   font: $font_12_regular;
   color: darken(white, 40%);
 }
+
+.comments.comments {
+  flex: 0;
+  font: $font_16_semibold;
+  color: darken(white, 50%);
+  fill: currentColor;
+  stroke: none;
+  column-gap: $gap / 2 !important;
+
+  &.active {
+    color: $red;
+  }
+}
+
+.like {
+
+}

src/components/lab/LabNode/index.tsx

@@ -1,21 +1,35 @@
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 import { INode } from '~/redux/types';
 import { useNodeBlocks } from '~/utils/hooks/node/useNodeBlocks';
 import styles from './styles.module.scss';
 import { LabBottomPanel } from '~/components/lab/LabBottomPanel';
+import { isAfter, parseISO } from 'date-fns';
 
 interface IProps {
   node: INode;
+  lastSeen: string | null;
   isLoading?: boolean;
+  commentCount: number;
 }
 
-const LabNode: FC<IProps> = ({ node, isLoading }) => {
+const LabNode: FC<IProps> = ({ node, isLoading, lastSeen, commentCount }) => {
   const { lab } = useNodeBlocks(node, false);
 
+  const hasNewComments = useMemo(
+    () =>
+      !!node.commented_at && !!lastSeen && isAfter(parseISO(node.commented_at), parseISO(lastSeen)),
+    [node.commented_at, lastSeen]
+  );
+
   return (
     <div className={styles.wrap}>
       {lab}
-      <LabBottomPanel node={node} isLoading={!!isLoading} />
+      <LabBottomPanel
+        node={node}
+        isLoading={!!isLoading}
+        hasNewComments={hasNewComments}
+        commentCount={commentCount}
+      />
     </div>
   );
 };