Frontend Rendering all the chats

IT18021080/Telemedicine-Chat-App/frontend/src/Context/ChatProvider.js

@@ -6,7 +6,7 @@ const ChatContext = createContext();
 const ChatProvider = ({ children }) => {
     const [user, setUser] = useState();
     const [selectedChat, setSelectedChat] = useState();
-    const [chats, setChats] = useState();
+    const [chats, setChats] = useState([]);
 
     const history = useHistory();
 

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

-import React from "react";
+import { useToast } from "@chakra-ui/react";
+import axios from "axios";
+import React, { useEffect, useState } from "react";
+import { ChatState } from "../Context/ChatProvider";
+import { Box, Stack, Text } from "@chakra-ui/layout";
+import { Button } from "@chakra-ui/button";
+import { AddIcon } from "@chakra-ui/icons";
+import ChatLoading from "./ChatLoading";
+import { getSender } from "../config/ChatLogics";
+
 
 const MyChats = () => {
+
+    const [loggedUser, setLoggedUser] = useState();
+    const { selectedChat, setSelectedChat, user, chats, setChats } = ChatState();
+
+    const toast = useToast();
+
+    const fetchChats = async () => {
+        //console.log(user._id);
+        try {
+            const config = {
+                headers: {
+                    Authorization: `Bearer ${user.token}`,
+                },
+            };
+            const { data } = await axios.get("/api/chat", config);
+            console.log(data);
+            setChats(data); //setting all of the chats
+        } catch (error) {
+            toast({
+                title: "Error Occured!",
+                description: "Failed to Load the chats",
+                status: "error",
+                duration: 5000,
+                isClosable: true,
+                position: "bottom-left",
+                
+            });
+        }
+    };
+
+    useEffect(() => {
+        setLoggedUser(JSON.parse(localStorage.getItem("userInfo")));
+        fetchChats();
+    }, []);
+
     return (
-        <div>MyChats</div>
+        <Box
+            d={{ base: selectedChat ? "none" : "flex", md: "flex" }}
+            flexDir="column"
+            alignItems="center"
+            p={3}
+            bg="white"
+            w={{ base: "100%", md: "31%" }}
+            borderRadius="lg"
+            borderWidth="1px"
+        >
+            <Box
+                pb={3}
+                px={3}
+                fontSize={{ base: "28px", md: "30px" }}
+                fontFamily="Work sans"
+                d="flex"
+                w="100%"
+                justifyContent="space-between"
+                alignItems="center"
+            >
+                My Chats
+                <Button
+                    d="flex"
+                    fontSize={{ base: "17px", md: "10px", lg: "17px" }}
+                    rightIcon={<AddIcon/>}
+                >
+                    New Organization Chat  
+        
+                </Button>
+            </Box>
+            <Box
+                d="flex"
+                flexDir="column"
+                p={3}
+                bg="#F8F8F8"
+                w="100%"
+                h="100%"
+                borderRadius="lg"
+                overflowY="hidden"
+            >
+                {chats ? (
+                    <Stack overflowY="scroll">
+                        {chats.map((chat) => (
+                            <Box
+                                onClick={() => setSelectedChat(chat)}
+                                cursor="pointer"
+                                bg={selectedChat === chat ? "#38B2AC" : "#E8E8E8"}
+                                color={selectedChat === chat ? "white" : "black"}
+                                px={3}
+                                py={2}
+                                borderRadius="lg"
+                                key={chat._id}
+                            >
+                                <Text>
+                                    {!chat.isGroupChat
+                                        ? getSender(loggedUser, chat.users)
+                                        : chat.chatName}
+                                </Text>
+                            </Box>
+                        ))}
+
+                    </Stack>
+                ): (
+                        <ChatLoading/>
+                )}
+            </Box>
+
+        </Box>
     );
 };
 

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

@@ -14,6 +14,7 @@ import {
     DrawerBody,
     Input,
     useToast,
+    Spinner,
 } from "@chakra-ui/react";
 import React, { useState } from "react";
 import { BellIcon, ChevronDownIcon } from "@chakra-ui/icons";
@@ -94,6 +95,8 @@ const SideDrawer = () => {
             };
             const { data } = await axios.post("/api/chat", { userId }, config);
 
+            if (!chats.find((c) => c._id === data._id)) setChats([data, ...chats]); //normal find function in java scripts
+
             setSelectedChat(data);
             setLoadingChat(false);
             onClose();
@@ -195,7 +198,8 @@ const SideDrawer = () => {
                                     />
                                 ))
                             )
-                       }
+                        }
+                        {loadingChat && <Spinner ml="auto" d="flex" />}
                 </DrawerBody>
                 </DrawerContent>
                

IT18021080/Telemedicine-Chat-App/frontend/src/config/ChatLogics.js

+export const getSender = (loggedUser, users) => {
+
+    //if it is not a organization chat nelow logic will helpfull
+    return users[0]._id === loggedUser._id ? users[1].name : users[0].name;
+
+};
\ No newline at end of file