Chats Page Side Drawer Frontend 1st step

IT18021080/Telemedicine-Chat-App/frontend/src/Pages/ChatPage.js

-import React from "react";
-import axios from "axios";
-import { useEffect, useState } from "react";
+import { Box } from "@chakra-ui/react";
+import { ChatState } from "../Context/ChatProvider";
+import SideDrawer from "../components/miscellaneous/SideDrawer";
+import MyChats from "../components/MyChats";
+import ChatBox from "../components/ChatBox";
 
 const ChatPage = () => {
-const [chats, setsChats] = useState([])
 
-    const fetchChats = async () => {
-        const { data } = await axios.get("/api/chat");
-
-        setsChats(data);
-
-    };
-
-    useEffect(() => {
-        fetchChats();
-    
-    }, []);
+    const { user } = ChatState();
 
+    return (
+        <div style={{ width: "100%" }}>
+         {user && <SideDrawer/>}
+            <Box
+                d="flex"
+                justifyContent="space-between"
+                w="100%"
+                h="91.5vh"
+                p="10px"
             
+            >
             
+            {user && <MyChats/>} 
+            {user && <ChatBox/>} 
             
-    return (
-        <div>
-            {chats.map((chat) => (
-                <div key={chat._id}>{chat.chatName}</div>))}
+        </Box>
         </div>
     );
-}
     
-export default ChatPage
\ No newline at end of file
+};
+
+export default ChatPage;
\ No newline at end of file

IT18021080/Telemedicine-Chat-App/frontend/src/Pages/Homepage.js

@@ -21,7 +21,7 @@ const Homepage = () => {
     useEffect(() => {
         const user = JSON.parse(localStorage.getItem("userInfo"));
         
-        //check if user is loged in
+        //check if user is loged in push back to the chat page
 
         if (user) history.push("/chats");
         
@@ -68,6 +68,6 @@ const Homepage = () => {
             </Box>
         </Container>
     );
-}
+};
 
 export default Homepage;
\ No newline at end of file

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

+import React from "react";
+
+const ChatBox = () => {
+    return (
+        <div>ChatBox</div>
+    );
+};
+
+export default ChatBox;
\ No newline at end of file

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

+import React from "react";
+
+const MyChats = () => {
+    return (
+        <div>MyChats</div>
+    );
+};
+
+export default MyChats;
\ No newline at end of file

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

+import React from "react";
+
+const SideDrawer = () => {
+    return (
+        <div>SideDrawer</div>
+    );
+};
+
+export default SideDrawer;
\ No newline at end of file