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

package/src/store/index.ts

@@ -0,0 +1,41 @@
+import {
+  configureStore,
+  ThunkAction,
+  Action,
+  combineReducers,
+} from '@reduxjs/toolkit';
+import { setupListeners } from '@reduxjs/toolkit/query';
+import questionReducer from './questionSlice';
+import { stream } from './stream';
+import { qa } from './qa';
+import { user } from './user';
+import { network } from './network';
+import { nextCommentsApi } from '../services/comments-api';
+
+export const rootReducer = combineReducers({
+  stream: stream.reducer,
+  network: network.reducer,
+  question: questionReducer,
+  qa: qa.reducer,
+  user: user.reducer,
+  nextCommentsApi: nextCommentsApi.reducer,
+});
+
+export const store = configureStore({
+  reducer: rootReducer,
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware().concat(nextCommentsApi.middleware),
+});
+
+// optional, but required for refetchOnFocus/refetchOnReconnect behaviors
+// see `setupListeners` docs - takes an optional callback as the 2nd arg for customization
+setupListeners(store.dispatch);
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+export type AppThunk<ReturnType = void> = ThunkAction<
+  ReturnType,
+  RootState,
+  unknown,
+  Action<string>
+>;

package/src/store/network.ts

@@ -0,0 +1,23 @@
+import { createSlice } from '@reduxjs/toolkit';
+import type { PayloadAction } from '@reduxjs/toolkit';
+
+export type NetworkStatus = 'online' | 'offline';
+type Network = {
+  status: NetworkStatus;
+};
+
+export const initialState: Network = {
+  status: 'online',
+};
+
+export const network = createSlice({
+  name: 'network',
+  initialState,
+  reducers: {
+    networkChangeStatusTo: (state, action: PayloadAction<Network>) => {
+      state.status = action.payload.status;
+    },
+  },
+});
+
+export const { networkChangeStatusTo } = network.actions;

package/src/store/qa.ts

@@ -0,0 +1,22 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+type status = 'live' | 'closed';
+
+export const initialState = {
+  status: 'closed' as status,
+};
+
+export const qa = createSlice({
+  name: 'qa',
+  initialState,
+  reducers: {
+    close: (state) => {
+      state.status = 'closed';
+    },
+    open: (state) => {
+      state.status = 'live';
+    },
+  },
+});
+
+export const { close, open } = qa.actions;

package/src/store/questionSlice.ts

@@ -0,0 +1,37 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+interface QuestionState {
+  isFormOpen: boolean;
+  question: string;
+}
+
+const initialState: QuestionState = {
+  isFormOpen: false,
+  question: '',
+};
+
+export const questionSlice = createSlice({
+  name: 'question',
+  initialState,
+  reducers: {
+    openForm: (state) => {
+      state.isFormOpen = true;
+    },
+    closeForm: (state) => {
+      state.isFormOpen = false;
+      state.question = '';
+    },
+    updateQuestion: (state, action: PayloadAction<string>) => {
+      state.question = action.payload;
+    },
+    closeSuccess: (state) => {
+      state.question = '';
+      state.isFormOpen = false;
+    },
+  },
+});
+
+export const { openForm, closeForm, updateQuestion, closeSuccess } =
+  questionSlice.actions;
+
+export default questionSlice.reducer;

package/src/store/stream.ts

@@ -0,0 +1,21 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+export type StreamState = {
+  latestAnsweredQuestionId: string;
+};
+
+export const initialState: StreamState = {
+  latestAnsweredQuestionId: '',
+};
+
+export const stream = createSlice({
+  name: 'stream',
+  initialState,
+  reducers: {
+    setLatestAnsweredQuestionId: (state, action) => {
+      state.latestAnsweredQuestionId = action.payload;
+    },
+  },
+});
+
+export const { setLatestAnsweredQuestionId } = stream.actions;

package/src/store/updateComments.ts

@@ -0,0 +1,60 @@
+// PURPOSE: move the comments saved in updatedComments into the main comments array for the stream and then clear out the updatedComments array, and update the lastAnsweredQuestionId in the store
+
+import { AppDispatch } from './index';
+import { nextCommentsApi } from '../services/comments-api';
+import type { Comment } from '../types/comment';
+import { setLatestAnsweredQuestionId } from '../store/stream';
+import { getLatestAnsweredQuestion } from '../utils/qandas';
+
+export const updateComments = (
+  dispatch: AppDispatch,
+  updatedComments: Comment[],
+  storyId: string,
+  useStaging: boolean,
+  commentsAPIUrl: string,
+) => {
+  if (!updatedComments.length) {
+    return;
+  }
+
+  const latestAnsweredQuestionId = getLatestAnsweredQuestion(updatedComments);
+
+  try {
+    // Update the cache with the new comments
+    dispatch(
+      nextCommentsApi.util.updateQueryData(
+        'getQandAStream',
+        { storyId, useStaging, commentsAPIUrl },
+        (draft: { qandas: Comment[] }) => {
+          // NB - if the same comment is updated more than once, the most recent thing added to the array will be the one that is shown
+          for (let c = 0; c < updatedComments.length; c++) {
+            const commentId = updatedComments[c].id;
+            const commentIndex = draft.qandas.findIndex(
+              (d) => d.id === commentId,
+            );
+            if (commentIndex > -1) {
+              draft.qandas[commentIndex] = updatedComments[c];
+            } else {
+              draft.qandas.unshift(updatedComments[c]);
+            }
+          }
+        },
+      ),
+    );
+
+    // Clear out the updated comments
+    dispatch(
+      nextCommentsApi.util.updateQueryData(
+        'getQandAUpdates',
+        { storyId, useStaging, commentsAPIUrl },
+        (draft) => {
+          draft.updatedComments = [];
+        },
+      ),
+    );
+
+    dispatch(setLatestAnsweredQuestionId(latestAnsweredQuestionId));
+  } catch (error) {
+    console.log('error', error);
+  }
+};

package/src/store/user.ts

@@ -0,0 +1,55 @@
+// this will get the user token and display name from oComments library and save it to the redux store
+
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import type { WritableDraft } from 'immer';
+import auth from '../utils/auth';
+
+const ACTION_ROOT = 'user';
+const ACTION_GET_USER_PROFILE = `${ACTION_ROOT}/profile`;
+
+type UserDetails = {
+  token: string;
+  displayName: string;
+  isSubscribed: boolean;
+};
+
+type UserState = { profile: UserDetails | null } & AsyncOperation;
+
+const initialState: UserState = {
+  profile: null as UserDetails | null,
+  loading: false,
+  error: '',
+};
+
+export const getUserProfile = createAsyncThunk<
+  UserDetails,
+  { useStaging: boolean }
+>(ACTION_GET_USER_PROFILE, async ({ useStaging }) => {
+  const userDetails: UserDetails = await auth({ useStaging });
+  return userDetails;
+});
+
+export const user = createSlice({
+  name: 'user',
+  initialState,
+  reducers: {}, // No local reducers in this case
+  extraReducers: (builder) => {
+    builder
+      .addCase(getUserProfile.pending, (state) => {
+        state.loading = true;
+        state.error = '';
+        state.profile = null;
+      })
+      .addCase(getUserProfile.fulfilled, (state, action) => {
+        state.loading = false;
+        state.error = '';
+        state.profile = action.payload as WritableDraft<UserDetails>;
+      })
+      .addCase(getUserProfile.rejected, (state) => {
+        state.loading = false;
+        state.error =
+          'We could not retrieve your profile. Please try again later.';
+        state.profile = null;
+      });
+  },
+});

package/src/types/async-operation.d.ts

@@ -0,0 +1,4 @@
+type AsyncOperation = {
+  loading: boolean;
+  error: string;
+};

package/src/types/comment.d.ts

@@ -0,0 +1,19 @@
+import { StructuredContentFragment } from '@financial-times/cp-content-pipeline-client';
+
+export interface Comment {
+  type: 'comment';
+  id: string;
+  body: {
+    structured: StructuredContentFragment;
+  };
+  publishedDate: string;
+  byline: StructuredContentFragment;
+  author?: {
+    role: string;
+    headshot?: string;
+    prefLabel?: string;
+    streamPage?: string;
+  };
+  children?: Comment[];
+  isQuestion?: boolean;
+}

package/src/types/globals.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/src/types/modules.d.ts

@@ -0,0 +1 @@
+declare module 'eventsourcemock';

package/src/types/o-types.d.ts

@@ -0,0 +1,2 @@
+declare module '@financial-times/o-comments';
+declare module '@financial-times/o-comments/src/js/utils/auth';

package/src/types/qanda.d.ts

@@ -0,0 +1,7 @@
+export type QandaProps = {
+  storyId: string;
+  useStaging: boolean;
+  title: string;
+  commentsAPIHost: string;
+  commentsAPIVersion: string;
+};

package/src/types/sse-events.d.ts

@@ -0,0 +1,6 @@
+import { Comment } from './comment';
+
+export interface NewAnswerEvent {
+  type: 'QA_NEW_REPLY';
+  payload: Comment;
+}

package/src/types/x-dash.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+declare module '@financial-times/x-engine' {
+  import { h } from 'preact';
+
+  export function h(type: string, props?: any, ...children: any[]): any;
+}

package/src/utils/auth.ts

@@ -0,0 +1,9 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import auth from '@financial-times/o-comments/src/js/utils/auth';
+
+// TODO: make these options settable, but for now we want to use staging
+export default async ({ useStaging = true }: { useStaging: boolean }) =>
+  auth.fetchJsonWebToken({
+    useStagingEnvironment: useStaging,
+    onlySubscribers: true,
+  });

package/src/utils/mocks/update.ts

@@ -0,0 +1,168 @@
+import type { NewAnswerEvent } from '../../types/sse-events';
+
+function newAnserEventData() {
+  const randomId = Math.random().toString(36).substring(7);
+
+  const newAnswerEvent: NewAnswerEvent = {
+    type: 'QA_NEW_REPLY',
+    payload: {
+      type: 'comment',
+      id: randomId,
+      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: new Date(
+        new Date().getTime() - 5 * 60 * 1000,
+      ).toISOString(), // 5 minutes ago
+      isQuestion: true,
+      byline: {
+        tree: {
+          type: 'byline',
+          children: [
+            {
+              type: 'author',
+              id: 'e191658e-c66a-45bc-9bad-343bdc4210b3',
+              children: [
+                {
+                  type: 'text',
+                  value: 'John Burn-Murdoch',
+                },
+              ],
+            },
+          ],
+        },
+        references: [],
+      },
+      children: [
+        {
+          type: 'comment',
+          id: randomId + '-1',
+          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:—",
+                      },
+                    ],
+                  },
+                ],
+              },
+              references: [],
+            },
+          },
+          isQuestion: false,
+          publishedDate: new Date(
+            new Date().getTime() - 3 * 60 * 1000,
+          ).toISOString(), // 3 minutes ago
+          children: [],
+          byline: {
+            tree: {
+              type: 'byline',
+              children: [
+                {
+                  type: 'author',
+                  id: 'e191658e-c66a-45bc-9bad-343bdc4210b3',
+                  children: [
+                    {
+                      type: 'text',
+                      value: 'John Burn-Murdoch',
+                    },
+                  ],
+                },
+              ],
+            },
+            references: [],
+          },
+          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: randomId + '-2',
+          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:—',
+                      },
+                    ],
+                  },
+                ],
+              },
+              references: [],
+            },
+          },
+          isQuestion: false,
+          publishedDate: new Date().toISOString(), // Now
+          children: [],
+          byline: {
+            tree: {
+              type: 'byline',
+              children: [
+                {
+                  type: 'author',
+                  id: 'e191658e-c66a-45bc-9bad-343bdc4210b3',
+                  children: [
+                    {
+                      type: 'text',
+                      value: 'John Burn-Murdoch',
+                    },
+                  ],
+                },
+              ],
+            },
+            references: [],
+          },
+          author: {
+            role: 'FT Reporter',
+            streamPage:
+              'https://www.ft.com/stream/e191658e-c66a-45bc-9bad-343bdc4210b3',
+          },
+        },
+      ],
+    },
+  };
+  return newAnswerEvent;
+}
+
+export default newAnserEventData;

package/src/utils/qandas.ts

@@ -0,0 +1,21 @@
+import type { Comment } from '../types/comment';
+
+// Returns the question UUID with the latest answer
+// eslint-disable-next-line import/prefer-default-export
+export const getLatestAnsweredQuestion = (questions: Comment[]): string => {
+  let questionId = '';
+  let latestTimestamp = 0;
+
+  questions.forEach((question) => {
+    question.children?.forEach((answer) => {
+      const answerTimestamp = new Date(answer.publishedDate).getTime();
+
+      if (answerTimestamp > latestTimestamp) {
+        questionId = question.id;
+        latestTimestamp = answerTimestamp;
+      }
+    });
+  });
+
+  return questionId;
+};

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "types": ["node", "jest"],
+    "typeRoots": ["./types", "./node_modules/@types"],
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "module": "ESNext",
+    "target": "ES2021",
+    "lib": ["ES2021"],
+    "moduleResolution": "Node",
+    "strict": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "baseUrl": "./",
+    "paths": {
+      "react": ["./node_modules/preact/compat/"],
+      "react/jsx-runtime": ["./node_modules/preact/jsx-runtime"],
+      "react-dom": ["./node_modules/preact/compat/"],
+      "react-dom/*": ["./node_modules/preact/compat/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

package/webpack.common.js

@@ -0,0 +1,60 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const xEngine = require('@financial-times/x-engine/src/webpack');
+
+module.exports = {
+  entry: './src/index.tsx',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'index.js',
+    library: {
+      name: 'QandaUI',
+      type: 'umd',
+    },
+    clean: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: [/node_modules/, /\.test\./, /__mocks__/, /__tests__/],
+      },
+      {
+        test: /\.jsx?$/,
+        use: 'babel-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.scss$/,
+        use: ['style-loader', 'css-loader', 'sass-loader'],
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.jsx', '.js'],
+    mainFields: ['module', 'browser', 'main'],
+    alias: {
+      react: 'preact/compat',
+      'react-dom/test-utils': 'preact/test-utils',
+      'react-dom': 'preact/compat',
+      'react/jsx-runtime': 'preact/jsx-runtime',
+      'react-dom/server': 'preact/compat',
+    },
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './demo/index.html',
+      filename: 'index.html',
+      inject: 'body', // Ensures the bundle is injected into the body tag
+    }),
+    xEngine(),
+  ],
+  ignoreWarnings: [
+    // Ignore Dart Sass polluting warnings.
+    (warning) => warning.message.includes('Dart Sass 3.0.0'),
+    (warning) =>
+      warning.message.includes('https://sass-lang.com/d/color-functions'),
+  ],
+};

package/webpack.dev.js

@@ -0,0 +1,26 @@
+const path = require('path');
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+  mode: 'development',
+  entry: './demo/index.tsx',
+  devtool: 'inline-source-map',
+  devServer: {
+    allowedHosts: ['local.ft.com', 'localhost'],
+    server: 'https',
+    static: {
+      directory: path.resolve(__dirname, 'dist'),
+    },
+    port: 3005,
+    open: true,
+    hot: true,
+    historyApiFallback: true,
+    client: {
+      overlay: {
+        warnings: false,
+        errors: true,
+      },
+    },
+  },
+});

package/webpack.prod.js

@@ -0,0 +1,6 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+  mode: 'production',
+});