From a291914fc4be7ac87fda47ad45ce1f1a3c5b55e8 Mon Sep 17 00:00:00 2001
From: Fabien O'Carroll <fabien@allou.is>
Date: Tue, 27 Feb 2024 19:28:40 -0500
Subject: [PATCH] Updated Comments UI to use new endpoint

refs https://linear.app/tryghost/issue/ENG-676/

Now we have the case that there is no filter param, the simple string
approach fails. Instead we build up a URLSearchParams object which
makes it easier to handle conditional params & stringify it at the end.
---
 apps/comments-ui/src/utils/api.ts        | 17 +++++++-----
 apps/comments-ui/test/utils/MockedApi.ts | 34 +++++++++++-------------
 2 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/apps/comments-ui/src/utils/api.ts b/apps/comments-ui/src/utils/api.ts
index 22783a0258..e26e3107da 100644
--- a/apps/comments-ui/src/utils/api.ts
+++ b/apps/comments-ui/src/utils/api.ts
@@ -122,17 +122,22 @@ function setupGhostApi({siteUrl = window.location.origin, apiUrl, apiKey}: {site
                 return json;
             },
             browse({page, postId}: {page: number, postId: string}) {
-                let filterString = `post_id:'${postId}'`;
-
+                let filter = null;
                 if (firstCommentCreatedAt) {
-                    filterString += `+created_at:<=${firstCommentCreatedAt}`;
+                    filter = `created_at:<=${firstCommentCreatedAt}`;
                 }
 
-                const filter = encodeURIComponent(filterString);
-                const order = encodeURIComponent('created_at DESC, id DESC');
+                const order = 'created_at DESC, id DESC';
 
-                const url = endpointFor({type: 'members', resource: 'comments', params: `?limit=5&order=${order}&filter=${filter}&page=${page}`});
+                const params = new URLSearchParams();
 
+                params.set('limit', '5');
+                params.set('order', order);
+                if (filter) {
+                    params.set('filter', filter);
+                }
+                params.set('page', page.toString());
+                const url = endpointFor({type: 'members', resource: `comments/post/${postId}`, params: `?${params.toString()}`});
                 const response = makeRequest({
                     url,
                     method: 'GET',
diff --git a/apps/comments-ui/test/utils/MockedApi.ts b/apps/comments-ui/test/utils/MockedApi.ts
index efd2e0c0be..8ae893425b 100644
--- a/apps/comments-ui/test/utils/MockedApi.ts
+++ b/apps/comments-ui/test/utils/MockedApi.ts
@@ -166,29 +166,28 @@ export class MockedApi {
         });
 
         await page.route(`${path}/members/api/comments/*`, async (route) => {
-            if (route.request().method() === 'POST') {
-                const payload = JSON.parse(route.request().postData());
+            const payload = JSON.parse(route.request().postData());
 
-                this.#lastCommentDate = new Date();
-                this.addComment({
-                    ...payload.comments[0],
-                    member: this.member
-                });
-                return await route.fulfill({
-                    status: 200,
-                    body: JSON.stringify({
-                        comments: [
-                            this.comments[this.comments.length - 1]
-                        ]
-                    })
-                });
-            }
+            this.#lastCommentDate = new Date();
+            this.addComment({
+                ...payload.comments[0],
+                member: this.member
+            });
+            return await route.fulfill({
+                status: 200,
+                body: JSON.stringify({
+                    comments: [
+                        this.comments[this.comments.length - 1]
+                    ]
+                })
+            });
+        });
 
+        await page.route(`${path}/members/api/comments/post/*/*`, async (route) => {
             const url = new URL(route.request().url());
 
             const p = parseInt(url.searchParams.get('page') ?? '1');
             const limit = parseInt(url.searchParams.get('limit') ?? '5');
-            const order = url.searchParams.get('order') ?? '';
             const filter = url.searchParams.get('filter') ?? '';
 
             await route.fulfill({
@@ -196,7 +195,6 @@ export class MockedApi {
                 body: JSON.stringify(this.browseComments({
                     page: p,
                     limit,
-                    order,
                     filter
                 }))
             });