Frontend Header with MyProfile/Logout Functions

IT18021080/Telemedicine-Chat-App/frontend/package-lock.json

@@ -8,6 +8,9 @@
       "name": "frontend",
       "version": "0.1.0",
       "dependencies": {
+        "@chakra-ui/button": "^1.5.10",
+        "@chakra-ui/icons": "^1.1.7",
+        "@chakra-ui/layout": "^1.8.0",
         "@chakra-ui/react": "^1.8.8",
         "@emotion/react": "^11.9.0",
         "@emotion/styled": "^11.8.1",
@@ -2171,6 +2174,19 @@
         "react": ">=16.8.6"
       }
     },
+    "node_modules/@chakra-ui/icons": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/icons/-/icons-1.1.7.tgz",
+      "integrity": "sha512-YIHxey/B4M2PyFASlHXtAWFyW+tsAtGAChOJ8dsM2kpu1MbVUqm/6nMI1KIFd7Te5IWuNYA75rAHBdLI0Yu61A==",
+      "dependencies": {
+        "@chakra-ui/icon": "2.0.5",
+        "@types/react": "^17.0.15"
+      },
+      "peerDependencies": {
+        "@chakra-ui/system": ">=1.0.0",
+        "react": ">=16.8.6"
+      }
+    },
     "node_modules/@chakra-ui/image": {
       "version": "1.1.10",
       "resolved": "https://registry.npmjs.org/@chakra-ui/image/-/image-1.1.10.tgz",
@@ -19114,6 +19130,15 @@
         "@chakra-ui/utils": "1.10.4"
       }
     },
+    "@chakra-ui/icons": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/icons/-/icons-1.1.7.tgz",
+      "integrity": "sha512-YIHxey/B4M2PyFASlHXtAWFyW+tsAtGAChOJ8dsM2kpu1MbVUqm/6nMI1KIFd7Te5IWuNYA75rAHBdLI0Yu61A==",
+      "requires": {
+        "@chakra-ui/icon": "2.0.5",
+        "@types/react": "^17.0.15"
+      }
+    },
     "@chakra-ui/image": {
       "version": "1.1.10",
       "resolved": "https://registry.npmjs.org/@chakra-ui/image/-/image-1.1.10.tgz",

IT18021080/Telemedicine-Chat-App/frontend/package.json

@@ -4,6 +4,9 @@
   "private": true,
   "proxy": "http://127.0.0.1:5000",
   "dependencies": {
+    "@chakra-ui/button": "^1.5.10",
+    "@chakra-ui/icons": "^1.1.7",
+    "@chakra-ui/layout": "^1.8.0",
     "@chakra-ui/react": "^1.8.8",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",

IT18021080/Telemedicine-Chat-App/frontend/public/index.html

@@ -15,6 +15,11 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
+          integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
+          crossorigin="anonymous"
+          referrerpolicy="no-referrer" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

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

+import { ViewIcon } from "@chakra-ui/icons";
+import { useDisclosure } from "@chakra-ui/react";
+import React from "react";
+import { IconButton } from "@chakra-ui/button";
+import { Modal } from "@chakra-ui/react";
+import { ModalOverlay } from "@chakra-ui/react";
+import { ModalContent } from "@chakra-ui/react";
+import { ModalHeader } from "@chakra-ui/react";
+import { ModalCloseButton } from "@chakra-ui/react";
+import { ModalBody } from "@chakra-ui/react";
+import { Button } from "@chakra-ui/button";
+import { ModalFooter } from "@chakra-ui/react";
+import { Image, Text } from "@chakra-ui/react";
+
+
+
+
+const ProfileModal = ({user, children}) => {
+
+    const { isOpen, onOpen, onClose } = useDisclosure();
+
+    return (
+        <>
+            {
+                children ? (<span onClick={onOpen}>{children}</span> 
+                ) : (
+                        <IconButton d={{ base: "flex" }} icon={<ViewIcon />} onClick={onOpen} />
+                )}
+        <Modal size="lg" isOpen={isOpen} onClose={onClose} isCentered>
+        <ModalOverlay />
+        <ModalContent h="410px">
+                    <ModalHeader
+                        fontSize="40px"
+                        fontFamily="Work sans"
+                        d="flex"
+                        justifyContent="center"
+                    
+                    >
+                        {user.name}</ModalHeader>
+          <ModalCloseButton />
+            <ModalBody
+                d="flex"
+                flexDir="column"
+                alignItems="center"
+                justifyContent="space-between"        
+            >
+             <Image
+                borderRadius="full" 
+                boxSize="150px"
+                src={user.pic}
+                alt={user.name}            
+             />
+            <Text
+                fontSize={{ base: "28px", md: "30px" }} 
+                fontFamily="Work sans"            
+            >
+              Email:{user.email}              
+            </Text>          
+            
+          </ModalBody>
+
+          <ModalFooter>
+            <Button colorScheme='blue' mr={3} onClick={onClose}>
+              Close
+            </Button>
+            
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+        
+        </>
+    );
+};
+
+export default ProfileModal;
\ No newline at end of file

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

-import React from "react";
+import { Tooltip, Menu, MenuButton, MenuList, Avatar, MenuItem, MenuDivider } from "@chakra-ui/react";
+import React, { useState } from "react";
+import { BellIcon, ChevronDownIcon } from "@chakra-ui/icons";
+import { Box, Text } from "@chakra-ui/layout";
+import { Button } from "@chakra-ui/button";
+import { ChatState } from "../../Context/ChatProvider";
+import ProfileModal from "./ProfileModal";
+import { useHistory } from "react-router-dom";
+
 
 const SideDrawer = () => {
+    const [search, setSearch] = useState("");
+    const [searchResult, setSearchResult] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [loadingChat, setLoadingChat] = useState();
+
+    const { user } = ChatState();
+    const history = useHistory();
+
+    const logoutHandler = () => {
+        localStorage.removeItem("userInfo");
+        history.push("/");
+    };
+
+
     return (
-        <div>SideDrawer</div>
+        <>
+            <Box
+                d="flex"
+                justifyContent="space-between"
+                alignItems="center"
+                bg="white"
+                w="100%"
+                p="5px 10px 5px 10px"
+                borderWidth="5px"
+            >
+                <Tooltip
+                    label="Search User to chat"
+                    hasArrow
+                    placement="bottom-end"
+                >
+                    <Button variant="ghost">
+                        <i class="fas fa-search"></i>
+                        <Text d={{base:"none",md:"flex"}} px="4">
+                            Search User
+                        </Text>
+                    </Button>
+                </Tooltip>
+
+                <Text fontSize="2xl" fontFamily="Work sans">
+                    Miner-Doc
+                </Text>
+                <div>
+                    <Menu>
+                        <MenuButton p={1}>
+                            <BellIcon fontSize="2xl" m={1}/>
+
+                        </MenuButton>
+                        {/*<MenuList></MenuList>*/}
+                    </Menu>
+                    <Menu>
+                        <MenuButton
+                            as={Button}
+                            rightIcon={<ChevronDownIcon />}>
+                            <Avatar
+                                size="sm"
+                                cursor="pointer"
+                                name={user.name}
+                                src={user.pic}
+                            />  
+                        </MenuButton>
+                        <MenuList>
+                            <ProfileModal user = {user}>
+                                <MenuItem>My Profile</MenuItem>
+                            </ProfileModal>
+                            <MenuDivider/>
+                            <MenuItem onClick={logoutHandler}>Logout</MenuItem>
+                        </MenuList>
+                    </Menu>
+                </div>
+        </Box>
+        </>
     );
 };