import React, { useState, useContext } from "react"; import { Box, Input, InputGroup, IconButton } from "@chakra-ui/core"; import EmailContext from "../../context/email/emailContext"; const SearchBar = () => { const { getMessagesQuery, loading } = useContext(EmailContext); const [query, setQuery] = useState(""); const handleOnChange = (e) => setQuery(e.target.value); const handleQuery = (e) => { if (!query) return; if (e.keyCode === 13 || e.type === "click") getMessagesQuery(query); }; return ( <Box py='5px' bg='white' border='1px' borderColor='gray.200'> <InputGroup size='lg'> <IconButton icon='search' variant='ghost' variantColor='blue' marginLeft='5px' aria-label='Search messages' onClick={handleQuery} isLoading={loading} /> <Input type='text' placeholder='Search mail' borderWidth='0px' borderRadius='0px' focusBorderColor='white' value={query} onChange={handleOnChange} onKeyDown={handleQuery} /> </InputGroup> </Box> ); }; export default SearchBar;