add notifications to MGMT and remove console.log statements

edumeet · Nov 14, 2024 · ff5abac · ff5abac
1 parent c69aa2f
commit ff5abac
Show file tree

Hide file tree

Showing 25 changed files with 160 additions and 1,374 deletions.
diff --git a/src/components/managementservice/groups/GroupRole.tsx b/src/components/managementservice/groups/GroupRole.tsx
@@ -1,5 +1,5 @@
+/* eslint-disable camelcase */
 import { SyntheticEvent, useEffect, useMemo, useState } from 'react';
-// eslint-disable-next-line camelcase
 import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
 import { Button, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Autocomplete } from '@mui/material';
 import React from 'react';
@@ -90,7 +90,6 @@ const GroupRoleTable = () => {
 	};
 
 	// should be memoized or stable
-	// eslint-disable-next-line camelcase
 	const columns = useMemo<MRT_ColumnDef<GroupRoles>[]>(
 		() => [
 			{
@@ -239,10 +238,7 @@ const GroupRoleTable = () => {
 		// add new data / mod data / error
 		// eslint-disable-next-line no-alert
 		if (id != 0 && confirm('Are you sure?')) {
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any
-			dispatch(deleteData(id, 'roomGroupRoles')).then((tdata: any) => {
-				// eslint-disable-next-line no-console
-				console.log('User data', tdata);
+			dispatch(deleteData(id, 'roomGroupRoles')).then(() => {
 				fetchProduct();
 				setOpen(false);
 			});

diff --git a/src/components/managementservice/groups/GroupUser.tsx b/src/components/managementservice/groups/GroupUser.tsx
@@ -165,10 +165,7 @@ const GroupUserTable = () => {
 		// add new data / mod data / error
 		// eslint-disable-next-line no-alert
 		if (id != 0 && confirm('Are you sure?')) {
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any
-			dispatch(deleteData(id, 'groupUsers')).then((tdata: any) => {
-				// eslint-disable-next-line no-console
-				console.log('User data', tdata);
+			dispatch(deleteData(id, 'groupUsers')).then(() => {
 				fetchProduct();
 				setOpen(false);
 			});

diff --git a/src/components/managementservice/groups/Groups.tsx b/src/components/managementservice/groups/Groups.tsx
@@ -2,23 +2,16 @@ import Autocomplete from '@mui/material/Autocomplete';
 import { SyntheticEvent, useEffect, useMemo, useState } from 'react';
 // eslint-disable-next-line camelcase
 import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
-import { Button, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Snackbar } from '@mui/material';
+import { Button, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions } from '@mui/material';
 import React from 'react';
-import MuiAlert, { AlertColor, AlertProps } from '@mui/material/Alert';
 import { Groups, Tenant } from '../../../utils/types';
 import { useAppDispatch } from '../../../store/hooks';
-import { createData, deleteData, getData, getTenants, patchData } from '../../../store/actions/managementActions';
+import { createData, deleteData, getData, patchData } from '../../../store/actions/managementActions';
+import { notificationsActions } from '../../../store/slices/notificationsSlice';
 
 const GroupTable = () => {
 	const dispatch = useAppDispatch();
 
-	const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
-		props,
-		ref,
-	) {
-		return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
-	});
-
 	type TenantOptionTypes = Array<Tenant>
 
 	const [ tenants, setTenants ] = useState<TenantOptionTypes>([ { 'id': 0, 'name': '', 'description': '' } ]);
@@ -67,18 +60,6 @@ const GroupTable = () => {
 	const [ cantPatch ] = useState(false);
 	const [ cantDelete ] = useState(false);
 	const [ tenantId, setTenantId ] = useState(0);
-
-	const [ alertOpen, setAlertOpen ] = React.useState(false);
-	const [ alertMessage, setAlertMessage ] = React.useState('');
-	const [ alertSeverity, setAlertSeverity ] = React.useState<AlertColor>('success');
-
-	const handleAlertClose = (event?: React.SyntheticEvent | Event, reason?: string) => {
-		if (reason === 'clickaway') {
-			return;
-		}
-
-		setAlertOpen(false);
-	};
 
 	const [ tenantIdOption, setTenantIdOption ] = useState<Tenant | undefined>();
 	const [ descriptionDisabled, setDescriptionDisabled ] = useState(false);
@@ -87,9 +68,7 @@ const GroupTable = () => {
 	async function fetchProduct() {
 
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		dispatch(getTenants()).then((tdata: any) => {
-			// eslint-disable-next-line no-console
-			console.log('Tenant data', tdata);
+		dispatch(getData('tenants')).then((tdata: any) => {
 			if (tdata != undefined) {
 				setTenants(tdata.data);
 			}
@@ -99,8 +78,6 @@ const GroupTable = () => {
 
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		dispatch(getData('groups')).then((tdata: any) => {
-			// eslint-disable-next-line no-console
-			console.log('Rooms data', tdata);
 			if (tdata != undefined) {
 				setData(tdata.data);
 			}
@@ -164,14 +141,9 @@ const GroupTable = () => {
 		// eslint-disable-next-line no-alert
 		if (id != 0 && confirm('Are you sure?')) {
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any
-			dispatch(deleteData(id, 'groups')).then((tdata: any) => {
-				// eslint-disable-next-line no-console
-				console.log('User data', tdata);
+			dispatch(deleteData(id, 'groups')).then(() => {
 				fetchProduct();
 				setOpen(false);
-				setAlertMessage('Successfull delete!');
-				setAlertSeverity('success');
-				setAlertOpen(true);
 			});
 		}
 	};
@@ -182,38 +154,25 @@ const GroupTable = () => {
 		if (name != '' && id === 0) {
 			dispatch(createData({ 
 				name: name,
-			}, 'groups')).then((tdata: unknown) => {
-				// eslint-disable-next-line no-console
-				console.log('User data', tdata);
+			}, 'groups')).then(() => {
 				fetchProduct();
 				setOpen(false);
-				// TODO finish
-				setAlertMessage('Successfull add!');
-				setAlertSeverity('success');
-				setAlertOpen(true);
-
 			});
 		} else if (name != '' && id != 0) {
 			dispatch(patchData(id,
 				{
 					name: name,
 					description: description,
 					tenantId: tenantId
-				}, 'groups')).then((tdata: unknown) => {
-				// eslint-disable-next-line no-console
-				console.log('User data', tdata);
+				}, 'groups')).then(() => {
 				fetchProduct();
 				setOpen(false);
-				// TODO finish
-				setAlertMessage('Successfull add!');
-				setAlertSeverity('success');
-				setAlertOpen(true);
-
 			});
 		} else {
-			setAlertMessage('Name cannot be empty!');
-			setAlertSeverity('warning');
-			setAlertOpen(true);
+			dispatch(notificationsActions.enqueueNotification({
+				message: 'Name cannot be empty!',
+				options: { variant: 'warning' }
+			}));
 		}
 
 	};
@@ -225,11 +184,6 @@ const GroupTable = () => {
 				Add new
 			</Button>
 			<hr />
-			<Snackbar open={alertOpen} autoHideDuration={6000} onClose={handleAlertClose}>
-				<Alert onClose={handleAlertClose} severity={alertSeverity} sx={{ width: '100%' }}>
-					{alertMessage}
-				</Alert>
-			</Snackbar>
 
 			<Dialog open={open} onClose={handleClose}>
 				<DialogTitle>Add/Edit</DialogTitle>

diff --git a/src/components/managementservice/permisssion/Permission.tsx b/src/components/managementservice/permisssion/Permission.tsx
@@ -1,27 +1,15 @@
 import { useEffect, useMemo, useState } from 'react';
 // eslint-disable-next-line camelcase
 import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
-import { Button, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Snackbar } from '@mui/material';
+import { Button, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions } from '@mui/material';
 import React from 'react';
-import MuiAlert, { AlertColor, AlertProps } from '@mui/material/Alert';
 import { useAppDispatch } from '../../../store/hooks';
 import { createData, deleteData, getData, patchData } from '../../../store/actions/managementActions';
 import { Permissions } from '../../../utils/types';
 
 const PermissionTable = () => {
 	const dispatch = useAppDispatch();
 
-	const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
-		props,
-		ref,
-	) {
-		return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
-	});
-
-	const [ alertOpen, setAlertOpen ] = React.useState(false);
-	const [ alertMessage, setAlertMessage ] = React.useState('');
-	const [ alertSeverity, setAlertSeverity ] = React.useState<AlertColor>('success');
-
 	// should be memoized or stable
 	// eslint-disable-next-line camelcase
 	const columns = useMemo<MRT_ColumnDef<Permissions>[]>(
@@ -56,8 +44,6 @@ const PermissionTable = () => {
 
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		dispatch(getData('permissions')).then((tdata: any) => {
-			// eslint-disable-next-line no-console
-			console.log('Rooms data', tdata);
 			if (tdata != undefined) {
 				setData(tdata.data);
 			}
@@ -103,14 +89,9 @@ const PermissionTable = () => {
 		// eslint-disable-next-line no-alert
 		if (id != 0 && confirm('Are you sure?')) {
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any
-			dispatch(deleteData(id, 'permissions')).then((tdata: any) => {
-				// eslint-disable-next-line no-console
-				console.log('User data', tdata);
+			dispatch(deleteData(id, 'permissions')).then(() => {
 				fetchProduct();
 				setOpen(false);
-				setAlertMessage('Successfull delete!');
-				setAlertSeverity('success');
-				setAlertOpen(true);
 			});
 		}
 	};
@@ -122,57 +103,30 @@ const PermissionTable = () => {
 			dispatch(createData({ 
 				name: name,
 				description: description
-			}, 'permissions')).then((tdata: unknown) => {
-				// eslint-disable-next-line no-console
-				console.log('User data', tdata);
+			}, 'permissions')).then(() => {
 				fetchProduct();
 				setOpen(false);
-				// TODO finish
-				setAlertMessage('Successfull add!');
-				setAlertSeverity('success');
-				setAlertOpen(true);
-
 			});
 
 		} else if (name != '' && id != 0) {
 			dispatch(patchData(id, { 
 				name: name,
 				description: description
-			}, 'permissions')).then((tdata: unknown) => {
-				// eslint-disable-next-line no-console
-				console.log('Room data', tdata);
-				// TODO finish
+			}, 'permissions')).then(() => {
 				fetchProduct();
 				setOpen(false);
-				setAlertMessage('Successfull modify!');
-				setAlertSeverity('success');
-				setAlertOpen(true);
-
 			});
 		}
 
 	};
 
-	const handleAlertClose = (event?: React.SyntheticEvent | Event, reason?: string) => {
-		if (reason === 'clickaway') {
-			return;
-		}
-
-		setAlertOpen(false);
-	};
-
 	return <>
 		<div>
 			<Button variant="outlined" disabled onClick={() => handleClickOpen()}>
 				Add new
 			</Button>
 			<hr/>
 
-			<Snackbar open={alertOpen} autoHideDuration={6000} onClose={handleAlertClose}>
-				<Alert onClose={handleAlertClose} severity={alertSeverity} sx={{ width: '100%' }}>
-					{alertMessage}
-				</Alert>
-			</Snackbar>
 			<Dialog open={open} onClose={handleClose}>
 				<DialogTitle>Add/Edit</DialogTitle>
 				<DialogContent>