Reduce duplicate code for modals

Introduces a generic modal component and
replaces existing modal code with the new
component. This intention here is to reduce
code duplication and to make future generic
changes to modals (i.e. focus trapping) easier.

src/components/Header.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import i18n from "../i18n/i18n";
@@ -23,6 +23,7 @@ import { UserInfoState } from "../slices/userInfoSlice";
 import { Tooltip } from "./shared/Tooltip";
 import { HiTranslate } from "react-icons/hi";
 import { IconContext } from "react-icons";
+import { ModalHandle } from "./shared/modals/Modal";
 
 // References for detecting a click outside of the container of the dropdown menus
 const containerLang = React.createRef<HTMLDivElement>();
@@ -52,8 +53,8 @@ const Header = () => {
 	const [displayMenuUser, setMenuUser] = useState(false);
 	const [displayMenuNotify, setMenuNotify] = useState(false);
 	const [displayMenuHelp, setMenuHelp] = useState(false);
-	const [displayRegistrationModal, setRegistrationModal] = useState(false);
-	const [displayHotKeyCheatSheet, setHotKeyCheatSheet] = useState(false);
+	const registrationModalRef = useRef<ModalHandle>(null);
+	const hotKeyCheatSheetModalRef = useRef<ModalHandle>(null);
 
 	const healthStatus = useAppSelector(state => getHealthStatus(state));
 	const errorCounter = useAppSelector(state => getErrorCount(state));
@@ -69,11 +70,7 @@ const Header = () => {
 	};
 
 	const showRegistrationModal = () => {
-		setRegistrationModal(true);
-	};
-
-	const hideRegistrationModal = () => {
-		setRegistrationModal(false);
+		registrationModalRef.current?.open()
 	};
 
 	const redirectToServices = async () => {
@@ -85,15 +82,15 @@ const Header = () => {
 	};
 
 	const showHotKeyCheatSheet = () => {
-		setHotKeyCheatSheet(true);
-	};
-
-	const hideHotKeyCheatSheet = () => {
-		setHotKeyCheatSheet(false);
+		hotKeyCheatSheetModalRef.current?.open()
 	};
 
 	const toggleHotKeyCheatSheet = () => {
-		setHotKeyCheatSheet(!displayHotKeyCheatSheet);
+		if (hotKeyCheatSheetModalRef.current?.isOpen?.()) {
+			hotKeyCheatSheetModalRef.current?.close?.()
+		} else {
+			hotKeyCheatSheetModalRef.current?.open()
+		}
 	};
 
 	useHotkeys(
@@ -277,14 +274,10 @@ const Header = () => {
 			</header>
 
 			{/* Adopters Registration Modal */}
-			{displayRegistrationModal && (
-				<RegistrationModal close={hideRegistrationModal} />
-			)}
+			<RegistrationModal modalRef={registrationModalRef}/>
 
 			{/* Hotkey Cheat Sheet */}
-			{displayHotKeyCheatSheet && (
-				<HotKeyCheatSheet close={hideHotKeyCheatSheet} />
-			)}
+			<HotKeyCheatSheet modalRef={hotKeyCheatSheetModalRef}/>
 		</>
 	);
 };

src/components/configuration/Themes.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import MainNav from "../shared/MainNav";
 import { Link } from "react-router-dom";
@@ -20,6 +20,7 @@ import { hasAccess } from "../../utils/utils";
 import { getCurrentFilterResource } from "../../selectors/tableFilterSelectors";
 import { useAppDispatch, useAppSelector } from "../../store";
 import { fetchThemes } from "../../slices/themeSlice";
+import { ModalHandle } from "../shared/modals/Modal";
 
 /**
  * This component renders the table view of events
@@ -31,7 +32,7 @@ const Themes = () => {
 	const currentFilterType = useAppSelector(state => getCurrentFilterResource(state));
 
 	const [displayNavigation, setNavigation] = useState(false);
-	const [displayNewThemesModal, setNewThemesModal] = useState(false);
+	const newThemesModalRef = useRef<ModalHandle>(null);
 
 	const user = useAppSelector(state => getUserInformation(state));
 	const themes = useAppSelector(state => getTotalThemes(state));
@@ -67,24 +68,23 @@ const Themes = () => {
 	};
 
 	const showNewThemesModal = () => {
-		setNewThemesModal(true);
+		newThemesModalRef.current?.open();
 	};
 
 	const hideNewThemesModal = () => {
-		setNewThemesModal(false);
+		newThemesModalRef.current?.close?.();
 	};
 
 	return (
 		<>
 			<Header />
 			<NavBar>
 				{/* Display modal for new series if add series button is clicked */}
-				{ displayNewThemesModal &&
-					<NewResourceModal
-						handleClose={hideNewThemesModal}
-						resource={"themes"}
-					/>
-				}
+				<NewResourceModal
+					handleClose={hideNewThemesModal}
+					resource={"themes"}
+					modalRef={newThemesModalRef}
+				/>
 
 				{/* Include Burger-button menu*/}
 				<MainNav isOpen={displayNavigation} toggleMenu={toggleNavigation} />

src/components/configuration/partials/ThemesActionsCell.tsx

@@ -1,7 +1,6 @@
-import React, { useState } from "react";
+import React, { useRef } from "react";
 import { useTranslation } from "react-i18next";
 import ConfirmModal from "../../shared/ConfirmModal";
-import ThemeDetailsModal from "./wizard/ThemeDetailsModal";
 import {
 	fetchThemeDetails,
 	fetchUsage,
@@ -11,6 +10,8 @@ import { hasAccess } from "../../../utils/utils";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { deleteTheme, ThemeDetailsType } from "../../../slices/themeSlice";
 import { Tooltip } from "../../shared/Tooltip";
+import ThemeDetails from "./wizard/ThemeDetails";
+import { Modal, ModalHandle } from "../../shared/modals/Modal";
 
 /**
  * This component renders the action cells of themes in the table view
@@ -23,24 +24,24 @@ const ThemesActionsCell = ({
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 
-	const [displayDeleteConfirmation, setDeleteConfirmation] = useState(false);
-	const [displayThemeDetails, setThemeDetails] = useState(false);
+	const deleteConfirmationModalRef = useRef<ModalHandle>(null);
+	const detailsModalRef = useRef<ModalHandle>(null);
 
 	const user = useAppSelector(state => getUserInformation(state));
 
 	const hideDeleteConfirmation = () => {
-		setDeleteConfirmation(false);
+		deleteConfirmationModalRef.current?.close?.();
 	};
 
 	const hideThemeDetails = () => {
-		setThemeDetails(false);
+		detailsModalRef.current?.close?.();
 	};
 
 	const showThemeDetails = async () => {
 		await dispatch(fetchThemeDetails(row.id));
 		await dispatch(fetchUsage(row.id));
 
-		setThemeDetails(true);
+		detailsModalRef.current?.open();
 	};
 
 	const deletingTheme = (id: number) => {
@@ -59,32 +60,34 @@ const ThemesActionsCell = ({
 				</Tooltip>
 			)}
 
-			{displayThemeDetails && (
-				<ThemeDetailsModal
-					handleClose={hideThemeDetails}
-					themeName={row.name}
-				/>
-			)}
+			{/* themes details modal */}
+			<Modal
+				header={t("CONFIGURATION.THEMES.DETAILS.EDITCAPTION", { name: row.name })}
+				classId="theme-details-modal"
+				ref={detailsModalRef}
+			>
+				{/* component that manages tabs of theme details modal*/}
+				<ThemeDetails close={hideThemeDetails} />
+			</Modal>
 
 			{/* delete themes */}
 			{hasAccess("ROLE_UI_THEMES_DELETE", user) && (
 				<Tooltip title={t("CONFIGURATION.THEMES.TABLE.TOOLTIP.DELETE")}>
 					<button
-						onClick={() => setDeleteConfirmation(true)}
+						onClick={() => deleteConfirmationModalRef.current?.open()}
 						className="button-like-anchor remove ng-scope ng-isolate-scope"
 					/>
 				</Tooltip>
 			)}
 
-			{displayDeleteConfirmation && (
-				<ConfirmModal
-					close={hideDeleteConfirmation}
-					resourceName={row.name}
-					resourceId={row.id}
-					deleteMethod={deletingTheme}
-					resourceType="THEME"
-				/>
-			)}
+			<ConfirmModal
+				close={hideDeleteConfirmation}
+				resourceName={row.name}
+				resourceId={row.id}
+				deleteMethod={deletingTheme}
+				resourceType="THEME"
+				modalRef={deleteConfirmationModalRef}
+			/>
 		</>
 	);
 };