diff --git a/packages/web/src/components/DeleteUserButton/index.ee.jsx b/packages/web/src/components/DeleteUserButton/index.ee.jsx index 40b45d91..34fe15da 100644 --- a/packages/web/src/components/DeleteUserButton/index.ee.jsx +++ b/packages/web/src/components/DeleteUserButton/index.ee.jsx @@ -2,6 +2,8 @@ import PropTypes from 'prop-types'; import { useMutation } from '@apollo/client'; import DeleteIcon from '@mui/icons-material/Delete'; import IconButton from '@mui/material/IconButton'; +import { useQueryClient } from '@tanstack/react-query'; + import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar'; import * as React from 'react'; import ConfirmationDialog from 'components/ConfirmationDialog'; @@ -17,9 +19,13 @@ function DeleteUserButton(props) { }); const formatMessage = useFormatMessage(); const enqueueSnackbar = useEnqueueSnackbar(); + const queryClient = useQueryClient(); + const handleConfirm = React.useCallback(async () => { try { await deleteUser(); + queryClient.invalidateQueries({ queryKey: ['admin', 'users'] }); + queryClient.invalidateQueries({ queryKey: ['admin', 'user', userId] }); setShowConfirmation(false); enqueueSnackbar(formatMessage('deleteUserButton.successfullyDeleted'), { variant: 'success', @@ -31,6 +37,7 @@ function DeleteUserButton(props) { throw new Error('Failed while deleting!'); } }, [deleteUser]); + return ( <> { try { @@ -44,7 +46,7 @@ export default function CreateUser() { }, }, }); - + queryClient.invalidateQueries({ queryKey: ['admin', 'users'] }); enqueueSnackbar(formatMessage('createUser.successfullyCreated'), { variant: 'success', persist: true, diff --git a/packages/web/src/pages/EditUser/index.jsx b/packages/web/src/pages/EditUser/index.jsx index 60470b4b..e4574f85 100644 --- a/packages/web/src/pages/EditUser/index.jsx +++ b/packages/web/src/pages/EditUser/index.jsx @@ -7,6 +7,7 @@ import MuiTextField from '@mui/material/TextField'; import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar'; import * as React from 'react'; import { useNavigate, useParams } from 'react-router-dom'; +import { useQueryClient } from '@tanstack/react-query'; import Can from 'components/Can'; import Container from 'components/Container'; @@ -34,6 +35,7 @@ export default function EditUser() { const roles = data?.data; const enqueueSnackbar = useEnqueueSnackbar(); const navigate = useNavigate(); + const queryClient = useQueryClient(); const handleUserUpdate = async (userDataToUpdate) => { try { @@ -49,6 +51,8 @@ export default function EditUser() { }, }, }); + queryClient.invalidateQueries({ queryKey: ['admin', 'users'] }); + queryClient.invalidateQueries({ queryKey: ['admin', 'user', userId] }); enqueueSnackbar(formatMessage('editUser.successfullyUpdated'), { variant: 'success',