diff --git a/capif_frontend/src/pages/users/index.js b/capif_frontend/src/pages/users/index.js index c8a9060d9e438c122078edd9ce22dcf1fd0561d9..0d073dc547853d3fa9a16231b805ba8333bcb329 100644 --- a/capif_frontend/src/pages/users/index.js +++ b/capif_frontend/src/pages/users/index.js @@ -35,6 +35,15 @@ const LinkStyled = styled(Link)(({ theme }) => ({ color: theme.palette.primary.main, })); +const EMPTY_USER = { + username: '', + password: '', + enterprise: '', + country: '', + email: '', + purpose: '' +}; + const Users = () => { const queryClient = useQueryClient(); const [selectedUsers, setSelectedUsers] = useState([]); @@ -57,33 +66,26 @@ const Users = () => { const [isCreating, setIsCreating] = useState(false); const [isCreateDialogOpen, setCreateDialogOpen] = useState(false); - const [userCreate, setUserCreate] = useState({ - username: '', - password: '', - enterprise: '', - country: '', - email: '', - purpose: '' - }); + const [userCreate, setUserCreate] = useState(EMPTY_USER); const [showCreateMessage, setShowCreateMessage] = useState(false); const [errorCreating, setErrorCreating] = useState(false); // Fetch all users data - const { data: usersData, isLoading, isError } = useQuery({ + const { data: usersData, isLoading, isError, refetch } = useQuery({ queryKey: ['users'], queryFn: () => getUsersPagesOrder(), // Fetch all data without pagination in query }); useEffect(() => { - if (usersData.data) { + if (usersData && Array.isArray(usersData.data)) { let filteredUsers = usersData.data; // Search filter by any field if (searchTerm) { filteredUsers = filteredUsers.filter((user) => - user.username.toLowerCase().includes(searchTerm.toLowerCase()) || - user.enterprise.toLowerCase().includes(searchTerm.toLowerCase()) || - user.email.toLowerCase().includes(searchTerm.toLowerCase()) + user.username?.toLowerCase().includes(searchTerm.toLowerCase()) || + user.enterprise?.toLowerCase().includes(searchTerm.toLowerCase()) || + user.email?.toLowerCase().includes(searchTerm.toLowerCase()) ); } @@ -134,11 +136,7 @@ const Users = () => { await deleteUsers(selectedUsers); setDeleteMessage('Users removed'); - const response = await getUsersPagesOrder(); - setUsers(response); - setTotalUsers(response.length); - setTotalPages(Math.ceil(response.length / pageSize)); - + await refetch(); // Refetch the users after deletion setDeleteDialogOpen(false); setSelectedUsers([]); setShowDeleteMessage(true); @@ -186,14 +184,12 @@ const Users = () => { const handleCreateConfirm = async () => { try { setIsCreating(true); - await createUser(userCreate); - - const response = await getUsersPagesOrder(); - setUsers(response); - setTotalUsers(response.length); - setTotalPages(Math.ceil(response.length / pageSize)); + setErrorCreating(false); + await createUser(userCreate); + await refetch(); // Refetch the users after creation setCreateDialogOpen(false); + setUserCreate(EMPTY_USER); // Reset the form setShowCreateMessage(true); } catch (error) { setErrorCreating(true); @@ -204,6 +200,7 @@ const Users = () => { const handleCreateCancel = () => { setCreateDialogOpen(false); + setUserCreate(EMPTY_USER); // Reset the form on cancel }; const handleCreateMessageAccept = () => {