handle search in sidebar

This commit is contained in:
Mikhail Mikheev 2019-09-18 13:36:21 +04:00
parent 3fa4f5ce64
commit 64e5e55199
2 changed files with 29 additions and 5 deletions

View File

@ -19,6 +19,7 @@ import { SAFELIST_ADDRESS } from '~/routes/routes'
type SafeListProps = {
safes: List<Safe>,
onSafeClick: Function,
}
const useStyles = makeStyles({
@ -38,14 +39,14 @@ const useStyles = makeStyles({
},
})
const SafeList = ({ safes }: SafeListProps) => {
const SafeList = ({ safes, onSafeClick }: SafeListProps) => {
const classes = useStyles()
return (
<MuiList>
{safes.map((safe) => (
<React.Fragment key={safe.address}>
<Link to={`${SAFELIST_ADDRESS}/${safe.address}`}>
<Link to={`${SAFELIST_ADDRESS}/${safe.address}`} onClick={onSafeClick}>
<ListItem classes={{ root: classes.listItemRoot }}>
<ListItemIcon>
<Identicon address={safe.address} diameter={32} className={classes.icon} />

View File

@ -33,8 +33,15 @@ type SidebarProps = {
safes: List<Safe>,
}
const filterBy = (filter: string, safes: List<Safe>): List<Safe> => safes.filter(
(safe: Safe) => !filter
|| safe.address.toLowerCase().includes(filter.toLowerCase())
|| safe.name.toLowerCase().includes(filter.toLowerCase()),
)
const Sidebar = ({ children, safes }: SidebarProps) => {
const [isOpen, setIsOpen] = useState<boolean>(false)
const [filter, setFilter] = useState<string>('')
const classes = useSidebarStyles()
const searchClasses = {
@ -48,12 +55,22 @@ const Sidebar = ({ children, safes }: SidebarProps) => {
setIsOpen((prevIsOpen) => !prevIsOpen)
}
const handleEsc = (e: React.KeyboardEvent) => {
const handleFilterChange = (value: string) => {
setFilter(value)
}
const handleFilterCancel = () => {
setFilter('')
}
const handleEsc = (e: SyntheticKeyboardEvent<*>) => {
if (e.keyCode === 27) {
toggleSidebar()
}
}
const filteredSafes = filterBy(filter, safes)
return (
<SidebarContext.Provider value={{ isOpen, toggleSidebar }}>
<ClickAwayListener onClickAway={toggleSidebar}>
@ -67,7 +84,13 @@ const Sidebar = ({ children, safes }: SidebarProps) => {
<div className={classes.headerPlaceholder} />
<Row align="center">
<SearchIcon className={classes.searchIcon} />
<SearchBar classes={searchClasses} placeholder="Search by name or address" searchIcon={<div />} />
<SearchBar
classes={searchClasses}
placeholder="Search by name or address"
searchIcon={<div />}
onChange={handleFilterChange}
onCancelSearch={handleFilterCancel}
/>
<Spacer />
<Divider />
<Spacer />
@ -77,7 +100,7 @@ const Sidebar = ({ children, safes }: SidebarProps) => {
<Spacer />
</Row>
<Hairline />
<SafeList safes={safes} />
<SafeList safes={filteredSafes} onSafeClick={toggleSidebar} />
</Drawer>
</ClickAwayListener>
{children}