From ec36c98b7a71122a604c869748bac11b26d4d1b9 Mon Sep 17 00:00:00 2001
From: GuiSanto <99729373+GuiSanto@users.noreply.github.com>
Date: Mon, 19 Dec 2022 11:48:07 +0100
Subject: [PATCH] feat: frontend done for search user (#707)

---
 frontend/src/api/userService.tsx              |  6 +++-
 .../UsersList/partials/CardUser/EditUser.tsx  | 31 ++++++++++---------
 .../UsersList/partials/ListOfCards/index.tsx  | 25 +++++++++++++--
 3 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/frontend/src/api/userService.tsx b/frontend/src/api/userService.tsx
index 7621b2e06..0ea93daf7 100644
--- 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
index 4c71b6f13..b5dffea26 100644
--- 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
index 4364a29c3..e527744bd 100644
--- 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,6 +66,17 @@ 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>
@@ -72,7 +84,14 @@ const ListOfCards = React.memo(() => {
           {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