diff --git a/src/pages/Clients/index.tsx b/src/pages/Users/index.tsx similarity index 64% rename from src/pages/Clients/index.tsx rename to src/pages/Users/index.tsx index 32e7d0d..05d2379 100644 --- a/src/pages/Clients/index.tsx +++ b/src/pages/Users/index.tsx @@ -1,8 +1,8 @@ import * as Yup from 'yup'; import { useFormik } from 'formik'; -import { useMutation, useQuery, useReactiveVar } from '@apollo/client'; -import { useState } from 'react'; -import { Redirect, useHistory } from 'react-router'; +import { useMutation, useLazyQuery, useReactiveVar } from '@apollo/client'; +import { useEffect, useState } from 'react'; +import { Redirect, useHistory, useLocation } from 'react-router'; import { roleVar } from '../../graphql/state'; import { Add, Delete, Edit, Empty } from '../../assets'; import { @@ -25,29 +25,43 @@ import { import { GET_ALL_USERS } from '../../graphql/admin.api'; import { DELETE_USER } from '../../graphql/auth.api'; -const Clients = () => { +const Users = () => { const role = useReactiveVar(roleVar); const history = useHistory(); - const [clients, setClients] = useState>(); + const location = useLocation(); + const [users, setUsers] = useState>(); const [userToDelete, setUserToDelete] = useState(); const [error, setError] = useState(''); const [deleteAccountModal, setDeleteAccountModal] = useState(false); - const { loading } = useQuery( - GET_ALL_USERS, - { - onCompleted({ getAllUsers }) { - setClients(getAllUsers.filter((user) => user.role === 'Client')); - }, - } - ); + const [getUsers, { loading }] = useLazyQuery< + GetAllUsersQuery, + GetAllUsersQueryVariables + >(GET_ALL_USERS, { + onCompleted({ getAllUsers }) { + const userRole = + location.pathname === '/clients' + ? 'Client' + : location.pathname === '/product-owners' + ? 'ProductOwner' + : 'Developer'; + setUsers(getAllUsers.filter((user) => user.role === userRole)); + }, + fetchPolicy: 'network-only', + }); + + useEffect(() => { + getUsers(); + + // eslint-disable-next-line + }, [location.pathname]); const [deleteUser] = useMutation< DeleteUserMutation, DeleteUserMutationVariables >(DELETE_USER, { onCompleted() { - setClients(clients?.filter((client) => client.id !== userToDelete?.id)); + setUsers(users?.filter((user) => user.id !== userToDelete?.id)); setUserToDelete(undefined); setDeleteAccountModal(false); }, @@ -105,14 +119,9 @@ const Clients = () => { /> )} - {clients && clients.length > 0 ? ( + {users && users.length > 0 ? ( - + { > - Clients + {location.pathname === '/clients' + ? 'Clients' + : location.pathname === '/product-owners' + ? 'Product Owners' + : 'Developers'} {error && ( @@ -132,8 +145,25 @@ const Clients = () => {