#23 fixed lab post appearance

src/components/lab/LabBottomPanel/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback } from 'react';
 import { Group } from '~/components/containers/Group';
 import { Filler } from '~/components/containers/Filler';
 import styles from './styles.module.scss';
@@ -7,6 +7,8 @@ import { INode } from '~/redux/types';
 import { Icon } from '~/components/input/Icon';
 import classNames from 'classnames';
 import { Grid } from '~/components/containers/Grid';
+import { useHistory } from 'react-router';
+import { URLS } from '~/constants/urls';
 
 type Props = {
   node: INode;
@@ -15,21 +17,33 @@ type Props = {
   commentCount: number;
 };
 
-const LabBottomPanel: FC<Props> = ({ node, hasNewComments, commentCount }) => (
-  <Group horizontal className={styles.wrap}>
-    <div className={styles.timestamp}>{getPrettyDate(node.created_at)}</div>
-    <Filler />
+const LabBottomPanel: FC<Props> = ({ node, hasNewComments, commentCount }) => {
+  const history = useHistory();
+  const onClick = useCallback(() => history.push(URLS.NODE_URL(node.id)), [node.id]);
 
-    <Grid horizontal className={classNames(styles.comments)}>
-      <Icon icon={node.is_liked ? 'heart_full' : 'heart'} />
-      <span>{node.like_count}</span>
-    </Grid>
+  return (
+    <Group horizontal className={styles.wrap} onClick={onClick}>
+      <div className={styles.timestamp}>{getPrettyDate(node.created_at)}</div>
+      <Filler />
 
-    <Grid horizontal className={classNames(styles.comments, { [styles.active]: hasNewComments })}>
-      <Icon icon={hasNewComments ? 'comment_new' : 'comment'} />
-      <span>{commentCount}</span>
-    </Grid>
-  </Group>
-);
+      {commentCount > 0 && (
+        <Grid
+          horizontal
+          className={classNames(styles.comments, { [styles.active]: hasNewComments })}
+        >
+          <Icon icon={hasNewComments ? 'comment_new' : 'comment'} size={16} />
+          <span>{commentCount}</span>
+        </Grid>
+      )}
+
+      {!!node.like_count && node.like_count > 0 && (
+        <Grid horizontal className={classNames(styles.like)}>
+          <Icon icon={node.is_liked ? 'heart_full' : 'heart'} size={16} />
+          <span>{node.like_count}</span>
+        </Grid>
+      )}
+    </Group>
+  );
+};
 
 export { LabBottomPanel };

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

@@ -9,19 +9,17 @@
   color: darken(white, 40%);
 }
 
-.comments.comments {
+.comments, .like {
   flex: 0;
-  font: $font_16_semibold;
+  font: $font_14_semibold;
   color: darken(white, 50%);
   fill: currentColor;
   stroke: none;
   column-gap: $gap / 2 !important;
+  align-items: center;
+  justify-content: center;
 
   &.active {
     color: $red;
   }
 }
-
-.like {
-
-}

src/components/lab/LabPad/index.tsx

@@ -1,8 +1,14 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback } from 'react';
 import styles from './styles.module.scss';
+import { useHistory } from 'react-router';
+import { URLS } from '~/constants/urls';
+import { INodeComponentProps } from '~/redux/node/constants';
 
-interface IProps {}
+const LabPad: FC<INodeComponentProps> = ({ node }) => {
+  const history = useHistory();
+  const onClick = useCallback(() => history.push(URLS.NODE_URL(node.id)), [node.id]);
 
-const LabPad: FC<IProps> = () => <div className={styles.pad} />;
+  return <div className={styles.pad} onClick={onClick} />;
+};
 
 export { LabPad };