Frontend Search User Side Drawer

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

@@ -5,6 +5,8 @@ const ChatContext = createContext();
 
 const ChatProvider = ({ children }) => {
     const [user, setUser] = useState();
+    const [selectedChat, setSelectedChat] = useState();
+    const [chats, setChats] = useState();
 
     const history = useHistory();
 
@@ -20,7 +22,8 @@ const ChatProvider = ({ children }) => {
     }, [history]);
 
     return (
-        <ChatContext.Provider value={{ user, setUser }}>
+        <ChatContext.Provider value={{ user, setUser, selectedChat, setSelectedChat, chats, setChats }}
+        >
         {children}
     </ChatContext.Provider>
     );

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

+import { Stack } from "@chakra-ui/layout";
+import { Skeleton } from "@chakra-ui/react";
+import React from "react";
+
+const ChatLoading = () => {
+    return (
+        <Stack>
+            <Skeleton height="45px" />
+            <Skeleton height="45px" />
+            <Skeleton height="45px" />
+            <Skeleton height="45px" />
+            <Skeleton height="45px" />
+            <Skeleton height="45px" />
+            <Skeleton height="45px" />
+            <Skeleton height="45px" />
+            <Skeleton height="45px" />
+            <Skeleton height="45px" />
+            <Skeleton height="45px" />
+            <Skeleton height="45px" />
+        </Stack>
+    );
+};
+
+export default ChatLoading;
\ No newline at end of file

IT18021080/Telemedicine-Chat-App/frontend/src/components/UserAvatar/UserListItem.js

+import { Box, Text } from "@chakra-ui/layout";
+import { Avatar } from "@chakra-ui/react";
+import React from "react";
+
+
+
+const UserListItem = ({user, handleFunction }) => {
+
+    
+    
+    return (
+        <Box
+            onClick={handleFunction}
+            cursor="pointer"
+            bg="#E8E8E8"
+            _hover={{
+                background: "#38BAC",
+                color:"white",
+            }}
+            w="100%"
+            d="flex"
+            alignItems="center"
+            color="black"
+            px={3}
+            py={2}
+            mb={2}
+            borderRadius="lg"
+        >
+            <Avatar
+                mr={2}
+                size="sm"
+                cursor="pointer"
+                name={user.name}
+                src={user.pic}
+                
+            />
+            <Box>
+                <Text>{user.name}</Text>
+                <Text fontSize="xs">
+                    <b>Email:</b>
+                    {user.email}
+
+                </Text>
+            </Box>
+
+        </Box>
+    );
+};
+
+export default UserListItem;
\ No newline at end of file

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

-import { Tooltip, Menu, MenuButton, MenuList, Avatar, MenuItem, MenuDivider } from "@chakra-ui/react";
+import {
+    Tooltip,
+    Menu,
+    MenuButton,
+    MenuList,
+    Avatar,
+    MenuItem,
+    MenuDivider,
+    Drawer,
+    useDisclosure,
+    DrawerOverlay,
+    DrawerContent,
+    DrawerHeader,
+    DrawerBody,
+    Input,
+    useToast,
+} from "@chakra-ui/react";
 import React, { useState } from "react";
 import { BellIcon, ChevronDownIcon } from "@chakra-ui/icons";
 import { Box, Text } from "@chakra-ui/layout";
@@ -6,6 +22,10 @@ import { Button } from "@chakra-ui/button";
 import { ChatState } from "../../Context/ChatProvider";
 import ProfileModal from "./ProfileModal";
 import { useHistory } from "react-router-dom";
+import axios from "axios";
+import ChatLoading from "../ChatLoading";
+import UserListItem from "../UserAvatar/UserListItem";
+
 
 
 const SideDrawer = () => {
@@ -14,14 +34,81 @@ const SideDrawer = () => {
     const [loading, setLoading] = useState(false);
     const [loadingChat, setLoadingChat] = useState();
 
-    const { user } = ChatState();
+    const { user, setSelectedChat,chats,setChats } = ChatState();
     const history = useHistory();
+    const { isOpen, onOpen, onClose } = useDisclosure();
 
     const logoutHandler = () => {
         localStorage.removeItem("userInfo");
         history.push("/");
     };
 
+    const toast = useToast();
+
+    const handleSearch = async () => { 
+        if (!search) {
+            toast({
+                title: "Please Enter something in search",
+                status: "warning",
+                duration: 5000,
+                isClosable: true,
+                position: "top-left",
+            });
+            return;
+        }
+
+        try {
+            setLoading(true)
+
+            const config = {
+                headers: {
+                    Authorization: `Bearer ${user.token}`,
+                },
+            };
+
+            const { data } = await axios.get(`/api/user?search=${search}`, config);
+
+            setLoading(false);
+            setSearchResult(data);
+        } catch (error) {
+            toast({
+                title: "Error Occured!",
+                description: "Failed to Load the Search Results",
+                status: "error",
+                duration: 5000,
+                isClosable: true,
+                position: "bottom-left",
+            });
+        }
+    };
+
+    const accessChat = async (userId) => {
+        try {
+            setLoadingChat(true);
+
+            const config = {
+                headers: {
+                    "Content-type": "application/json",
+                    Authorization: `Bearer ${user.token}`,
+                },
+            };
+            const { data } = await axios.post("/api/chat", { userId }, config);
+
+            setSelectedChat(data);
+            setLoadingChat(false);
+            onClose();
+        } catch (error) {
+            toast({
+                title: "Error fetching the chat",
+                description: error.message,
+                status: "error",
+                duration: 5000,
+                isClosable: true,
+                position: "bottom-left",
+            });
+        }
+    };
+
 
     return (
         <>
@@ -39,7 +126,7 @@ const SideDrawer = () => {
                     hasArrow
                     placement="bottom-end"
                 >
-                    <Button variant="ghost">
+                    <Button variant="ghost" onClick={onOpen}>
                         <i class="fas fa-search"></i>
                         <Text d={{base:"none",md:"flex"}} px="4">
                             Search User
@@ -78,7 +165,41 @@ const SideDrawer = () => {
                         </MenuList>
                     </Menu>
                 </div>
-        </Box>
+            </Box>
+            
+            <Drawer placement="left" onClose={onClose} isOpen={isOpen}>
+                <DrawerOverlay />
+                <DrawerContent>
+                    <DrawerHeader borderBottomWidth="1px">Search User</DrawerHeader>
+                     <DrawerBody>
+                    <Box d="flex" pb={2}>
+                        <Input
+                            placeholder="Search by name or email"
+                            mr={2}
+                            value={search}
+                            onChange={(e) => setSearch(e.target.value)}
+                        />
+                        <Button
+                            onClick={handleSearch}
+                        >
+                            Go
+                        </Button>
+                        </Box>
+                        {loading ? <ChatLoading /> :
+                            (
+                                searchResult?.map(user => (
+                                    <UserListItem
+                                        key={user._id}
+                                        user={user}
+                                        handleFunction={() => accessChat(user._id)}
+                                    />
+                                ))
+                            )
+                       }
+                </DrawerBody>
+                </DrawerContent>
+               
+            </Drawer>
         </>
     );
 };