Wired up hiding comments admin API endpoint

no issue

The endpoint is not yet implemented on the backend, so it doesn't work yet.

apps/comments-ui/src/App.js

@@ -19,7 +19,7 @@ function AuthFrame({adminUrl, onLoad}) {
     };
 
     return (
-        <iframe data-frame="admin-auth" src={adminUrl + 'auth-frame'} style={iframeStyle}></iframe>
+        <iframe data-frame="admin-auth" src={adminUrl + 'auth-frame/'} style={iframeStyle}></iframe>
     );
 }
 
@@ -117,7 +117,7 @@ export default class App extends React.Component {
             action: `${action}:running`
         });
         try {
-            const updatedState = await ActionHandler({action, data, state: this.state, api: this.GhostApi});
+            const updatedState = await ActionHandler({action, data, state: this.state, api: this.GhostApi, adminApi: this.adminApi});
             this.setState(updatedState);
 
             /** Reset action state after short timeout if not failed*/
@@ -129,6 +129,9 @@ export default class App extends React.Component {
                 }, 2000);
             }
         } catch (error) {
+            // todo: Keep this error log here until we implement popup notifications?
+            // eslint-disable-next-line no-console
+            console.error(error);
             const popupNotification = createPopupNotification({
                 type: `${action}:failed`,
                 autoHide: true, closeable: true, status: 'error', state: this.state,
@@ -224,11 +227,11 @@ export default class App extends React.Component {
                 const result = await callApi('getUser');
                 return result.users[0];
             },
-            hideComment(id) {
-                return callApi('hideComment', {id});
+            async hideComment(id) {
+                return await callApi('hideComment', {id});
             },
-            showComment(id) {
-                return callApi('showComment', {id});
+            async showComment(id) {
+                return await callApi('showComment', {id});
             }
         };
 

apps/comments-ui/src/actions.js

@@ -27,17 +27,34 @@ async function addComment({state, api, data: comment}) {
     };
 }
 
+async function hideComment({state, adminApi, data: comment}) {
+    await adminApi.hideComment(comment.id);
+
+    return {
+        comments: state.comments.map((c) => {
+            if (c.id === comment.id) {
+                return {
+                    ...c,
+                    status: 'hidden'
+                };
+            }
+            return c;
+        })
+    };
+}
+
 const Actions = {
     // Put your actions here
     addComment,
+    hideComment,
     loadMoreComments
 };
 
 /** Handle actions in the App, returns updated state */
-export default async function ActionHandler({action, data, state, api}) {
+export default async function ActionHandler({action, data, state, api, adminApi}) {
     const handler = Actions[action];
     if (handler) {
-        return await handler({data, state, api}) || {};
+        return await handler({data, state, api, adminApi}) || {};
     }
     return {};
 }

apps/comments-ui/src/components/modals/AdminContextMenu.js

@@ -8,16 +8,16 @@ class AdminContextMenu extends React.Component {
         super(props);
         this.state = {};
 
-        this.deleteComment = this.deleteComment.bind(this);
+        this.hideComment = this.hideComment.bind(this);
     }
 
-    deleteComment(event) {
-        // todo
+    hideComment(event) {
+        this.context.onAction('hideComment', this.props.comment);
     }
 
     render() {
         return (
-            <button onClick={this.deleteComment}>
+            <button onClick={this.hideComment}>
                 Hide comment
             </button>
         );