feature/IO-3000-Migrate-MSG-to-Sockets - Progress Checkpoint

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

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

@@ -1,55 +1,66 @@
 import { LoadingOutlined, SendOutlined } from "@ant-design/icons";
 import { Input, Spin } from "antd";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useContext, 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 { setMessage } from "../../redux/messaging/messaging.actions";
 import { selectIsSending, selectMessage } from "../../redux/messaging/messaging.selectors";
-import { selectBodyshop } from "../../redux/user/user.selectors";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import ChatMediaSelector from "../chat-media-selector/chat-media-selector.component";
 import ChatPresetsComponent from "../chat-presets/chat-presets.component";
+import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   isSending: selectIsSending,
-  message: selectMessage
+  message: selectMessage,
+  user: selectCurrentUser
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  sendMessage: (message) => dispatch(sendMessage(message)),
   setMessage: (message) => dispatch(setMessage(message))
 });
 
-function ChatSendMessageComponent({ conversation, bodyshop, sendMessage, isSending, message, setMessage }) {
+function ChatSendMessageComponent({ conversation, bodyshop, isSending, message, setMessage, user }) {
+  const { socket } = useContext(SocketContext); // Access WebSocket instance
   const inputArea = useRef(null);
   const [selectedMedia, setSelectedMedia] = useState([]);
+  const { t } = useTranslation();
+
   useEffect(() => {
     inputArea.current.focus();
   }, [isSending, setMessage]);
 
-  const { t } = useTranslation();
-
   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({
+      const messageData = {
+        user,
         to: conversation.phone_num,
         body: message || "",
         messagingServiceSid: bodyshop.messagingservicesid,
         conversationid: conversation.id,
         selectedMedia: selectedImages,
         imexshopid: bodyshop.imexshopid
-      });
+      };
+
+      // Emit the send-message event via WebSocket
+      socket.emit("send-message", messageData);
+
       setSelectedMedia(
         selectedMedia.map((i) => {
           return { ...i, isSelected: false };
         })
       );
+
+      // Optionally clear the input message
+      setMessage("");
     }
   };
 
@@ -74,15 +85,11 @@ function ChatSendMessageComponent({ conversation, bodyshop, sendMessage, isSendi
           onChange={(e) => setMessage(e.target.value)}
           onPressEnter={(event) => {
             event.preventDefault();
-            if (!!!event.shiftKey) handleEnter();
+            if (!event.shiftKey) handleEnter();
           }}
         />
       </span>
-      <SendOutlined
-        className="imex-flex-row__margin"
-        //  disabled={message === "" || !message}
-        onClick={handleEnter}
-      />
+      <SendOutlined className="imex-flex-row__margin" onClick={handleEnter} />
       <Spin
         style={{ display: `${isSending ? "" : "none"}` }}
         indicator={