From 424b071eafb18d0eb14a00f62c59ab4ac4426cc2 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Wed, 4 May 2022 13:14:20 +0200
Subject: [PATCH] change(ui) - users list - search and pagination

---
 .../Users/components/UserList/UserList.tsx    | 67 +++++++++++--------
 .../components/UserListItem/UserListItem.tsx  |  2 +-
 frontend/app/mstore/userStore.ts              |  7 +-
 3 files changed, 46 insertions(+), 30 deletions(-)

diff --git a/frontend/app/components/Client/Users/components/UserList/UserList.tsx b/frontend/app/components/Client/Users/components/UserList/UserList.tsx
index c9c557b22..448e7c95e 100644
--- a/frontend/app/components/Client/Users/components/UserList/UserList.tsx
+++ b/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>
     ));
 }
 
diff --git a/frontend/app/components/Client/Users/components/UserListItem/UserListItem.tsx b/frontend/app/components/Client/Users/components/UserListItem/UserListItem.tsx
index ad991da9a..8d402ed47 100644
--- a/frontend/app/components/Client/Users/components/UserListItem/UserListItem.tsx
+++ b/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">
diff --git a/frontend/app/mstore/userStore.ts b/frontend/app/mstore/userStore.ts
index a0c004f82..170055412 100644
--- a/frontend/app/mstore/userStore.ts
+++ b/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 => {