From fdeed0eeece6b79b90501e0e9e1b28cab2678e39 Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Tue, 5 Jul 2022 16:08:08 +0200
Subject: [PATCH] Fixed comments order

---
 apps/comments-ui/src/actions.js                | 3 ++-
 apps/comments-ui/src/components/CommentsBox.js | 2 +-
 apps/comments-ui/src/utils/api.js              | 5 +++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/comments-ui/src/actions.js b/apps/comments-ui/src/actions.js
index 3aa5ac1dd0..809f334d33 100644
--- a/apps/comments-ui/src/actions.js
+++ b/apps/comments-ui/src/actions.js
@@ -5,8 +5,9 @@ async function loadMoreComments({state, api}) {
     }
     const data = await api.comments.browse({page, postId: state.postId});
     
+    // Note: we store the comments from new to old, and show them in reverse order
     return {
-        comments: [...data.comments, ...state.comments],
+        comments: [...state.comments, ...data.comments],
         pagination: data.meta.pagination
     };
 }
diff --git a/apps/comments-ui/src/components/CommentsBox.js b/apps/comments-ui/src/components/CommentsBox.js
index 72cf4fe9b0..590d76695a 100644
--- a/apps/comments-ui/src/components/CommentsBox.js
+++ b/apps/comments-ui/src/components/CommentsBox.js
@@ -41,7 +41,7 @@ class CommentsBox extends React.Component {
     }
 
     render() {
-        const comments = !this.context.comments ? 'Loading...' : this.context.comments.map(comment => <Comment comment={comment} key={comment.id} />);
+        const comments = !this.context.comments ? 'Loading...' : this.context.comments.slice().reverse().map(comment => <Comment comment={comment} key={comment.id} />);
 
         const containerClass = this.darkMode() ? 'dark' : '';
 
diff --git a/apps/comments-ui/src/utils/api.js b/apps/comments-ui/src/utils/api.js
index 5d1bfeb867..64b0836f9d 100644
--- a/apps/comments-ui/src/utils/api.js
+++ b/apps/comments-ui/src/utils/api.js
@@ -78,8 +78,9 @@ function setupGhostApi({siteUrl = window.location.origin, apiUrl, apiKey}) {
     api.comments = {
         browse({page, postId}) {
             const filter = encodeURIComponent('post_id:' + postId);
+            const order = encodeURIComponent('created_at DESC');
 
-            const url = endpointFor({type: 'members', resource: 'comments', params: `?limit=15&include=member&filter=${filter}&page=${page}`});
+            const url = endpointFor({type: 'members', resource: 'comments', params: `?limit=5&include=member&order=${order}&filter=${filter}&page=${page}`});
             return makeRequest({
                 url,
                 method: 'GET',
@@ -89,7 +90,7 @@ function setupGhostApi({siteUrl = window.location.origin, apiUrl, apiKey}) {
                 credentials: 'same-origin'
             }).then(function (res) {
                 if (res.ok) {
-                    return res.json();
+                    return res.json()
                 } else {
                     throw new Error('Failed to fetch comments');
                 }