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 => - 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 => 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 = ({ user }) => ( - - - - - - - + + + + + ); 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(null); + const [search, setSearch] = useState(''); 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) => { + setSearch(event.target.value); + }; + + useEffect(() => { + const timer = setTimeout(() => { + fetchUsers.refetch(); + }, 100); + return () => clearTimeout(timer); + }, [search, fetchUsers]); + return ( <> @@ -72,7 +84,14 @@ const ListOfCards = React.memo(() => { {users.length} registered users - +