From 213b6d2208f12b0c44f7128c1ebaee52a2b88242 Mon Sep 17 00:00:00 2001
From: srgooglo <srgooglo@ragestudio.net>
Date: Wed, 2 Mar 2022 17:14:13 +0100
Subject: [PATCH] improve like action & await to server response

---
 packages/app/src/components/PostCard/index.jsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/components/PostCard/index.jsx b/packages/app/src/components/PostCard/index.jsx
index 2ad8d00b..8fc1a17c 100644
--- a/packages/app/src/components/PostCard/index.jsx
+++ b/packages/app/src/components/PostCard/index.jsx
@@ -10,10 +10,13 @@ import "./index.less"
 
 function LikeButton(props) {
     const [liked, setLiked] = React.useState(props.defaultLiked ?? false)
+    const [clicked, setCliked] = React.useState(false)
 
     const handleClick = async () => {
         let to = !liked
 
+        setCliked(to)
+
         if (typeof props.onClick === "function") {
             const result = await props.onClick(to)
             if (typeof result === "boolean") {
@@ -31,14 +34,14 @@ function LikeButton(props) {
         <div
             className={classnames(
                 "ripple",
-                { ["clicked"]: liked }
+                { ["clicked"]: clicked }
             )}
         ></div>
         <svg
             className={classnames(
                 "heart",
                 { ["empty"]: !liked },
-                { ["clicked"]: liked },
+                { ["clicked"]: clicked },
             )}
             width="24"
             height="24"
@@ -174,7 +177,7 @@ export default class PostCard extends React.Component {
             return <antd.Skeleton active />
         }
 
-        return <div className="postCard">
+        return <div id={this.props.data._id} key={this.props.data._id} className="postCard">
             <div className="wrapper">
                 <PostHeader
                     postData={this.props.data}