change(ui) - users list - search and pagination

frontend/app/components/Client/Users/components/UserList/UserList.tsx

@@ -2,12 +2,24 @@ import { useStore } from 'App/mstore';
 import { useObserver } from 'mobx-react-lite';
 import React, { useEffect } from 'react';
 import UserListItem from '../UserListItem';
-import { sliceListPerPage } from 'App/utils';
-import { Pagination } from 'UI';
+import { sliceListPerPage, getRE } from 'App/utils';
+import { Pagination, NoContent, Loader } from 'UI';
 
 function UserList(props) {
     const { userStore } = useStore();
-    const list = useObserver(() => userStore.list);
+    const loading = useObserver(() => userStore.loading);
+    const users = useObserver(() => userStore.list);
+    const searchQuery = useObserver(() => userStore.searchQuery);
+
+    const filterList = (list) => {
+        const filterRE = getRE(searchQuery, 'i');
+        let _list = list.filter(w => {
+            return filterRE.test(w.email) || filterRE.test(w.roleName);
+        });
+        return _list
+    }
+    
+    const list: any = searchQuery !== '' ? filterList(users) : users;
     const length = list.length;
     
     useEffect(() => {
@@ -15,32 +27,33 @@ function UserList(props) {
     }, []);
 
     return useObserver(() => (
-        <div>
-             <div className="mt-3 rounded bg-white">
-                <div className="grid grid-cols-12 p-3 font-medium">
-                    <div className="col-span-5">Name</div>
-                    <div className="col-span-3">Role</div>
-                    <div className="col-span-"></div>
+        <Loader loading={loading}>
+            <NoContent show={!loading && length === 0}>
+                <div className="mt-3 rounded bg-white">
+                    <div className="grid grid-cols-12 p-3 border-b font-medium">
+                        <div className="col-span-5">Name</div>
+                        <div className="col-span-3">Role</div>
+                        <div className="col-span-"></div>
+                    </div>
+
+                    {sliceListPerPage(list, userStore.page - 1, userStore.pageSize).map((user: any) => (
+                        <div key={user.id} className="">
+                            <UserListItem user={user} />
+                        </div>
+                    ))}
                 </div>
 
-                {sliceListPerPage(list, userStore.page - 1, userStore.pageSize).map((user: any) => (
-                    <div key={user.id} className="">
-                        <UserListItem user={user} />
-                    </div>
-                ))}
-            </div>
-
-            <div className="w-full flex items-center justify-center py-6">
-                <Pagination
-                    page={userStore.page}
-                    totalPages={Math.ceil(length / userStore.pageSize)}
-                    onPageChange={(page) => userStore.updateKey('page', page)}
-                    limit={userStore.pageSize}
-                    debounceRequest={100}
-                />
-            </div>
-          
-        </div>
+                <div className="w-full flex items-center justify-center py-10">
+                    <Pagination
+                        page={userStore.page}
+                        totalPages={Math.ceil(length / userStore.pageSize)}
+                        onPageChange={(page) => userStore.updateKey('page', page)}
+                        limit={userStore.pageSize}
+                        debounceRequest={100}
+                    />
+                </div>
+            </NoContent>
+        </Loader>
     ));
 }
 

frontend/app/components/Client/Users/components/UserListItem/UserListItem.tsx

@@ -6,7 +6,7 @@ interface Props {
 function UserListItem(props: Props) {
     const { user } = props;
     return (
-        <div className="grid grid-cols-12 p-3 border-t select-none hover:bg-active-blue">
+        <div className="grid grid-cols-12 p-3 py-6 border-b select-none hover:bg-active-blue">
             <div className="col-span-5">{user.email}</div>
             <div className="col-span-3">
                 <span className="px-2 py-1 bg-gray-lightest rounded border color-teal text-sm capitalize">

frontend/app/mstore/userStore.ts

@@ -7,7 +7,7 @@ export default class UserStore {
     instance: IUser|null = null;
     loading: boolean = false;
     page: number = 1;
-    pageSize: number = 5;
+    pageSize: number = 10;
     searchQuery: string = "";
 
     constructor() {
@@ -20,6 +20,10 @@ export default class UserStore {
 
     updateKey(key: string, value: any) {
         this[key] = value
+
+        if (key === 'searchQuery') {
+            this.page = 1
+        }
     }
 
     updateUser(user: any) {
@@ -47,7 +51,6 @@ export default class UserStore {
         return new Promise((resolve, reject) => {
             userService.all()
                 .then(response => {
-                    console.log('list', response);
                     this.list = response.map(user => new User().fromJson(user));
                     resolve(response);
                 }).catch(error => {