refactor team panel to get rid of error of unused code, and add generic modals

Client/src/Components/TabPanels/Account/ProfilePanel.jsx

@@ -1,7 +1,7 @@
 import { useTheme } from "@emotion/react";
 import { useRef, useState } from "react";
 import TabPanel from "@mui/lab/TabPanel";
-import { Box, Button, Divider, Modal, Stack, Typography } from "@mui/material";
+import { Box, Button, Divider, Stack, Typography } from "@mui/material";
 import Avatar from "../../Avatar";
 import Field from "../../Inputs/Field";
 import ImageField from "../../Inputs/Image";
@@ -15,6 +15,7 @@ import { clearUptimeMonitorState } from "../../../Features/UptimeMonitors/uptime
 import { createToast } from "../../../Utils/toastUtils";
 import { logger } from "../../../Utils/Logger";
 import LoadingButton from "@mui/lab/LoadingButton";
+import { GenericDialog } from "../../Dialog/genericDialog";
 
 /**
  * ProfilePanel component displays a form for editing user profile information
@@ -369,158 +370,121 @@ const ProfilePanel = () => {
 				</Box>
 			)}
 			{/* TODO - Update ModalPopup Component with @mui for reusability */}
-			<Modal
-				aria-labelledby="modal-delete-account"
-				aria-describedby="delete-account-confirmation"
+			<GenericDialog
+				title={"modal-delete-account"}
+				description={"delete-account-confirmation"}
 				open={isModalOpen("delete")}
-				onClose={() => setIsOpen("")}
-				disablePortal
+				close={() => setIsOpen("")}
+				theme={theme}
+				/* disablePortal ? */
 			>
+				<Typography
+					id="modal-delete-account"
+					component="h1"
+				>
+					Really delete this account?
+				</Typography>
+				<Typography
+					id="delete-account-confirmation"
+					component="p"
+				>
+					If you delete your account, you will no longer be able to sign in, and all of
+					your data will be deleted. Deleting your account is permanent and
+					non-recoverable action.
+				</Typography>
 				<Stack
+					direction="row"
 					gap={theme.spacing(5)}
-					sx={{
-						position: "absolute",
-						top: "50%",
-						left: "50%",
-						transform: "translate(-50%, -50%)",
-						width: 500,
-						bgcolor: theme.palette.background.main,
-						border: 1,
-						borderColor: theme.palette.border.light,
-						borderRadius: theme.shape.borderRadius,
-						boxShadow: 24,
-						p: theme.spacing(15),
-						"&:focus": {
-							outline: "none",
-						},
-					}}
+					mt={theme.spacing(5)}
+					justifyContent="flex-end"
 				>
-					<Typography
-						id="modal-delete-account"
-						component="h1"
+					<Button
+						variant="text"
+						color="info"
+						onClick={() => setIsOpen("")}
 					>
-						Really delete this account?
-					</Typography>
-					<Typography
-						id="delete-account-confirmation"
-						component="p"
+						Cancel
+					</Button>
+					<LoadingButton
+						variant="contained"
+						color="error"
+						onClick={handleDeleteAccount}
+						loading={isLoading}
 					>
-						If you delete your account, you will no longer be able to sign in, and all of
-						your data will be deleted. Deleting your account is permanent and
-						non-recoverable action.
-					</Typography>
-					<Stack
-						direction="row"
-						gap={theme.spacing(5)}
-						mt={theme.spacing(5)}
-						justifyContent="flex-end"
-					>
-						<Button
-							variant="text"
-							color="info"
-							onClick={() => setIsOpen("")}
-						>
-							Cancel
-						</Button>
-						<LoadingButton
-							variant="contained"
-							color="error"
-							onClick={handleDeleteAccount}
-							loading={isLoading}
-						>
-							Delete account
-						</LoadingButton>
-					</Stack>
+						Delete account
+					</LoadingButton>
 				</Stack>
-			</Modal>
-			<Modal
-				aria-labelledby="modal-update-picture"
-				aria-describedby="update-profile-picture"
+			</GenericDialog>
+			<GenericDialog
+				title={"modal-update-picture"}
+				description={"update-profile-picture"}
 				open={isModalOpen("picture")}
-				onClose={closePictureModal}
+				close={closePictureModal}
+				theme={theme}
 			>
-				<Stack
-					sx={{
-						position: "absolute",
-						top: "50%",
-						left: "50%",
-						transform: "translate(-50%, -50%)",
-						width: 475,
-						bgcolor: theme.palette.background.main,
-						border: 1,
-						borderColor: theme.palette.border.light,
-						borderRadius: theme.shape.borderRadius,
-						boxShadow: theme.shape.boxShadow,
-						p: theme.spacing(15),
-						"&:focus": {
-							outline: "none",
-						},
-					}}
+				<Typography
+					id="modal-update-picture"
+					component="h1"
+					color={theme.palette.text.secondary}
 				>
-					<Typography
-						id="modal-update-picture"
-						component="h1"
-						color={theme.palette.text.secondary}
-					>
-						Upload Image
-					</Typography>
-					<ImageField
-						id="update-profile-picture"
-						src={
-							file?.delete
-								? ""
-								: file?.src
-									? file.src
-									: localData?.file
-										? localData.file
-										: user?.avatarImage
-											? `data:image/png;base64,${user.avatarImage}`
-											: ""
-						}
-						loading={progress.isLoading && progress.value !== 100}
-						onChange={handlePicture}
+					Upload Image
+				</Typography>
+				<ImageField
+					id="update-profile-picture"
+					src={
+						file?.delete
+							? ""
+							: file?.src
+								? file.src
+								: localData?.file
+									? localData.file
+									: user?.avatarImage
+										? `data:image/png;base64,${user.avatarImage}`
+										: ""
+					}
+					loading={progress.isLoading && progress.value !== 100}
+					onChange={handlePicture}
+				/>
+				{progress.isLoading || progress.value !== 0 || errors["picture"] ? (
+					<ProgressUpload
+						icon={<ImageIcon />}
+						label={file?.name}
+						size={file?.size}
+						progress={progress.value}
+						onClick={removePicture}
+						error={errors["picture"]}
 					/>
-					{progress.isLoading || progress.value !== 0 || errors["picture"] ? (
-						<ProgressUpload
-							icon={<ImageIcon />}
-							label={file?.name}
-							size={file?.size}
-							progress={progress.value}
-							onClick={removePicture}
-							error={errors["picture"]}
-						/>
-					) : (
-						""
-					)}
-					<Stack
-						direction="row"
-						mt={theme.spacing(10)}
-						gap={theme.spacing(5)}
-						justifyContent="flex-end"
+				) : (
+					""
+				)}
+				<Stack
+					direction="row"
+					mt={theme.spacing(10)}
+					gap={theme.spacing(5)}
+					justifyContent="flex-end"
+				>
+					<Button
+						variant="text"
+						color="info"
+						onClick={removePicture}
 					>
-						<Button
-							variant="text"
-							color="info"
-							onClick={removePicture}
-						>
-							Remove
-						</Button>
-						<Button
-							variant="contained"
-							color="primary"
-							onClick={handleUpdatePicture}
-							disabled={
-								(Object.keys(errors).length !== 0 && errors?.picture) ||
-								progress.value !== 100
-									? true
-									: false
-							}
-						>
-							Update
-						</Button>
-					</Stack>
+						Remove
+					</Button>
+					<Button
+						variant="contained"
+						color="primary"
+						onClick={handleUpdatePicture}
+						disabled={
+							(Object.keys(errors).length !== 0 && errors?.picture) ||
+							progress.value !== 100
+								? true
+								: false
+						}
+					>
+						Update
+					</Button>
 				</Stack>
-			</Modal>
+			</GenericDialog>
 		</TabPanel>
 	);
 };

Client/src/Components/TabPanels/Account/TeamPanel.jsx

@@ -1,6 +1,6 @@
 import { useTheme } from "@emotion/react";
 import TabPanel from "@mui/lab/TabPanel";
-import { Box, Button, ButtonGroup, Modal, Stack, Typography } from "@mui/material";
+import { Box, Button, ButtonGroup, Stack, Typography } from "@mui/material";
 import { useEffect, useState } from "react";
 import Field from "../../Inputs/Field";
 import { credentials } from "../../../Validation/validation";
@@ -10,6 +10,7 @@ import { useSelector } from "react-redux";
 import BasicTable from "../../BasicTable";
 import Select from "../../Inputs/Select";
 import LoadingButton from "@mui/lab/LoadingButton";
+import { GenericDialog } from "../../Dialog/genericDialog";
 
 /**
  * TeamPanel component manages the organization and team members,
@@ -31,10 +32,10 @@ const TeamPanel = () => {
 
 	const { authToken, user } = useSelector((state) => state.auth);
 	//TODO
-	const [orgStates, setOrgStates] = useState({
-		name: "Bluewave Labs",
-		isEdit: false,
-	});
+	// const [orgStates, setOrgStates] = useState({
+	// 	name: "Bluewave Labs",
+	// 	isEdit: false,
+	// });
 	const [toInvite, setToInvite] = useState({
 		email: "",
 		role: ["0"],
@@ -134,10 +135,10 @@ const TeamPanel = () => {
 	}, [errors, toInvite.email]);
 
 	// RENAME ORGANIZATION
-	const toggleEdit = () => {
-		setOrgStates((prev) => ({ ...prev, isEdit: !prev.isEdit }));
-	};
-	const handleRename = () => {};
+	// const toggleEdit = () => {
+	// 	setOrgStates((prev) => ({ ...prev, isEdit: !prev.isEdit }));
+	// };
+	// const handleRename = () => {};
 
 	// INVITE MEMBER
 	const [isOpen, setIsOpen] = useState(false);
@@ -327,100 +328,82 @@ const TeamPanel = () => {
 					table={"team"}
 				/>
 			</Stack>
-			<Modal
-				aria-labelledby="modal-invite-member"
-				aria-describedby="invite-member-to-team"
+
+			<GenericDialog
+				title={"modal-invite-member"}
+				description={"invite-member-to-team"}
 				open={isOpen}
-				onClose={closeInviteModal}
+				close={closeInviteModal}
+				theme={theme}
 			>
-				<Stack
-					gap={theme.spacing(5)}
-					sx={{
-						position: "absolute",
-						top: "50%",
-						left: "50%",
-						transform: "translate(-50%, -50%)",
-						width: 450,
-						bgcolor: theme.palette.background.main,
-						border: 1,
-						borderColor: theme.palette.border.light,
-						borderRadius: theme.shape.borderRadius,
-						boxShadow: theme.shape.boxShadow,
-						p: theme.spacing(15),
-						"&:focus": {
-							outline: "none",
-						},
-					}}
-				>
-					<Box>
-						<Typography
-							id="modal-invite-member"
-							component="h1"
-							fontWeight={600}
-							fontColor={theme.palette.text.secondary}
-						>
-							Invite new team member
-						</Typography>
-						<Typography
-							id="invite-member-to-team"
-							component="p"
-							fontSize={13}
-							color={theme.palette.text.accent}
-							sx={{ mt: theme.spacing(1), mb: theme.spacing(4) }}
-						>
-							When you add a new team member, they will get access to all monitors.
-						</Typography>
-					</Box>
-					<Field
-						type="email"
-						id="input-team-member"
-						placeholder="Email"
-						value={toInvite.email}
-						onChange={handleChange}
-						error={errors.email}
-					/>
-					<Select
-						id="team-member-role"
-						placeholder="Select role"
-						isHidden={true}
-						value={toInvite.role[0]}
-						onChange={(event) =>
-							setToInvite((prev) => ({
-								...prev,
-								role: [event.target.value],
-							}))
-						}
-						items={[
-							{ _id: "admin", name: "Admin" },
-							{ _id: "user", name: "User" },
-						]}
-					/>
-					<Stack
-						direction="row"
-						gap={theme.spacing(4)}
-						mt={theme.spacing(8)}
-						justifyContent="flex-end"
+				<Box>
+					<Typography
+						id="modal-invite-member"
+						component="h1"
+						fontWeight={600}
+						fontColor={theme.palette.text.secondary}
 					>
-						<LoadingButton
-							loading={isSendingInvite}
-							variant="text"
-							color="info"
-							onClick={closeInviteModal}
-						>
-							Cancel
-						</LoadingButton>
-						<LoadingButton
-							variant="contained"
-							color="primary"
-							onClick={handleInviteMember}
-							loading={isSendingInvite}
-							disabled={isDisabled}
-						>
-							Send invite
-						</LoadingButton>
-					</Stack>
+						Invite new team member
+					</Typography>
+					<Typography
+						id="invite-member-to-team"
+						component="p"
+						fontSize={13}
+						color={theme.palette.text.accent}
+						sx={{ mt: theme.spacing(1), mb: theme.spacing(4) }}
+					>
+						When you add a new team member, they will get access to all monitors.
+					</Typography>
+				</Box>
+				<Field
+					type="email"
+					id="input-team-member"
+					placeholder="Email"
+					value={toInvite.email}
+					onChange={handleChange}
+					error={errors.email}
+				/>
+				<Select
+					id="team-member-role"
+					placeholder="Select role"
+					isHidden={true}
+					value={toInvite.role[0]}
+					onChange={(event) =>
+						setToInvite((prev) => ({
+							...prev,
+							role: [event.target.value],
+						}))
+					}
+					items={[
+						{ _id: "admin", name: "Admin" },
+						{ _id: "user", name: "User" },
+					]}
+				/>
+				<Stack
+					direction="row"
+					gap={theme.spacing(4)}
+					mt={theme.spacing(8)}
+					justifyContent="flex-end"
+				>
+					<LoadingButton
+						loading={isSendingInvite}
+						variant="text"
+						color="info"
+						onClick={closeInviteModal}
+					>
+						Cancel
+					</LoadingButton>
+					<LoadingButton
+						variant="contained"
+						color="primary"
+						onClick={handleInviteMember}
+						loading={isSendingInvite}
+						disabled={isDisabled}
+					>
+						Send invite
+					</LoadingButton>
 				</Stack>
-			</Modal>
+			</GenericDialog>
 		</TabPanel>
 	);
 };