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>
-            {chats.map((chat) => (
-                <div key={chat._id}>{chat.chatName}</div>))}
+        <div style={{ width: "100%" }}>
+         {user && <SideDrawer/>}
+            <Box
+                d="flex"
+                justifyContent="space-between"
+                w="100%"
+                h="91.5vh"
+                p="10px"
+            
+            >
+            
+            {user && <MyChats/>} 
+            {user && <ChatBox/>} 
+            
+        </Box>
         </div>
     );
-}
+    
+};
 
-export default ChatPage
+export default ChatPage;
\ No newline at end of file

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

@@ -18,10 +18,10 @@ const Homepage = () => {
 
     const history = useHistory();
 
-     useEffect(() => {
+    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");
         
@@ -51,23 +51,23 @@ const Homepage = () => {
                 borderWidth="1px"
             >
 
-        <Tabs variant='soft-rounded' colorScheme='green'>
-            <TabList mb="1em">
-                <Tab width="50%">Login</Tab>
-                <Tab width="50%">Sign Up</Tab>
-            </TabList>
-             <TabPanels>
+                <Tabs variant='soft-rounded' colorScheme='green'>
+                    <TabList mb="1em">
+                        <Tab width="50%">Login</Tab>
+                        <Tab width="50%">Sign Up</Tab>
+                    </TabList>
+                    <TabPanels>
                         <TabPanel>
                             <Login />
                         </TabPanel>
                         <TabPanel>
                             <Signup />
                         </TabPanel>
-            </TabPanels>
-        </Tabs>
+                    </TabPanels>
+                </Tabs>
             </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