Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Updated comment count to use the /comments/count API

Browse source 
refs https://github.com/TryGhost/Team/issues/1763

We still need to use the pagination for the other checks because these
are based on how many comments are visible, which includes deleted or
hidden comments.

By using the /comments/count API we ensure that any changes to the
calculation of comments is replicated by both the comment_count
helper, as well as the comments-ui
This commit is contained in:
Fabien "egg" O'Carroll 2022-08-08 17:29:38 +01:00 • committed by Fabien 'egg' O'Carroll
parent 3a48518407
commit 4b453a8b3a
3 changed files with 34 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -69,7 +69,7 @@ export default class App extends React.Component {
try { try {
// Fetch data from API, links, preview, dev sources // Fetch data from API, links, preview, dev sources
const {site, member} = await this.fetchApiData(); const {site, member} = await this.fetchApiData();
const {comments, pagination} = await this.fetchComments(); const {comments, pagination, count} = await this.fetchComments();
const state = { const state = {
site, site,
@ -77,7 +77,8 @@ export default class App extends React.Component {
action: 'init:success', action: 'init:success',
initStatus: 'success', initStatus: 'success',
comments, comments,
pagination pagination,
commentCount: count
}; };
this.setState(state); this.setState(state);
@ -173,11 +174,15 @@ export default class App extends React.Component {
/** Fetch first few comments */ /** Fetch first few comments */
async fetchComments() { async fetchComments() {
const data = await this.GhostApi.comments.browse({page: 1, postId: this.state.postId}); const dataPromise = this.GhostApi.comments.browse({page: 1, postId: this.state.postId});
const countPromise = this.GhostApi.comments.count({postId: this.state.postId});
const [data, count] = await Promise.all([dataPromise, countPromise]);
return { return {
comments: data.comments, comments: data.comments,
pagination: data.meta.pagination pagination: data.meta.pagination,
count: count
}; };
} }
@ -277,7 +282,7 @@ export default class App extends React.Component {
/**Get final App level context from App state*/ /**Get final App level context from App state*/
getContextFromState() { getContextFromState() {
const {action, popupNotification, customSiteUrl, member, comments, pagination, postId, admin, popup} = this.state; const {action, popupNotification, customSiteUrl, member, comments, pagination, commentCount, postId, admin, popup} = this.state;
return { return {
action, action,
popupNotification, popupNotification,
@ -286,6 +291,7 @@ export default class App extends React.Component {
admin, admin,
comments, comments,
pagination, pagination,
commentCount,
postId, postId,
title: this.props.title, title: this.props.title,
showCount: this.props.showCount, showCount: this.props.showCount,

8
apps/comments-ui/src/components/CommentsBox.js
View file

@ -46,11 +46,9 @@ const CommentsBoxTitle = ({title, showCount, count}) => {
const CommentsBoxContent = (props) => { const CommentsBoxContent = (props) => {
const [isEditing, setIsEditing] = useState(false); const [isEditing, setIsEditing] = useState(false);
const {pagination, member, comments, commentsEnabled, title, showCount} = useContext(AppContext); const {pagination, member, comments, commentCount, commentsEnabled, title, showCount} = useContext(AppContext);
const commentsElements = comments.slice().reverse().map(comment => <Comment isEditing={isEditing} comment={comment} key={comment.id} updateIsEditing={setIsEditing} />); const commentsElements = comments.slice().reverse().map(comment => <Comment isEditing={isEditing} comment={comment} key={comment.id} updateIsEditing={setIsEditing} />);
const commentsCount = pagination?.total || 0;
const paidOnly = commentsEnabled === 'paid'; const paidOnly = commentsEnabled === 'paid';
const isPaidMember = member && !!member.paid; const isPaidMember = member && !!member.paid;
@ -74,14 +72,14 @@ const CommentsBoxContent = (props) => {
return ( return (
<> <>
<CommentsBoxTitle title={title} showCount={showCount} count={commentsCount}/> <CommentsBoxTitle title={title} showCount={showCount} count={commentCount}/>
<Pagination /> <Pagination />
<div className={!pagination ? 'mt-4' : ''}> <div className={!pagination ? 'mt-4' : ''}>
{commentsElements} {commentsElements}
</div> </div>
<div> <div>
{ !isEditing { !isEditing
? (member ? (isPaidMember || !paidOnly ? <Form commentsCount={commentsCount} /> : <CTABox isFirst={commentsCount === 0} isPaid={paidOnly} />) : <CTABox isFirst={commentsCount === 0} isPaid={paidOnly} />) ? (member ? (isPaidMember || !paidOnly ? <Form commentsCount={commentCount} /> : <CTABox isFirst={pagination?.total === 0} isPaid={paidOnly} />) : <CTABox isFirst={pagination?.total === 0} isPaid={paidOnly} />)
: null : null
} }
</div> </div>

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

@ -102,6 +102,24 @@ function setupGhostApi({siteUrl = window.location.origin, apiUrl, apiKey}) {
let firstCommentsLoadedAt = null; let firstCommentsLoadedAt = null;
api.comments = { api.comments = {
async count({postId}) {
const url = endpointFor({type: 'members', resource: 'comments/counts'});
const response = await makeRequest({
url,
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
credentials: 'same-origin',
body: JSON.stringify({
ids: [postId]
})
});
const json = await response.json();
return json[postId];
},
browse({page, postId}) { browse({page, postId}) {
firstCommentsLoadedAt = firstCommentsLoadedAt ?? new Date().toISOString(); firstCommentsLoadedAt = firstCommentsLoadedAt ?? new Date().toISOString();