Merge pull request #1734 from automatisch/AUT-845

refactor: rewrite useUsers with RQ

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 (
     <>
       <IconButton

packages/web/src/components/UserList/index.jsx

@@ -14,23 +14,23 @@ import EditIcon from '@mui/icons-material/Edit';
 import TableFooter from '@mui/material/TableFooter';
 import DeleteUserButton from 'components/DeleteUserButton/index.ee';
 import ListLoader from 'components/ListLoader';
-import useUsers from 'hooks/useUsers';
+import useAdminUsers from 'hooks/useAdminUsers';
 import useFormatMessage from 'hooks/useFormatMessage';
 import * as URLS from 'config/urls';
 import TablePaginationActions from './TablePaginationActions';
 import { TablePagination } from './style';
+
 export default function UserList() {
   const formatMessage = useFormatMessage();
   const [page, setPage] = React.useState(0);
-  const [rowsPerPage, setRowsPerPage] = React.useState(10);
-  const { users, pageInfo, totalCount, loading } = useUsers(page, rowsPerPage);
+  const { data: usersData, isLoading } = useAdminUsers(page + 1);
+  const users = usersData?.data;
+  const { count } = usersData?.meta || {};
+
   const handleChangePage = (event, newPage) => {
     setPage(newPage);
   };
-  const handleChangeRowsPerPage = (event) => {
-    setRowsPerPage(+event.target.value);
-    setPage(0);
-  };
+
   return (
     <>
       <TableContainer component={Paper}>
@@ -68,14 +68,14 @@ export default function UserList() {
             </TableRow>
           </TableHead>
           <TableBody>
-            {loading && (
+            {isLoading && (
               <ListLoader
                 data-test="users-list-loader"
                 rowsNumber={3}
                 columnsNumber={2}
               />
             )}
-            {!loading &&
+            {!isLoading &&
               users.map((user) => (
                 <TableRow
                   key={user.id}
@@ -120,18 +120,16 @@ export default function UserList() {
                 </TableRow>
               ))}
           </TableBody>
-          {totalCount && (
+          {!isLoading && typeof count === 'number' && (
             <TableFooter>
               <TableRow>
                 <TablePagination
-                  data-total-count={totalCount}
-                  data-rows-per-page={rowsPerPage}
-                  rowsPerPageOptions={[10, 25, 50, 100]}
+                  data-total-count={count}
+                  rowsPerPageOptions={[]}
                   page={page}
-                  count={totalCount}
+                  count={count}
                   onPageChange={handleChangePage}
-                  rowsPerPage={rowsPerPage}
-                  onRowsPerPageChange={handleChangeRowsPerPage}
+                  rowsPerPage={10}
                   ActionsComponent={TablePaginationActions}
                 />
               </TableRow>