General formatting for messaging + reshaping of messaging components and their structure.

client/src/components/chat-conversation/chat-conversation.component.jsx

@@ -0,0 +1,77 @@
+import { Card } from "antd";
+import React, { useEffect, useState } from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import twilio from "twilio";
+import { toggleConversationVisible } from "../../redux/messaging/messaging.actions";
+import PhoneFormatter from "../../utils/PhoneFormatter";
+import "./chat-conversation.styles.scss"; //https://bootsnipp.com/snippets/exR5v
+
+const client = twilio(
+  "ACf1b1aaf0e04740828b49b6e58467d787",
+  "0bea5e29a6d77593183ab1caa01d23de"
+);
+
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+});
+const mapDispatchToProps = dispatch => ({
+  toggleConversationVisible: conversationId =>
+    dispatch(toggleConversationVisible(conversationId))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(function ChatConversationComponent({
+  conversation,
+  toggleConversationVisible
+}) {
+  const [conversations, setConversations] = useState([]);
+
+  useEffect(() => {
+    client.messages.list({ limit: 20 }, (error, items) => {
+      setConversations(
+        items.reduce((acc, value) => {
+          acc.push({
+            sid: value.sid,
+            direction: value.direction,
+            body: value.body
+          });
+          return acc;
+        }, [])
+      );
+    });
+    return () => {};
+  }, [setConversations]);
+  return (
+    <div>
+      <Card
+        style={{
+          width: conversation.open ? "400px" : "125px",
+          margin: "0px 10px"
+        }}
+        size="small"
+        onClick={() => toggleConversationVisible(conversation.id)}
+      >
+        {conversation.open ? (
+          <div className="messages" style={{ height: "400px" }}>
+            <ul>
+              {conversations.map(item => (
+                <li
+                  key={item.sid}
+                  className={`${
+                    item.direction === "inbound" ? "replies" : "sent"
+                  }`}
+                >
+                  <p> {item.body}</p>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ) : (
+          <PhoneFormatter>{conversation.phone}</PhoneFormatter>
+        )}
+      </Card>
+    </div>
+  );
+});

client/src/components/chat-conversation/chat-conversation.container.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import ChatConversationComponent from "./chat-conversation.component";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+});
+const mapDispatchToProps = dispatch => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(function ChatConversationContainer({ conversation }) {
+  return <ChatConversationComponent conversation={conversation} />;
+});

client/src/components/chat-overlay/chat-overlay.component.jsx

@@ -0,0 +1,36 @@
+import { Badge, Card, Icon } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+export default function ChatWindowComponent({
+  chatVisible,
+  toggleChatVisible
+}) {
+  const { t } = useTranslation();
+  return (
+    <div>
+      <Badge count={5}>
+        <Card
+          onClick={() => toggleChatVisible()}
+          style={{
+            width: chatVisible ? "300px" : "125px",
+            margin: "0px 10px"
+          }}
+          size="small"
+        >
+          {chatVisible ? (
+            <div className="messages" style={{ height: "400px" }}>
+              List of chats here.
+            </div>
+          ) : (
+            <div>
+              <Icon type="message" />
+              <strong style={{ paddingLeft: "10px" }}>
+                {t("messaging.labels.messaging")}
+              </strong>
+            </div>
+          )}
+        </Card>
+      </Badge>
+    </div>
+  );
+}

client/src/components/chat-overlay/chat-overlay.container.jsx

@@ -0,0 +1,49 @@
+import { Affix, Button, Badge } from "antd";
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { toggleChatVisible } from "../../redux/messaging/messaging.actions";
+import {
+  selectChatVisible,
+  selectConversations
+} from "../../redux/messaging/messaging.selectors";
+import ChatOverlayComponent from "./chat-overlay.component";
+import ChatConversationContainer from "../chat-conversation/chat-conversation.container";
+
+const mapStateToProps = createStructuredSelector({
+  chatVisible: selectChatVisible,
+  conversations: selectConversations
+});
+
+const mapDispatchToProps = dispatch => ({
+  toggleChatVisible: () => dispatch(toggleChatVisible())
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(function ChatWindowContainer({
+  chatVisible,
+  toggleChatVisible,
+  conversations
+}) {
+  console.log("conversations", conversations);
+  return (
+    <Affix offsetBottom={25} style={{ padding: "10px, 10px, 10px, 10px" }}>
+      <div>
+        <Badge count={10}>
+          <ChatOverlayComponent
+            chatVisible={chatVisible}
+            toggleChatVisible={toggleChatVisible}
+          />
+        </Badge>
+        {conversations
+          ? conversations.map((conversation, idx) => (
+              <Badge count={5}>
+                <ChatConversationContainer conversation={conversation} />
+              </Badge>
+            ))
+          : null}
+      </div>
+    </Affix>
+  );
+});

client/src/components/chat-window/chat-window.component.jsx

@@ -1,53 +0,0 @@
-import { Card } from "antd";
-import React, { useState, useEffect } from "react";
-import "./chat-window.styles.scss"; //https://bootsnipp.com/snippets/exR5v
-import twilio from "twilio";
-// const client = require("twilio")(
-//   "ACf1b1aaf0e04740828b49b6e58467d787",
-//   "0bea5e29a6d77593183ab1caa01d23de"
-// );
-const client = twilio(
-  "ACf1b1aaf0e04740828b49b6e58467d787",
-  "0bea5e29a6d77593183ab1caa01d23de"
-);
-export default function ChatWindowComponent({ toggleChatVisible }) {
-  const [conversations, setConversations] = useState([]);
-
-  useEffect(() => {
-    client.messages.list({ limit: 20 }, (error, items) => {
-      setConversations(
-        items.reduce((acc, value) => {
-          acc.push({
-            sid: value.sid,
-            direction: value.direction,
-            body: value.body
-          });
-          return acc;
-        }, [])
-      );
-    });
-    return () => {};
-  }, [setConversations]);
-
-  console.log(conversations);
-  return (
-    <Card style={{ width: "400px" }}>
-      <div>
-        <button onClick={() => toggleChatVisible()}>X</button>
-        <div className='messages' style={{ height: "400px" }}>
-          <ul>
-            {conversations.map(item => (
-              <li
-                key={item.sid}
-                className={`${
-                  item.direction === "inbound" ? "replies" : "sent"
-                }`}>
-                <p> {item.body}</p>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
-    </Card>
-  );
-}

client/src/components/chat-window/chat-window.container.jsx

@@ -1,37 +0,0 @@
-import { Affix, Button, Badge } from "antd";
-import React from "react";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { toggleChatVisible } from "../../redux/messaging/messaging.actions";
-import { selectChatVisible } from "../../redux/messaging/messaging.selectors";
-import ChatWindowComponent from "./chat-window.component";
-
-const mapStateToProps = createStructuredSelector({
-  chatVisible: selectChatVisible
-});
-
-const mapDispatchToProps = dispatch => ({
-  toggleChatVisible: () => dispatch(toggleChatVisible())
-});
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(function ChatWindowContainer({ chatVisible, toggleChatVisible }) {
-  return (
-    <Affix offsetBottom={25}>
-      {chatVisible ? (
-        <ChatWindowComponent toggleChatVisible={toggleChatVisible} />
-      ) : (
-        <Badge count={5}>
-          <Button
-            type='primary'
-            shape='circle'
-            icon='message'
-            onClick={() => toggleChatVisible()}
-          />
-        </Badge>
-      )}
-    </Affix>
-  );
-});