diff --git a/src/components/node/NodePanelInner/index.tsx b/src/components/node/NodePanelInner/index.tsx index 920fd62e..44799c1a 100644 --- a/src/components/node/NodePanelInner/index.tsx +++ b/src/components/node/NodePanelInner/index.tsx @@ -26,7 +26,7 @@ interface IProps { const NodePanelInner: FC = 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 = memo( {is_loading ? ( ) : ( - `~${user.username}, ${getPrettyDate(created_at)}` + `~${user.username.toLocaleLowerCase()}, ${getPrettyDate(created_at)}` )} )} @@ -95,6 +95,8 @@ const NodePanelInner: FC = memo( ) : ( )} + + {like_count > 0 &&
{like_count}
} )} diff --git a/src/components/node/NodePanelInner/styles.scss b/src/components/node/NodePanelInner/styles.scss index c8b9161f..bf515eff 100644 --- a/src/components/node/NodePanelInner/styles.scss +++ b/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; diff --git a/src/containers/node/NodeLayout/index.tsx b/src/containers/node/NodeLayout/index.tsx index 4d395695..b9385158 100644 --- a/src/containers/node/NodeLayout/index.tsx +++ b/src/containers/node/NodeLayout/index.tsx @@ -123,7 +123,7 @@ const NodeLayoutUnconnected: FC = memo( ) { function* onLikeSaga({ id }: ReturnType) { 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) { diff --git a/src/redux/types.ts b/src/redux/types.ts index d846b750..4b4bfa74 100644 --- a/src/redux/types.ts +++ b/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'; diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 7c63d5ae..7edc2ddd 100644 --- a/src/styles/variables.scss +++ b/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;