From 290e3d57138ec390cbbd9e73f1dacaf9854dc67d Mon Sep 17 00:00:00 2001
From: Elena Baidakova <lena.baydakova@gmail.com>
Date: Wed, 2 Nov 2022 10:02:26 +0400
Subject: [PATCH] Updated counts api url (#12)

closes TryGhost/Team#2094
- Counts request was changed from `post` to `get` for enable request caching.
---
 apps/comments-ui/README.md                   | 20 +++++----
 apps/comments-ui/cypress/support/commands.js |  6 +--
 apps/comments-ui/src/utils/api.js            | 10 ++---
 apps/comments-ui/src/utils/api.test.js       | 47 ++++++++++++++++++++
 4 files changed, 65 insertions(+), 18 deletions(-)
 create mode 100644 apps/comments-ui/src/utils/api.test.js

diff --git a/apps/comments-ui/README.md b/apps/comments-ui/README.md
index e0709dfa7b..2d1084af95 100644
--- a/apps/comments-ui/README.md
+++ b/apps/comments-ui/README.md
@@ -4,18 +4,20 @@
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
+## Basic Setup
+
+This section is mostly relevant for core team only for active Comments development.
+
+- Run `yarn start:dev` to start Comments in development mode
+- Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+- To use the local Comments script in a local Ghost site
+    - Update `config.local.json` in Ghost repo to add "comments" config pointing to local dev server url as instructed on terminal.
+    - By default, this uses port `5368` for loading local Comments script on Ghost site. It's also possible to specify a custom port when running the script using - `--port=xxxx`.
+
 ## Available Scripts
 
 In the project directory, you can run:
 
-### `yarn start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
-
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
-
 ### `yarn test`
 
 Launches the test runner in the interactive watch mode.\
@@ -74,4 +76,4 @@ This section has moved here: [https://facebook.github.io/create-react-app/docs/t
 
 # Copyright & License 
 
-Copyright (c) 2013-2022 Ghost Foundation - Released under the [MIT license](LICENSE).
\ No newline at end of file
+Copyright (c) 2013-2022 Ghost Foundation - Released under the [MIT license](LICENSE).
diff --git a/apps/comments-ui/cypress/support/commands.js b/apps/comments-ui/cypress/support/commands.js
index e409d85967..d613afc20e 100644
--- a/apps/comments-ui/cypress/support/commands.js
+++ b/apps/comments-ui/cypress/support/commands.js
@@ -15,8 +15,8 @@ Cypress.Commands.add('login', (memberData) => {
 Cypress.Commands.add('mockAddComments', () => {
     cy.intercept(
         {
-            method: 'POST',
-            url: '/members/api/comments/'
+            method: 'GET',
+            url: '/members/api/comments/counts/'
         },
         [] // and force the response to be: []
     ).as('getCounts'); // and assign an alias
@@ -47,7 +47,7 @@ Cypress.Commands.add('mockComments', (count, override = {}) => {
 
     cy.intercept(
         {
-            method: 'POST',
+            method: 'GET',
             url: '/members/api/comments/counts/'
         },
         []
diff --git a/apps/comments-ui/src/utils/api.js b/apps/comments-ui/src/utils/api.js
index ef7cc91c22..0a2509bce4 100644
--- a/apps/comments-ui/src/utils/api.js
+++ b/apps/comments-ui/src/utils/api.js
@@ -101,17 +101,15 @@ function setupGhostApi({siteUrl = window.location.origin, apiUrl, apiKey}) {
 
     api.comments = {
         async count({postId}) {
-            const url = endpointFor({type: 'members', resource: 'comments/counts'});
+            const params = postId ? `?ids=${postId}` : '';
+            const url = endpointFor({type: 'members', resource: `comments/counts`, params});
             const response = await makeRequest({
                 url,
-                method: 'POST',
+                method: 'GET',
                 headers: {
                     'Content-Type': 'application/json'
                 },
-                credentials: 'same-origin',
-                body: JSON.stringify({
-                    ids: [postId]
-                })
+                credentials: 'same-origin'
             });
 
             const json = await response.json();
diff --git a/apps/comments-ui/src/utils/api.test.js b/apps/comments-ui/src/utils/api.test.js
new file mode 100644
index 0000000000..7f8e5202d8
--- /dev/null
+++ b/apps/comments-ui/src/utils/api.test.js
@@ -0,0 +1,47 @@
+import setupGhostApi from './api';
+
+test('should call counts endpoint', () => {
+    jest.spyOn(window, 'fetch');
+    window.fetch.mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({success: true})
+    });
+
+    const api = setupGhostApi({});
+
+    api.comments.count({postId: null});
+
+    expect(window.fetch).toHaveBeenCalledTimes(1);
+    expect(window.fetch).toHaveBeenCalledWith(
+        'http://localhost/members/api/comments/counts/',
+        expect.objectContaining({
+            method: 'GET',
+            headers: {'Content-Type': 'application/json'},
+            credentials: 'same-origin',
+            body: undefined
+        }),
+    );
+});
+
+test('should call counts endpoint with postId query param', () => {
+    jest.spyOn(window, 'fetch');
+    window.fetch.mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({success: true})
+    });
+
+    const api = setupGhostApi({});
+
+    api.comments.count({postId: '123'});
+
+    expect(window.fetch).toHaveBeenCalledTimes(1);
+    expect(window.fetch).toHaveBeenCalledWith(
+        'http://localhost/members/api/comments/counts/?ids=123',
+        expect.objectContaining({
+            method: 'GET',
+            headers: {'Content-Type': 'application/json'},
+            credentials: 'same-origin',
+            body: undefined
+        }),
+    );
+});