Send Messages Logic FrontEnd

IT18021080/Telemedicine-Chat-App/frontend/src/components/SingleChat.js

-import { Box, FormControl, IconButton, Input, Spinner, Text } from "@chakra-ui/react";
+import { Box, FormControl, IconButton, Input, Spinner, Text, useToast } from "@chakra-ui/react";
 import React, { useState } from "react";
 import { ChatState } from "../Context/ChatProvider";
 import { ArrowBackIcon } from "@chakra-ui/icons";
 import { getSender, getSenderFull } from "../config/ChatLogics";
 import ProfileModal from "./miscellaneous/ProfileModal";
 import UpdateGroupChatModal from "./miscellaneous/UpdateGroupChatModal";
+import axios from "axios";
 
 
 const SingleChat = ({ fetchAgain, setFetchAgain }) => {
@@ -13,10 +14,52 @@ const SingleChat = ({ fetchAgain, setFetchAgain }) => {
     const [loading, setLoading] = useState(false);
     const [newMessage, setNewMessage] = useState();
 
+    const toast = useToast();
     const { user, selectedChat, setSelectedChat } = ChatState();
 
-    const sendMessage = () => { };
-    const typingHandler = () => { };
+    const sendMessage = async(event) => { 
+        if (event.key === "Enter" && newMessage) {
+            try {
+                const config = {
+                    headers: {
+                        "Content-Type": "application/json",
+                        Authorization: `Bearer ${user.token}`,
+                        
+                    },
+                };
+
+                setNewMessage("");
+                const { data } = await axios.post(
+                    "/api/message",
+                    {
+                        content: newMessage,
+                        chatId: selectedChat._id,
+                    },
+                    config
+                );
+
+                console.log(data);
+
+                
+                setMessages([...messages, data]);
+            } catch (error) {
+                toast({
+                    title: "Error Occured!",
+                    description: "Failed to send the Message",
+                    status: "error",
+                    duration: 5000,
+                    isClosable: true,
+                    position: "bottom",
+                });
+            }
+        }
+    };
+
+    const typingHandler = (e) => { 
+        setNewMessage(e.target.value);
+
+        //Typing Indicator Logic
+    };
 
     return (
         <>

IT18021080/Telemedicine-Chat-App/frontend/src/components/miscellaneous/GroupChatModal.js

@@ -36,7 +36,7 @@ const GroupChatModal = ({ children }) => {
             };
 
             const { data } = await axios.get(`/api/user?search=${search}`, config);
-            console.log(data);
+            
             setLoading(false);
             setSearchResult(data);
         } catch (error) {