@financial-times/qanda-ui 0.0.1-beta.2 → 0.0.1-beta.21

package/dist/esm/services/comments-api.js

@@ -0,0 +1,147 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+// 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',
+    QA_UPDATE: 'updatedQA',
+};
+export let eventSource = null;
+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, status, }) => 
+            // The usage of status is to create different caches (RTK and Fastly) for different statuses
+            `${commentsAPIUrl}/story/${storyId}/stream?status=${status}${useStaging ? '&staging=1' : ''}`,
+            transformResponse: (response) => {
+                return {
+                    qandas: response?.children || [],
+                    type: response.type,
+                    status: response?.status || 'pre-live',
+                    startDateTime: response?.startDateTime || '',
+                    endDateTime: response?.endDateTime || '',
+                };
+            },
+        }),
+        // UPDATES LISTENER
+        getQandAUpdates: builder.query({
+            queryFn: async ({ storyId, useStaging, commentsAPIUrl, }) => {
+                return { data: {} };
+            },
+            async onCacheEntryAdded(arg, { updateCachedData, cacheDataLoaded, cacheEntryRemoved }) {
+                await cacheDataLoaded;
+                const connectToSSE = () => {
+                    const sseEndpoint = `${arg.commentsAPIUrl}/story/${arg.storyId}/updates${arg.useStaging ? '?staging=1' : ''}`;
+                    eventSource = new EventSource(sseEndpoint);
+                    eventSource.onopen = () => {
+                        console.log(`Connected to SSE: ${sseEndpoint}`);
+                    };
+                    eventSource.onmessage = (event) => {
+                        try {
+                            const data = JSON.parse(event.data);
+                            console.log('Received SSE update:', data);
+                            if (data && data.type) {
+                                updateCachedData((draft) => {
+                                    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 = (event) => {
+                        const es = event.target;
+                        if (es.readyState === EventSource.CONNECTING) {
+                            console.error('SSE connection lost. Attempting to reconnect...');
+                        }
+                        else if (es.readyState === EventSource.CLOSED) {
+                            console.error(`SSE connection closed. Will try to reconnect in ${retryDelay / 1000} seconds...`);
+                            eventSource?.close();
+                            eventSource = null;
+                            setTimeout(() => connectToSSE(), retryDelay);
+                        }
+                        else {
+                            console.error('SSE error occurred.', event);
+                        }
+                    };
+                };
+                try {
+                    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, }) => ({
+                url: `${commentsAPIUrl}/user/user-details/story/${storyId}${useStaging ? '?staging=1' : ''}`,
+                method: 'POST',
+                headers: {
+                    Authorization: `Bearer ${token}`,
+                },
+            }),
+            transformResponse: (response, meta, arg) => {
+                const allowedRoles = ['ADMIN', 'MODERATOR'];
+                const { isExpert, isStaffExpert, role } = response;
+                const expertView = isExpert || isStaffExpert || !!(role && allowedRoles.includes(role));
+                return { expertView };
+            },
+        }),
+        // POST A QUESTION
+        postQuestion: builder.mutation({
+            query: ({ storyId, useStaging, commentsAPIUrl, token, question, postAnonymously, }) => ({
+                url: `${commentsAPIUrl}/story/${storyId}/question${useStaging ? '?staging=1' : ''}`,
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Authorization: `Bearer ${token}`,
+                },
+                body: JSON.stringify({ question, postAnonymously, token }),
+            }),
+            transformResponse: (response) => {
+                return response.data;
+            },
+        }),
+    }),
+});
+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, }) => {
+    return nextCommentsApi.useGetQandAUpdatesQuery({ storyId, useStaging, commentsAPIUrl }, {
+        selectFromResult: ({ data }) => ({
+            updatedComments: data?.updatedComments || [],
+        }),
+    }).updatedComments;
+};
+// Custom hook to get the updates on the information about the Q&A
+export const useUpdatedQA = ({ storyId, useStaging, commentsAPIUrl, }) => {
+    return nextCommentsApi.useGetQandAUpdatesQuery({ storyId, useStaging, commentsAPIUrl }, {
+        selectFromResult: ({ data }) => ({
+            updatedQA: (data?.updatedQA &&
+                data.updatedQA.length &&
+                data.updatedQA[data.updatedQA.length - 1]) ||
+                {},
+        }),
+    }).updatedQA;
+};

package/dist/esm/services/error-middleware.js

@@ -0,0 +1,43 @@
+import { isRejectedWithValue } from '@reduxjs/toolkit';
+import { qandaReliability } from './reliability';
+// Tracking successes for updates may generate a lot of events
+// Disable it when not needed
+const endpointToOperationMap = {
+    postQuestion: { operation: 'question-submission', trackSuccess: true },
+    getUserRoles: { operation: 'profile-load', trackSuccess: true },
+    getQandAStream: { operation: 'stream-load', trackSuccess: true },
+    getQandAUpdates: { operation: 'qa-updates', trackSuccess: true },
+};
+export const rtkQueryErrorLogger = () => (next) => (action) => {
+    // Log failures
+    if (isRejectedWithValue(action)) {
+        const rejected = action;
+        const isHttpError = typeof rejected.payload?.status === 'number';
+        const endpointName = rejected.meta?.arg?.endpointName ?? '';
+        const mapEntry = endpointToOperationMap[endpointName];
+        const operation = mapEntry?.operation ?? 'unmapped-operation';
+        const statusCodeInfo = isHttpError
+            ? ` with status code ${rejected.payload?.status}`
+            : '';
+        const errorMessage = rejected.payload?.data?.error ||
+            rejected.payload?.error ||
+            'Unknown error';
+        const rtkNormalisedError = new Error(`Network error${statusCodeInfo}: ${errorMessage}`);
+        qandaReliability.failure(operation, rtkNormalisedError);
+    }
+    // Fullfilled actions
+    if (typeof action === 'object' &&
+        action !== null &&
+        'type' in action &&
+        typeof action.type === 'string' &&
+        action.type.endsWith('/fulfilled')) {
+        const meta = action.meta;
+        const endpointName = meta?.arg?.endpointName ?? '';
+        const mapEntry = endpointToOperationMap[endpointName];
+        // Send success event only if trackSucces is enabled for that particular endpoint
+        if (mapEntry?.trackSuccess) {
+            qandaReliability.success(mapEntry.operation);
+        }
+    }
+    return next(action);
+};

package/dist/esm/services/reliability.js

@@ -0,0 +1,75 @@
+/*
+ * @param outcome - success or failure
+ * @param operation - initialisation or question-submission
+ * @returns void
+ *
+ * This class is used to dispatch events to the client-metrics-web library
+ * for tracking the success or failure of operations.
+ * The class checks if the client-metrics-web library is available, if not it will log warnings
+ *
+ * For failures, it will log errors for debugging purposes
+ */
+class Reliability {
+    constructor(options) {
+        this.testOnly = options.testOnly || false;
+        this.topLevelNamespace = options.topLevelNamespace;
+        this.articleId = '';
+    }
+    setArticleId(articleId) {
+        this.articleId = articleId;
+    }
+    dispatch(outcome, operation, error = null) {
+        if (!this.articleId) {
+            console.warn('(Qanda Reliability) Article ID not set. Please call setArticleId() before dispatching events.');
+        }
+        const eventNamespace = `${this.topLevelNamespace}.${operation}.${outcome}`;
+        if (this.testOnly) {
+            console.warn(`(Reliability) Event not sent: client-metrics-web not available %c${eventNamespace}`, 'font-weight: bold;');
+        }
+        else {
+            window.dispatchEvent(new CustomEvent('ft.clientMetric', {
+                detail: {
+                    namespace: eventNamespace,
+                    operation,
+                    articleId: this.articleId,
+                    ...(error && {
+                        error: {
+                            name: error?.name,
+                            message: error?.message,
+                            stack: error?.stack,
+                        },
+                    }),
+                },
+            }));
+        }
+    }
+    normaliseError(error) {
+        let normalisedError;
+        if (error instanceof Error) {
+            normalisedError = error;
+        }
+        else if (typeof error === 'string') {
+            normalisedError = new Error(error);
+        }
+        else if (typeof error === 'object' && error !== null) {
+            normalisedError = new Error(JSON.stringify(error));
+        }
+        else {
+            normalisedError = new Error('Unknown error type: ' + JSON.stringify(error));
+        }
+        return normalisedError;
+    }
+    failure(operation, error) {
+        // Dispatch a metric for failure and log the error
+        this.dispatch('failure', operation, this.normaliseError(error));
+    }
+    success(operation) {
+        this.dispatch('success', operation);
+    }
+    // Use this method to test the error handling
+    throw(error = 'Throwing an error for testing purposes') {
+        throw new Error(error);
+    }
+}
+const qandaReliability = new Reliability({ topLevelNamespace: 'live-qanda' });
+export { qandaReliability, Reliability };

package/dist/esm/store/expertSlice.js

@@ -0,0 +1,22 @@
+import { createSlice, } from '@reduxjs/toolkit';
+const initialState = {
+    isExpertFormOpen: false,
+    expertView: undefined,
+};
+export const expertSlice = createSlice({
+    name: 'expert',
+    initialState,
+    reducers: {
+        openExpertForm: (state) => {
+            state.isExpertFormOpen = true;
+        },
+        closeExpertForm: (state) => {
+            state.isExpertFormOpen = false;
+        },
+        setExpertView: (state, action) => {
+            state.expertView = action.payload;
+        },
+    },
+});
+export const { openExpertForm, closeExpertForm, setExpertView } = expertSlice.actions;
+export default expertSlice.reducer;

package/dist/esm/store/index.js

@@ -0,0 +1,24 @@
+import { configureStore, combineReducers, } from '@reduxjs/toolkit';
+import { setupListeners } from '@reduxjs/toolkit/query';
+import questionReducer from './questionSlice';
+import { stream } from './stream';
+import { user } from './user';
+import expertReducer from './expertSlice';
+import { nextCommentsApi } from '../services/comments-api';
+import { rtkQueryErrorLogger } from '../services/error-middleware';
+export const rootReducer = combineReducers({
+    stream: stream.reducer,
+    question: questionReducer,
+    user: user.reducer,
+    expert: expertReducer,
+    nextCommentsApi: nextCommentsApi.reducer,
+});
+export const store = configureStore({
+    reducer: rootReducer,
+    middleware: (getDefaultMiddleware) => getDefaultMiddleware()
+        .concat(nextCommentsApi.middleware)
+        .concat(rtkQueryErrorLogger),
+});
+// optional, but required for refetchOnFocus/refetchOnReconnect behaviors
+// see `setupListeners` docs - takes an optional callback as the 2nd arg for customization
+setupListeners(store.dispatch);

package/dist/esm/store/questionSlice.js

@@ -0,0 +1,28 @@
+import { createSlice, } from '@reduxjs/toolkit';
+const initialState = {
+    isFormOpen: false,
+    question: '',
+    displayNameError: null,
+};
+export const questionSlice = createSlice({
+    name: 'question',
+    initialState,
+    reducers: {
+        openForm: (state) => {
+            state.isFormOpen = true;
+        },
+        closeForm: (state) => {
+            state.isFormOpen = false;
+            state.question = '';
+            state.displayNameError = null;
+        },
+        updateQuestion: (state, action) => {
+            state.question = action.payload;
+        },
+        updateDisplayNameError: (state, action) => {
+            state.displayNameError = action.payload;
+        },
+    },
+});
+export const { openForm, closeForm, updateQuestion, updateDisplayNameError } = questionSlice.actions;
+export default questionSlice.reducer;

package/dist/esm/store/stream.js

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

package/dist/esm/store/updateComments.js

@@ -0,0 +1,36 @@
+// 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 { nextCommentsApi } from '../services/comments-api';
+import { setLatestAnsweredQuestionId } from '../store/stream';
+import { getLatestAnsweredQuestion } from '../utils/qandas';
+export const updateComments = (dispatch, updatedComments, storyId, useStaging, commentsAPIUrl) => {
+    if (!updatedComments.length) {
+        return;
+    }
+    const latestAnsweredQuestionId = getLatestAnsweredQuestion(updatedComments);
+    try {
+        // Update the cache with the new comments
+        dispatch(nextCommentsApi.util.updateQueryData('getQandAStream', 
+        // Updates happen only for the live stream, so we pass the status as 'live' hardcoded
+        { storyId, useStaging, commentsAPIUrl, status: 'live' }, (draft) => {
+            // 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/dist/esm/store/user.js

@@ -0,0 +1,45 @@
+// 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 auth from '../utils/auth';
+const ACTION_ROOT = 'user';
+const ACTION_GET_USER_PROFILE = `${ACTION_ROOT}/profile`;
+const initialState = {
+    profile: {
+        token: '',
+        displayName: '',
+        isRegistered: false,
+        isTrialist: false,
+        isSubscribed: false,
+    },
+    loading: false,
+    error: '',
+};
+export const getUserProfile = createAsyncThunk(ACTION_GET_USER_PROFILE, async ({ useStaging, displayName = '', commentsAPIUrl }) => {
+    const userDetails = await auth({
+        useStaging,
+        displayName,
+        commentsAPIUrl,
+    });
+    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;
+        })
+            .addCase(getUserProfile.fulfilled, (state, action) => {
+            state.loading = false;
+            state.profile = action.payload;
+            state.error = '';
+        })
+            .addCase(getUserProfile.rejected, (state) => {
+            state.loading = false;
+            state.error =
+                'We could not retrieve your profile. Please try again later.';
+        });
+    },
+});

package/dist/esm/utils/auth.js

@@ -0,0 +1,24 @@
+import { auth } from '@financial-times/o-comments';
+const PROD_AUTH_URL = 'https://comments-api.ft.com';
+const TEST_AUTH_URL = 'https://comments-api-test.ft.com';
+export default async ({ useStaging = true, displayName = '', commentsAPIUrl = PROD_AUTH_URL, }) => {
+    const userDetails = await auth.fetchJsonWebToken({
+        useStagingEnvironment: useStaging,
+        onlySubscribers: true,
+        displayName,
+        commentsAPIUrl: commentsAPIUrl === PROD_AUTH_URL ? PROD_AUTH_URL : TEST_AUTH_URL,
+    });
+    // if the JWT creation has failed, a `userHasValidSession` value will be returned
+    // our application assumes the values of a JWT are saved to state, so we set the
+    // default values
+    if (userDetails.userHasValidSession) {
+        return {
+            token: '',
+            displayName: '',
+            isSubscribed: userDetails.userHasValidSession,
+        };
+    }
+    else {
+        return userDetails;
+    }
+};

package/dist/esm/utils/qandas.js

@@ -0,0 +1,16 @@
+// Returns the question UUID with the latest answer
+// eslint-disable-next-line import/prefer-default-export
+export const getLatestAnsweredQuestion = (questions) => {
+    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/dist/esm/utils/strings.js

@@ -0,0 +1,13 @@
+/*
+ * Remove special characters and replace spaces with underscores
+ * @param {string} str - The input string to be cleaned
+ * @returns {string} - The cleaned string with special characters removed and spaces replaced with underscores
+ */
+export function cleanString(str) {
+    return str
+        .normalize('NFD') // Decompose accented characters
+        .replace(/[\u0300-\u036f]/g, '') // Remove diacritics
+        .replace(/[^a-zA-Z0-9 ]/g, '') // Remove non-ASCII letters, numbers, and spaces
+        .trim() // Trim leading/trailing spaces
+        .replace(/\s+/g, '_'); // Replace spaces with underscores
+}

package/dist/esm/utils/tracking.js

@@ -0,0 +1,7 @@
+export const trackEvent = (trackingData) => {
+    const event = new CustomEvent('oTracking.event', {
+        detail: trackingData,
+        bubbles: true,
+    });
+    document.body.dispatchEvent(event);
+};

package/dist/esm/utils/validate-display-name.js

@@ -0,0 +1,19 @@
+export default function validateDisplayName(displayName) {
+    /*
+     * Allowed Characters
+     * The below regex matches any character not in the allowed characters set
+     * All allowed characters are case insensitive
+     * Anything in the range A-Z or 0-9 is allowed
+     * Any of the below special characters are allowed
+     * !#$%'`()*+,-./:;=@[]^_{|}
+     * Spaces are allowed
+     */
+    const matchInvalidCharacters = /[^0-9a-z!#$%'`()*+,\-.\/:;=@[\]\^_{}\|\s]/gi;
+    const matchingCharacters = displayName.match(matchInvalidCharacters);
+    const uniqueMatchingCharacters = matchingCharacters && matchingCharacters.length
+        ? matchingCharacters.filter((character, position) => matchingCharacters.indexOf(character) === position)
+        : [];
+    return uniqueMatchingCharacters.length
+        ? uniqueMatchingCharacters.join('')
+        : false;
+}