Reduce duplicate code for modals

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";
 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";
@@ -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,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useRef } from "react";
 import { useTranslation } from "react-i18next";
 import ConfirmModal from "../../shared/ConfirmModal";
 import {
@@ -11,7 +11,7 @@ import { useAppDispatch, useAppSelector } from "../../../store";
 import { deleteTheme, ThemeDetailsType } from "../../../slices/themeSlice";
 import { Tooltip } from "../../shared/Tooltip";
 import ThemeDetails from "./wizard/ThemeDetails";
-import DetailsModal from "../../shared/modals/DetailsModal";
+import { Modal, ModalHandle } from "../../shared/modals/Modal";
 
 /**
  * This component renders the action cells of themes in the table view
@@ -24,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) => {
@@ -60,35 +60,34 @@ const ThemesActionsCell = ({
 				</Tooltip>
 			)}
 
-			{displayThemeDetails && (
-				<DetailsModal
-					handleClose={hideThemeDetails}
-					title={row.name}
-					prefix={"CONFIGURATION.THEMES.DETAILS.EDITCAPTION"}
-				>
-					<ThemeDetails close={hideThemeDetails} />
-				</DetailsModal>
-			)}
+			{/* 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}
+			/>
 		</>
 	);
 };