Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-03 23:00:14 -05:00
Code Issues Activity

Connected comments to real API endpoints

Browse source
This commit is contained in:
Simon Backx 2022-07-05 15:30:04 +02:00
parent de06441c5d
commit a40f8f114b
6 changed files with 70 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
apps/comments-ui/src/App.js
View file

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

12
apps/comments-ui/src/actions.js
View file

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

5
apps/comments-ui/src/components/Form.js
View file

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

23
apps/comments-ui/src/components/TotalComments.js
View file

@ -1,9 +1,20 @@
function TotalComments() {
return (
<section className="font-sans text-base text-neutral-400 mb-px">
<p>99 comments</p>
</section>
);
import React from 'react';
import AppContext from '../AppContext';
class TotalComments extends React.Component {
static contextType = AppContext;
render() {
if (!this.context.pagination) {
return null;
}
return (
<section className="font-sans text-base text-neutral-400 mb-px">
<p>{this.context.pagination.total} {this.context.pagination.total === 1 ? 'comment' : 'comments'}</p>
</section>
);
}
}
export default TotalComments;

8
apps/comments-ui/src/index.js
View file

@ -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(
<React.StrictMode>
{<App siteUrl={siteUrl} customSiteUrl={customSiteUrl} sentryDsn={sentryDsn} postCommentId={postCommentId} />}
{<App siteUrl={siteUrl} customSiteUrl={customSiteUrl} sentryDsn={sentryDsn} postId={postId} />}
</React.StrictMode>,
document.getElementById(ROOT_DIV_ID)
);

37
apps/comments-ui/src/utils/api.js
View file

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