From a40f8f114b1e2b024865d3e1e31e5cf7f451c9bf Mon Sep 17 00:00:00 2001 From: Simon Backx Date: Tue, 5 Jul 2022 15:30:04 +0200 Subject: [PATCH] Connected comments to real API endpoints --- apps/comments-ui/src/App.js | 7 ++-- apps/comments-ui/src/actions.js | 12 +++++- apps/comments-ui/src/components/Form.js | 5 +++ .../src/components/TotalComments.js | 23 +++++++++--- apps/comments-ui/src/index.js | 8 ++-- apps/comments-ui/src/utils/api.js | 37 +++++++++++++++---- 6 files changed, 70 insertions(+), 22 deletions(-) diff --git a/apps/comments-ui/src/App.js b/apps/comments-ui/src/App.js index d2de98630d..b9b1821b91 100644 --- a/apps/comments-ui/src/App.js +++ b/apps/comments-ui/src/App.js @@ -36,7 +36,7 @@ export default class App extends React.Component { pagination: null, popupNotification: null, customSiteUrl: props.customSiteUrl, - postCommentId: props.postCommentId + postId: props.postId }; } @@ -126,7 +126,7 @@ export default class App extends React.Component { /** Fetch first few comments */ async fetchComments() { - const data = this.GhostApi.comments.browse({page: 1}); + const data = await this.GhostApi.comments.browse({page: 1, postId: this.state.postId}); return { comments: data.comments, @@ -162,7 +162,7 @@ export default class App extends React.Component { /**Get final App level context from App state*/ getContextFromState() { - const {action, popupNotification, customSiteUrl, member, comments, pagination} = this.state; + const {action, popupNotification, customSiteUrl, member, comments, pagination, postId} = this.state; return { action, popupNotification, @@ -170,6 +170,7 @@ export default class App extends React.Component { member, comments, pagination, + postId, onAction: (_action, data) => this.dispatchAction(_action, data) }; } diff --git a/apps/comments-ui/src/actions.js b/apps/comments-ui/src/actions.js index b786a3ad10..0cbc9a7d13 100644 --- a/apps/comments-ui/src/actions.js +++ b/apps/comments-ui/src/actions.js @@ -3,7 +3,7 @@ function loadMoreComments({state, api}) { if (state.pagination && state.pagination.page) { page = state.pagination.page + 1; } - const data = api.comments.browse({page}); + const data = api.comments.browse({page, postId: state.postId}); return { comments: [...data.comments, ...state.comments], @@ -11,8 +11,18 @@ function loadMoreComments({state, api}) { }; } +function addComment({state, api, data: comment}) { + const data = api.comments.add({comment}); + + return { + comments: [...data.comments, ...state.comments] + // todo: fix pagination now? + }; +} + const Actions = { // Put your actions here + addComment, loadMoreComments }; diff --git a/apps/comments-ui/src/components/Form.js b/apps/comments-ui/src/components/Form.js index ef9f42cc2e..e02f876c32 100644 --- a/apps/comments-ui/src/components/Form.js +++ b/apps/comments-ui/src/components/Form.js @@ -25,6 +25,11 @@ class Form extends React.Component { try { // Todo: send comment to server + await this.context.onAction('addComment', { + post_id: this.context.postId, + status: 'published', + html: message + }); // Clear message on success this.setState({message: ''}); diff --git a/apps/comments-ui/src/components/TotalComments.js b/apps/comments-ui/src/components/TotalComments.js index 4f676a7a72..741d399c25 100644 --- a/apps/comments-ui/src/components/TotalComments.js +++ b/apps/comments-ui/src/components/TotalComments.js @@ -1,9 +1,20 @@ -function TotalComments() { - return ( -
-

99 comments

-
- ); +import React from 'react'; +import AppContext from '../AppContext'; + +class TotalComments extends React.Component { + static contextType = AppContext; + + render() { + if (!this.context.pagination) { + return null; + } + + return ( +
+

{this.context.pagination.total} {this.context.pagination.total === 1 ? 'comment' : 'comments'}

+
+ ); + } } export default TotalComments; diff --git a/apps/comments-ui/src/index.js b/apps/comments-ui/src/index.js index ef9b1bdf1c..076da45b6d 100644 --- a/apps/comments-ui/src/index.js +++ b/apps/comments-ui/src/index.js @@ -32,8 +32,8 @@ function getSiteData() { const apiKey = scriptTag.dataset.key; const apiUrl = scriptTag.dataset.api; const sentryDsn = scriptTag.dataset.sentryDsn; - const postCommentId = scriptTag.dataset.commentId; - return {siteUrl, apiKey, apiUrl, sentryDsn, postCommentId}; + const postId = scriptTag.dataset.postId; + return {siteUrl, apiKey, apiUrl, sentryDsn, postId}; } return {}; } @@ -53,12 +53,12 @@ function setup({siteUrl}) { function init() { // const customSiteUrl = getSiteUrl(); - const {siteUrl: customSiteUrl, sentryDsn, postCommentId} = getSiteData(); + const {siteUrl: customSiteUrl, sentryDsn, postId} = getSiteData(); const siteUrl = customSiteUrl || window.location.origin; setup({siteUrl}); ReactDOM.render( - {} + {} , document.getElementById(ROOT_DIV_ID) ); diff --git a/apps/comments-ui/src/utils/api.js b/apps/comments-ui/src/utils/api.js index c44bf06ce3..5f7a5acb33 100644 --- a/apps/comments-ui/src/utils/api.js +++ b/apps/comments-ui/src/utils/api.js @@ -2,14 +2,10 @@ import {transformApiSiteData} from './helpers'; function setupGhostApi({siteUrl = window.location.origin, apiUrl, apiKey}) { const apiPath = 'members/api'; - const commentsApiPath = 'comments/api'; function endpointFor({type, resource, params = ''}) { if (type === 'members') { - return `${siteUrl.replace(/\/$/, '')}/${apiPath}/${resource}/`; - } - if (type === 'comments') { - return `${siteUrl.replace(/\/$/, '')}/${commentsApiPath}/${resource}/${params}`; + return `${siteUrl.replace(/\/$/, '')}/${apiPath}/${resource}/${params}`; } } @@ -80,7 +76,7 @@ function setupGhostApi({siteUrl = window.location.origin, apiUrl, apiKey}) { }; api.comments = { - browse({page}) { + browse({page, postId}) { const limit = 5; const comments = (new Array(limit)).fill().map(() => { return { @@ -108,8 +104,13 @@ function setupGhostApi({siteUrl = window.location.origin, apiUrl, apiKey}) { } } }; - /* - const url = endpointFor({type: 'comments', resource: 'comment', params: '?limit=15&page='+page}); + + // !! This commented code is working, don't delete it ;) + // This fetches the comments from the real API. + + /*const filter = encodeURIComponent('post_id:' + postId); + + const url = endpointFor({type: 'members', resource: 'comments', params: `?limit=15&include=member&filter=${filter}&page=${page}`}); return makeRequest({ url, method: 'GET', @@ -124,6 +125,26 @@ function setupGhostApi({siteUrl = window.location.origin, apiUrl, apiKey}) { throw new Error('Failed to fetch comments'); } });*/ + }, + add({comment}) { + const body = { + comments: [comment] + }; + const url = endpointFor({type: 'members', resource: 'comments'}); + 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 add comment'); + } + }); } };