feat: search user

src/contexts/index.ts

@@ -14,4 +14,6 @@ export const UsersPageContext = createContext<UsersPageContextType>({
   setSearchingRole: () => {},
   loading: false,
   setLoading: () => {},
+  search: undefined,
+  setSearch: () => {},
 });

src/pages/users/components/UserList/UserList.tsx

@@ -16,7 +16,7 @@ type UserListPropsType = {
 
 const UserList: React.FC<UserListPropsType> = ({ users, pagination }) => {
   const { userStore } = useRootStore();
-  const { searchingRole, loading, setLoading } = useContext<UsersPageContextType>(UsersPageContext);
+  const { searchingRole, loading, setLoading, search } = useContext<UsersPageContextType>(UsersPageContext);
   const handleError = useErrorHandler();
   const pagesCount = Math.ceil(pagination.total / pagination.per_page);
 
@@ -27,6 +27,7 @@ const UserList: React.FC<UserListPropsType> = ({ users, pagination }) => {
         page: pagination.current_page + 1,
         limit: pagination.per_page,
         role: searchingRole,
+        search,
       });
     } catch (error: any) {
       handleError(error);
@@ -42,6 +43,7 @@ const UserList: React.FC<UserListPropsType> = ({ users, pagination }) => {
         page: pagination.current_page - 1,
         limit: pagination.per_page,
         role: searchingRole,
+        search,
       });
     } catch (error: any) {
       handleError(error);

src/pages/users/components/UserSearch/UserSearch.tsx

@@ -11,7 +11,8 @@ type SelectRoleStateType = UserRoleEnum | 'any';
 
 const UserSearch: React.FC = () => {
   const { userStore } = useRootStore();
-  const { searchingRole, setSearchingRole, setLoading } = useContext<UsersPageContextType>(UsersPageContext);
+  const { searchingRole, setSearchingRole, setLoading, search, setSearch } =
+    useContext<UsersPageContextType>(UsersPageContext);
   const { pagination } = userStore;
   const handleError = useErrorHandler();
 
@@ -25,6 +26,7 @@ const UserSearch: React.FC = () => {
         page: 1,
         limit: pagination.per_page,
         role: value,
+        search,
       });
       setSearchingRole(value);
     } catch (error) {
@@ -34,6 +36,24 @@ const UserSearch: React.FC = () => {
     }
   };
 
+  const onSearch: React.ChangeEventHandler<HTMLInputElement> | undefined = async e => {
+    try {
+      const value = e.target.value;
+      setLoading(true);
+      setSearch(value);
+      await userStore.loadUsersData({
+        page: 1,
+        limit: pagination.per_page,
+        role: searchingRole,
+        search: value,
+      });
+    } catch (error) {
+      handleError(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <Flex flexBasis='600px'>
       <Select value={searchingRole} onChange={onSearchRole} w='full' mr='2'>
@@ -44,7 +64,7 @@ const UserSearch: React.FC = () => {
       </Select>
       <InputGroup maxW='400px' w='full'>
         <InputLeftElement pointerEvents='none' children={<SearchIcon color='gray.300' />} />
-        <Input placeholder='Search for a user...' />
+        <Input placeholder='Search for a user...' value={search || ''} onChange={onSearch} />
       </InputGroup>
     </Flex>
   );

src/pages/users/index.tsx

@@ -36,6 +36,7 @@ const UsersPage: React.FC<IPageProps> = ({ title }) => {
   const { userStore } = useRootStore();
   const [searchingRole, setSearchingRole] = useState<SearchingRoleStateType>(undefined);
   const [loading, setLoading] = useState<boolean>(false);
+  const [search, setSearch] = useState<string | undefined>(undefined);
   const handleError = useErrorHandler();
   const location = useLocation();
 
@@ -44,7 +45,7 @@ const UsersPage: React.FC<IPageProps> = ({ title }) => {
   }, [handleError, userStore, location.search]);
 
   return (
-    <UsersPageContext.Provider value={{ searchingRole, setSearchingRole, loading, setLoading }}>
+    <UsersPageContext.Provider value={{ searchingRole, setSearchingRole, loading, setLoading, search, setSearch }}>
       <Box h='full'>
         <Heading as='h1'>User management</Heading>
         <Text mt='2'>You can add or delete your users on this page.</Text>

src/services/UserService.ts

@@ -3,7 +3,7 @@ import { IApiRespose, IMe, IUser, IUserContacts } from 'interfaces';
 import * as helpers from 'helpers';
 import { UserRoleEnum } from 'enums';
 
-export type FetchUsersParamsType = { page?: number; limit?: number; role?: UserRoleEnum | 'any' };
+export type FetchUsersParamsType = { page?: number; limit?: number; role?: UserRoleEnum | 'any'; search?: string };
 
 export default class UserService {
   public api: AxiosInstance;
@@ -18,12 +18,13 @@ export default class UserService {
   }
 
   public async fetchAll(params?: FetchUsersParamsType): Promise<IApiRespose<IUser[]>> {
-    const { page = 1, limit = 1, role } = params || {};
+    const { page = 1, limit = 1, role, search } = params || {};
     const result = await this.api.get('/v1/users', {
       params: {
         page,
         limit,
         role: role === 'any' ? undefined : role,
+        search: search || undefined,
       },
     });
     return result.data;

src/types/index.d.ts

@@ -41,9 +41,16 @@ export type UsersPageContextType = {
    */
   searchingRole: SearchingRoleStateType;
   setSearchingRole: React.Dispatch<React.SetStateAction<SearchingRoleStateType>>;
+
   /**
    * Set loading state while loading users
    */
   loading: boolean;
   setLoading: React.Dispatch<React.SetStateAction<boolean>>;
+
+  /**
+   * Serach user by fullname or email
+   */
+  search: string | undefined;
+  setSearch: React.Dispatch<React.SetStateAction<string | undefined>>;
 };