Commit 53384998 authored by Balasuriya D.A.M.'s avatar Balasuriya D.A.M.

Frontend Search User Side Drawer

parent db76585a
...@@ -5,6 +5,8 @@ const ChatContext = createContext(); ...@@ -5,6 +5,8 @@ const ChatContext = createContext();
const ChatProvider = ({ children }) => { const ChatProvider = ({ children }) => {
const [user, setUser] = useState(); const [user, setUser] = useState();
const [selectedChat, setSelectedChat] = useState();
const [chats, setChats] = useState();
const history = useHistory(); const history = useHistory();
...@@ -20,7 +22,8 @@ const ChatProvider = ({ children }) => { ...@@ -20,7 +22,8 @@ const ChatProvider = ({ children }) => {
}, [history]); }, [history]);
return ( return (
<ChatContext.Provider value={{ user, setUser }}> <ChatContext.Provider value={{ user, setUser, selectedChat, setSelectedChat, chats, setChats }}
>
{children} {children}
</ChatContext.Provider> </ChatContext.Provider>
); );
......
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
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
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 React, { useState } from "react";
import { BellIcon, ChevronDownIcon } from "@chakra-ui/icons"; import { BellIcon, ChevronDownIcon } from "@chakra-ui/icons";
import { Box, Text } from "@chakra-ui/layout"; import { Box, Text } from "@chakra-ui/layout";
...@@ -6,6 +22,10 @@ import { Button } from "@chakra-ui/button"; ...@@ -6,6 +22,10 @@ import { Button } from "@chakra-ui/button";
import { ChatState } from "../../Context/ChatProvider"; import { ChatState } from "../../Context/ChatProvider";
import ProfileModal from "./ProfileModal"; import ProfileModal from "./ProfileModal";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import axios from "axios";
import ChatLoading from "../ChatLoading";
import UserListItem from "../UserAvatar/UserListItem";
const SideDrawer = () => { const SideDrawer = () => {
...@@ -14,14 +34,81 @@ const SideDrawer = () => { ...@@ -14,14 +34,81 @@ const SideDrawer = () => {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [loadingChat, setLoadingChat] = useState(); const [loadingChat, setLoadingChat] = useState();
const { user } = ChatState(); const { user, setSelectedChat,chats,setChats } = ChatState();
const history = useHistory(); const history = useHistory();
const { isOpen, onOpen, onClose } = useDisclosure();
const logoutHandler = () => { const logoutHandler = () => {
localStorage.removeItem("userInfo"); localStorage.removeItem("userInfo");
history.push("/"); 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 ( return (
<> <>
...@@ -39,7 +126,7 @@ const SideDrawer = () => { ...@@ -39,7 +126,7 @@ const SideDrawer = () => {
hasArrow hasArrow
placement="bottom-end" placement="bottom-end"
> >
<Button variant="ghost"> <Button variant="ghost" onClick={onOpen}>
<i class="fas fa-search"></i> <i class="fas fa-search"></i>
<Text d={{base:"none",md:"flex"}} px="4"> <Text d={{base:"none",md:"flex"}} px="4">
Search User Search User
...@@ -79,6 +166,40 @@ const SideDrawer = () => { ...@@ -79,6 +166,40 @@ const SideDrawer = () => {
</Menu> </Menu>
</div> </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>
</> </>
); );
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment