Added like/dislike comments

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
 };
 

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;

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');
+                }
+            });
         }
     };