Feat: users list page with deletion button for admins.

dleclercpro · May 16, 2024 · 5fddef0 · 5fddef0
1 parent cc42b14
commit 5fddef0
Show file tree

Hide file tree

Showing 17 changed files with 213 additions and 73 deletions.
diff --git a/Apps/Client/src/components/pages/AuthPageStyles.ts b/Apps/Client/src/components/pages/AuthPageStyles.ts
@@ -36,6 +36,10 @@ const useAuthPageStyles = makeStyles()(({ breakpoints, spacing }: Theme) => ({
         marginBottom: spacing(1 * SPACING),
     },
 
+    table: {
+        marginBottom: spacing(SPACING),
+    },
+
     fields: {
         border: 0,
         padding: 0,
@@ -89,6 +93,10 @@ const useAuthPageStyles = makeStyles()(({ breakpoints, spacing }: Theme) => ({
         },
     },
 
+    button: {
+        width: '100%',
+    },
+
     linkButton: {
         height: spacing(BUTTON_HEIGHT),
     },

diff --git a/Apps/Client/src/components/pages/sign-up/SignUpPage.tsx b/Apps/Client/src/components/pages/sign-up/SignUpPage.tsx
@@ -113,6 +113,7 @@ const SignUpPage: React.FC<Props> = () => {
                             to={getURL(Page.SignIn)}
                             color='secondary'
                             startIcon={<BackIcon />}
+                            disabled={loading}
                         >
                             Back
                         </Button>

diff --git a/Apps/Client/src/components/pages/users/UsersPage.tsx b/Apps/Client/src/components/pages/users/UsersPage.tsx
@@ -1,10 +1,13 @@
 import { Button, Paper, Typography } from '@mui/material';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import useAuthPageStyles from '../AuthPageStyles';
 import useDatabase from '../../../hooks/useDatabase';
 import { Page, getURL } from '../../../routes/Router';
 import { Link } from 'react-router-dom';
 import BackIcon from '@mui/icons-material/ArrowBack';
+import DeleteIcon from '@mui/icons-material/Delete';
+import LoadingButton from '../../buttons/LoadingButton';
+import YesNoDialog from '../../dialogs/YesNoDialog';
 
 interface Props {
 
@@ -13,64 +16,125 @@ interface Props {
 const UsersPage: React.FC<Props> = () => {
     const { classes } = useAuthPageStyles();
 
-    const { users, admins, getUsers } = useDatabase();
+    const [version, setVersion] = useState(0);
+
+    const [userEmail, setUserEmail] = useState('');
+
+    const [isDeleteUserConfirmDialogOpen, setIsDeleteUserConfirmDialogOpen] = useState(false);
+
+    const openDeleteUserConfirmDialog = (email: string) => {
+        setUserEmail(email);
+        setIsDeleteUserConfirmDialogOpen(true);
+    }
+    const closeDeleteUserConfirmDialog = () => {
+        setUserEmail('');
+        setIsDeleteUserConfirmDialogOpen(false);
+    }
+
+    const handleDeleteUser = async () => {
+        setIsDeleteUserConfirmDialogOpen(false);
+
+        await deleteUser(userEmail);
+
+        setVersion(version + 1);
+    }
+
+    const { users, admins, isDeletingUser, deleteUser, getUsers } = useDatabase();
 
     useEffect(() => {
         getUsers();
-    }, []);
+
+    }, [version]);
+
+    if (!users || !admins) {
+        return null;
+    }
 
     return (
-        <Paper elevation={8} className={classes.root}>
-            <div
-                className={`${classes.form} users`}
-            >
-                <Typography variant='h1' className={classes.title}>
-                    Users
-                </Typography>
-
-                <Typography className={classes.text}>
-                    Here is the list of admin users:
-                </Typography>
-
-                <ul>
-                    {admins.map((admin: string) => (
-                        <li>
-                            <Typography>
-                                <strong>{admin}</strong>
-                            </Typography>
-                        </li>
-                    ))}
-                </ul>
-
-                <Typography className={classes.text}>
-                    Here is the list of regular users:
-                </Typography>
-
-                <ul>
-                    {users.map((user: string) => (
-                        <li>
-                            <Typography>
-                                <strong>{user}</strong>
+        <>
+            <YesNoDialog
+                open={isDeleteUserConfirmDialogOpen}
+                title='Delete user'
+                text={`Are you sure you want to delete user '${userEmail}'?`}
+                handleYes={handleDeleteUser}
+                handleNo={closeDeleteUserConfirmDialog}
+                handleClose={closeDeleteUserConfirmDialog}
+            />
+
+            <Paper elevation={8} className={classes.root}>
+                <div
+                    className={`${classes.form} users`}
+                >
+                    <Typography variant='h1' className={classes.title}>
+                        Users
+                    </Typography>
+
+                    <Typography className={classes.text}>
+                        Here is the list of admin users:
+                    </Typography>
+
+                    <table className={classes.table}>
+                        <tbody>
+                            {admins.map((admin) => (
+                                <tr>
+                                    <td>
+                                        <Typography>
+                                            <strong>{admin}</strong>
+                                        </Typography>
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+
+                    {users.length > 0 && (
+                        <>
+                            <Typography className={classes.text}>
+                                Here is the list of regular users:
                             </Typography>
-                        </li>
-                    ))}
-                </ul>
-            </div>
-
-            <div className={classes.buttons}>
-                    <div className='top'>
-                        <Button
-                            className={classes.linkButton}
-                            component={Link}
-                            to={getURL(Page.Home)}
-                            color='secondary'
-                            startIcon={<BackIcon />}
-                        >
-                            Back
-                        </Button>
-                    </div>
+
+                            <table className={classes.table}>
+                                {users.map((email) => (
+                                    <tr>
+                                        <td>
+                                            <Typography>
+                                                <strong>{email}</strong>
+                                            </Typography>
+                                        </td>
+                                        <td>
+                                            <LoadingButton
+                                                className={classes.button}
+                                                variant='contained'
+                                                color='error'
+                                                icon={<DeleteIcon />}
+                                                loading={isDeletingUser && email === userEmail}
+                                                onClick={() => openDeleteUserConfirmDialog(email)}
+                                            >
+                                                Delete
+                                            </LoadingButton>
+                                        </td>
+                                    </tr>
+                                ))}
+                            </table>
+                        </>
+                    )}
                 </div>
-        </Paper>
+
+                <div className={classes.buttons}>
+                        <div className='top'>
+                            <Button
+                                className={classes.linkButton}
+                                component={Link}
+                                to={getURL(Page.Home)}
+                                color='secondary'
+                                startIcon={<BackIcon />}
+                            >
+                                Back
+                            </Button>
+                        </div>
+                    </div>
+            </Paper>
+        </>
     );
 }
 

diff --git a/Apps/Client/src/hooks/useDatabase.ts b/Apps/Client/src/hooks/useDatabase.ts
@@ -28,7 +28,7 @@ const useDatabase = () => {
     const deleteUser = async (email: string) => {
         setIsDeletingUser(true);
 
-        return await new CallDeleteUser.default().execute()
+        return await new CallDeleteUser.default().execute({ email })
             .then(() => {
 
             })

diff --git a/Apps/Client/src/hooks/useToken.ts b/Apps/Client/src/hooks/useToken.ts
@@ -25,7 +25,7 @@ const useToken = <T extends Token> (value: string) => {
 
         return new CallValidateToken.default().execute({ token: value })
             .then(({ data }) => {
-                setValidatedValue(data!.string);
+                setValidatedValue((data as CallValidateToken.ResponseData).string);
                 setToken(data as T);
             })
             .catch(({ code, error, data }) => {

diff --git a/Apps/Client/src/models/calls/admin/CallFlushDatabase.ts b/Apps/Client/src/models/calls/admin/CallFlushDatabase.ts
@@ -12,7 +12,7 @@ export interface ErrorResponseData {
 
 }
 
-export default class CallFlushDatabase extends CallDELETE {
+export default class CallFlushDatabase extends CallDELETE<Data, ResponseData, ErrorResponseData> {
 
     constructor() {
         super(`/database`);

diff --git a/Apps/Client/src/models/calls/auth/CallConfirmEmail.ts b/Apps/Client/src/models/calls/auth/CallConfirmEmail.ts
@@ -1,6 +1,18 @@
 import CallPUT from '../base/CallPUT';
 
-export default class CallConfirmEmail extends CallPUT<void, void> {
+export type Data = {
+
+};
+
+export type ResponseData = {
+
+};
+
+export type ErrorResponseData = {
+
+};
+
+export default class CallConfirmEmail extends CallPUT<Data, ResponseData, ErrorResponseData> {
 
     constructor(token: string) {
         super(`/confirm-email?token=${token}`);

diff --git a/Apps/Client/src/models/calls/auth/CallForgotPassword.ts b/Apps/Client/src/models/calls/auth/CallForgotPassword.ts
@@ -4,7 +4,15 @@ export interface Data {
     email: string,
 }
 
-export default class CallForgotPassword extends CallPOST<Data, void> {
+export type ResponseData = {
+
+};
+
+export type ErrorResponseData = {
+
+};
+
+export default class CallForgotPassword extends CallPOST<Data, ResponseData, ErrorResponseData> {
 
     constructor() {
         super(`/forgot-password`);

diff --git a/Apps/Client/src/models/calls/auth/CallPing.ts b/Apps/Client/src/models/calls/auth/CallPing.ts
@@ -13,7 +13,7 @@ export interface ErrorResponseData {
 
 }
 
-export default class CallPing extends CallGET<void, ResponseData> {
+export default class CallPing extends CallGET<Data, ResponseData, ErrorResponseData> {
 
     constructor() {
         super(`/ping`);

diff --git a/Apps/Client/src/models/calls/auth/CallResetPassword.ts b/Apps/Client/src/models/calls/auth/CallResetPassword.ts
@@ -4,7 +4,15 @@ export interface Data {
     password: string,
 }
 
-export default class CallResetPassword extends CallPOST<Data, void> {
+export type ResponseData = {
+
+};
+
+export type ErrorResponseData = {
+
+};
+
+export default class CallResetPassword extends CallPOST<Data, ResponseData, ErrorResponseData> {
 
     constructor(token?: string) {
         const url = `/reset-password`;

diff --git a/Apps/Client/src/models/calls/auth/CallSignOut.ts b/Apps/Client/src/models/calls/auth/CallSignOut.ts
@@ -1,6 +1,18 @@
 import CallGET from '../base/CallGET';
 
-export default class CallSignOut extends CallGET<void> {
+export type Data = {
+
+};
+
+export type ResponseData = {
+
+};
+
+export type ErrorResponseData = {
+
+};
+
+export default class CallSignOut extends CallGET<Data, ResponseData, ErrorResponseData> {
 
     constructor() {
         super(`/sign-out`);

diff --git a/Apps/Client/src/models/calls/auth/CallSignUp.ts b/Apps/Client/src/models/calls/auth/CallSignUp.ts
@@ -5,7 +5,15 @@ export interface Data {
     password: string,
 }
 
-export default class CallSignUp extends CallPOST<Data, void> {
+export type ResponseData = {
+
+};
+
+export type ErrorResponseData = {
+
+};
+
+export default class CallSignUp extends CallPOST<Data, ResponseData, ErrorResponseData> {
 
     constructor() {
         super(`/sign-up`);

diff --git a/Apps/Client/src/models/calls/auth/CallValidateToken.ts b/Apps/Client/src/models/calls/auth/CallValidateToken.ts
@@ -9,7 +9,11 @@ export interface ResponseData {
     content: object,
 }
 
-export default class CallValidateToken extends CallPUT<Data, ResponseData> {
+export type ErrorResponseData = {
+
+};
+
+export default class CallValidateToken extends CallPUT<Data, ResponseData, ErrorResponseData> {
 
     constructor() {
         super(`/token`);

diff --git a/Apps/Client/src/models/calls/user/CallDeleteUser.ts b/Apps/Client/src/models/calls/user/CallDeleteUser.ts
@@ -1,7 +1,7 @@
 import CallDELETE from '../base/CallDELETE';
 
 export interface Data {
-
+    email: string,
 }
 
 export type ResponseData = {
@@ -12,7 +12,7 @@ export interface ErrorResponseData {
 
 }
 
-export default class CallDeleteUser extends CallDELETE {
+export default class CallDeleteUser extends CallDELETE<Data, ResponseData, ErrorResponseData> {
 
     constructor() {
         super(`/user`);

diff --git a/Apps/Client/src/models/calls/user/CallGetSecret.ts b/Apps/Client/src/models/calls/user/CallGetSecret.ts
@@ -6,7 +6,11 @@ export type Data = {
 
 export type ResponseData = string;
 
-export default class CallGetSecret extends CallPOST<Data, ResponseData> {
+export type ErrorResponseData = {
+
+};
+
+export default class CallGetSecret extends CallPOST<Data, ResponseData, ErrorResponseData> {
 
     constructor() {
         super(`/secret`);