added like count to nodes

src/components/node/NodePanelInner/index.tsx

@@ -26,7 +26,7 @@ interface IProps {
 
 const NodePanelInner: FC<IProps> = memo(
   ({
-    node: { title, user, is_liked, is_heroic, deleted_at, created_at },
+    node: { title, user, is_liked, is_heroic, deleted_at, created_at, like_count },
     stack,
 
     can_star,
@@ -53,7 +53,7 @@ const NodePanelInner: FC<IProps> = memo(
                 {is_loading ? (
                   <Placeholder width="100px" />
                 ) : (
-                  `~${user.username}, ${getPrettyDate(created_at)}`
+                  `~${user.username.toLocaleLowerCase()}, ${getPrettyDate(created_at)}`
                 )}
               </div>
             )}
@@ -95,6 +95,8 @@ const NodePanelInner: FC<IProps> = memo(
                 ) : (
                   <Icon icon="heart" size={24} onClick={onLike} />
                 )}
+
+                {like_count > 0 && <div className={styles.like_count}>{like_count}</div>}
               </div>
             )}
           </div>

src/components/node/NodePanelInner/styles.scss

@@ -214,19 +214,44 @@
 .like {
   transition: fill, stroke 0.25s;
   will-change: transform;
+  position: relative;
 
   &:global(.is_liked) {
     svg {
       fill: $red;
     }
+
+    .like_count {
+      color: $red;
+    }
   }
 
   &:hover {
     fill: $red;
     animation: pulse 0.75s infinite;
+
+    .like_count {
+      opacity: 0;
+    }
   }
 }
 
+.like_count {
+  position: absolute;
+  font: $font_12_bold;
+  left: 16px;
+  bottom: 0;
+  opacity: 1;
+  transition: opacity 0.25s, color 0.25s;
+  background: $node_bg;
+  padding: 0 3px;
+  border-radius: 10px;
+  z-index: 3;
+  color: transparentize($color: white, $amount: 0.5);
+  pointer-events: none;
+  touch-action: none;
+}
+
 .star {
   transition: fill, stroke 0.25s;
   will-change: transform;

src/containers/node/NodeLayout/index.tsx

@@ -123,7 +123,7 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
 
           <NodePanel
             node={pick(
-              ['title', 'user', 'is_liked', 'is_heroic', 'deleted_at', 'created_at'],
+              ['title', 'user', 'is_liked', 'is_heroic', 'deleted_at', 'created_at', 'like_count'],
               node
             )}
             layout={layout}

src/redux/node/sagas.ts

@@ -280,16 +280,20 @@ function* onEditSaga({ id }: ReturnType<typeof nodeEdit>) {
 function* onLikeSaga({ id }: ReturnType<typeof nodeLike>) {
   const {
     current,
-    current: { is_liked },
+    current: { is_liked, like_count },
   } = yield select(selectNode);
 
-  yield call(updateNodeEverywhere, { ...current, is_liked: !is_liked });
+  yield call(updateNodeEverywhere, {
+    ...current,
+    is_liked: !is_liked,
+    like_count: is_liked ? Math.max(like_count - 1, 0) : like_count + 1,
+  });
 
   const { data, error } = yield call(reqWrapper, postNodeLike, { id });
 
   if (!error || data.is_liked === !is_liked) return; // ok and matches
 
-  yield call(updateNodeEverywhere, { ...current, is_liked });
+  yield call(updateNodeEverywhere, { ...current, is_liked, like_count });
 }
 
 function* onStarSaga({ id }: ReturnType<typeof nodeLike>) {

src/redux/types.ts

@@ -124,6 +124,7 @@ export interface INode {
   description?: string;
   is_liked?: boolean;
   is_heroic?: boolean;
+  like_count?: number;
 
   flow: {
     display: 'single' | 'vertical' | 'horizontal' | 'quadro';

src/styles/variables.scss

@@ -55,6 +55,7 @@ $font_14_semibold: $semibold 14px $font;
 $font_14_medium: $medium 14px $font;
 $font_12_medium: $medium 12px $font;
 $font_12_semibold: $semibold 12px $font;
+$font_12_bold: $bold 12px $font;
 $font_12_regular: $regular 12px $font;
 $font_10_regular: $regular 10px $font;
 $font_10_semibold: $semibold 10px $font;