Send Message UI

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

-import { Box, IconButton, Text } from "@chakra-ui/react";
-import React from "react";
+import { Box, FormControl, IconButton, Input, Spinner, Text } 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";
@@ -9,8 +9,15 @@ import UpdateGroupChatModal from "./miscellaneous/UpdateGroupChatModal";
 
 const SingleChat = ({ fetchAgain, setFetchAgain }) => {
 
+    const [messages, setMessages] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [newMessage, setNewMessage] = useState();
+
     const { user, selectedChat, setSelectedChat } = ChatState();
 
+    const sendMessage = () => { };
+    const typingHandler = () => { };
+
     return (
         <>
         {selectedChat ? (
@@ -56,7 +63,27 @@ const SingleChat = ({ fetchAgain, setFetchAgain }) => {
                         borderRadius="lg"
                         overflowY="hidden"
                     >
-                        {/* Messages Here */}
+                        {loading ? (
+                            <Spinner
+                                size="xl"
+                                w={20}
+                                h={20}
+                                alignSelf="center"
+                                margin="auto"
+                            />
+                        ) : (
+                                <div>{/* Messages */ }</div>
+                        )}
+
+                        <FormControl onKeyDown={sendMessage} isRequired mt={3}>
+                            <Input
+                                variant="filled"
+                                bg="E0E0E0"
+                                placeholder="Enter a message.."
+                                onChange={typingHandler}
+                                value={newMessage}
+                            />
+                        </FormControl>
                     </Box>
                 </>
         ) : (