feat: frontend done for search user (#707)

xgeekshq · Dec 19, 2022 · ec36c98 · ec36c98
1 parent cc73496
commit ec36c98
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 19 deletions.
diff --git a/frontend/src/api/userService.tsx b/frontend/src/api/userService.tsx
@@ -8,9 +8,13 @@ export const getAllUsers = (context?: GetServerSidePropsContext): Promise<User[]
 
 export const getAllUsersWithTeams = (
   pageParam: number,
+  searchUser?: string,
   context?: GetServerSidePropsContext,
 ): Promise<{ userWithTeams: UserWithTeams[]; hasNextPage: boolean; page: number }> =>
-  fetchData(`/users/teams?page=${pageParam ?? 0}`, { context, serverSide: !!context });
+  fetchData(`/users/teams?page=${pageParam ?? 0}&searchUser=${searchUser ?? ''}`, {
+    context,
+    serverSide: !!context,
+  });
 
 export const updateUserIsAdminRequest = (user: UpdateUserIsAdmin): Promise<User> =>
   fetchData(`/users/sadmin/`, { method: 'PUT', data: user });

diff --git a/frontend/src/components/Users/UsersList/partials/CardUser/EditUser.tsx b/frontend/src/components/Users/UsersList/partials/CardUser/EditUser.tsx
@@ -1,26 +1,27 @@
 import Icon from '@/components/icons/Icon';
 import Flex from '@/components/Primitives/Flex';
-import Tooltip from '@/components/Primitives/Tooltip';
 import { User } from '@/types/user/user';
 import Link from 'next/link';
 
 type EditUserProps = { user: User };
 
 const EditUser: React.FC<EditUserProps> = ({ user }) => (
-  <Tooltip content="Edit User">
-    <Flex pointer>
-      <Link href={`/users/${user._id}`}>
-        <Icon
-          name="edit"
-          css={{
-            color: '$primary400',
-            width: '$20',
-            height: '$20',
-          }}
-        />
-      </Link>
-    </Flex>
-  </Tooltip>
+  <Flex pointer>
+    <Link href={`/users/${user._id}`}>
+      <Icon
+        name="edit"
+        css={{
+          color: '$primary400',
+          width: '$20',
+          height: '$20',
+          '&:hover': {
+            backgroundColor: '#d7e0e0',
+            borderRadius: '1em',
+          },
+        }}
+      />
+    </Link>
+  </Flex>
 );
 
 export default EditUser;
diff --git a/frontend/src/components/Users/UsersList/partials/ListOfCards/index.tsx b/frontend/src/components/Users/UsersList/partials/ListOfCards/index.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useRef } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 import { DotsLoading } from '@/components/loadings/DotsLoading';
 import Flex from '@/components/Primitives/Flex';
@@ -18,10 +18,11 @@ const ListOfCards = React.memo(() => {
   const setToastState = useSetRecoilState(toastState);
   // const setUsersWithTeamsState = useSetRecoilState(usersWithTeamsState);
   const scrollRef = useRef<HTMLDivElement>(null);
+  const [search, setSearch] = useState<string>('');
 
   const fetchUsers = useInfiniteQuery(
     'usersWithTeams',
-    ({ pageParam = 0 }) => getAllUsersWithTeams(pageParam),
+    ({ pageParam = 0 }) => getAllUsersWithTeams(pageParam, search),
     {
       enabled: true,
       refetchOnWindowFocus: false,
@@ -65,14 +66,32 @@ const ListOfCards = React.memo(() => {
     }
   };
 
+  const handleSearchUser = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearch(event.target.value);
+  };
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      fetchUsers.refetch();
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [search, fetchUsers]);
+
   return (
     <>
       <Flex>
         <Text css={{ fontWeight: '$bold', flex: 1, mt: '$36' }}>
           {users.length} registered users
         </Text>
         <Flex css={{ width: '460px' }} direction="column" gap={16}>
-          <SearchInput icon="search" iconPosition="left" id="search" placeholder="Search user" />
+          <SearchInput
+            icon="search"
+            iconPosition="left"
+            id="search"
+            placeholder="Search user"
+            currentValue={search}
+            handleChange={handleSearchUser}
+          />
         </Flex>
       </Flex>
       <ScrollableContent