From ec6003558d64172cfb223621654ebe483c0fa503 Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Mon, 28 Oct 2024 06:34:22 +0000
Subject: [PATCH] compute state like by a function

---
 .../app/src/components/LikeButton/index.jsx   | 32 ++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/components/LikeButton/index.jsx b/packages/app/src/components/LikeButton/index.jsx
index 68d32562..766c9072 100755
--- a/packages/app/src/components/LikeButton/index.jsx
+++ b/packages/app/src/components/LikeButton/index.jsx
@@ -4,8 +4,32 @@ import classnames from "classnames"
 import "./index.less"
 
 export default (props) => {
+    const [liked, setLiked] = React.useState(props.liked)
     const [clicked, setClicked] = React.useState(false)
 
+    // TODO: Support handle like change on websocket event
+    if (typeof props.watchWs === "object") {
+        // useWsEvents({
+        //     [props.watchWs.event]: (data) => {
+        //         handleUpdateTrackLike(data.track_id, data.action === "liked")
+        //     }
+        // }, {
+        //     socketName: props.watchWs.socket,
+        // })
+    }
+
+    async function computeLikedState() {
+        if (typeof props.liked === "function") {
+            let result = await props.liked()
+
+            result = result.liked ?? result
+
+            return setLiked(result)
+        }
+
+        return setLiked(props.liked)
+    }
+
     const handleClick = () => {
         setClicked(true)
 
@@ -16,13 +40,19 @@ export default (props) => {
         if (typeof props.onClick === "function") {
             props.onClick()
         }
+
+        setLiked(!liked)
     }
 
+    React.useEffect(() => {
+        computeLikedState()
+    }, [props.liked])
+
     return <button
         className={classnames(
             "likeButton",
             {
-                ["liked"]: props.liked,
+                ["liked"]: liked,
                 ["clicked"]: clicked,
             }
         )}