UI Work on chats

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

@@ -1,11 +1,16 @@
-import { Card } from "antd";
+import { Button, Card, Input, Icon } 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 {
+  closeConversation,
+  toggleConversationVisible
+} from "../../redux/messaging/messaging.actions";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import "./chat-conversation.styles.scss"; //https://bootsnipp.com/snippets/exR5v
+import { MdSend } from "react-icons/md";
+import { useTranslation } from "react-i18next";
 
 const client = twilio(
   "ACf1b1aaf0e04740828b49b6e58467d787",
@@ -17,20 +22,24 @@ const mapStateToProps = createStructuredSelector({
 });
 const mapDispatchToProps = dispatch => ({
   toggleConversationVisible: conversationId =>
-    dispatch(toggleConversationVisible(conversationId))
+    dispatch(toggleConversationVisible(conversationId)),
+  closeConversation: phone => dispatch(closeConversation(phone))
 });
 export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(function ChatConversationComponent({
   conversation,
-  toggleConversationVisible
+  toggleConversationVisible,
+  closeConversation
 }) {
-  const [conversations, setConversations] = useState([]);
+  const { t } = useTranslation();
+
+  const [messages, setMessages] = useState([]);
 
   useEffect(() => {
     client.messages.list({ limit: 20 }, (error, items) => {
-      setConversations(
+      setMessages(
         items.reduce((acc, value) => {
           acc.push({
             sid: value.sid,
@@ -42,34 +51,68 @@ export default connect(
       );
     });
     return () => {};
-  }, [setConversations]);
+  }, [setMessages]);
   return (
     <div>
       <Card
+        title={
+          conversation.open ? (
+            <div style={{ display: "flex" }}>
+              <div
+                onClick={() => toggleConversationVisible(conversation.phone)}
+              >
+                <PhoneFormatter>{conversation.phone}</PhoneFormatter>
+              </div>
+              <Button
+                type="danger"
+                shape="circle-outline"
+                onClick={() => closeConversation(conversation.phone)}
+              >
+                X
+              </Button>
+            </div>
+          ) : null
+        }
         style={{
-          width: conversation.open ? "400px" : "125px",
+          width: conversation.open ? "400px" : "175px",
           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>
+            <div className="messages" style={{ height: "400px" }}>
+              <ul>
+                {messages.map(item => (
+                  <li
+                    key={item.sid}
+                    className={`${
+                      item.direction === "inbound" ? "sent" : "replies"
+                    }`}
+                  >
+                    <p> {item.body}</p>
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <Input.Search
+              placeholder={t("messaging.labels.typeamessage")}
+              enterButton={<Icon component={MdSend} />}
+            />
           </div>
         ) : (
-          <PhoneFormatter>{conversation.phone}</PhoneFormatter>
+          <div style={{ display: "flex" }}>
+            <div onClick={() => toggleConversationVisible(conversation.phone)}>
+              <PhoneFormatter>{conversation.phone}</PhoneFormatter>
+            </div>
+            <Button
+              type="dashed"
+              shape="circle-outline"
+              onClick={() => closeConversation(conversation.phone)}
+            >
+              X
+            </Button>
+          </div>
         )}
       </Card>
     </div>

client/src/components/chat-open-button/chat-open-button.component.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { openConversation } from "../../redux/messaging/messaging.actions";
+import { Icon } from "antd";
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+});
+const mapDispatchToProps = dispatch => ({
+  openConversation: phone => dispatch(openConversation(phone))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(function ChatOpenButton({ openConversation, phone }) {
+  return (
+    <Icon
+      style={{ margin: 4 }}
+      type="message"
+      onClick={() => openConversation(phone)}
+    />
+  );
+});

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

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

client/src/components/jobs-list/jobs-list.component.jsx

@@ -1,11 +1,11 @@
-import { Input, Table, Icon, Button } from "antd";
+import { Button, Icon, Input, Table } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
+import { Link, withRouter } from "react-router-dom";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import { alphaSort } from "../../utils/sorters";
-import { withRouter } from "react-router-dom";
-import CurrencyFormatter from "../../utils/CurrencyFormatter";
+import StartChatButton from "../chat-open-button/chat-open-button.component";
 
 export default withRouter(function JobsList({
   searchTextState,
@@ -78,13 +78,7 @@ export default withRouter(function JobsList({
         return record.ownr_ph1 ? (
           <span>
             <PhoneFormatter>{record.ownr_ph1}</PhoneFormatter>
-            <Icon
-              style={{ margin: 4 }}
-              type='message'
-              onClick={() => {
-                alert("SMSing will happen here.");
-              }}
-            />
+            <StartChatButton phone={record.ownr_ph1} />
           </span>
         ) : (
           t("general.labels.unknown")
@@ -214,10 +208,10 @@ export default withRouter(function JobsList({
           return (
             <div style={{ display: "flex" }}>
               <Button onClick={() => refetch()}>
-                <Icon type='sync' />
+                <Icon type="sync" />
               </Button>
               <Input.Search
-                placeholder='Search...'
+                placeholder="Search..."
                 onChange={e => {
                   setSearchText(e.target.value);
                 }}
@@ -226,10 +220,10 @@ export default withRouter(function JobsList({
             </div>
           );
         }}
-        size='small'
+        size="small"
         pagination={{ position: "top" }}
         columns={columns.map(item => ({ ...item }))}
-        rowKey='id'
+        rowKey="id"
         dataSource={jobs}
         rowSelection={{ selectedRowKeys: [selectedJob] }}
         onChange={handleTableChange}