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>