Don't render series modal in action cells

Arnei · Arnei · commit 4b593c75f535 · 2025-09-11T11:26:26.000+02:00
This commit removes the series details modal component from every
action cell in the table, and instead adds the component to the
respective central page file (i.e. Series.tsx). The modal can then
be opened through redux, similar to how it already works for events.

The goal of these changes is to speed up table rendering.
For a series table with 1000 rows, these changes sped up rendering by
about 150ms in my local testing.

This also fixes an issue where opening the events details modal would
cause the entire events table to rerender. Opening the events details
should be a bit smoother now.
diff --git a/src/components/events/Events.tsx b/src/components/events/Events.tsx
@@ -34,11 +34,11 @@ import {
 	setShowActions,
 } from "../../slices/eventSlice";
 import EventDetailsModal from "./partials/modals/EventDetailsModal";
-import { showModal } from "../../selectors/eventDetailsSelectors";
 import { eventsLinks } from "./partials/EventsNavigation";
 import { Modal, ModalHandle } from "../shared/modals/Modal";
 import TableActionDropdown from "../shared/TableActionDropdown";
 import { resetTableProperties } from "../../slices/tableSlice";
+import SeriesDetailsModal from "./partials/modals/SeriesDetailsModal";
 
 /**
  * This component renders the table view of events
@@ -47,8 +47,6 @@ const Events = () => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 
-	const displayEventDetailsModal = useAppSelector(state => showModal(state));
-
 	const [displayNavigation, setNavigation] = useState(false);
 	const newEventModalRef = useRef<ModalHandle>(null);
 	const startTaskModalRef = useRef<ModalHandle>(null);
@@ -230,9 +228,8 @@ const Events = () => {
 				</div>
 
 				{/*Include table modal*/}
-				{displayEventDetailsModal &&
 					<EventDetailsModal />
-				}
+				<SeriesDetailsModal />
 
 				{/*Include table component*/}
 				{/* <Table templateMap={eventsTemplateMap} resourceType="events" /> */}
diff --git a/src/components/events/Series.tsx b/src/components/events/Series.tsx
@@ -28,13 +28,15 @@ import { Modal, ModalHandle } from "../shared/modals/Modal";
 import { availableHotkeys } from "../../configs/hotkeysConfig";
 import TableActionDropdown from "../shared/TableActionDropdown";
 import { resetTableProperties } from "../../slices/tableSlice";
+import SeriesDetailsModal from "./partials/modals/SeriesDetailsModal";
 
 /**
  * This component renders the table view of series
  */
 const Series = () => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
+
 	const [displayNavigation, setNavigation] = useState(false);
 	const newSeriesModalRef = useRef<ModalHandle>(null);
 	const deleteModalRef = useRef<ModalHandle>(null);
@@ -150,6 +152,10 @@ const Series = () => {
 					{/* Include table view */}
 					<h4>{t("TABLE_SUMMARY", { numberOfRows: series })}</h4>
 				</div>
+
+				{/*Include table modal*/}
+				<SeriesDetailsModal />
+
 				<Table templateMap={seriesTemplateMap} />
 			</MainView>
 			<Footer />
diff --git a/src/components/events/partials/EventActionCell.tsx b/src/components/events/partials/EventActionCell.tsx
@@ -3,21 +3,22 @@ import { useTranslation } from "react-i18next";
 import EmbeddingCodeModal from "./modals/EmbeddingCodeModal";
 import { getUserInformation } from "../../../selectors/userInfoSelectors";
 import { hasAccess } from "../../../utils/utils";
-import SeriesDetailsModal from "./modals/SeriesDetailsModal";
 import { EventDetailsPage } from "./modals/EventDetails";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import {
 	fetchSeriesDetailsAcls,
 	fetchSeriesDetailsMetadata,
 	fetchSeriesDetailsTheme,
 	fetchSeriesDetailsThemeNames,
+	openModal as openSeriesModal,
 } from "../../../slices/seriesDetailsSlice";
 import { Event, deleteEvent } from "../../../slices/eventSlice";
 import { Tooltip } from "../../shared/Tooltip";
 import { openModal } from "../../../slices/eventDetailsSlice";
 import { ActionCellDelete } from "../../shared/ActionCellDelete";
 import { Modal, ModalHandle } from "../../shared/modals/Modal";
 import ButtonLikeAnchor from "../../shared/ButtonLikeAnchor";
+import { SeriesDetailsPage } from "./modals/SeriesDetails";
 
 /**
  * This component renders the action cells of events in the table view
@@ -30,7 +31,6 @@ const EventActionCell = ({
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 
-	const seriesDetailsModalRef = useRef<ModalHandle>(null);
 	const embeddingCodeModalRef = useRef<ModalHandle>(null);
 
 	const user = useAppSelector(state => getUserInformation(state));
@@ -48,7 +48,7 @@ const EventActionCell = ({
 	};
 
 	const showSeriesDetailsModal = () => {
-		seriesDetailsModalRef.current?.open();
+		dispatch(openSeriesModal(SeriesDetailsPage.Metadata, row.series ? row.series : null));
 	};
 
 	const onClickSeriesDetails = async () => {
@@ -82,14 +82,6 @@ const EventActionCell = ({
 
 	return (
 		<>
-			{!!row.series && (
-				<SeriesDetailsModal
-					seriesId={row.series.id}
-					seriesTitle={row.series.title}
-					modalRef={seriesDetailsModalRef}
-				/>
-			)}
-
 			{/* Open event details */}
 			<ButtonLikeAnchor
 				onClick={onClickEventDetails}
diff --git a/src/components/events/partials/SeriesActionsCell.tsx b/src/components/events/partials/SeriesActionsCell.tsx
@@ -1,12 +1,12 @@
 import React, { useRef } from "react";
 import ConfirmModal from "../../shared/ConfirmModal";
-import SeriesDetailsModal from "./modals/SeriesDetailsModal";
 import {
 	fetchSeriesDetailsThemeNames,
 	fetchSeriesDetailsAcls,
 	fetchSeriesDetailsMetadata,
 	fetchSeriesDetailsTheme,
 	fetchSeriesDetailsTobira,
+	openModal,
 } from "../../../slices/seriesDetailsSlice";
 import {
 	getSeriesHasEvents,
@@ -20,6 +20,7 @@ import {
 } from "../../../slices/seriesSlice";
 import { ModalHandle } from "../../shared/modals/Modal";
 import ButtonLikeAnchor from "../../shared/ButtonLikeAnchor";
+import { SeriesDetailsPage } from "./modals/SeriesDetails";
 
 /**
  * This component renders the action cells of series in the table view
@@ -32,7 +33,6 @@ const SeriesActionsCell = ({
 	const dispatch = useAppDispatch();
 
 	const deleteConfirmationModalRef = useRef<ModalHandle>(null);
-	const detailsModalRef = useRef<ModalHandle>(null);
 
 	const hasEvents = useAppSelector(state => getSeriesHasEvents(state));
 	const deleteAllowed = useAppSelector(state => isSeriesDeleteAllowed(state));
@@ -60,7 +60,7 @@ const SeriesActionsCell = ({
 			dispatch(fetchSeriesDetailsTobira(row.id)),
 		]);
 
-		detailsModalRef.current?.open();
+		dispatch(openModal(SeriesDetailsPage.Metadata, row));
 	};
 
 	return (
@@ -73,12 +73,6 @@ const SeriesActionsCell = ({
 				tooltipText={"EVENTS.SERIES.TABLE.TOOLTIP.DETAILS"}
 			/>
 
-			<SeriesDetailsModal
-				seriesId={row.id}
-				seriesTitle={row.title}
-				modalRef={detailsModalRef}
-			/>
-
 			{/* delete series */}
 			<ButtonLikeAnchor
 				onClick={() => showDeleteConfirmation()}
diff --git a/src/components/events/partials/modals/EventDetailsModal.tsx b/src/components/events/partials/modals/EventDetailsModal.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import EventDetails from "./EventDetails";
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import { removeNotificationWizardForm } from "../../../../slices/notificationSlice";
-import { getModalEvent } from "../../../../selectors/eventDetailsSelectors";
+import { getModalEvent, showModal } from "../../../../selectors/eventDetailsSelectors";
 import { setModalEvent, setShowModal } from "../../../../slices/eventDetailsSlice";
 import { Modal } from "../../../shared/modals/Modal";
 import { FormikProps } from "formik";
@@ -20,6 +20,7 @@ const EventDetailsModal = () => {
 	const [policyChanged, setPolicyChanged] = useState(false);
 	const formikRef = useRef<FormikProps<any>>(null);
 
+	const displayEventDetailsModal = useAppSelector(state => showModal(state));
 	const event = useAppSelector(state => getModalEvent(state))!;
 
 	const hideModal = () => {
@@ -44,19 +45,23 @@ const EventDetailsModal = () => {
 	};
 
 	return (
-		<Modal
-			open
-			closeCallback={close}
-			header={t("EVENTS.EVENTS.DETAILS.HEADER", { name: event.title })}
-			classId="details-modal"
-		>
-			<EventDetails
-				eventId={event.id}
-				policyChanged={policyChanged}
-				setPolicyChanged={(value) => setPolicyChanged(value)}
-				formikRef={formikRef}
-			/>
-		</Modal>
+		<>
+			{displayEventDetailsModal &&
+				<Modal
+					open
+					closeCallback={close}
+					header={t("EVENTS.EVENTS.DETAILS.HEADER", { name: event.title })}
+					classId="details-modal"
+				>
+					<EventDetails
+						eventId={event.id}
+						policyChanged={policyChanged}
+						setPolicyChanged={(value) => setPolicyChanged(value)}
+						formikRef={formikRef}
+					/>
+				</Modal>
+			}
+		</>
 	);
 }
 
diff --git a/src/components/events/partials/modals/SeriesDetails.tsx b/src/components/events/partials/modals/SeriesDetails.tsx
@@ -30,6 +30,15 @@ import { removeNotificationWizardTobira } from "../../../../slices/notificationS
 import { ParseKeys } from "i18next";
 import { FormikProps } from "formik";
 
+export enum SeriesDetailsPage {
+	Metadata,
+	ExtendedMetadata,
+	AccessPolicy,
+	Theme,
+	Tobira,
+	Statistics,
+}
+
 /**
  * This component manages the tabs of the series details modal
  */
diff --git a/src/components/events/partials/modals/SeriesDetailsModal.tsx b/src/components/events/partials/modals/SeriesDetailsModal.tsx
@@ -2,30 +2,32 @@ import React, { useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import SeriesDetails from "./SeriesDetails";
 import { removeNotificationWizardForm } from "../../../../slices/notificationSlice";
-import { useAppDispatch } from "../../../../store";
-import { Modal, ModalHandle } from "../../../shared/modals/Modal";
+import { useAppDispatch, useAppSelector } from "../../../../store";
+import { Modal } from "../../../shared/modals/Modal";
 import { confirmUnsaved } from "../../../../utils/utils";
 import { FormikProps } from "formik";
+import { setModalSeries, setShowModal } from "../../../../slices/seriesDetailsSlice";
+import { getModalSeries, showModal } from "../../../../selectors/seriesDetailsSelectors";
 
 /**
  * This component renders the modal for displaying series details
  */
-const SeriesDetailsModal = ({
-	seriesTitle,
-	seriesId,
-	modalRef,
-}: {
-	seriesTitle: string
-	seriesId: string
-	modalRef: React.RefObject<ModalHandle | null>
-}) => {
+const SeriesDetailsModal = () => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 
 	// tracks, whether the policies are different to the initial value
 	const [policyChanged, setPolicyChanged] = useState(false);
 	const formikRef = useRef<FormikProps<any>>(null);
 
+	const displaySeriesDetailsModal = useAppSelector(state => showModal(state));
+	const series = useAppSelector(state => getModalSeries(state))!;
+
+	const hideModal = () => {
+		dispatch(setModalSeries(null));
+		dispatch(setShowModal(false));
+	};
+
 	const close = () => {
 		let isUnsavedChanges = false
 		isUnsavedChanges = policyChanged
@@ -36,25 +38,30 @@ const SeriesDetailsModal = ({
 		if (!isUnsavedChanges || confirmUnsaved(t)) {
 			setPolicyChanged(false);
 			dispatch(removeNotificationWizardForm());
+			hideModal();
 			return true;
 		}
 		return false;
 	};
 
 	return (
-		<Modal
-			closeCallback={close}
-			header={t("EVENTS.SERIES.DETAILS.HEADER", { name: seriesTitle })}
-			classId="details-modal"
-			ref={modalRef}
-		>
-			<SeriesDetails
-				seriesId={seriesId}
-				policyChanged={policyChanged}
-				setPolicyChanged={(value) => setPolicyChanged(value)}
-				formikRef={formikRef}
-			/>
-		</Modal>
+		<>
+			{displaySeriesDetailsModal &&
+				<Modal
+					open
+					closeCallback={close}
+					header={t("EVENTS.SERIES.DETAILS.HEADER", { name: series.title })}
+					classId="details-modal"
+				>
+					<SeriesDetails
+						seriesId={series.id}
+						policyChanged={policyChanged}
+						setPolicyChanged={(value) => setPolicyChanged(value)}
+						formikRef={formikRef}
+					/>
+				</Modal>
+			}
+		</>
 	);
 };
 
diff --git a/src/selectors/seriesDetailsSelectors.ts b/src/selectors/seriesDetailsSelectors.ts
@@ -3,6 +3,11 @@ import { RootState } from "../store";
 /**
  * This file contains selectors regarding details of a certain series
  */
+/* selectors for modal */
+export const showModal = (state: RootState) => state.seriesDetails.modal.show;
+export const getModalPage = (state: RootState) => state.seriesDetails.modal.page;
+export const getModalSeries = (state: RootState) => state.seriesDetails.modal.series;
+
 export const getSeriesDetailsMetadata = (state: RootState) => state.seriesDetails.metadata;
 export const getSeriesDetailsExtendedMetadata = (state: RootState) => state.seriesDetails.extendedMetadata;
 export const getSeriesDetailsAcl = (state: RootState) => state.seriesDetails.acl;
diff --git a/src/slices/seriesDetailsSlice.ts b/src/slices/seriesDetailsSlice.ts
