add filter to list

#69

src/components/Admin/Users/AllUsers.js

@@ -7,6 +7,7 @@ import Loading from '../../Loading';
 import usePostPatchPut from '../../../hooks/usePostPatchPut';
 import useFetch from '../../../hooks/useFetch';
 // import UsersColumns from './UsersColumns';
+import ListWithFilter from './ListWithFilter';
 import UserListItem from './UserListItem';
 import { status as statusConst, roles } from '../../../constants/users';
 
@@ -29,7 +30,7 @@ const filterUsersByStatus = (userStatus, users) => {
       return users.filter(el => el.status === statusConst.VERIFIED);
 
     case roles.SUPERUSER:
-      return users.filter(el => el.level === roles.SUPERUSER);
+      return users.filter(el => el.role === roles.SUPERUSER);
 
     default:
       return users;
@@ -42,16 +43,6 @@ const updateUsers = async () => {
   return request;
 };
 
-// create table friendly data sets
-// const createUserTable = arr =>
-//   arr.map(({ _id, name, email, role, status }) => ({
-//     key: _id,
-//     name,
-//     email,
-//     level: role,
-//     status,
-//   }));
-
 export default function AllUsers({ statusProp }) {
   // fetch users
   const [{ data: allUsers, isLoading }] = useFetch(
@@ -114,7 +105,7 @@ export default function AllUsers({ statusProp }) {
   return (
     <Fragment>
       {isLoading && <Loading />}
-      <List
+      <ListWithFilter
         dataSource={filterUsersByStatus(statusProp, users)}
         renderItem={UserListItem}
         pagination={{ position: 'bottom' }}

src/components/Admin/Users/ListWithFilter.js

@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react';
+import { List, Input } from 'antd';
+
+export default function ListWithFilter({ dataSource, renderItem, ...props }) {
+  const [searchText, setSearchText] = useState('');
+  const [filteredSource, setFilteredSource] = useState(dataSource);
+  useEffect(
+    () =>
+      dataSource &&
+      setFilteredSource(
+        dataSource.filter(
+          user =>
+            user.name.toLowerCase().includes(searchText.toLowerCase()) ||
+            user.email.toLowerCase().includes(searchText.toLowerCase())
+        )
+      ),
+    [dataSource, searchText]
+  );
+  return (
+    <div>
+      <Input
+        placeholder="Search by name or email"
+        allowClear
+        value={searchText}
+        onChange={e => setSearchText(e.target.value)}
+        style={{ marginTop: '1rem' }}
+      />
+      <List dataSource={filteredSource} renderItem={renderItem} {...props} />
+    </div>
+  );
+}