From f2fabec3d44bd17b11657690db92847f746b069c Mon Sep 17 00:00:00 2001
From: Roman-Ojha <razzroman98@gmail.com>
Date: Thu, 30 Jun 2022 20:04:35 +0545
Subject: [PATCH] fix(client): MessagePage SendMessageInputField js->ts

fixing #109
---
 ...putField.jsx => SendMessageInputField.tsx} | 51 ++++++++++---------
 1 file changed, 27 insertions(+), 24 deletions(-)
 rename client/src/components/MessagePage/{SendMessageInputField.jsx => SendMessageInputField.tsx} (70%)

diff --git a/client/src/components/MessagePage/SendMessageInputField.jsx b/client/src/components/MessagePage/SendMessageInputField.tsx
similarity index 70%
rename from client/src/components/MessagePage/SendMessageInputField.jsx
rename to client/src/components/MessagePage/SendMessageInputField.tsx
index ad5df80..045caa1 100644
--- a/client/src/components/MessagePage/SendMessageInputField.jsx
+++ b/client/src/components/MessagePage/SendMessageInputField.tsx
@@ -1,24 +1,30 @@
 import React, { useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import socket from "../../services/socket";
-import {
-  appendOnCurrentInnerUserMessage,
-  appendMessageOnMessageListAction,
-} from "../../services/redux-actions/index";
+// import {
+//   appendOnCurrentInnerUserMessage,
+//   appendMessageOnMessageListAction,
+// } from "../../services/redux-actions/index";
 import { Icon } from "@iconify/react";
 import { isEmptyString } from "../../funcs/isEmptyString";
 import { toastError } from "../../services/toast";
+import { AppState, actionCreators } from "../../services/redux";
+import { bindActionCreators } from "redux";
+import { AxiosError } from "axios";
 
-const SendMessageInputField = (props) => {
+const SendMessageInputField = (props): JSX.Element => {
   const dispatch = useDispatch();
   const userProfileDetailStore = useSelector(
-    (state) => state.setUserProfileDetailReducer
+    (state: AppState) => state.setUserProfileDetailReducer
   );
   const [userMessageField, setUserMessageField] = useState("");
   const currentMessageStore = useSelector(
-    (state) => state.setCurrentUserMessageReducer
+    (state: AppState) => state.setCurrentUserMessageReducer
   );
-  const sendMessage = async () => {
+  const { appendOnCurrentInnerUserMessage, appendMessageOnMessageListAction } =
+    bindActionCreators(actionCreators, dispatch);
+
+  const sendMessage = async (): Promise<void> => {
     // sending message to user
     try {
       if (isEmptyString(userMessageField)) {
@@ -38,26 +44,23 @@ const SendMessageInputField = (props) => {
       setUserMessageField("");
       socket.emit("send-message", resBody, (res) => {
         if (res.success !== false) {
-          dispatch(
-            appendOnCurrentInnerUserMessage({
+          appendOnCurrentInnerUserMessage({
+            ...res.msgInfo,
+            _id: `${Math.random()}`,
+          });
+          appendMessageOnMessageListAction({
+            msgInfo: {
               ...res.msgInfo,
               _id: `${Math.random()}`,
-            })
-          );
-          dispatch(
-            appendMessageOnMessageListAction({
-              msgInfo: {
-                ...res.msgInfo,
-                _id: `${Math.random()}`,
-              },
-              id: resBody.receiverId,
-              receiverPicture: props.receiverPicture,
-              messageToUserId: props.messageToUserId,
-            })
-          );
+            },
+            id: resBody.receiverId,
+            receiverPicture: props.receiverPicture,
+            messageToUserId: props.messageToUserId,
+          });
         }
       });
-    } catch (err) {
+    } catch (error) {
+      const err = error as AxiosError;
       if (err.response) {
         if (err.response.data.success === false) {
           toastError(err.response.data.msg);