Fecth All Messages

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

 import { Box, FormControl, IconButton, Input, Spinner, Text, useToast } from "@chakra-ui/react";
-import React, { useState } from "react";
+import React, { useEffect, 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";
+import "./styles.css";
 
 
 const SingleChat = ({ fetchAgain, setFetchAgain }) => {
@@ -17,6 +18,43 @@ const SingleChat = ({ fetchAgain, setFetchAgain }) => {
     const toast = useToast();
     const { user, selectedChat, setSelectedChat } = ChatState();
 
+    const fetchMessages = async () => {
+        if (!selectedChat) return;
+
+        try {
+            const config = {
+                headers: {
+                    Authorization: `Bearer ${user.token}`,
+                },
+            };
+
+            setLoading(true);
+
+            const { data } = await axios.get(
+                `/api/message/${selectedChat._id}`,
+                config
+            );
+
+            console.log(messages);
+            setMessages(data);
+            setLoading(false);
+
+        } catch (error) {
+            toast({
+                title: "Error Occured!",
+                description: "Failed to Load the Messages",
+                status: "error",
+                duration: 5000,
+                isClosable: true,
+                position: "bottom",
+            });
+        }
+    };
+
+    useEffect(() => {
+        fetchMessages();
+    }, [selectedChat]);
+
     const sendMessage = async(event) => { 
         if (event.key === "Enter" && newMessage) {
             try {
@@ -91,6 +129,7 @@ const SingleChat = ({ fetchAgain, setFetchAgain }) => {
                                    <UpdateGroupChatModal
                                         fetchAgain={fetchAgain}
                                         setFetchAgain={setFetchAgain}
+                                        fetchMessages={fetchMessages}
                                     />
                                 </>
                         )}
@@ -115,7 +154,7 @@ const SingleChat = ({ fetchAgain, setFetchAgain }) => {
                                 margin="auto"
                             />
                         ) : (
-                                <div>{/* Messages */ }</div>
+                                <div className="messages">{/* Messages */ }</div>
                         )}
 
                         <FormControl onKeyDown={sendMessage} isRequired mt={3}>

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

@@ -6,7 +6,7 @@ import UserBadgeItem from "../UserAvatar/UserBadgeItem";
 import axios from "axios";
 import UserListItem from "../UserAvatar/UserListItem";
 
-const UpdateGroupChatModal = ({ fetchAgain, setFetchAgain }) => {
+const UpdateGroupChatModal = ({ fetchAgain, setFetchAgain, fetchMessages }) => {
 
     const { isOpen, onOpen, onClose } = useDisclosure();
     const [groupChatName, setGroupChatName] = useState();
@@ -113,6 +113,7 @@ const UpdateGroupChatModal = ({ fetchAgain, setFetchAgain }) => {
 
             user1._id === user._id ? setSelectedChat() : setSelectedChat(data);
             setFetchAgain(!fetchAgain);
+            fetchMessages();
             setLoading(false);
 
         } catch (error) {

IT18021080/Telemedicine-Chat-App/frontend/src/components/styles.css

+.messages{
+    display: flex;
+    flex-direction: column;
+    overflow-y: scroll;
+    scrollbar-width: none;
+}
\ No newline at end of file

IT18021080/Telemedicine-Chat-App/frontend/src/index.js

@@ -10,15 +10,17 @@ import ChatProvider from "./Context/ChatProvider";
 
 
 ReactDOM.render(
-  <ChatProvider>
+  
+  <BrowserRouter>
+   <ChatProvider>
  
-    <BrowserRouter>
+    
     <ChakraProvider>
       <App />
     </ChakraProvider>
-    </BrowserRouter>
     
-  </ChatProvider>,
+    </ChatProvider>
+  </BrowserRouter>,
   document.getElementById("root")
 );