From f4988113218af245040a27597cdb138b3f4350a5 Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Wed, 6 Jul 2022 17:20:19 +0200
Subject: [PATCH] Added like/dislike comments

---
 apps/comments-ui/src/actions.js         | 36 ++++++++++++++++++++++
 apps/comments-ui/src/components/Like.js | 40 +++++++++++--------------
 apps/comments-ui/src/utils/api.js       | 40 +++++++++++++++++++++++++
 3 files changed, 93 insertions(+), 23 deletions(-)

diff --git a/apps/comments-ui/src/actions.js b/apps/comments-ui/src/actions.js
index f809b557e5..ed84d711a7 100644
--- a/apps/comments-ui/src/actions.js
+++ b/apps/comments-ui/src/actions.js
@@ -59,6 +59,40 @@ async function showComment({state, adminApi, data: comment}) {
     };
 }
 
+async function likeComment({state, api, data: comment}) {
+    await api.comments.like({comment});
+
+    return {
+        comments: state.comments.map((c) => {
+            if (c.id === comment.id) {
+                return {
+                    ...c,
+                    liked: true,
+                    likes_count: c.likes_count + 1
+                };
+            }
+            return c;
+        })
+    };
+}
+
+async function unlikeComment({state, api, data: comment}) {
+    await api.comments.unlike({comment});
+
+    return {
+        comments: state.comments.map((c) => {
+            if (c.id === comment.id) {
+                return {
+                    ...c,
+                    liked: false,
+                    likes_count: c.likes_count - 1
+                };
+            }
+            return c;
+        })
+    };
+}
+
 async function deleteComment({state, api, data: comment}) {
     await api.comments.edit({
         comment: {
@@ -86,6 +120,8 @@ const Actions = {
     hideComment,
     deleteComment,
     showComment,
+    likeComment,
+    unlikeComment,
     loadMoreComments
 };
 
diff --git a/apps/comments-ui/src/components/Like.js b/apps/comments-ui/src/components/Like.js
index b379b70839..0a21a364d1 100644
--- a/apps/comments-ui/src/components/Like.js
+++ b/apps/comments-ui/src/components/Like.js
@@ -1,30 +1,24 @@
-import React from 'react';
-import AppContext from '../AppContext';
+import {useContext} from 'react';
 import {ReactComponent as LikeIcon} from '../images/icons/like.svg';
+import AppContext from '../AppContext';
 
-class Like extends React.Component {
-    static contextType = AppContext;
+function Like(props) {
+    const {onAction} = useContext(AppContext);
 
-    constructor(props) {
-        super(props);
-        this.state = {
-            liked: false
-        };
+    const toggleLike = () => {
+        if (!props.comment.liked) {
+            onAction('likeComment', props.comment);
+        } else {
+            onAction('unlikeComment', props.comment);
+        }
+    };
 
-        this.toggleLike = this.toggleLike.bind(this);
-    }
-
-    toggleLike() {
-        this.setState(state => ({
-            liked: !state.liked
-        }));
-    }
-
-    render() {
-        return (
-            <button className="flex font-sans text-[14px] items-center" onClick={this.toggleLike}><LikeIcon className={`gh-comments-icon gh-comments-icon-like mr-1 ${this.state.liked ? 'fill-black' : ''}`} />3</button>
-        );
-    }
+    return (
+        <button className="flex font-sans text-[14px] items-center" onClick={toggleLike}>
+            <LikeIcon className={`gh-comments-icon gh-comments-icon-like mr-1 ${props.comment.liked ? 'fill-black' : ''}`} />
+            {props.comment.likes_count}
+        </button>
+    );
 }
 
 export default Like;
diff --git a/apps/comments-ui/src/utils/api.js b/apps/comments-ui/src/utils/api.js
index c9a042d15e..c51f6368c7 100644
--- a/apps/comments-ui/src/utils/api.js
+++ b/apps/comments-ui/src/utils/api.js
@@ -140,6 +140,46 @@ function setupGhostApi({siteUrl = window.location.origin, apiUrl, apiKey}) {
                     throw new Error('Failed to edit comment');
                 }
             });
+        },
+        like({comment}) {
+            const body = {
+                comments: [comment]
+            };
+            const url = endpointFor({type: 'members', resource: `comments/${comment.id}/like`});
+            return makeRequest({
+                url,
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(body)
+            }).then(function (res) {
+                if (res.ok) {
+                    return 'Success';
+                } else {
+                    throw new Error('Failed to like comment');
+                }
+            });
+        },
+        unlike({comment}) {
+            const body = {
+                comments: [comment]
+            };
+            const url = endpointFor({type: 'members', resource: `comments/${comment.id}/like`});
+            return makeRequest({
+                url,
+                method: 'DELETE',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(body)
+            }).then(function (res) {
+                if (res.ok) {
+                    return 'Success';
+                } else {
+                    throw new Error('Failed to unlike comment');
+                }
+            });
         }
     };