@financial-times/qanda-ui 0.0.1-beta.1

package/src/services/comments-api.ts

@@ -0,0 +1,217 @@
+import {
+  createApi,
+  fetchBaseQuery,
+  FetchBaseQueryError,
+} from '@reduxjs/toolkit/query/react';
+
+import customSSE from './custom-sse';
+import type { Comment } from '../types/comment';
+import { NewAnswerEvent } from '../types/sse-events';
+
+// TODO: ensure that users don't miss out on updates in this window
+// https://financialtimes.atlassian.net/browse/CI-2715
+const retryDelay = 1000;
+
+const updateTypes = {
+  QA_NEW_REPLY: 'updatedComments',
+};
+
+export let eventSource: EventSource | null = null;
+
+type CommentsStreamResponse = {
+  type: string;
+  children?: Comment[];
+  startingDateTime?: string;
+};
+
+type UpdatesResponse = {
+  type: string;
+  payload: any; // maybe unknown?
+};
+
+type CachedData = {
+  updatedComments?: Comment[];
+  [key: string]: any; //fallback
+};
+
+export const nextCommentsApi = createApi({
+  reducerPath: 'nextCommentsApi',
+  refetchOnReconnect: true, // refetches all subscribed queries on regaining a network connection
+  baseQuery: fetchBaseQuery({
+    timeout: 10000,
+  }),
+  endpoints: (builder) => ({
+    // QA STREAM
+    getQandAStream: builder.query({
+      query: ({
+        storyId,
+        useStaging,
+        commentsAPIUrl,
+      }: {
+        storyId: string;
+        useStaging: boolean;
+        commentsAPIUrl: string;
+      }) =>
+        `${commentsAPIUrl}/story/${storyId}/stream${useStaging ? '?staging=1' : ''}`,
+      transformResponse: (response: CommentsStreamResponse) => {
+        return {
+          qandas: response?.children || [],
+          type: response.type,
+          startingDateTime: response?.startingDateTime || '',
+        };
+      },
+    }),
+    // UPDATES LISTENER
+    getQandAUpdates: builder.query({
+      queryFn: async ({
+        storyId,
+        useStaging,
+        commentsAPIUrl,
+      }: {
+        storyId: string;
+        useStaging: boolean;
+        commentsAPIUrl: string;
+      }) => {
+        return { data: {} as CachedData };
+      },
+      async onCacheEntryAdded(
+        arg,
+        { updateCachedData, cacheDataLoaded, cacheEntryRemoved },
+      ) {
+        await cacheDataLoaded;
+        let connectToSSE: () => void;
+        try {
+          connectToSSE = () => {
+            const sseEndpoint = `${arg.commentsAPIUrl}/story/${arg.storyId}/updates${arg.useStaging ? '?staging=1' : ''}`;
+            eventSource = new customSSE(sseEndpoint);
+
+            eventSource.onopen = () => {
+              console.log(`Connected to SSE: ${sseEndpoint}`);
+            };
+            eventSource.onmessage = (event) => {
+              try {
+                const data: NewAnswerEvent = JSON.parse(event.data);
+                console.log('Received SSE update:', data);
+                if (data && data.type) {
+                  updateCachedData((draft: CachedData) => {
+                    const updatedData = updateTypes[data.type];
+                    draft[updatedData] = draft[updatedData] || [];
+                    draft[updatedData].push(data.payload);
+                  });
+                }
+              } catch (error) {
+                console.warn('Failed to parse SSE message:', event.data);
+              }
+            };
+            eventSource.onerror = (error) => {
+              console.error(
+                `SSE error occurred. Reconnecting in ${retryDelay / 1000} seconds...`,
+              );
+              eventSource?.close();
+              eventSource = null;
+
+              setTimeout(() => connectToSSE(), retryDelay);
+            };
+          };
+          connectToSSE();
+        } catch (error) {
+          console.error('Failed to subscribe to SSE:', error);
+          console.error(`Reconnecting in ${retryDelay / 1000} seconds...`);
+          eventSource = null;
+          setTimeout(() => connectToSSE(), retryDelay);
+        }
+        // cleanup when there are no subscribers to the cache anymore
+        await cacheEntryRemoved;
+        if (eventSource !== null) {
+          eventSource.close();
+          eventSource = null;
+        }
+      },
+    }),
+    // USER ROLES
+    getUserRoles: builder.query({
+      query: ({
+        storyId,
+        useStaging,
+        commentsAPIUrl,
+        token,
+      }: {
+        storyId: string;
+        useStaging: boolean;
+        commentsAPIUrl: string;
+        token: string;
+      }) => ({
+        url: `${commentsAPIUrl}/user/user-details/story/${storyId}${useStaging ? '?staging=1' : ''}`,
+        method: 'POST',
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      }),
+    }),
+    // POST A QUESTION
+    postQuestion: builder.mutation({
+      query: ({
+        storyId,
+        useStaging,
+        commentsAPIUrl,
+        token,
+        question,
+      }: {
+        storyId: string;
+        useStaging: boolean;
+        commentsAPIUrl: string;
+        token: string;
+        question: string;
+      }) => ({
+        url: `${commentsAPIUrl}/story/${storyId}/question${useStaging ? '?staging=1' : ''}`,
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ question, token }),
+      }),
+      transformResponse: (response: { data: any }, meta, arg) => {
+        return response.data;
+      },
+      transformErrorResponse: (response: FetchBaseQueryError, meta, arg) => {
+        if (response.data && typeof response.data === 'object') {
+          const errorResponse = response.data as { error?: string };
+          return errorResponse.error
+            ? errorResponse.error
+            : 'An unknown error occurred';
+        }
+        return 'An unknown error occurred';
+      },
+    }),
+  }),
+});
+
+export const {
+  useGetQandAStreamQuery,
+  useGetQandAUpdatesQuery,
+  useGetUserRolesQuery,
+  usePostQuestionMutation,
+} = nextCommentsApi;
+
+// UPDATES QUERY CUSTOM HOOKS
+
+// custom hook for getting just the updated comments from the updates, so we are more efficient
+export const useUpdatedComments = ({
+  storyId,
+  useStaging,
+  commentsAPIUrl,
+}: {
+  storyId: string;
+  useStaging: boolean;
+  commentsAPIUrl: string;
+}) => {
+  return nextCommentsApi.useGetQandAUpdatesQuery(
+    { storyId, useStaging, commentsAPIUrl },
+    {
+      selectFromResult: ({ data }) => ({
+        updatedComments: data?.updatedComments || [],
+      }),
+    },
+  ).updatedComments;
+};

package/src/services/custom-sse.ts

@@ -0,0 +1,101 @@
+const MOCK_SSE =
+  process.env.NODE_ENV === 'development'
+    ? require('../../demo/config').MOCK_SSE
+    : false;
+
+interface EventSourceInit {
+  withCredentials?: boolean;
+}
+
+interface EventSourceEventMap {
+  message: MessageEvent;
+  open: Event;
+  error: Event;
+}
+
+class MockEventSource {
+  static readonly CONNECTING = 0;
+  static readonly OPEN = 1;
+  static readonly CLOSED = 2;
+
+  readonly CONNECTING = MockEventSource.CONNECTING;
+  readonly OPEN = MockEventSource.OPEN;
+  readonly CLOSED = MockEventSource.CLOSED;
+
+  readyState: number = MockEventSource.CLOSED;
+  withCredentials: boolean = false;
+  url: string;
+  onopen: ((this: EventSource, ev: Event) => any) | null = null;
+  onmessage: ((this: EventSource, ev: MessageEvent) => any) | null = null;
+  onerror: ((this: EventSource, ev: Event) => any) | null = null;
+  isClosed = false;
+
+  constructor(url: string | URL, eventSourceInitDict?: EventSourceInit) {
+    this.url = url.toString();
+    if (eventSourceInitDict?.withCredentials) {
+      this.withCredentials = eventSourceInitDict.withCredentials;
+    }
+
+    // Simulate an async connection opening
+    setTimeout(() => {
+      if (this.onopen && !this.isClosed) {
+        this.onopen(new Event('open'));
+      }
+    }, 500);
+  }
+
+  addEventListener<K extends keyof EventSourceEventMap>(
+    type: K,
+    listener: (this: EventSource, ev: EventSourceEventMap[K]) => any,
+    options?: boolean | AddEventListenerOptions,
+  ): void {
+    // Mock implementation when needed
+  }
+
+  removeEventListener<K extends keyof EventSourceEventMap>(
+    type: K,
+    listener: (this: EventSource, ev: EventSourceEventMap[K]) => any,
+    options?: boolean | EventListenerOptions,
+  ): void {
+    // Mock implementation when needed
+  }
+
+  /**
+   * Simulate receiving a message from the SSE server.
+   */
+  sendMessage(data: any) {
+    if (this.onmessage && !this.isClosed) {
+      this.onmessage(
+        new MessageEvent('message', { data: JSON.stringify(data) }),
+      );
+    }
+  }
+
+  /**
+   * Simulate an SSE error.
+   */
+  simulateError() {
+    if (this.onerror && !this.isClosed) {
+      this.onerror(new Event('error'));
+    }
+  }
+
+  /**
+   * Close the event source.
+   */
+  close() {
+    this.isClosed = true;
+    this.readyState = MockEventSource.CLOSED;
+  }
+
+  dispatchEvent(event: Event): boolean {
+    // Mock implementation
+    return true;
+  }
+}
+
+const customSSE: typeof MockEventSource | typeof EventSource = MOCK_SSE
+  ? MockEventSource
+  : EventSource;
+
+export default customSSE;

package/src/services/mocks/api-endpoints.ts

@@ -0,0 +1,36 @@
+import { http, HttpResponse } from 'msw';
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const mockComments = require('./mock-comments.json');
+
+export const handlers = [
+  http.get('*/story/:storyId/stream', (req) => {
+    return HttpResponse.json(mockComments);
+  }),
+  http.get('*/story/:storyId/updates', (req) => {
+    // NB: this is probably not the correct response, but it's just a placeholder for now
+    return HttpResponse.json({
+      updatedComments: [
+        {
+          id: 'mocked-update-id',
+          body: { structured: { tree: { type: 'body', children: [] } } },
+          publishedDate: '2024-01-24T02:51:49.440Z',
+          byline: { structured: { tree: { type: 'byline', children: [] } } },
+          author: { role: 'Mocked Author' },
+          children: [],
+        },
+      ],
+    });
+  }),
+  http.post('*/user/user-details/story/:storyId', (req) => {
+    return HttpResponse.json({
+      isExpert: true,
+      isStaffExpert: true,
+      role: 'ADMIN',
+    });
+  }),
+  http.post('*/story/:storyId/question', (req) => {
+    return HttpResponse.json({
+      data: 'Question submitted successfully!',
+    });
+  }),
+];

package/src/services/mocks/mock-comments.json

@@ -0,0 +1,307 @@
+{
+  "type": "qa",
+  "startingDateTime": "2025-02-28T21:19:07.877Z",
+  "children": [
+    {
+      "type": "comment",
+      "id": "37c43f17-cf7a-485c-9269-e705da9ad784",
+      "title": "",
+      "body": {
+        "structured": {
+          "tree": {
+            "type": "body",
+            "version": 1,
+            "children": [
+              {
+                "type": "paragraph",
+                "children": [
+                  {
+                    "type": "text",
+                    "value": "Can the creator of Bitcoin / other cryptocurrencies change the maximum number of tokens that will be produced as to what is stated initially in its white paper?"
+                  }
+                ]
+              }
+            ]
+          },
+          "references": []
+        }
+      },
+      "publishedDate": "2024-01-24T02:51:49.440Z",
+      "isQuestion": true,
+      "isAnswer": false,
+      "byline": "Robin C, London",
+      "children": [
+        {
+          "type": "comment",
+          "id": "aac43f17-cf5a-485c-9269-e705da9ad784",
+          "title": "",
+          "body": {
+            "structured": {
+              "tree": {
+                "type": "comment",
+                "version": 1,
+                "children": [
+                  {
+                    "type": "paragraph",
+                    "children": [
+                      {
+                        "type": "text",
+                        "value": "It's true that only a handful of people can approve whatever pull requests you or I might care to submit to a GitHub repository. However this element of centralization is offset by three things:—"
+                      },
+                      {
+                        "type": "list",
+                        "children": [
+                          {
+                            "type": "list-item",
+                            "children": [
+                              {
+                                "type": "text",
+                                "value": "The miners are free to accept "
+                              },
+                              {
+                                "type": "emphasis",
+                                "children": [
+                                  {
+                                    "type": "text",
+                                    "value": "or ignore"
+                                  }
+                                ]
+                              },
+                              {
+                                "type": "text",
+                                "value": " the actions of the maintainers. The miners can download old versions if they wish (since git records all changes); or they can download their software from a rival repository (which a dissenting group of "
+                              },
+                              {
+                                "type": "emphasis",
+                                "children": [
+                                  {
+                                    "type": "text",
+                                    "value": "other"
+                                  }
+                                ]
+                              },
+                              {
+                                "type": "text",
+                                "value": " maintainers would set up by cloning the original)"
+                              }
+                            ]
+                          },
+                          {
+                            "type": "list-item",
+                            "children": [
+                              {
+                                "type": "text",
+                                "value": "Every active Bitcoin developer (including dissenters) has a personal copy of the whole repository (including its history of changes) on his/her own computer — that's how git works. GitHub is just a centralised point (owned by Microsoft) that individual developers can use (or not use) to synchronise their own personal git repositories against other individual developers’."
+                              }
+                            ]
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                ]
+              },
+              "references": []
+            }
+          },
+          "isQuestion": false,
+          "isAnswer": true,
+          "publishedDate": "2024-01-24T02:53:19.440Z",
+          "children": [],
+          "byline": {
+            "tree": {
+              "type": "byline",
+              "children": [
+                {
+                  "type": "author",
+                  "id": "d24990d1-2aec-4d72-8330-cb1c73532f49",
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "Rana Foroohar"
+                    }
+                  ],
+                  "data": {
+                    "referenceIndex": 0
+                  }
+                }
+              ]
+            },
+            "references": [
+              {
+                "concept": {
+                  "url": "https://www.ft.com/stream/d24990d1-2aec-4d72-8330-cb1c73532f49",
+                  "relativeUrl": "/stream/d24990d1-2aec-4d72-8330-cb1c73532f49"
+                }
+              }
+            ]
+          },
+          "author": {
+            "role": "FT Reporter",
+            "headshot": "https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2Fuploaded-files%2FRanaFaroohar-byline_cutout-48f06865-5fb8-49e2-99f1-e2781d64d566.png?source=next-article&fit=scale-down&quality=highest&width=150&dpr=2",
+            "prefLabel": "Rana Foroohar",
+            "streamPage": "https://www.ft.com/stream/d24990d1-2aec-4d72-8330-cb1c73532f49"
+          }
+        },
+        {
+          "type": "comment",
+          "id": "bbc43f17-cf7a-485c-9269-e705da9ad684",
+          "title": "",
+          "body": {
+            "structured": {
+              "tree": {
+                "type": "comment",
+                "version": 1,
+                "children": [
+                  {
+                    "type": "paragraph",
+                    "children": [
+                      {
+                        "type": "text",
+                        "value": "The source code for Bitcoin is published on GitHub. If you want to increase the number of tokens, here are some instructions:—"
+                      },
+                      {
+                        "type": "list",
+                        "children": [
+                          {
+                            "type": "list-item",
+                            "children": [
+                              {
+                                "type": "text",
+                                "value": "Open a GitHub account (free)."
+                              }
+                            ]
+                          },
+                          {
+                            "type": "list-item",
+                            "children": [
+                              {
+                                "type": "text",
+                                "value": "Click the “clone me” button on the Bitcoin repository page to create your own copy of the Bitcoin source code. We'll call your new repository “BitcoinDither”."
+                              }
+                            ]
+                          },
+                          {
+                            "type": "list-item",
+                            "children": [
+                              {
+                                "type": "text",
+                                "value": "Change the line(s) of code in your new BitcoinDither repository that specify the maximum number of tokens."
+                              }
+                            ]
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                ]
+              },
+              "references": []
+            }
+          },
+          "isQuestion": false,
+          "isAnswer": true,
+          "publishedDate": "2024-01-24T02:54:59.440Z",
+          "children": [],
+          "byline": {
+            "tree": {
+              "type": "byline",
+              "children": [
+                {
+                  "type": "author",
+                  "id": "e191658e-c66a-45bc-9bad-343bdc4210b3",
+                  "children": [
+                    {
+                      "type": "text",
+                      "value": "John Burn-Murdoch"
+                    }
+                  ],
+                  "data": {
+                    "referenceIndex": 0
+                  }
+                }
+              ]
+            },
+            "references": [
+              {
+                "concept": {
+                  "url": "https://www.ft.com/stream/e191658e-c66a-45bc-9bad-343bdc4210b3",
+                  "relativeUrl": "/stream/e191658e-c66a-45bc-9bad-343bdc4210b3"
+                }
+              }
+            ]
+          },
+          "author": {
+            "role": "FT Reporter",
+            "streamPage": "https://www.ft.com/stream/e191658e-c66a-45bc-9bad-343bdc4210b3"
+          }
+        },
+        {
+          "type": "comment",
+          "id": "bbc43f17-cf7a-485c-9269-e705da9ad111",
+          "title": "",
+          "body": {
+            "structured": {
+              "tree": {
+                "type": "comment",
+                "version": 1,
+                "children": [
+                  {
+                    "type": "paragraph",
+                    "children": [
+                      {
+                        "type": "text",
+                        "value": "The source code for Bitcoin is published on GitHub. If you want to increase the number of tokens, here are some instructions:—"
+                      },
+                      {
+                        "type": "list",
+                        "children": [
+                          {
+                            "type": "list-item",
+                            "children": [
+                              {
+                                "type": "text",
+                                "value": "Open a GitHub account (free)."
+                              }
+                            ]
+                          },
+                          {
+                            "type": "list-item",
+                            "children": [
+                              {
+                                "type": "text",
+                                "value": "Click the “clone me” button on the Bitcoin repository page to create your own copy of the Bitcoin source code. We'll call your new repository “BitcoinDither”."
+                              }
+                            ]
+                          },
+                          {
+                            "type": "list-item",
+                            "children": [
+                              {
+                                "type": "text",
+                                "value": "Change the line(s) of code in your new BitcoinDither repository that specify the maximum number of tokens."
+                              }
+                            ]
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                ]
+              },
+              "references": []
+            }
+          },
+          "isQuestion": false,
+          "isAnswer": true,
+          "publishedDate": "2024-01-24T02:58:59.440Z",
+          "children": [],
+          "byline": "Jaren Kerr",
+          "author": {
+            "role": "FT Expert"
+          }
+        }
+      ]
+    }
+  ]
+}

package/src/services/mocks/msw-browser.ts

@@ -0,0 +1,4 @@
+import { setupWorker } from 'msw/browser';
+import { handlers } from './api-endpoints';
+
+export const worker = setupWorker(...handlers);

package/src/services/mocks/msw-server.ts

@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node';
+import { handlers } from './api-endpoints';
+
+export const server = setupServer(...handlers);