BOD-14 WIP. CSS issues present with 2 way texting, but working live.

client/src/components/chat-send-message/chat-send-message.component.jsx

@@ -1,5 +1,6 @@
-import { Input } from "antd";
-import React, { useState } from "react";
+import { Input, Spin } from "antd";
+import { LoadingOutlined } from "@ant-design/icons";
+import React, { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -15,6 +16,12 @@ const mapDispatchToProps = dispatch => ({
 
 function ChatSendMessageComponent({ conversation, bodyshop, sendMessage }) {
   const [message, setMessage] = useState("");
+
+  useEffect(() => {
+    if (conversation.isSending === false) {
+      setMessage("");
+    }
+  }, [conversation, setMessage]);
   const { t } = useTranslation();
 
   const handleEnter = () => {
@@ -24,22 +31,35 @@ function ChatSendMessageComponent({ conversation, bodyshop, sendMessage }) {
       messagingServiceSid: bodyshop.messagingservicesid,
       conversationid: conversation.id
     });
-    setMessage("");
   };
 
   return (
     <div style={{ display: "flex " }}>
       <Input.TextArea
         allowClear
+        autoFocus
+        suffix={<span>a</span>}
         autoSize={{ minRows: 1, maxRows: 4 }}
         value={message}
+        disabled={conversation.isSending}
         placeholder={t("messaging.labels.typeamessage")}
-        // enterButton={}
         onChange={e => setMessage(e.target.value)}
         onPressEnter={event => {
+          event.preventDefault();
           if (!!!event.shiftKey) handleEnter();
         }}
       />
+      <Spin
+        style={{ display: `${conversation.isSending ? "" : "none"}` }}
+        indicator={
+          <LoadingOutlined
+            style={{
+              fontSize: 24
+            }}
+            spin
+          />
+        }
+      />
     </div>
   );
 }