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>

packages/web/src/graphql/queries/get-users.js

@@ -1,23 +0,0 @@
-import { gql } from '@apollo/client';
-export const GET_USERS = gql`
-  query GetUsers($limit: Int!, $offset: Int!) {
-    getUsers(limit: $limit, offset: $offset) {
-      pageInfo {
-        currentPage
-        totalPages
-      }
-      totalCount
-      edges {
-        node {
-          id
-          fullName
-          email
-          role {
-            id
-            name
-          }
-        }
-      }
-    }
-  }
-`;

packages/web/src/hooks/useAdminUser.js

@@ -1,9 +1,9 @@
 import { useQuery } from '@tanstack/react-query';
 import api from 'helpers/api';
 
-export default function useUser({ userId }) {
+export default function useAdminUser({ userId }) {
   const query = useQuery({
-    queryKey: ['user', userId],
+    queryKey: ['admin', 'user', userId],
     queryFn: async ({ signal }) => {
       const { data } = await api.get(`/v1/admin/users/${userId}`, {
         signal,

packages/web/src/hooks/useAdminUsers.js

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
+import api from 'helpers/api';
+
+export default function useAdminUsers(page) {
+  const query = useQuery({
+    queryKey: ['admin', 'users', page],
+    queryFn: async ({ signal }) => {
+      const { data } = await api.get(`/v1/admin/users`, {
+        signal,
+        params: { page },
+      });
+      return data;
+    },
+  });
+
+  return query;
+}

packages/web/src/hooks/useUsers.js

@@ -1,20 +0,0 @@
-import { useQuery } from '@apollo/client';
-import { GET_USERS } from 'graphql/queries/get-users';
-const getLimitAndOffset = (page, rowsPerPage) => ({
-  limit: rowsPerPage,
-  offset: page * rowsPerPage,
-});
-export default function useUsers(page, rowsPerPage) {
-  const { data, loading } = useQuery(GET_USERS, {
-    variables: getLimitAndOffset(page, rowsPerPage),
-  });
-  const users = data?.getUsers.edges.map(({ node }) => node) || [];
-  const pageInfo = data?.getUsers.pageInfo;
-  const totalCount = data?.getUsers.totalCount;
-  return {
-    users,
-    pageInfo,
-    totalCount,
-    loading,
-  };
-}

packages/web/src/pages/CreateUser/index.jsx

@@ -6,6 +6,7 @@ import MuiTextField from '@mui/material/TextField';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useQueryClient } from '@tanstack/react-query';
 
 import Can from 'components/Can';
 import Container from 'components/Container';
@@ -29,6 +30,7 @@ export default function CreateUser() {
   const { data, loading: isRolesLoading } = useRoles();
   const roles = data?.data;
   const enqueueSnackbar = useEnqueueSnackbar();
+  const queryClient = useQueryClient();
 
   const handleUserCreation = async (userData) => {
     try {
@@ -44,7 +46,7 @@ export default function CreateUser() {
           },
         },
       });
-
+      queryClient.invalidateQueries({ queryKey: ['admin', 'users'] });
       enqueueSnackbar(formatMessage('createUser.successfullyCreated'), {
         variant: 'success',
         persist: true,

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';
@@ -18,7 +19,7 @@ import * as URLS from 'config/urls';
 import { UPDATE_USER } from 'graphql/mutations/update-user.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useRoles from 'hooks/useRoles.ee';
-import useUser from 'hooks/useUser';
+import useAdminUser from 'hooks/useAdminUser';
 
 function generateRoleOptions(roles) {
   return roles?.map(({ name: label, id: value }) => ({ label, value }));
@@ -28,12 +29,13 @@ export default function EditUser() {
   const formatMessage = useFormatMessage();
   const [updateUser, { loading }] = useMutation(UPDATE_USER);
   const { userId } = useParams();
-  const { data: userData, isLoading: isUserLoading } = useUser({ userId });
+  const { data: userData, isLoading: isUserLoading } = useAdminUser({ userId });
   const user = userData?.data;
   const { data, isLoading: isRolesLoading } = useRoles();
   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',