handle track likes

packages/app/src/components/Player/MediaPlayer/index.jsx

@@ -9,6 +9,8 @@ import SeekBar from "components/Player/SeekBar"
 import Controls from "components/Player/Controls"
 import { WithPlayerContext, Context } from "contexts/WithPlayerContext"
 
+import PlaylistsModel from "models/playlists"
+
 import "./index.less"
 
 export default (props) => {
@@ -77,12 +79,16 @@ export class AudioPlayer extends React.Component {
         app.cores.player.playback.next()
     }
 
-    onClickLikeButton = () => {
-        // TODO: Like
+    onClickLikeButton = async () => {
+        const result = await PlaylistsModel.toogleTrackLike(this.context.currentManifest._id).catch((err) => {
+            return null
+        })
 
-        console.log("Like")
-
-        this.setState({ liked: !this.state.liked })
+        if (result) {
+            this.setState({
+                liked: result.action === "liked"
+            })
+        }
     }
 
     render() {

packages/app/src/pages/play/[play_id].jsx

@@ -5,6 +5,7 @@ import ReactMarkdown from "react-markdown"
 import remarkGfm from "remark-gfm"
 import moment from "moment"
 import fuse from "fuse.js"
+import useWsEvents from "hooks/useWsEvents"
 
 import { WithPlayerContext } from "contexts/WithPlayerContext"
 
@@ -53,6 +54,10 @@ export default (props) => {
         app.cores.player.startPlaylist(playlist.list, index)
     }
 
+    const handleTrackLike = async (track) => {
+        return await PlaylistsModel.toogleTrackLike(track._id)
+    }
+
     const makeSearch = (value) => {
         const options = {
             includeScore: true,
@@ -77,6 +82,7 @@ export default (props) => {
                 order={index + 1}
                 track={item}
                 onClick={() => handleOnClickTrack(item)}
+                onLike={() => handleTrackLike(item)}
             />
         })
     }
@@ -95,6 +101,34 @@ export default (props) => {
         setSearchResults(null)
     }
 
+    const updateTrackLike = (track_id, liked) => {
+        setPlaylist((prev) => {
+            const index = prev.list.findIndex((item) => {
+                return item._id === track_id
+            })
+
+            if (index !== -1) {
+                const newState = {
+                    ...prev,
+                }
+
+                newState.list[index].liked = liked
+
+                return newState
+            }
+
+            return prev
+        })
+    }
+
+    useWsEvents({
+        "music:self:track:toggle:like": (data) => {
+            updateTrackLike(data.track_id, data.action === "liked")
+        }
+    }, {
+        socketName: "music",
+    })
+
     React.useEffect(() => {
         loadData()
 

packages/comty.js/src/models/playlists/index.js

@@ -107,4 +107,18 @@ export default class PlaylistsModel {
 
         return data
     }
+
+    static toogleTrackLike = async (track_id) => {
+        if (!track_id) {
+            throw new Error("Track ID is required")
+        }
+
+        const { data } = await request({
+            instance: PlaylistsModel.api_instance,
+            method: "POST",
+            url: `/tracks/${track_id}/toggle-like`,
+        })
+
+        return data
+    }
 }