#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>
   );
 };

src/containers/lab/LabGrid/index.tsx

@@ -12,7 +12,12 @@ const LabGrid: FC<IProps> = () => {
   return (
     <div className={styles.wrap}>
       {nodes.map(node => (
-        <LabNode node={node.node} key={node.node.id} />
+        <LabNode
+          node={node.node}
+          key={node.node.id}
+          lastSeen={node.last_seen}
+          commentCount={node.comment_count}
+        />
       ))}
     </div>
   );

src/redux/node/constants.ts

@@ -89,18 +89,10 @@ export type INodeComponentProps = {
 export type INodeComponents = Record<ValueOf<typeof NODE_TYPES>, FC<INodeComponentProps>>;
 
 export const LAB_PREVIEW_LAYOUT: Record<string, FC<INodeComponentProps>[]> = {
-  [NODE_TYPES.IMAGE]: [LabImage, LabPad, LabNodeTitle, LabBottomPanel],
+  [NODE_TYPES.IMAGE]: [LabImage, LabPad, LabNodeTitle],
-  [NODE_TYPES.VIDEO]: [NodeVideoBlock, LabPad, LabNodeTitle, LabBottomPanel],
+  [NODE_TYPES.VIDEO]: [NodeVideoBlock, LabPad, LabNodeTitle],
-  [NODE_TYPES.AUDIO]: [
+  [NODE_TYPES.AUDIO]: [LabPad, LabNodeTitle, LabPad, NodeAudioImageBlock, NodeAudioBlock, LabPad],
-    LabPad,
+  [NODE_TYPES.TEXT]: [LabPad, LabNodeTitle, LabPad, LabText, LabPad],
-    LabNodeTitle,
-    LabPad,
-    NodeAudioImageBlock,
-    NodeAudioBlock,
-    LabPad,
-    LabBottomPanel,
-  ],
-  [NODE_TYPES.TEXT]: [LabPad, LabNodeTitle, LabPad, LabText, LabPad, LabBottomPanel],
 };
 
 export const NODE_HEADS: INodeComponents = {

src/sprites/Sprites.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 
-const Sprites: FC<{}> = () => (
+const Sprites: FC = () => (
   <svg width={0} height={0} viewBox="0 0 24 24">
     <defs>
       <pattern
@@ -270,6 +270,16 @@ const Sprites: FC<{}> = () => (
       <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
     </g>
 
+    <g id="comment">
+      <path fill="none" d="M0 0h24v24H0V0z" stroke="none" />
+      <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z" />
+    </g>
+
+    <g id="comment_new">
+      <path fill="none" d="M0 0h24v24H0V0z" stroke="none" />
+      <path d="M22,6.98V16c0,1.1-0.9,2-2,2H6l-4,4V4c0-1.1,0.9-2,2-2h10.1C14.04,2.32,14,2.66,14,3c0,2.76,2.24,5,5,5 C20.13,8,21.16,7.61,22,6.98z M16,3c0,1.66,1.34,3,3,3s3-1.34,3-3s-1.34-3-3-3S16,1.34,16,3z" />
+    </g>
+
     <g id="youtube" stroke="none">
       <path fill="none" d="M0 0h24v24H0V0z" />
       <g transform="scale(0.1) translate(-30 -30)">