mirror of
https://github.com/hazemKrimi/crimson-quirks-ui.git
synced 2026-05-01 18:20:28 +00:00
Improve networking, loading and redirection
This commit is contained in:
Hazem Krimi
+205
-191
@@ -12,7 +12,7 @@ import {
|
||||
Text,
|
||||
Modal,
|
||||
Input,
|
||||
Alert,
|
||||
Alert
|
||||
} from '../../components';
|
||||
import { Wrapper } from './styles';
|
||||
import {
|
||||
@@ -34,7 +34,7 @@ const Users = () => {
|
||||
const [error, setError] = useState<string>('');
|
||||
const [deleteAccountModal, setDeleteAccountModal] = useState<boolean>(false);
|
||||
|
||||
const [getUsers, { loading }] = useLazyQuery<
|
||||
const [getUsers, { loading, error: usersError }] = useLazyQuery<
|
||||
GetAllUsersQuery,
|
||||
GetAllUsersQueryVariables
|
||||
>(GET_ALL_USERS, {
|
||||
@@ -52,8 +52,6 @@ const Users = () => {
|
||||
|
||||
useEffect(() => {
|
||||
getUsers();
|
||||
|
||||
// eslint-disable-next-line
|
||||
}, [location.pathname]);
|
||||
|
||||
const [deleteUser] = useMutation<
|
||||
@@ -90,83 +88,128 @@ const Users = () => {
|
||||
},
|
||||
});
|
||||
|
||||
return role === 'admin' ? (
|
||||
if (role !== 'admin') return (
|
||||
<Navigate to='/' />
|
||||
)
|
||||
|
||||
if (loading) return (
|
||||
<Spinner fullScreen color={role || 'client'} />
|
||||
);
|
||||
|
||||
if (usersError || !users) return (
|
||||
<Wrapper color={role}>
|
||||
<Box
|
||||
width='100%'
|
||||
height='100vh'
|
||||
display='grid'
|
||||
alignItems='center'
|
||||
justifyContent='center'
|
||||
>
|
||||
<Box>
|
||||
<Empty />
|
||||
</Box>
|
||||
</Box>
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{!loading ? (
|
||||
<>
|
||||
{deleteAccountModal && (
|
||||
<Modal
|
||||
color={role || 'client'}
|
||||
title='Delete Account'
|
||||
description='Enter password to confirm account deletion.
|
||||
If you delete your account you cannot recover any of your projects.'
|
||||
onClose={() => setDeleteAccountModal(false)}
|
||||
onConfirm={deleteAccountForm.handleSubmit}
|
||||
{deleteAccountModal && (
|
||||
<Modal
|
||||
color={role || 'client'}
|
||||
title='Delete Account'
|
||||
description='Enter password to confirm account deletion.
|
||||
If you delete your account you cannot recover any of your projects.'
|
||||
onClose={() => setDeleteAccountModal(false)}
|
||||
onConfirm={deleteAccountForm.handleSubmit}
|
||||
>
|
||||
<Input
|
||||
type='password'
|
||||
placeholder='Password'
|
||||
name='password'
|
||||
value={deleteAccountForm.values.password}
|
||||
onChange={deleteAccountForm.handleChange}
|
||||
onBlur={deleteAccountForm.handleBlur}
|
||||
color={role || 'client'}
|
||||
error={
|
||||
deleteAccountForm.touched.password &&
|
||||
!!deleteAccountForm.errors.password
|
||||
}
|
||||
errorMessage={deleteAccountForm.errors.password}
|
||||
/>
|
||||
</Modal>
|
||||
)}
|
||||
{users && users.length > 0 ? (
|
||||
<Wrapper color={role} empty={false}>
|
||||
<Box width='100%' height='100vh' alignItems='center'>
|
||||
<Box
|
||||
display='flex'
|
||||
flexDirection='row'
|
||||
alignItems='center'
|
||||
marginBottom='20px'
|
||||
>
|
||||
<Input
|
||||
type='password'
|
||||
placeholder='Password'
|
||||
name='password'
|
||||
value={deleteAccountForm.values.password}
|
||||
onChange={deleteAccountForm.handleChange}
|
||||
onBlur={deleteAccountForm.handleBlur}
|
||||
<Box flexGrow={!error ? '1' : undefined}>
|
||||
<Text variant='headline' weight='bold'>
|
||||
{location.pathname === '/clients'
|
||||
? 'Clients'
|
||||
: location.pathname === '/product-owners'
|
||||
? 'Product Owners'
|
||||
: 'Developers'}
|
||||
</Text>
|
||||
</Box>
|
||||
{error && (
|
||||
<Box flexGrow='1' marginLeft='55px' marginRight='55px'>
|
||||
<Alert color='error' text={error} />
|
||||
</Box>
|
||||
)}
|
||||
<Button
|
||||
color={role || 'client'}
|
||||
error={
|
||||
deleteAccountForm.touched.password &&
|
||||
!!deleteAccountForm.errors.password
|
||||
}
|
||||
errorMessage={deleteAccountForm.errors.password}
|
||||
/>
|
||||
</Modal>
|
||||
)}
|
||||
{users && users.length > 0 ? (
|
||||
<Wrapper color={role} empty={false}>
|
||||
<Box width='100%' height='100vh' alignItems='center'>
|
||||
<Box
|
||||
display='flex'
|
||||
flexDirection='row'
|
||||
alignItems='center'
|
||||
marginBottom='20px'
|
||||
>
|
||||
<Box flexGrow={!error ? '1' : undefined}>
|
||||
<Text variant='headline' weight='bold'>
|
||||
{location.pathname === '/clients'
|
||||
? 'Clients'
|
||||
: location.pathname === '/product-owners'
|
||||
? 'Product Owners'
|
||||
: 'Developers'}
|
||||
</Text>
|
||||
</Box>
|
||||
{error && (
|
||||
<Box flexGrow='1' marginLeft='55px' marginRight='55px'>
|
||||
<Alert color='error' text={error} />
|
||||
</Box>
|
||||
)}
|
||||
<Button
|
||||
color={role || 'client'}
|
||||
variant='primary-action'
|
||||
text={`New ${
|
||||
variant='primary-action'
|
||||
text={`New ${
|
||||
location.pathname === '/clients'
|
||||
? 'Client'
|
||||
: location.pathname === '/product-owners'
|
||||
? 'Product Owner'
|
||||
: 'Developer'
|
||||
}`}
|
||||
iconLeft={<Add />}
|
||||
onClick={() =>
|
||||
navigate(
|
||||
`/create-user/${
|
||||
location.pathname === '/clients'
|
||||
? 'Client'
|
||||
: location.pathname === '/product-owners'
|
||||
? 'Product Owner'
|
||||
? 'ProductOwner'
|
||||
: 'Developer'
|
||||
}`}
|
||||
iconLeft={<Add />}
|
||||
onClick={() =>
|
||||
navigate(
|
||||
`/create-user/${
|
||||
location.pathname === '/clients'
|
||||
? 'Client'
|
||||
: location.pathname === '/product-owners'
|
||||
? 'ProductOwner'
|
||||
: 'Developer'
|
||||
}`
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
}`
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
padding='15px 20px'
|
||||
borderRadius='10px'
|
||||
boxShadow='1px 1px 10px 0px rgba(50, 59, 105, 0.25)'
|
||||
display='grid'
|
||||
gridTemplateColumns='repeat(5, 1fr)'
|
||||
alignItems='center'
|
||||
justifyContent='flex-start'
|
||||
className='table-head'
|
||||
marginBottom='20px'
|
||||
columnGap='3rem'
|
||||
>
|
||||
<Text variant='title'>First Name</Text>
|
||||
<Text variant='title'>Last Name</Text>
|
||||
<Text variant='title'>Email </Text>
|
||||
<Text variant='title'>Phone </Text>
|
||||
<Box justifySelf='flex-end'>
|
||||
<Text variant='title'>Actions</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box padding='10px 0px'>
|
||||
{users.map((user) => (
|
||||
<Box
|
||||
key={user.id}
|
||||
padding='15px 20px'
|
||||
borderRadius='10px'
|
||||
boxShadow='1px 1px 10px 0px rgba(50, 59, 105, 0.25)'
|
||||
@@ -174,135 +217,106 @@ const Users = () => {
|
||||
gridTemplateColumns='repeat(5, 1fr)'
|
||||
alignItems='center'
|
||||
justifyContent='flex-start'
|
||||
className='table-head'
|
||||
marginBottom='20px'
|
||||
columnGap='3rem'
|
||||
>
|
||||
<Text variant='title'>First Name</Text>
|
||||
<Text variant='title'>Last Name</Text>
|
||||
<Text variant='title'>Email </Text>
|
||||
<Text variant='title'>Phone </Text>
|
||||
<Box justifySelf='flex-end'>
|
||||
<Text variant='title'>Actions</Text>
|
||||
<Text variant='headline' weight='bold'>
|
||||
{user.firstName}
|
||||
</Text>
|
||||
<Text variant='headline' weight='bold'>
|
||||
{user.lastName}
|
||||
</Text>
|
||||
<Text variant='headline' weight='bold'>
|
||||
{user.email}
|
||||
</Text>
|
||||
<Text variant='headline' weight='bold'>
|
||||
+{user.phone.prefix}
|
||||
{user.phone.number}
|
||||
</Text>
|
||||
<Box
|
||||
display='flex'
|
||||
flexDirection='row'
|
||||
alignItems='center'
|
||||
justifySelf='flex-end'
|
||||
>
|
||||
<Box
|
||||
onClick={() => navigate(`/user-settings/${user.id}`)}
|
||||
marginRight='15px'
|
||||
cursor='pointer'
|
||||
>
|
||||
<Edit />
|
||||
</Box>
|
||||
<Box
|
||||
onClick={() => {
|
||||
setUserToDelete(user);
|
||||
setDeleteAccountModal(true);
|
||||
}}
|
||||
cursor='pointer'
|
||||
>
|
||||
<Delete />
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box padding='10px 0px'>
|
||||
{users.map((user) => (
|
||||
<Box
|
||||
key={user.id}
|
||||
padding='15px 20px'
|
||||
borderRadius='10px'
|
||||
boxShadow='1px 1px 10px 0px rgba(50, 59, 105, 0.25)'
|
||||
display='grid'
|
||||
gridTemplateColumns='repeat(5, 1fr)'
|
||||
alignItems='center'
|
||||
justifyContent='flex-start'
|
||||
marginBottom='20px'
|
||||
columnGap='3rem'
|
||||
>
|
||||
<Text variant='headline' weight='bold'>
|
||||
{user.firstName}
|
||||
</Text>
|
||||
<Text variant='headline' weight='bold'>
|
||||
{user.lastName}
|
||||
</Text>
|
||||
<Text variant='headline' weight='bold'>
|
||||
{user.email}
|
||||
</Text>
|
||||
<Text variant='headline' weight='bold'>
|
||||
+{user.phone.prefix}
|
||||
{user.phone.number}
|
||||
</Text>
|
||||
<Box
|
||||
display='flex'
|
||||
flexDirection='row'
|
||||
alignItems='center'
|
||||
justifySelf='flex-end'
|
||||
>
|
||||
<Box
|
||||
onClick={() => navigate(`/user-settings/${user.id}`)}
|
||||
marginRight='15px'
|
||||
cursor='pointer'
|
||||
>
|
||||
<Edit />
|
||||
</Box>
|
||||
<Box
|
||||
onClick={() => {
|
||||
setUserToDelete(user);
|
||||
setDeleteAccountModal(true);
|
||||
}}
|
||||
cursor='pointer'
|
||||
>
|
||||
<Delete />
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</Wrapper>
|
||||
) : (
|
||||
<Wrapper color={role} empty>
|
||||
<Box
|
||||
display='flex'
|
||||
flexDirection='row'
|
||||
alignItems='center'
|
||||
marginBottom='20px'
|
||||
padding='35px 45px 0px 120px'
|
||||
>
|
||||
<Box flexGrow='1'>
|
||||
<Text variant='headline' weight='bold'>
|
||||
{location.pathname === '/clients'
|
||||
? 'Clients'
|
||||
: location.pathname === '/product-owners'
|
||||
? 'Product Owners'
|
||||
: 'Developers'}
|
||||
</Text>
|
||||
</Box>
|
||||
<Button
|
||||
color={role || 'client'}
|
||||
variant='primary-action'
|
||||
text={`New ${
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</Wrapper>
|
||||
) : (
|
||||
<Wrapper color={role} empty>
|
||||
<Box
|
||||
display='flex'
|
||||
flexDirection='row'
|
||||
alignItems='center'
|
||||
marginBottom='20px'
|
||||
padding='35px 45px 0px 120px'
|
||||
>
|
||||
<Box flexGrow='1'>
|
||||
<Text variant='headline' weight='bold'>
|
||||
{location.pathname === '/clients'
|
||||
? 'Clients'
|
||||
: location.pathname === '/product-owners'
|
||||
? 'Product Owners'
|
||||
: 'Developers'}
|
||||
</Text>
|
||||
</Box>
|
||||
<Button
|
||||
color={role || 'client'}
|
||||
variant='primary-action'
|
||||
text={`New ${
|
||||
location.pathname === '/clients'
|
||||
? 'Client'
|
||||
: location.pathname === '/product-owners'
|
||||
? 'Product Owner'
|
||||
: 'Developer'
|
||||
}`}
|
||||
iconLeft={<Add />}
|
||||
onClick={() =>
|
||||
navigate(
|
||||
`/create-user/${
|
||||
location.pathname === '/clients'
|
||||
? 'Client'
|
||||
: location.pathname === '/product-owners'
|
||||
? 'Product Owner'
|
||||
? 'ProductOwner'
|
||||
: 'Developer'
|
||||
}`}
|
||||
iconLeft={<Add />}
|
||||
onClick={() =>
|
||||
navigate(
|
||||
`/create-user/${
|
||||
location.pathname === '/clients'
|
||||
? 'Client'
|
||||
: location.pathname === '/product-owners'
|
||||
? 'ProductOwner'
|
||||
: 'Developer'
|
||||
}`
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
width='100%'
|
||||
height='100vh'
|
||||
display='grid'
|
||||
alignItems='center'
|
||||
justifyContent='center'
|
||||
>
|
||||
<Box>
|
||||
<Empty />
|
||||
</Box>
|
||||
</Box>
|
||||
</Wrapper>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Spinner fullScreen color={role || 'client'} />
|
||||
}`
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
width='100%'
|
||||
height='100vh'
|
||||
display='grid'
|
||||
alignItems='center'
|
||||
justifyContent='center'
|
||||
>
|
||||
<Box>
|
||||
<Empty />
|
||||
</Box>
|
||||
</Box>
|
||||
</Wrapper>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Navigate to='/clients' />
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user