handle search in sidebar

src/components/Sidebar/SafeList.jsx

@@ -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} />

src/components/Sidebar/index.jsx

@@ -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}