- the great reformat

Signed-off-by: Dave Richer <dave@imexsystems.ca>

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

@@ -1,116 +1,111 @@
-import { LoadingOutlined, SendOutlined } from "@ant-design/icons";
-import { Input, Spin } from "antd";
-import React, { useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { logImEXEvent } from "../../firebase/firebase.utils";
-import {
-  sendMessage,
-  setMessage,
-} from "../../redux/messaging/messaging.actions";
-import {
-  selectIsSending,
-  selectMessage,
-} from "../../redux/messaging/messaging.selectors";
-import { selectBodyshop } from "../../redux/user/user.selectors";
+import {LoadingOutlined, SendOutlined} from "@ant-design/icons";
+import {Input, Spin} from "antd";
+import React, {useEffect, useRef, useState} from "react";
+import {useTranslation} from "react-i18next";
+import {connect} from "react-redux";
+import {createStructuredSelector} from "reselect";
+import {logImEXEvent} from "../../firebase/firebase.utils";
+import {sendMessage, setMessage,} from "../../redux/messaging/messaging.actions";
+import {selectIsSending, selectMessage,} from "../../redux/messaging/messaging.selectors";
+import {selectBodyshop} from "../../redux/user/user.selectors";
 import ChatMediaSelector from "../chat-media-selector/chat-media-selector.component";
 import ChatPresetsComponent from "../chat-presets/chat-presets.component";
 
 const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop,
-  isSending: selectIsSending,
-  message: selectMessage,
+    bodyshop: selectBodyshop,
+    isSending: selectIsSending,
+    message: selectMessage,
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  sendMessage: (message) => dispatch(sendMessage(message)),
-  setMessage: (message) => dispatch(setMessage(message)),
+    sendMessage: (message) => dispatch(sendMessage(message)),
+    setMessage: (message) => dispatch(setMessage(message)),
 });
 
 function ChatSendMessageComponent({
-  conversation,
-  bodyshop,
-  sendMessage,
-  isSending,
-  message,
-  setMessage,
-}) {
-  const inputArea = useRef(null);
-  const [selectedMedia, setSelectedMedia] = useState([]);
-  useEffect(() => {
-    inputArea.current.focus();
-  }, [isSending, setMessage]);
+                                      conversation,
+                                      bodyshop,
+                                      sendMessage,
+                                      isSending,
+                                      message,
+                                      setMessage,
+                                  }) {
+    const inputArea = useRef(null);
+    const [selectedMedia, setSelectedMedia] = useState([]);
+    useEffect(() => {
+        inputArea.current.focus();
+    }, [isSending, setMessage]);
 
-  const { t } = useTranslation();
+    const {t} = useTranslation();
 
-  const handleEnter = () => {
-    const selectedImages = selectedMedia.filter((i) => i.isSelected);
-    if ((message === "" || !message) && selectedImages.length === 0) return;
-    logImEXEvent("messaging_send_message");
+    const handleEnter = () => {
+        const selectedImages = selectedMedia.filter((i) => i.isSelected);
+        if ((message === "" || !message) && selectedImages.length === 0) return;
+        logImEXEvent("messaging_send_message");
 
-    if (selectedImages.length < 11) {
-      sendMessage({
-        to: conversation.phone_num,
-        body: message || "",
-        messagingServiceSid: bodyshop.messagingservicesid,
-        conversationid: conversation.id,
-        selectedMedia: selectedImages,
-        imexshopid: bodyshop.imexshopid,
-      });
-      setSelectedMedia(
-        selectedMedia.map((i) => {
-          return { ...i, isSelected: false };
-        })
-      );
-    }
-  };
+        if (selectedImages.length < 11) {
+            sendMessage({
+                to: conversation.phone_num,
+                body: message || "",
+                messagingServiceSid: bodyshop.messagingservicesid,
+                conversationid: conversation.id,
+                selectedMedia: selectedImages,
+                imexshopid: bodyshop.imexshopid,
+            });
+            setSelectedMedia(
+                selectedMedia.map((i) => {
+                    return {...i, isSelected: false};
+                })
+            );
+        }
+    };
 
-  return (
-    <div className="imex-flex-row" style={{ width: "100%" }}>
-      <ChatPresetsComponent className="imex-flex-row__margin" />
-      <ChatMediaSelector
-        conversation={conversation}
-        selectedMedia={selectedMedia}
-        setSelectedMedia={setSelectedMedia}
-      />
-      <span style={{ flex: 1 }}>
+    return (
+        <div className="imex-flex-row" style={{width: "100%"}}>
+            <ChatPresetsComponent className="imex-flex-row__margin"/>
+            <ChatMediaSelector
+                conversation={conversation}
+                selectedMedia={selectedMedia}
+                setSelectedMedia={setSelectedMedia}
+            />
+            <span style={{flex: 1}}>
         <Input.TextArea
-          className="imex-flex-row__margin imex-flex-row__grow"
-          allowClear
-          autoFocus
-          ref={inputArea}
-          autoSize={{ minRows: 1, maxRows: 4 }}
-          value={message}
-          disabled={isSending}
-          placeholder={t("messaging.labels.typeamessage")}
-          onChange={(e) => setMessage(e.target.value)}
-          onPressEnter={(event) => {
-            event.preventDefault();
-            if (!!!event.shiftKey) handleEnter();
-          }}
+            className="imex-flex-row__margin imex-flex-row__grow"
+            allowClear
+            autoFocus
+            ref={inputArea}
+            autoSize={{minRows: 1, maxRows: 4}}
+            value={message}
+            disabled={isSending}
+            placeholder={t("messaging.labels.typeamessage")}
+            onChange={(e) => setMessage(e.target.value)}
+            onPressEnter={(event) => {
+                event.preventDefault();
+                if (!!!event.shiftKey) handleEnter();
+            }}
         />
       </span>
-      <SendOutlined
-        className="imex-flex-row__margin"
-        //  disabled={message === "" || !message}
-        onClick={handleEnter}
-      />
-      <Spin
-        style={{ display: `${isSending ? "" : "none"}` }}
-        indicator={
-          <LoadingOutlined
-            style={{
-              fontSize: 24,
-            }}
-            spin
-          />
-        }
-      />
-    </div>
-  );
+            <SendOutlined
+                className="imex-flex-row__margin"
+                //  disabled={message === "" || !message}
+                onClick={handleEnter}
+            />
+            <Spin
+                style={{display: `${isSending ? "" : "none"}`}}
+                indicator={
+                    <LoadingOutlined
+                        style={{
+                            fontSize: 24,
+                        }}
+                        spin
+                    />
+                }
+            />
+        </div>
+    );
 }
+
 export default connect(
-  mapStateToProps,
-  mapDispatchToProps
+    mapStateToProps,
+    mapDispatchToProps
 )(ChatSendMessageComponent);