Bumped Comments UI to 0.21.0 (#21445)

ref PLG-220

apps/comments-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tryghost/comments-ui",
-  "version": "0.20.1",
+  "version": "0.21.6",
   "license": "MIT",
   "repository": "git@github.com:TryGhost/comments-ui.git",
   "author": "Ghost Foundation",

apps/comments-ui/src/App.tsx

@@ -28,7 +28,7 @@ const App: React.FC<AppProps> = ({scriptTag}) => {
         secundaryFormCount: 0,
         popup: null,
         labs: null,
-        order: 'best'
+        order: 'count__likes desc, created_at desc'
     });
 
     const iframeRef = React.createRef<HTMLIFrameElement>();
@@ -145,12 +145,14 @@ const App: React.FC<AppProps> = ({scriptTag}) => {
             // Fetch data from API, links, preview, dev sources
             const {member, labs} = await api.init();
             const {comments, pagination, count} = await fetchComments(labs);
+            const order = labs.commentImprovements ? 'count__likes desc, created_at desc' : 'created_at desc';
             const state = {
                 member,
                 initStatus: 'success',
                 comments,
                 pagination,
                 commentCount: count,
+                order,
                 labs: labs
             };
 

apps/comments-ui/src/components/content/forms/SortingForm.tsx

@@ -5,11 +5,11 @@ import {useOrderChange} from '../../../AppContext';
 export const SortingForm: React.FC = () => {
     const changeOrder = useOrderChange();
     const [isOpen, setIsOpen] = useState(false);
-    const [selectedOption, setSelectedOption] = useState('best');
+    const [selectedOption, setSelectedOption] = useState('count__likes desc, created_at desc');
     const dropdownRef = useRef<HTMLDivElement>(null);
 
     const options = [
-        {value: 'best', label: 'Best'},
+        {value: 'count__likes desc, created_at desc', label: 'Best'},
         {value: 'created_at desc', label: 'Newest'},
         {value: 'created_at asc', label: 'Oldest'}
     ];

apps/comments-ui/test/utils/MockedApi.ts

@@ -65,7 +65,7 @@ export class MockedApi {
         // Sort comments on created at + id
         const setOrder = order || 'default';
 
-        if (setOrder === 'best' && page === 1) {
+        if (setOrder === 'count__likes desc, created_at desc') {
             // Sort by likes (desc) first, then by created_at (asc)
             this.comments.sort((a, b) => {
                 const likesDiff = b.count.likes - a.count.likes;

ghost/core/core/server/models/comment.js

@@ -222,16 +222,6 @@ const Comment = ghostBookshelf.Model.extend({
             await model.load(relationsToLoadIndividually, _.omit(options, 'withRelated'));
         }
 
-        // if options.order === 'best', we findMostLikedComment
-        // then we remove it from the result set and add it as the first element
-        if (options.order === 'best' && options.page === '1') {
-            const mostLikedComment = await this.findMostLikedComment(options);
-            if (mostLikedComment) {
-                result.data = result.data.filter(comment => comment.id !== mostLikedComment.id);
-                result.data.unshift(mostLikedComment);
-            }
-        }
-
         return result;
     },
 

ghost/core/core/server/services/comments/CommentsController.js

@@ -51,7 +51,8 @@ module.exports = class CommentsController {
                 frame.options.filter = `post_id:${frame.options.post_id}`;
             }
         }
-        return this.service.getComments(frame.options);
+
+        return await this.service.getComments(frame.options);
     }
 
     /**

ghost/core/core/shared/config/defaults.json

@@ -210,7 +210,7 @@
     },
     "comments": {
         "url": "https://cdn.jsdelivr.net/ghost/comments-ui@~{version}/umd/comments-ui.min.js",
-        "version": "0.20"
+        "version": "0.21"
     },
     "signupForm": {
         "url": "https://cdn.jsdelivr.net/ghost/signup-form@~{version}/umd/signup-form.min.js",

ghost/core/test/e2e-api/members-comments/comments.test.js

@@ -26,6 +26,7 @@ const dbFns = {
      * @typedef {Object} AddCommentReplyData
      * @property {string} member_id
      * @property {string} [html='This is a reply']
+     * @property {date} [created_at]
      */
     /**
      * @typedef {AddCommentData & {replies: AddCommentReplyData[]}} AddCommentWithRepliesData
@@ -40,7 +41,8 @@ const dbFns = {
             post_id: data.post_id || postId,
             member_id: data.member_id,
             parent_id: data.parent_id,
-            html: data.html || '<p>This is a comment</p>'
+            html: data.html || '<p>This is a comment</p>',
+            created_at: data.created_at
         });
     },
     /**
@@ -511,8 +513,7 @@ describe('Comments API', function () {
             });
 
             it('can show most liked comment first when order param = best followed by most recent', async function () {
-                // await setupBrowseCommentsData();
-                // add another comment
+                await setupBrowseCommentsData();
                 await dbFns.addComment({
                     html: 'This is the newest comment',
                     member_id: fixtureManager.get('members', 2).id,