Refactor message data types into distinct folder

Export message types

Author: Fabilin

src/Sse.ts

@@ -1,64 +1,63 @@
-// eslint-disable-next-line @typescript-eslint/no-namespace
-export namespace Sse {
-  let sseIsEnabled = false;
-  let eventSource: EventSource;
-  let notInitialised: boolean;
+import { BotConnectorResponse } from './model/responses';
 
-  export function init(
-    tockEndPoint: string,
-    userId: string,
-    handleBotResponse: (botResponse: any) => void,
-    onSseStateChange: (state: number) => void,
-  ): Promise<void> {
-    return new Promise<void>((afterInit: () => void): void => {
-      if (typeof EventSource !== 'undefined' && tockEndPoint && !eventSource) {
-        notInitialised = true;
-        eventSource = new EventSource(tockEndPoint + '/sse?userid=' + userId);
-        setTimeout(() => onSseStateChange(eventSource.readyState));
-        eventSource.addEventListener(
-          'message',
-          (e: MessageEvent) => {
-            handleBotResponse(JSON.parse(e.data));
-          },
-          false,
-        );
-        eventSource.addEventListener(
-          'open',
-          () => {
+let sseIsEnabled = false;
+let eventSource: EventSource;
+let notInitialised: boolean;
+
+export function init(
+  tockEndPoint: string,
+  userId: string,
+  handleBotResponse: (botResponse: BotConnectorResponse) => void,
+  onSseStateChange: (state: number) => void,
+): Promise<void> {
+  return new Promise<void>((afterInit: () => void): void => {
+    if (typeof EventSource !== 'undefined' && tockEndPoint && !eventSource) {
+      notInitialised = true;
+      eventSource = new EventSource(tockEndPoint + '/sse?userid=' + userId);
+      setTimeout(() => onSseStateChange(eventSource.readyState));
+      eventSource.addEventListener(
+        'message',
+        (e: MessageEvent) => {
+          handleBotResponse(JSON.parse(e.data));
+        },
+        false,
+      );
+      eventSource.addEventListener(
+        'open',
+        () => {
+          onSseStateChange(eventSource.readyState);
+          sseIsEnabled = true;
+          if (notInitialised) {
+            afterInit();
+            notInitialised = false;
+          }
+        },
+        false,
+      );
+      eventSource.addEventListener(
+        'error',
+        () => {
+          if (eventSource.readyState == EventSource.CLOSED) {
             onSseStateChange(eventSource.readyState);
-            sseIsEnabled = true;
+            sseIsEnabled = false;
             if (notInitialised) {
               afterInit();
               notInitialised = false;
             }
-          },
-          false,
-        );
-        eventSource.addEventListener(
-          'error',
-          () => {
-            if (eventSource.readyState == EventSource.CLOSED) {
-              onSseStateChange(eventSource.readyState);
-              sseIsEnabled = false;
-              if (notInitialised) {
-                afterInit();
-                notInitialised = false;
-              }
-            }
-          },
-          false,
-        );
-      }
-    });
-  }
+          }
+        },
+        false,
+      );
+    }
+  });
+}
 
-  export function isEnable(): boolean {
-    return sseIsEnabled;
-  }
+export function isEnable(): boolean {
+  return sseIsEnabled;
+}
 
-  export function disable(): Promise<void> {
-    sseIsEnabled = false;
-    notInitialised = false;
-    return Promise.resolve();
-  }
+export function disable(): Promise<void> {
+  sseIsEnabled = false;
+  notInitialised = false;
+  return Promise.resolve();
 }

src/TockContext.tsx

@@ -1,18 +1,20 @@
 import React, {
+  Context,
+  createContext,
   Dispatch,
   ReactNode,
   Reducer,
-  useReducer,
-  createContext,
-  Context,
   useContext,
+  useReducer,
 } from 'react';
 import { retrieveUserId } from './utils';
+import { QuickReply } from './model/buttons';
+import { Message } from './model/messages';
 
-export const TockStateContext: Context<TockState | undefined> = createContext<
+const TockStateContext: Context<TockState | undefined> = createContext<
   TockState | undefined
 >(undefined);
-export const TockStateDispatch: Context<
+const TockStateDispatch: Context<
   Dispatch<TockAction> | undefined
 > = createContext<Dispatch<TockAction> | undefined>(undefined);
 
@@ -34,107 +36,9 @@ export const useTockDispatch: () => Dispatch<TockAction> = () => {
   return dispatch;
 };
 
-export class QuickReply {
-  label: string;
-  payload?: string;
-  nlpText?: string;
-  imageUrl?: string;
-
-  constructor(
-    label: string,
-    payload: string,
-    nlpText?: string,
-    imageUrl?: string,
-  ) {
-    this.label = label;
-    this.payload = payload;
-    this.nlpText = nlpText;
-    this.imageUrl = imageUrl;
-  }
-}
-
-export class PostBackButton {
-  label: string;
-  payload?: string;
-  imageUrl?: string;
-
-  constructor(label: string, payload: string, imageUrl?: string) {
-    this.label = label;
-    this.payload = payload;
-    this.imageUrl = imageUrl;
-  }
-}
-
-export class UrlButton {
-  label: string;
-  url: string;
-  imageUrl?: string;
-
-  constructor(label: string, url: string, imageUrl?: string) {
-    this.label = label;
-    this.url = url;
-    this.imageUrl = imageUrl;
-  }
-}
-
-export type Button = QuickReply | PostBackButton | UrlButton;
-
-export type Messages = Message | Card | Carousel | Widget | Image;
-
-export enum MessageType {
-  message = 'message',
-  card = 'card',
-  carousel = 'carousel',
-  widget = 'widget',
-  image = 'image',
-}
-
-export interface Message {
-  type: MessageType;
-  alreadyDisplayed?: boolean;
-}
-
-export interface TextMessage extends Message {
-  author: 'bot' | 'user';
-  message: string;
-  type: MessageType.message;
-  buttons?: Button[];
-}
-
-export interface Card extends Message {
-  imageUrl?: string;
-  imageAlternative?: string;
-  title: string;
-  subTitle?: string;
-  buttons?: Button[];
-  type: MessageType.card;
-}
-
-export interface Carousel extends Message {
-  cards: Card[];
-  type: MessageType.carousel;
-}
-
-export interface Widget extends Message {
-  widgetData: WidgetData;
-  type: MessageType.widget;
-}
-
-export interface WidgetData {
-  data: any;
-  type: string;
-}
-
-export interface Image extends Message {
-  url?: string;
-  title: string;
-  type: MessageType.image;
-  alternative?: string;
-}
-
 export interface TockState {
   quickReplies: QuickReply[];
-  messages: Messages[];
+  messages: Message[];
   userId: string;
   loading: boolean;
   sseInitializing: boolean;
@@ -148,12 +52,12 @@ export interface TockAction {
     | 'SET_SSE_INITIALIZING'
     | 'CLEAR_MESSAGES';
   quickReplies?: QuickReply[];
-  messages?: Messages[];
+  messages?: Message[];
   loading?: boolean;
   sseInitializing?: boolean;
 }
 
-export const tockReducer: Reducer<TockState, TockAction> = (
+const tockReducer: Reducer<TockState, TockAction> = (
   state: TockState,
   action: TockAction,
 ): TockState => {

src/components/Card/Card.tsx

@@ -6,7 +6,7 @@ import React, {
 } from 'react';
 import { prop } from 'styled-tools';
 
-import { Button as ButtonData } from '../../TockContext';
+import { Button as ButtonData } from '../../model/buttons';
 import '../../styles/theme';
 
 export const CardOuter: StyledComponent<DetailedHTMLProps<

src/components/Carousel/Carousel.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { UrlButton } from '../../TockContext';
+import { UrlButton } from '../../model/buttons';
 import Carousel from './Carousel';
 import Card, { CardProps } from '../Card';
 

src/components/Conversation/Conversation.stories.tsx

@@ -4,7 +4,8 @@ import { useEffect } from 'react';
 import React from 'react';
 
 import useTock, { UseTock } from '../../useTock';
-import { MessageType, PostBackButton, UrlButton } from '../../TockContext';
+import { PostBackButton, UrlButton } from '../../model/buttons';
+import { MessageType } from '../../model/messages';
 import Product from '../widgets/ProductWidget/Product';
 import Conversation from './Conversation';
 

src/components/Conversation/Conversation.tsx

@@ -1,5 +1,6 @@
 import React, { DetailedHTMLProps, HTMLAttributes } from 'react';
 import styled from '@emotion/styled';
+import { useTheme } from '@emotion/react';
 
 import DefaultWidget from '../widgets/DefaultWidget';
 import MessageBot from '../MessageBot';
@@ -12,22 +13,19 @@ import QuickReplyList from '../QuickReplyList';
 import InlineQuickReplyList from '../InlineQuickReplyList';
 import useMessageCounter from './hooks/useMessageCounter';
 import useScrollBehaviour from './hooks/useScrollBehaviour';
-import { useTheme } from '@emotion/react';
-import '../../styles/theme';
 import TockTheme from '../../styles/theme';
 
+import TockAccessibility from '../../TockAccessibility';
+import { Button, QuickReply } from '../../model/buttons';
 import type {
-  Button,
   Card as ICard,
   Carousel as ICarousel,
-  Message,
   Image as IImage,
+  Message,
   MessageType,
   TextMessage,
   Widget,
-  QuickReply as CQuickReply,
-} from 'TockContext';
-import TockAccessibility from 'TockAccessibility';
+} from '../../model/messages';
 
 const ConversationOuterContainer = styled.div`
   display: flex;
@@ -52,9 +50,10 @@ interface RenderOptions {
   onAction: (button: Button) => void;
 }
 
-const renderWidget = (message: Widget, options: RenderOptions) => {
-  const Widget = options?.widgets[message.widgetData.type] ?? DefaultWidget;
-  return <Widget {...message.widgetData.data} />;
+const renderWidget = (widget: Widget, options: RenderOptions) => {
+  const WidgetRenderer =
+    options.widgets?.[widget.widgetData.type] ?? DefaultWidget;
+  return <WidgetRenderer {...widget.widgetData.data} />;
 };
 
 const renderMessage = (message: TextMessage, options: RenderOptions) => {
@@ -105,7 +104,7 @@ const MESSAGE_RENDERER: {
 const makeRenderMessage = (
   options: RenderOptions,
   accessibility?: TockAccessibility,
-) => (message: Message | ICard | ICarousel | Widget, index: number) => {
+) => (message: Message, index: number) => {
   const render: Renderer = MESSAGE_RENDERER[message.type];
   if (!render) return null;
   return React.cloneElement(render(message, options, accessibility), {
@@ -121,7 +120,7 @@ type Props = DetailedHTMLProps<
   messageDelay: number;
   widgets?: { [id: string]: (props: unknown) => JSX.Element };
   loading?: boolean;
-  quickReplies: CQuickReply[];
+  quickReplies: QuickReply[];
   onAction: (button: Button) => void;
   onQuickReplyClick: (button: Button) => void;
   accessibility?: TockAccessibility;
@@ -164,21 +163,18 @@ const Conversation = ({
         </ConversationInnerContainer>
         {!loading &&
           displayableMessageCount === messages.length &&
-          theme.inlineQuickReplies !== true && (
-            <QuickReplyList
+          (theme.inlineQuickReplies ? (
+            <InlineQuickReplyList
               items={quickReplies}
               onItemClick={onQuickReplyClick}
+              accessibility={accessibility}
             />
-          )}
-        {!loading &&
-          displayableMessageCount === messages.length &&
-          theme.inlineQuickReplies === true && (
-            <InlineQuickReplyList
+          ) : (
+            <QuickReplyList
               items={quickReplies}
               onItemClick={onQuickReplyClick}
-              accessibility={accessibility}
             />
-          )}
+          ))}
       </ConversationOuterContainer>
     );
   } else {

src/components/Conversation/hooks/useMessageCounter.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Message } from '../../../TockContext';
+import { Message } from '../../../model/messages';
 
 export default function useMessageCounter(
   messages: Message[],