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

package/src/components/Qanda.tsx

@@ -0,0 +1,51 @@
+import { Provider } from 'react-redux';
+import { store } from '../store';
+import QandaContainer from './QandaContainer';
+import { QandaContext } from './QandaProvider';
+import '../client/styles.scss';
+
+import type { QandaProps } from '../types/qanda';
+
+function Qanda({
+  storyId,
+  useStaging,
+  title,
+  commentsAPIHost,
+  commentsAPIVersion,
+}: QandaProps) {
+  // check we have a valid ft.com url and remove any trailing slashes
+  const allowedHostRegx = /^[\w\-\.]+\.ft\.com$/i;
+  const allowedVersionRegx = /^v\d+$/i;
+  const validateApiUrl = (url: string, version: string): string | undefined => {
+    const baseURL = new URL(url);
+    if (
+      !allowedHostRegx.test(baseURL.hostname) ||
+      !allowedVersionRegx.test(version)
+    ) {
+      console.error('Invalid comments API details provided');
+      return;
+    }
+    return `https://${baseURL.hostname}/qa/${version}`;
+  };
+  const cleanCommentsAPIUrl = validateApiUrl(
+    commentsAPIHost,
+    commentsAPIVersion,
+  );
+
+  if (!storyId || !title || !cleanCommentsAPIUrl) {
+    console.error('Missing required props');
+    return null;
+  }
+
+  return (
+    <Provider store={store}>
+      <QandaContext.Provider
+        value={{ storyId, useStaging, commentsAPIUrl: cleanCommentsAPIUrl }}
+      >
+        <QandaContainer title={title} />
+      </QandaContext.Provider>
+    </Provider>
+  );
+}
+
+export default Qanda;

package/src/components/QandaBlock.tsx

@@ -0,0 +1,63 @@
+import { RichText, Byline } from '@financial-times/cp-content-pipeline-ui';
+// TODO: this component needs exporting from cp-content-pipeline-ui
+import Timestamp from '@financial-times/cp-content-pipeline-ui/lib/components/LiveBlogPost/Timestamp';
+import type { Comment } from '../types/comment';
+import Author from './Author';
+
+type UpdatedDateProps = {
+  answers: Comment[];
+};
+
+function UpdatedDate({ answers }: UpdatedDateProps) {
+  const sortedAnswers = Array.from(answers).sort(
+    (a, b) =>
+      new Date(b.publishedDate).getTime() - new Date(a.publishedDate).getTime(),
+  );
+  return (
+    <span>
+      <Timestamp publishedTimestamp={sortedAnswers[0].publishedDate} />
+    </span>
+  );
+}
+
+function QandaBlock({ id, body, children, byline }: Comment) {
+  return (
+    <div className="qanda-block">
+      <div
+        className="qanda-block__question"
+        id={id}
+        key={id}
+        data-testid={`qanda-block__question-${id}`}
+      >
+        Question
+        {children && <UpdatedDate answers={children} />}
+        <Byline structuredContent={byline} showEditedBy={false} />
+        <RichText structuredContent={body.structured} />
+      </div>
+      {children?.map(
+        (child) =>
+          child.body && (
+            <div
+              className="qanda-block__answer"
+              key={child.id}
+              data-testid={`qanda-block__answer-${child.id}`}
+            >
+              Answer
+              <Byline structuredContent={child.byline} showEditedBy={false} />
+              {child.author && (
+                <Author
+                  role={child.author.role}
+                  headshot={child.author.headshot}
+                  prefLabel={child.author.prefLabel}
+                  streamPage={child.author.streamPage}
+                />
+              )}
+              <RichText structuredContent={child.body.structured} />
+            </div>
+          ),
+      )}
+    </div>
+  );
+}
+
+export default QandaBlock;

package/src/components/QandaContainer.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useContext } from 'react';
+import { useDispatch } from 'react-redux';
+import { getUserProfile } from '../store/user';
+import { AppDispatch } from '../store';
+import Status from './Status';
+import UserInfo from './UserInfo';
+import QandaOComments from './QandaOComments';
+import Stream from './Stream';
+import Network from './Network';
+import UpdatesButton from './UpdatesButton';
+import UITest from './UITestBar';
+import CountdownTimer from './CountdownTimer';
+import {
+  useGetQandAUpdatesQuery,
+  nextCommentsApi,
+} from '../services/comments-api';
+
+import { QandaContext } from './QandaProvider';
+
+function QandaContainer({ title }: { title: string }) {
+  const { storyId, useStaging, commentsAPIUrl } = useContext(QandaContext);
+  const dispatch = useDispatch<AppDispatch>();
+
+  const { data, error, isLoading } = useGetQandAUpdatesQuery({
+    storyId,
+    useStaging,
+    commentsAPIUrl,
+  });
+
+  useEffect(() => {
+    dispatch(getUserProfile({ useStaging }));
+    return () => {
+      // ensure we reset the api state when the component is unmounted
+      dispatch(nextCommentsApi.util.resetApiState());
+    };
+  }, [dispatch, storyId]);
+
+  return (
+    <div className="qanda-container">
+      {isLoading && <p>Loading updates</p>}
+      {error && (
+        <p>
+          Sorry, we could not connect you to get automatic updates. Error:
+          {error}
+        </p>
+      )}
+      {data && <p>Updates: {JSON.stringify(data)}</p>}
+      <Status />
+      <Network />
+      <UITest />
+      <CountdownTimer />
+      <UpdatesButton />
+      <Stream />
+      <UserInfo />
+      <QandaOComments title={title} />
+    </div>
+  );
+}
+
+export default QandaContainer;

package/src/components/QandaOComments.tsx

@@ -0,0 +1,60 @@
+import OComments from '@financial-times/o-comments';
+import { useEffect, useContext } from 'react';
+import { useSelector } from 'react-redux';
+import { RootState } from '../store';
+import { QandaContext } from './QandaProvider';
+import { useGetUserRolesQuery } from '../services/comments-api';
+
+type QandaOCommentsProps = {
+  title: string;
+};
+
+function QandaOComments({ title }: QandaOCommentsProps) {
+  const allowedRoles = ['ADMIN', 'MODERATOR'];
+  const { storyId, useStaging, commentsAPIUrl } = useContext(QandaContext);
+
+  const profile = useSelector((state: RootState) => state.user.profile);
+  if (!profile) {
+    return null;
+  }
+
+  const {
+    data: userRole,
+    error,
+    isLoading,
+  } = useGetUserRolesQuery(
+    {
+      storyId,
+      useStaging,
+      commentsAPIUrl,
+      token: profile.token,
+    },
+    { skip: !profile.token },
+  );
+
+  useEffect(() => {
+    if (!userRole) {
+      return;
+    }
+    const { isExpert, isStaffExpert, role } = userRole;
+    const showCoral =
+      isExpert || isStaffExpert || (role && allowedRoles.includes(role));
+    if (showCoral) {
+      OComments.init();
+    }
+  }, [userRole]);
+
+  return (
+    <div
+      className="o-comments"
+      id="o-comments-stream"
+      data-o-component="o-comments"
+      data-o-comments-article-id={storyId}
+      data-o-comments-article-url={`https://www.ft.com/content/${storyId}`} // do not use window.location in case we have a vanity url
+      data-o-comments-use-staging-environment={useStaging}
+      data-o-comments-title={title}
+    />
+  );
+}
+
+export default QandaOComments;

package/src/components/QandaProvider.tsx

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+
+type QandaContextType = {
+  storyId: string;
+  useStaging: boolean;
+  commentsAPIUrl: string;
+};
+
+export const QandaContext = createContext<QandaContextType>({
+  storyId: '',
+  useStaging: true,
+  commentsAPIUrl: '',
+});

package/src/components/QuestionForm.tsx

@@ -0,0 +1,122 @@
+import { useDispatch, useSelector } from 'react-redux';
+import type { RootState } from '../store';
+import { useState, useContext, FormEvent } from 'react';
+import {
+  openForm,
+  closeForm,
+  updateQuestion,
+  closeSuccess,
+} from '../store/questionSlice';
+import type { NetworkStatus } from '../store/network';
+import { QandaContext } from './QandaProvider';
+import { usePostQuestionMutation } from '../services/comments-api';
+
+export default function QuestionForm() {
+  const dispatch = useDispatch();
+  const { storyId, useStaging, commentsAPIUrl } = useContext(QandaContext);
+  const [postError, setPostError] = useState<string | null>(null);
+  const { isFormOpen, question } = useSelector(
+    (state: RootState) => state.question,
+  );
+  const profile = useSelector((state: RootState) => state.user.profile);
+  const networkStatus = useSelector((state: RootState) => state.network.status);
+
+  const [postQuestion, { isLoading, isSuccess, error, reset }] =
+    usePostQuestionMutation();
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+
+    if (!profile?.token) {
+      //TODO: how to handle users that are not logged in? design awaited
+      return;
+    }
+
+    try {
+      const response = await postQuestion({
+        token: profile?.token,
+        storyId,
+        useStaging,
+        commentsAPIUrl,
+        question: question,
+      }).unwrap();
+    } catch (e) {
+      dispatch(openForm());
+      setPostError('Failed to submit question');
+    }
+  };
+
+  if (isSuccess) {
+    return (
+      <div>
+        <p>Question submitted successfully!</p>
+        <button
+          type="button"
+          onClick={() => {
+            dispatch(closeSuccess());
+            reset();
+          }}
+        >
+          Close
+        </button>
+      </div>
+    );
+  }
+
+  if (!isFormOpen) {
+    return (
+      <>
+        {networkStatus === 'offline' && (
+          <p>You cannot submit question while offline</p>
+        )}
+        <button
+          type="button"
+          onClick={() => dispatch(openForm())}
+          disabled={networkStatus === ('offline' as NetworkStatus)}
+        >
+          Ask question
+        </button>
+      </>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      {error && (
+        <p role="alert" id="question-error-message">
+          {error}
+        </p>
+      )}
+      <textarea
+        value={question}
+        onChange={(e) => dispatch(updateQuestion(e.currentTarget.value))}
+        aria-label="Your question"
+        placeholder="Type your question"
+        maxLength={2000}
+        aria-invalid={postError ? 'true' : undefined}
+        aria-describedby={postError ? 'question-error-message' : undefined}
+      />
+      <div>
+        {!profile?.token && <p>You must be logged in to submit a question</p>}
+        <button
+          type="submit"
+          disabled={question.length < 20 || isLoading}
+          aria-label={
+            question.length < 20
+              ? 'Submit button (disabled until question is at least 20 characters)'
+              : 'Submit question'
+          }
+        >
+          Submit
+        </button>
+        <button
+          type="button"
+          onClick={() => dispatch(closeForm())}
+          aria-label="Close form"
+        >
+          Close
+        </button>
+      </div>
+    </form>
+  );
+}

package/src/components/Status.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { RootState } from '../store';
+import QuestionForm from './QuestionForm';
+
+function Status() {
+  const status = useSelector((state: RootState) => state.qa.status);
+
+  return (
+    <div>
+      <p>
+        The Q&A is&nbsp;
+        <b>{status === 'live' ? 'Live' : 'Close'}</b>
+      </p>
+      {status === 'live' ? <QuestionForm /> : <p>Questions not accepted</p>}
+    </div>
+  );
+}
+
+export default Status;

package/src/components/Stream.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useContext } from 'react';
+import { useSelector } from 'react-redux';
+import { RootState } from '../store';
+import QandaBlock from './QandaBlock';
+import { QandaContext } from './QandaProvider';
+import { useGetQandAStreamQuery } from '../services/comments-api';
+function Stream() {
+  const latestAnsweredQuestionId = useSelector(
+    (state: RootState) => state.stream.latestAnsweredQuestionId,
+  );
+  const { storyId, useStaging, commentsAPIUrl } = useContext(QandaContext);
+
+  const { data, error, isLoading } = useGetQandAStreamQuery({
+    storyId,
+    useStaging,
+    commentsAPIUrl,
+  });
+
+  useEffect(() => {
+    const element = document.getElementById(latestAnsweredQuestionId);
+    element?.scrollIntoView({ behavior: 'smooth' });
+  }, [latestAnsweredQuestionId]);
+
+  return (
+    <div className="qanda-block" data-testid="qanda-block">
+      <h2>Q&As:</h2>
+      {isLoading && <p>Loading Stream for you, be patient...</p>}
+      {error && <p>Failed to load Q&A stream</p>}
+      {data &&
+        data.qandas &&
+        data.qandas.map((qandaBlock: any) => (
+          <div key={qandaBlock.id}>
+            <QandaBlock
+              id={qandaBlock.id}
+              body={qandaBlock.body}
+              type="comment"
+              publishedDate={qandaBlock.publishedDate}
+              author={qandaBlock.author}
+              byline={qandaBlock.byline}
+            >
+              {qandaBlock.children}
+            </QandaBlock>
+          </div>
+        ))}
+    </div>
+  );
+}
+
+export default Stream;

package/src/components/UITestBar.tsx

@@ -0,0 +1,76 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { useEffect } from 'preact/hooks';
+import { AppDispatch, RootState } from '../store';
+import { eventSource } from '../services/comments-api';
+import newAnserEventData from '../utils/mocks/update';
+import type { NewAnswerEvent } from '../types/sse-events';
+
+interface ExtendedEventSource extends EventSource {
+  sendMessage?: (message: NewAnswerEvent) => void;
+}
+
+function UITest() {
+  const dispatch = useDispatch<AppDispatch>();
+  const networkStatus = useSelector((state: RootState) => state.network.status);
+  const qaStatus = useSelector((state: RootState) => state.qa.status);
+
+  useEffect(() => {
+    const handleNewUpdate = (event: Event) => {
+      const customEvent = event as CustomEvent<NewAnswerEvent>;
+
+      const customEventSource = eventSource as ExtendedEventSource;
+      if (customEventSource?.sendMessage) {
+        customEventSource.sendMessage(customEvent.detail);
+      }
+    };
+
+    window.addEventListener('newUpdate', handleNewUpdate);
+
+    return () => {
+      window.removeEventListener('newUpdate', handleNewUpdate);
+    };
+  }, []);
+
+  return (
+    <div className="ui-test-bar">
+      <button
+        type="button"
+        onClick={() => {
+          dispatch({
+            type: 'network/networkChangeStatusTo',
+            payload: {
+              status: networkStatus === 'offline' ? 'online' : 'offline',
+            },
+          });
+        }}
+      >
+        Change Network status to{' '}
+        {networkStatus === 'offline' ? 'online' : 'offline'}
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          dispatch({
+            type: `qa/${qaStatus === 'live' ? 'close' : 'open'}`,
+            payload: null,
+          });
+        }}
+      >
+        Change the status to {qaStatus === 'live' ? 'Close' : 'Live'}
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          const event = new CustomEvent('newUpdate', {
+            detail: newAnserEventData(),
+          });
+          window.dispatchEvent(event);
+        }}
+      >
+        Send a real-time update
+      </button>
+    </div>
+  );
+}
+
+export default UITest;

package/src/components/UpdatesButton.tsx

@@ -0,0 +1,45 @@
+import { useContext } from 'react';
+import { useDispatch } from 'react-redux';
+import { AppDispatch } from '../store';
+import { useUpdatedComments } from '../services/comments-api';
+import { updateComments } from '../store/updateComments';
+import { QandaContext } from './QandaProvider';
+
+import type { Comment } from '../types/comment';
+
+function UpdatesButton() {
+  const { storyId, useStaging, commentsAPIUrl } = useContext(QandaContext);
+  const dispatch = useDispatch<AppDispatch>();
+  const updatedComments: Comment[] = useUpdatedComments({
+    storyId,
+    useStaging,
+    commentsAPIUrl,
+  });
+
+  const handleShowUpdates = () => {
+    updateComments(
+      dispatch,
+      updatedComments,
+      storyId,
+      useStaging,
+      commentsAPIUrl,
+    );
+  };
+
+  return (
+    <>
+      {updatedComments && updatedComments.length && (
+        <button
+          data-testid="qanda-button"
+          className="update-button"
+          onClick={() => handleShowUpdates()}
+          type="button"
+        >
+          {`There are ${updatedComments.length} updates available`}
+        </button>
+      )}
+    </>
+  );
+}
+
+export default UpdatesButton;

package/src/components/UserInfo.tsx

@@ -0,0 +1,57 @@
+import { useContext } from 'react';
+import { useSelector } from 'react-redux';
+import { RootState } from '../store';
+import { useGetUserRolesQuery } from '../services/comments-api';
+import { QandaContext } from './QandaProvider';
+
+function UserInfo() {
+  const profile = useSelector((state: RootState) => state.user.profile);
+  if (!profile) {
+    return null;
+  }
+
+  const { storyId, useStaging, commentsAPIUrl } = useContext(QandaContext);
+
+  const {
+    data: userRole,
+    error,
+    isLoading,
+  } = useGetUserRolesQuery(
+    {
+      storyId,
+      useStaging,
+      commentsAPIUrl,
+      token: profile.token,
+    },
+    { skip: !profile.token },
+  );
+
+  return (
+    <div>
+      {isLoading && <p>Loading your profile...</p>}
+      {error && (
+        <p>
+          <b>{error}</b>
+        </p>
+      )}
+      {userRole && JSON.stringify(userRole)}
+      {userRole?.isExpert && (
+        <p>
+          <b>It seems you are a bit of an expert:</b>{' '}
+          {userRole.isStaffExpert ? 'FT Reporter' : 'FT Expert'}
+        </p>
+      )}
+      {profile?.token ? (
+        <p>
+          <b>{`Your display name is ${profile.displayName}`}</b>
+        </p>
+      ) : (
+        <p>
+          <b>You are not logged in</b>
+        </p>
+      )}
+    </div>
+  );
+}
+
+export default UserInfo;

package/src/index.tsx

@@ -0,0 +1,58 @@
+import { render, h } from 'preact';
+import Qanda from './components/Qanda';
+import type { QandaProps } from './types/qanda';
+
+export class QandaUI {
+  containerElement: HTMLElement;
+  storyId: string;
+  useStaging: boolean;
+  title: string;
+  commentsAPIHost: string;
+  commentsAPIVersion: string;
+
+  constructor(containerElement: HTMLElement, options?: QandaProps) {
+    this.containerElement = containerElement;
+    if (!options && !containerElement) {
+      throw new Error('Required properties are missing');
+    }
+    const storyId = options?.storyId ?? containerElement.dataset.qandaStoryid;
+    const useStaging =
+      options?.useStaging ??
+      containerElement.dataset.qandaUsestaging === 'true' ??
+      false;
+    const title = options?.title ?? containerElement.dataset.qandaTitle;
+    const commentsAPIHost =
+      options?.commentsAPIHost ?? containerElement.dataset.qandaCommentsapihost;
+    const commentsAPIVersion =
+      options?.commentsAPIVersion ??
+      containerElement.dataset.qandaCommentsapiversion;
+
+    if (!storyId || !title || !commentsAPIHost || !commentsAPIVersion) {
+      throw new Error('Required properties are missing');
+    }
+    //TODO: test this doesn't break all the other bits of js, needs to be throw because of typescript, can't just bail out normally
+    this.storyId = storyId;
+    this.useStaging = useStaging;
+    this.title = title;
+    this.commentsAPIHost = commentsAPIHost;
+    this.commentsAPIVersion = commentsAPIVersion;
+  }
+
+  init() {
+    render(
+      <Qanda
+        storyId={this.storyId}
+        useStaging={this.useStaging}
+        title={this.title}
+        commentsAPIHost={this.commentsAPIHost}
+        commentsAPIVersion={this.commentsAPIVersion}
+      />,
+
+      this.containerElement,
+    );
+  }
+
+  destroy() {
+    render(null, this.containerElement);
+  }
+}