groot/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(auth): add loading state for user and role management (#1188)

Browse Source
This commit is contained in:
Rıdvan Akca
2023-08-09 22:51:07 +03:00
committed by GitHub
parent ce8c9906cb
commit 5046c4c911
10 changed files with 308 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
packages/web/src/components/UserList/index.tsx
View File

@@ -13,11 +13,11 @@ import Typography from '@mui/material/Typography';
import EditIcon from '@mui/icons-material/Edit';
import DeleteUserButton from 'components/DeleteUserButton/index.ee';
import ListLoader from 'components/ListLoader';
import useUsers from 'hooks/useUsers';
import useFormatMessage from 'hooks/useFormatMessage';
import * as URLS from 'config/urls';
// TODO: introduce loading bar
export default function UserList(): React.ReactElement {
const formatMessage = useFormatMessage();
const { users, loading } = useUsers();
@@ -49,34 +49,36 @@ export default function UserList(): React.ReactElement {
</TableRow>
</TableHead>
<TableBody>
{users.map((user) => (
<TableRow
key={user.id}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell scope="row">
<Typography variant="subtitle2">{user.fullName}</Typography>
</TableCell>
{loading && <ListLoader rowsNumber={3} columnsNumber={2} />}
{!loading &&
users.map((user) => (
<TableRow
key={user.id}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell scope="row">
<Typography variant="subtitle2">{user.fullName}</Typography>
</TableCell>
<TableCell>
<Typography variant="subtitle2">{user.email}</Typography>
</TableCell>
<TableCell>
<Typography variant="subtitle2">{user.email}</Typography>
</TableCell>
<TableCell>
<Stack direction="row" gap={1} justifyContent="right">
<IconButton
size="small"
component={Link}
to={URLS.USER(user.id)}
>
<EditIcon />
</IconButton>
<TableCell>
<Stack direction="row" gap={1} justifyContent="right">
<IconButton
size="small"
component={Link}
to={URLS.USER(user.id)}
>
<EditIcon />
</IconButton>
<DeleteUserButton userId={user.id} />
</Stack>
</TableCell>
</TableRow>
))}
<DeleteUserButton userId={user.id} />
</Stack>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>