@financial-times/qanda-ui 0.0.1-beta.10 → 0.0.1-beta.11

package/dist/cjs/components/QandaContainer.js

@@ -53,6 +53,6 @@ function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
             dispatch(comments_api_1.nextCommentsApi.util.resetApiState());
         };
     }, [dispatch, storyId]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-container", "data-trackable": "liveqa", children: [error && ((0, jsx_runtime_1.jsxs)("p", { children: ["We are not able to load the Q&A at the moment. Please try again later. Error:", error] })), !isLoading && !error && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [status !== 'close' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showExpertView ? (0, jsx_runtime_1.jsx)(ExpertDrawer_1.default, {}) : (0, jsx_runtime_1.jsx)(QuestionForm_1.default, {}), (0, jsx_runtime_1.jsx)(CountdownTimer_1.default, { container: countdownTimerContainer })] })), status === 'pre-live' && (0, jsx_runtime_1.jsx)(Calendar_1.default, {}), (0, jsx_runtime_1.jsx)(Stream_1.default, {}), status !== 'close' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(UserInfo_1.default, {}) })), data?.status === 'live' && (0, jsx_runtime_1.jsx)(FloatingActionBar_1.default, {}), (0, jsx_runtime_1.jsx)(EmbedFormField_1.default, { container: embedFormFieldContainer })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "qanda-container", "data-trackable": "liveqa", children: [error && ((0, jsx_runtime_1.jsxs)("p", { children: ["We are not able to load the Q&A at the moment. Please try again later. Error:", error] })), !isLoading && !error && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [status !== 'close' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showExpertView ? (0, jsx_runtime_1.jsx)(ExpertDrawer_1.default, {}) : (0, jsx_runtime_1.jsx)(QuestionForm_1.default, {}), (0, jsx_runtime_1.jsx)(CountdownTimer_1.default, { container: countdownTimerContainer })] })), status === 'pre-live' && (0, jsx_runtime_1.jsx)(Calendar_1.default, {}), (0, jsx_runtime_1.jsx)(Stream_1.default, { status: status }), status !== 'close' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(UserInfo_1.default, {}) })), status === 'live' && (0, jsx_runtime_1.jsx)(FloatingActionBar_1.default, {}), (0, jsx_runtime_1.jsx)(EmbedFormField_1.default, { container: embedFormFieldContainer })] }))] }));
 }
 exports.default = QandaContainer;

package/dist/cjs/components/Stream/index.js

@@ -10,14 +10,19 @@ const index_1 = __importDefault(require("../QandaBlock/index"));
 const QandaProvider_1 = require("../QandaProvider");
 const Loader_1 = __importDefault(require("../Loader"));
 const comments_api_1 = require("../../services/comments-api");
-function Stream() {
+function Stream({ status = 'pre-live' }) {
     const latestAnsweredQuestionId = (0, react_redux_1.useSelector)((state) => state.stream.latestAnsweredQuestionId);
     const { storyId, useStaging, commentsAPIUrl } = (0, react_1.useContext)(QandaProvider_1.QandaContext);
     const { data, error, isLoading } = (0, comments_api_1.useGetQandAStreamQuery)({
         storyId,
         useStaging,
         commentsAPIUrl,
-    });
+        status,
+    }, 
+    // In comments api, the stream endpoint uses different queries based on the Q&A status (live stream vs pre-live stream),
+    // If the status changes and Qanda receives an update,
+    // we need to force RTK to re-fetch the data and show the appropriate stream.
+    { refetchOnMountOrArgChange: true });
     (0, react_1.useEffect)(() => {
         const element = document.getElementById(latestAnsweredQuestionId);
         element?.scrollIntoView({ behavior: 'smooth' });

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

@@ -19,7 +19,9 @@ exports.nextCommentsApi = (0, react_1.createApi)({
     endpoints: (builder) => ({
         // QA STREAM
         getQandAStream: builder.query({
-            query: ({ storyId, useStaging, commentsAPIUrl }) => `${commentsAPIUrl}/story/${storyId}/stream${useStaging ? '?staging=1' : ''}`,
+            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 || [],

package/dist/esm/components/QandaContainer.js

@@ -48,6 +48,6 @@ function QandaContainer({ embedFormFieldContainer, countdownTimerContainer, }) {
             dispatch(nextCommentsApi.util.resetApiState());
         };
     }, [dispatch, storyId]);
-    return (_jsxs("div", { className: "qanda-container", "data-trackable": "liveqa", children: [error && (_jsxs("p", { children: ["We are not able to load the Q&A at the moment. Please try again later. Error:", error] })), !isLoading && !error && (_jsxs(_Fragment, { children: [status !== 'close' && (_jsxs(_Fragment, { children: [showExpertView ? _jsx(ExpertDrawer, {}) : _jsx(QuestionForm, {}), _jsx(CountdownTimer, { container: countdownTimerContainer })] })), status === 'pre-live' && _jsx(Calendar, {}), _jsx(Stream, {}), status !== 'close' && (_jsx(_Fragment, { children: _jsx(UserInfo, {}) })), data?.status === 'live' && _jsx(FloatingActionBar, {}), _jsx(EmbedFormField, { container: embedFormFieldContainer })] }))] }));
+    return (_jsxs("div", { className: "qanda-container", "data-trackable": "liveqa", children: [error && (_jsxs("p", { children: ["We are not able to load the Q&A at the moment. Please try again later. Error:", error] })), !isLoading && !error && (_jsxs(_Fragment, { children: [status !== 'close' && (_jsxs(_Fragment, { children: [showExpertView ? _jsx(ExpertDrawer, {}) : _jsx(QuestionForm, {}), _jsx(CountdownTimer, { container: countdownTimerContainer })] })), status === 'pre-live' && _jsx(Calendar, {}), _jsx(Stream, { status: status }), status !== 'close' && (_jsx(_Fragment, { children: _jsx(UserInfo, {}) })), status === 'live' && _jsx(FloatingActionBar, {}), _jsx(EmbedFormField, { container: embedFormFieldContainer })] }))] }));
 }
 export default QandaContainer;

package/dist/esm/components/Stream/index.js

@@ -5,14 +5,19 @@ import QandaBlock from '../QandaBlock/index';
 import { QandaContext } from '../QandaProvider';
 import Loader from '../Loader';
 import { useGetQandAStreamQuery } from '../../services/comments-api';
-function Stream() {
+function Stream({ status = 'pre-live' }) {
     const latestAnsweredQuestionId = useSelector((state) => state.stream.latestAnsweredQuestionId);
     const { storyId, useStaging, commentsAPIUrl } = useContext(QandaContext);
     const { data, error, isLoading } = useGetQandAStreamQuery({
         storyId,
         useStaging,
         commentsAPIUrl,
-    });
+        status,
+    }, 
+    // In comments api, the stream endpoint uses different queries based on the Q&A status (live stream vs pre-live stream),
+    // If the status changes and Qanda receives an update,
+    // we need to force RTK to re-fetch the data and show the appropriate stream.
+    { refetchOnMountOrArgChange: true });
     useEffect(() => {
         const element = document.getElementById(latestAnsweredQuestionId);
         element?.scrollIntoView({ behavior: 'smooth' });

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

@@ -16,7 +16,9 @@ export const nextCommentsApi = createApi({
     endpoints: (builder) => ({
         // QA STREAM
         getQandAStream: builder.query({
-            query: ({ storyId, useStaging, commentsAPIUrl }) => `${commentsAPIUrl}/story/${storyId}/stream${useStaging ? '?staging=1' : ''}`,
+            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 || [],

package/dist/types/components/Stream/index.d.ts

@@ -1,2 +1,5 @@
-declare function Stream(): import("react").JSX.Element;
+import type { Status } from '../../types/qa';
+declare function Stream({ status }: {
+    status: Status;
+}): import("react").JSX.Element;
 export default Stream;

package/dist/types/services/comments-api.d.ts

@@ -34,12 +34,16 @@ type UserRolesTransformed = {
     expertView: boolean;
 };
 export declare const nextCommentsApi: import("@reduxjs/toolkit/query/react").Api<import("@reduxjs/toolkit/query/react").BaseQueryFn<string | import("@reduxjs/toolkit/query/react").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query/react").FetchBaseQueryMeta>, {
-    getQandAStream: import("@reduxjs/toolkit/query/react").QueryDefinition<CommentsAPIUrlParams, import("@reduxjs/toolkit/query/react").BaseQueryFn<string | import("@reduxjs/toolkit/query/react").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query/react").FetchBaseQueryMeta>, never, CommentsStreamTransformed, "nextCommentsApi">;
+    getQandAStream: import("@reduxjs/toolkit/query/react").QueryDefinition<CommentsAPIUrlParams & {
+        status?: Status;
+    }, import("@reduxjs/toolkit/query/react").BaseQueryFn<string | import("@reduxjs/toolkit/query/react").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query/react").FetchBaseQueryMeta>, never, CommentsStreamTransformed, "nextCommentsApi">;
     getQandAUpdates: import("@reduxjs/toolkit/query/react").QueryDefinition<CommentsAPIUrlParams, import("@reduxjs/toolkit/query/react").BaseQueryFn<string | import("@reduxjs/toolkit/query/react").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query/react").FetchBaseQueryMeta>, never, CachedData, "nextCommentsApi">;
     getUserRoles: import("@reduxjs/toolkit/query/react").QueryDefinition<CommentsAPIUrlTokenParams, import("@reduxjs/toolkit/query/react").BaseQueryFn<string | import("@reduxjs/toolkit/query/react").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query/react").FetchBaseQueryMeta>, never, UserRolesTransformed, "nextCommentsApi">;
     postQuestion: import("@reduxjs/toolkit/query/react").MutationDefinition<CommentsAPIUrlQuestionParams, import("@reduxjs/toolkit/query/react").BaseQueryFn<string | import("@reduxjs/toolkit/query/react").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query/react").FetchBaseQueryMeta>, never, any, "nextCommentsApi">;
 }, "nextCommentsApi", never, typeof import("@reduxjs/toolkit/query/react").coreModuleName | typeof import("@reduxjs/toolkit/query/react").reactHooksModuleName>;
-export declare const useGetQandAStreamQuery: import("@reduxjs/toolkit/dist/query/react/buildHooks").UseQuery<import("@reduxjs/toolkit/query/react").QueryDefinition<CommentsAPIUrlParams, import("@reduxjs/toolkit/query/react").BaseQueryFn<string | import("@reduxjs/toolkit/query/react").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query/react").FetchBaseQueryMeta>, never, CommentsStreamTransformed, "nextCommentsApi">>, useGetQandAUpdatesQuery: import("@reduxjs/toolkit/dist/query/react/buildHooks").UseQuery<import("@reduxjs/toolkit/query/react").QueryDefinition<CommentsAPIUrlParams, import("@reduxjs/toolkit/query/react").BaseQueryFn<string | import("@reduxjs/toolkit/query/react").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query/react").FetchBaseQueryMeta>, never, CachedData, "nextCommentsApi">>, useGetUserRolesQuery: import("@reduxjs/toolkit/dist/query/react/buildHooks").UseQuery<import("@reduxjs/toolkit/query/react").QueryDefinition<CommentsAPIUrlTokenParams, import("@reduxjs/toolkit/query/react").BaseQueryFn<string | import("@reduxjs/toolkit/query/react").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query/react").FetchBaseQueryMeta>, never, UserRolesTransformed, "nextCommentsApi">>, usePostQuestionMutation: import("@reduxjs/toolkit/dist/query/react/buildHooks").UseMutation<import("@reduxjs/toolkit/query/react").MutationDefinition<CommentsAPIUrlQuestionParams, import("@reduxjs/toolkit/query/react").BaseQueryFn<string | import("@reduxjs/toolkit/query/react").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query/react").FetchBaseQueryMeta>, never, any, "nextCommentsApi">>;
+export declare const useGetQandAStreamQuery: import("@reduxjs/toolkit/dist/query/react/buildHooks").UseQuery<import("@reduxjs/toolkit/query/react").QueryDefinition<CommentsAPIUrlParams & {
+    status?: Status;
+}, import("@reduxjs/toolkit/query/react").BaseQueryFn<string | import("@reduxjs/toolkit/query/react").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query/react").FetchBaseQueryMeta>, never, CommentsStreamTransformed, "nextCommentsApi">>, useGetQandAUpdatesQuery: import("@reduxjs/toolkit/dist/query/react/buildHooks").UseQuery<import("@reduxjs/toolkit/query/react").QueryDefinition<CommentsAPIUrlParams, import("@reduxjs/toolkit/query/react").BaseQueryFn<string | import("@reduxjs/toolkit/query/react").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query/react").FetchBaseQueryMeta>, never, CachedData, "nextCommentsApi">>, useGetUserRolesQuery: import("@reduxjs/toolkit/dist/query/react/buildHooks").UseQuery<import("@reduxjs/toolkit/query/react").QueryDefinition<CommentsAPIUrlTokenParams, import("@reduxjs/toolkit/query/react").BaseQueryFn<string | import("@reduxjs/toolkit/query/react").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query/react").FetchBaseQueryMeta>, never, UserRolesTransformed, "nextCommentsApi">>, usePostQuestionMutation: import("@reduxjs/toolkit/dist/query/react/buildHooks").UseMutation<import("@reduxjs/toolkit/query/react").MutationDefinition<CommentsAPIUrlQuestionParams, import("@reduxjs/toolkit/query/react").BaseQueryFn<string | import("@reduxjs/toolkit/query/react").FetchArgs, unknown, FetchBaseQueryError, {}, import("@reduxjs/toolkit/query/react").FetchBaseQueryMeta>, never, any, "nextCommentsApi">>;
 export declare const useUpdatedComments: ({ storyId, useStaging, commentsAPIUrl, }: CommentsAPIUrlParams) => Comment[];
 export declare const useUpdatedQA: ({ storyId, useStaging, commentsAPIUrl, }: CommentsAPIUrlParams) => any;
 export {};

package/dist/types/store/index.d.ts

@@ -13,6 +13,8 @@ export declare const rootReducer: import("@reduxjs/toolkit").Reducer<import("@re
             storyId: string;
             useStaging: boolean;
             commentsAPIUrl: string;
+        } & {
+            status?: import("../types/qa").Status;
         }, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, import("@reduxjs/toolkit/query").FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, Omit<{
             type: string;
             children?: import("../types/comment").Comment[];
@@ -68,6 +70,8 @@ export declare const store: import("@reduxjs/toolkit/dist/configureStore").Toolk
             storyId: string;
             useStaging: boolean;
             commentsAPIUrl: string;
+        } & {
+            status?: import("../types/qa").Status;
         }, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, import("@reduxjs/toolkit/query").FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, Omit<{
             type: string;
             children?: import("../types/comment").Comment[];
@@ -116,6 +120,8 @@ export declare const store: import("@reduxjs/toolkit/dist/configureStore").Toolk
             storyId: string;
             useStaging: boolean;
             commentsAPIUrl: string;
+        } & {
+            status?: import("../types/qa").Status;
         }, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, import("@reduxjs/toolkit/query").FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, Omit<{
             type: string;
             children?: import("../types/comment").Comment[];
@@ -159,6 +165,8 @@ export declare const store: import("@reduxjs/toolkit/dist/configureStore").Toolk
         storyId: string;
         useStaging: boolean;
         commentsAPIUrl: string;
+    } & {
+        status?: import("../types/qa").Status;
     }, import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, import("@reduxjs/toolkit/query").FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, never, Omit<{
         type: string;
         children?: import("../types/comment").Comment[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/qanda-ui",
-  "version": "0.0.1-beta.10",
+  "version": "0.0.1-beta.11",
   "description": "Components for the Live Q&A UI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",