Chat Box UI

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

@@ -4,11 +4,13 @@ import { ChatState } from "../Context/ChatProvider";
 import SideDrawer from "../components/miscellaneous/SideDrawer";
 import MyChats from "../components/MyChats";
 import ChatBox from "../components/ChatBox";
+import { useState } from "react";
 
 
 const ChatPage = () => {
 
     const { user } = ChatState();
+    const [fetchAgain, setFetchAgain] = useState(false);
 
 
     return (
@@ -21,8 +23,10 @@ const ChatPage = () => {
                 height="91.5vh"
                 padding="10px"
             >
-                {user && <MyChats />}
-                {user && <ChatBox />}
+                {user && <MyChats fetchAgain={fetchAgain} />}
+                {user && (
+                    <ChatBox fetchAgain={fetchAgain} setFetchAgain={setFetchAgain} />
+                )}
 
             </Box>
         </div>

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

 import React from "react";
+import { ChatState } from "../Context/ChatProvider";
+import { Box } from "@chakra-ui/react";
+import SingleChat from "./SingleChat";
+
+
+const ChatBox = ({fetchAgain, setFetchAgain}) => {
+
+    const { selectedChat } = ChatState();
 
-const ChatBox = () => {
     return (
-        <div>ChatBox</div>
+        <Box
+            display={{ base: selectedChat ? "flex" : "none", md: "flex" }}
+            alignItems="center"
+            flexDir="column"
+            p={3}
+            bg="white"
+            w={{ base: "100%", md: "68%" }}
+            borderRadius="lg"
+            borderWidth="1px"
+        >
+            <SingleChat fetchAgain={fetchAgain} setFetchAgain={ setFetchAgain}/>
+        </Box>
     );
 };
 

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

@@ -7,7 +7,7 @@ import ChatLoading from "./ChatLoading";
 import { getSender } from "../config/ChatLogics";
 import GroupChatModal from "./miscellaneous/GroupChatModal";
 
-const MyChats = () => {
+const MyChats = ({fetchAgain}) => {
 
     const [loggedUser, setLoggedUser] = useState();
     const { user, selectedChat, setSelectedChat, chats, setChats } = ChatState();
@@ -42,7 +42,7 @@ const MyChats = () => {
     useEffect(() => {
         setLoggedUser(JSON.parse(localStorage.getItem("userInfo")));
         fetchChats();
-    },[])
+    }, [fetchAgain]);
 
     return (
         <Box

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

+import { Box, IconButton, Text } from "@chakra-ui/react";
+import React from "react";
+import { ChatState } from "../Context/ChatProvider";
+import { ArrowBackIcon } from "@chakra-ui/icons";
+import { getSender, getSenderFull } from "../config/ChatLogics";
+import ProfileModal from "./miscellaneous/ProfileModal";
+
+
+const SingleChat = ({ fetchAgain, setFetchAgain }) => {
+
+    const { user, selectedChat, setSelectedChat } = ChatState();
+
+    return (
+        <>
+        {selectedChat ? (
+                <>
+                    <Text
+                        fontSize={{ base: "28px", md: "30px" }}
+                        pb={3}
+                        px={2}
+                        w="100%"
+                        fontFamily="Work sans"
+                        display="flex"
+                        justifyContent={{ base: "space-between" }}
+                        alignItems="center"
+                    >
+                        <IconButton
+                            display={{ base: "flex", md: "none" }}
+                            icon={<ArrowBackIcon />}
+                            onClick={()=>setSelectedChat("")}
+                        />
+                        {!selectedChat.isGroupChat ? (
+                            <>
+                                {getSender(user, selectedChat.users)}
+                                <ProfileModal user={ getSenderFull(user, selectedChat.users)}/>
+                            </>
+                        ) : (
+                                <>
+                                    {selectedChat.chatName.toUpperCase()}
+                                   {/* <UpdateGroupChatModal
+                                        fetchAgain={fetchAgain}
+                                        setFetchAgain={setSelectedChat}
+                                    />*/ }
+                                </>
+                        )}
+                    </Text>
+                </>
+        ) : (
+                <Box display="flex" alignItems="center" justifyContent="center" height="100%">
+                    <Text fontSize="3xl" pb={3} fontFamily="Work sans" >
+                        Click on a user to start chatting
+                    </Text>  
+             </Box>   
+        )}
+    </>
+        );
+      
+    
+};
+
+export default SingleChat;
\ No newline at end of file

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

@@ -65,19 +65,19 @@ const GroupChatModal = ({ children }) => {
 
         try {
             const config = {
-                headers: {
-                    Authorization: `Bearer ${user.token}`,
+               headers: {
+                    Authorization : `Bearer ${user.token}`,
                 },
             };
 
             const { data } = await axios.post(
                 "/api/chat/group",
                 {
-                name: groupChatName,
-                users: JSON.stringify(selectedUsers.map((u) => u._id)),
-            },
-            config    
-            );
+                    name:groupChatName,
+                    users:JSON.stringify(selectedUsers.map((u) => u._id)),
+                },
+                config
+                );
 
             setChats([data, ...chats]);
             onClose();
@@ -178,7 +178,7 @@ const GroupChatModal = ({ children }) => {
           </ModalBody>
 
           <ModalFooter>
-            <Button colorScheme="blue"  onClick={handleSubmit}>
+            <Button onClick={handleSubmit} colorScheme="blue"  >
               Create Organization
             </Button>
           </ModalFooter>

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

 export const getSender = (loggedUser, users) => {
     return users[0]._id === loggedUser._id ? users[1].name : users[0].name;
 
+};
+
+export const getSenderFull = (loggedUser, users) => {
+    return users[0]._id === loggedUser._id ? users[1] : users[0];
+
 };
\ No newline at end of file