TypeScript migration

custom.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const content: any;
+  export default content;
+}

package.json

@@ -12,23 +12,24 @@
     "test": "jest --coverage",
     "prepublishOnly": "npm run test && npm run build"
   },
-  "publishConfig": { "registry": "https://npm.pkg.github.com/" },
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com/"
+  },
   "keywords": [
     "react",
     "chat",
     "widget",
     "javascript"
   ],
   "dependencies": {
-    "immutable": "^3.8.1",
+    "classnames": "^2.2.6",
+    "date-fns": "^2.11.1",
     "markdown-it": "^8.4.1",
     "markdown-it-link-attributes": "^2.1.0",
     "markdown-it-sanitizer": "^0.4.3",
     "markdown-it-sup": "^1.0.0",
-    "prop-types": "^15.5.10",
-    "react-immutable-proptypes": "^2.1.0",
-    "react-redux": "^5.0.6",
-    "redux": "^3.7.2"
+    "react-redux": "^7.2.0",
+    "redux": "^4.0.5"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
@@ -38,10 +39,12 @@
     "@babel/preset-env": "^7.8.7",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
+    "@types/classnames": "^2.2.10",
     "@types/enzyme": "^3.10.5",
     "@types/jest": "^25.1.4",
     "@types/react": "^16.9.23",
     "@types/react-dom": "^16.9.5",
+    "@types/react-redux": "^7.1.7",
     "@typescript-eslint/eslint-plugin": "^2.23.0",
     "autoprefixer": "^8.2.0",
     "babel-jest": "^19.0.0",

src/components/Widget/components/Conversation/components/Header/index.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+const close = require('../../../../../../../assets/clear-button.svg') as string;
+
+import './style.scss';
+
+type Props = {
+  title: string;
+  subtitle: string;
+  toggleChat: () => void;
+  showCloseButton: boolean;
+  titleAvatar?: string;
+}
+
+function Header({ title, subtitle, toggleChat, showCloseButton, titleAvatar }: Props) {
+  return (
+    <div className="rcw-header">
+      {showCloseButton &&
+        <button className="rcw-close-button" onClick={toggleChat}>
+          <img src={close} className="rcw-close" alt="close" />
+        </button>
+      }
+      <h4 className="rcw-title">
+        {titleAvatar && <img src={titleAvatar} className="avatar" alt="profile" />}
+        {title}
+      </h4>
+      <span>{subtitle}</span>
+    </div>
+  );
+}
+
+export default Header;

src/components/Widget/components/Conversation/components/Header/style.scss

@@ -1,7 +1,8 @@
-@import 'variables.scss';
-@import 'common.scss';
+@import 'variables';
+@import 'common';
 
 .rcw-conversation-container {
+
   .rcw-header {
     background-color: $turqois-1;
     border-radius: 10px 10px 0 0;
@@ -51,7 +52,9 @@
 }
 
 @media screen and (max-width: 800px) {
+
   .rcw-conversation-container {
+
     .rcw-header {
       @include header-fs;
     }

src/components/Widget/components/Conversation/components/Messages/components/Loader/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react'; 
+import cn from 'classnames';
+
+import './styles.scss';
+
+type Props = {
+  typing: boolean;
+}
+
+function Loader({ typing }: Props) {
+  return (
+    <div className={cn('loader', { active: typing })}>
+      <div className="loader-container">
+        <span className="loader-dots"></span>
+        <span className="loader-dots"></span>
+        <span className="loader-dots"></span>
+      </div>
+    </div>
+  );
+}
+
+export default Loader;

src/components/Widget/components/Conversation/components/Messages/components/Message/index.tsx

@@ -1,22 +1,28 @@
 import React from 'react';
+import { format } from 'date-fns';
 import markdownIt from 'markdown-it';
 import markdownItSup from 'markdown-it-sup';
 import markdownItSanitizer from 'markdown-it-sanitizer';
 import markdownItLinkAttributes from 'markdown-it-link-attributes';
 
+import { Message } from 'src/store/types';
+
 import './styles.scss';
 
-// TODO: add prop types
-function Message(props: any) {
-  const sanitizedHTML = markdownIt()
-  .use(markdownItSup)
-  .use(markdownItSanitizer)
-  .use(markdownItLinkAttributes, { attrs: { target: '_blank', rel: 'noopener' } })
-  .render(props.message.text);
+type Props = {
+  message: Message;
+}
+
+function Message({ message }: Props) {
+  const sanitizedHTML = markdownIt().use(markdownItSup)
+    .use(markdownItSanitizer)
+    .use(markdownItLinkAttributes, { attrs: { target: '_blank', rel: 'noopener' } })
+    .render(message.text);
 
   return (
-    <div className={`rcw-${props.message.sender}`}>
+    <div className={`rcw-${message.sender}`}>
       <div className="rcw-message-text" dangerouslySetInnerHTML={{ __html: sanitizedHTML }} />
+      <span className="rcw-timestamp">{format(message.timestamp, 'hh:mm')}</span>
     </div>
   );
 }

src/components/Widget/components/Conversation/components/Messages/components/Message/styles.scss

@@ -1,19 +1,37 @@
-@import 'variables.scss';
-@import 'common.scss';
+@import 'variables';
+@import 'common';
 
 .rcw-message {
   margin: 10px;
   display: flex;
   word-wrap: break-word;
 }
 
+.rcw-timestamp {
+  font-size: 10px;
+}
+
 .rcw-client {
-  @include message-bubble($turqois-2);
+  display: flex;
+  flex-direction: column;
   margin-left: auto;
+
+  .rcw-message-text {
+    @include message-bubble($turqois-2);
+  }
+
+  .rcw-timestamp {
+    align-self: flex-end;
+  }
 }
 
 .rcw-response {
-  @include message-bubble($grey-2);
+  display: flex;
+  flex-direction: column;
+
+  .rcw-message-text {
+    @include message-bubble($grey-2);
+  }
 }
 
 /* For markdown elements created with default styles */

src/components/Widget/components/Conversation/components/Messages/components/Snippet/index.tsx

@@ -1,16 +1,20 @@
 import React from 'react';
 
+import { Message, Link } from 'src/store/types';
+
 import './styles.scss';
 
-function Snippet(props: any) {
+type Props = {
+  message: Link;
+}
+
+function Snippet({ message }: Props) {
   return (
     <div className="rcw-snippet">
-      <h5 className="rcw-snippet-title">
-        { props.message.title }
-      </h5>
+      <h5 className="rcw-snippet-title">{message.title}</h5>
       <div className="rcw-snippet-details">
-        <a href={props.message.link} target={props.message.target} className="rcw-link">
-          { props.message.link }
+        <a href={message.link} target={message.target} className="rcw-link">
+          {message.link}
         </a>
       </div>
     </div>

src/components/Widget/components/Conversation/components/Messages/index.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useRef } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+
+import { scrollToBottom } from '../../../../../../utils/messages';
+import { Message, Link, CustomCompMessage, GlobalState } from '../../../../../../store/types';
+
+import Loader from './components/Loader';
+import './styles.scss';
+
+type Props = {
+  profileAvatar?: string;
+}
+
+function Messages({ profileAvatar }: Props) {
+  const messages = useSelector((state: GlobalState) => state.messages.messages);
+  const typing = useSelector((state: GlobalState) => state.behavior.messageLoader);
+  const dispatch = useDispatch();
+
+  const messageRef = useRef(null);
+  useEffect(() => scrollToBottom(messageRef.current), [messages]);
+
+  const getComponentToRender = (message: Message | Link | CustomCompMessage) => {
+    const ComponentToRender = message.component;
+    if (message.type === 'component') {
+      return <ComponentToRender {...message.props} />;
+    }
+    return <ComponentToRender message={message} />;
+  };
+
+  // TODO: Fix this function or change to move the avatar to last message from response
+  // const shouldRenderAvatar = (message: Message, index: number) => {
+  //   const previousMessage = messages[index - 1];
+  //   if (message.showAvatar && previousMessage.showAvatar) {
+  //     dispatch(hideAvatar(index));
+  //   }
+  // }
+
+  return (
+    <div id="messages" className="rcw-messages-container" ref={messageRef}>
+      {messages?.map(message =>
+        <div className="rcw-message" key={message.timestamp.toString()}>
+          {profileAvatar &&
+            message.showAvatar &&
+            <img src={profileAvatar} className="rcw-avatar" alt="profile" />
+          }
+          {getComponentToRender(message)}
+        </div>
+      )}
+      <Loader typing={typing} />
+    </div>
+  );
+}
+
+export default Messages;