Series links

src/components/events/Events.tsx

@@ -43,6 +43,7 @@ import {
 import { fetchSeries } from "../../slices/seriesSlice";
 import EventDetailsModal from "./partials/modals/EventDetailsModal";
 import { showModal } from "../../selectors/eventDetailsSelectors";
+import { ShowSeriesDetailsModal } from "./partials/modals/ShowSeriesDetailsModal";
 
 // References for detecting a click outside of the container of the dropdown menu
 const containerAction = React.createRef<HTMLDivElement>();
@@ -308,10 +309,11 @@ const Events = () => {
 					<h4>{t("TABLE_SUMMARY", { numberOfRows: events })}</h4>
 				</div>
 
-				{/*Include table modal*/}
+				{/*Include table modals*/}
 				{displayEventDetailsModal &&
 					<EventDetailsModal />
 				}
+				<ShowSeriesDetailsModal />
 
 				{/*Include table component*/}
 				{/* <Table templateMap={eventsTemplateMap} resourceType="events" /> */}

src/components/events/Series.tsx

@@ -34,6 +34,7 @@ import {
 	showActionsSeries,
 } from "../../slices/seriesSlice";
 import { fetchSeriesDetailsTobiraNew } from "../../slices/seriesSlice";
+import { ShowSeriesDetailsModal } from "./partials/modals/ShowSeriesDetailsModal";
 
 // References for detecting a click outside of the container of the dropdown menu
 const containerAction = React.createRef<HTMLDivElement>();
@@ -234,6 +235,9 @@ const Series = () => {
 					{/* Include table view */}
 					<h4>{t("TABLE_SUMMARY", { numberOfRows: series })}</h4>
 				</div>
+
+				<ShowSeriesDetailsModal />
+
 				<Table templateMap={seriesTemplateMap} />
 			</MainView>
 			<Footer />

src/components/events/partials/EventActionCell.tsx

@@ -4,19 +4,12 @@ import ConfirmModal from "../../shared/ConfirmModal";
 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,
-	fetchSeriesDetailsFeeds,
-	fetchSeriesDetailsMetadata,
-	fetchSeriesDetailsTheme,
-	fetchSeriesDetailsThemeNames,
-} from "../../../slices/seriesDetailsSlice";
 import { Event, deleteEvent } from "../../../slices/eventSlice";
 import { Tooltip } from "../../shared/Tooltip";
 import { openModal } from "../../../slices/eventDetailsSlice";
+import { SeriesDetailsAction } from "./SeriesDetailsAction";
 
 /**
  * This component renders the action cells of events in the table view
@@ -30,7 +23,6 @@ const EventActionCell = ({
 	const dispatch = useAppDispatch();
 
 	const [displayDeleteConfirmation, setDeleteConfirmation] = useState(false);
-	const [displaySeriesDetailsModal, setSeriesDetailsModal] = useState(false);
 	const [displayEmbeddingCodeModal, setEmbeddingCodeModal] = useState(false);
 
 	const user = useAppSelector(state => getUserInformation(state));
@@ -51,26 +43,6 @@ const EventActionCell = ({
 		setEmbeddingCodeModal(true);
 	};
 
-	const showSeriesDetailsModal = () => {
-		setSeriesDetailsModal(true);
-	};
-
-	const hideSeriesDetailsModal = () => {
-		setSeriesDetailsModal(false);
-	};
-
-	const onClickSeriesDetails = async () => {
-		if (!!row.series) {
-			await dispatch(fetchSeriesDetailsMetadata(row.series.id));
-			await dispatch(fetchSeriesDetailsAcls(row.series.id));
-			await dispatch(fetchSeriesDetailsFeeds(row.series.id));
-			await dispatch(fetchSeriesDetailsTheme(row.series.id));
-			await dispatch(fetchSeriesDetailsThemeNames());
-
-			showSeriesDetailsModal();
-		}
-	};
-
 	const onClickEventDetails = () => {
 		dispatch(openModal(EventDetailsPage.Metadata, row));
 	};
@@ -89,14 +61,6 @@ const EventActionCell = ({
 
 	return (
 		<>
-			{!!row.series && displaySeriesDetailsModal && (
-				<SeriesDetailsModal
-					handleClose={hideSeriesDetailsModal}
-					seriesId={row.series.id}
-					seriesTitle={row.series.title}
-				/>
-			)}
-
 			{/* Open event details */}
 			{hasAccess("ROLE_UI_EVENTS_DETAILS_VIEW", user) && (
 				<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.DETAILS")}>
@@ -108,14 +72,7 @@ const EventActionCell = ({
 			)}
 
 			{/* If event belongs to a series then the corresponding series details can be opened */}
-			{!!row.series && hasAccess("ROLE_UI_SERIES_DETAILS_VIEW", user) && (
-				<Tooltip title={t("EVENTS.SERIES.TABLE.TOOLTIP.DETAILS")}>
-					<button
-						onClick={() => onClickSeriesDetails()}
-						className="button-like-anchor more-series"
-					/>
-				</Tooltip>
-			)}
+			{!!row.series && <SeriesDetailsAction id={row.series.id} />}
 
 			{/* Delete an event */}
 			{/*TODO: needs to be checked if event is published */}

src/components/events/partials/SeriesActionsCell.tsx

@@ -1,15 +1,6 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import ConfirmModal from "../../shared/ConfirmModal";
-import SeriesDetailsModal from "./modals/SeriesDetailsModal";
-import {
-	fetchSeriesDetailsThemeNames,
-	fetchSeriesDetailsAcls,
-	fetchSeriesDetailsFeeds,
-	fetchSeriesDetailsMetadata,
-	fetchSeriesDetailsTheme,
-	fetchSeriesDetailsTobira,
-} from "../../../slices/seriesDetailsSlice";
 import { getUserInformation } from "../../../selectors/userInfoSelectors";
 import { hasAccess } from "../../../utils/utils";
 import {
@@ -24,6 +15,7 @@ import {
 } from "../../../slices/seriesSlice";
 
 import { Tooltip } from "../../shared/Tooltip";
+import { SeriesDetailsAction } from "./SeriesDetailsAction";
 
 /**
  * This component renders the action cells of series in the table view
@@ -37,7 +29,6 @@ const SeriesActionsCell = ({
 	const dispatch = useAppDispatch();
 
 	const [displayDeleteConfirmation, setDeleteConfirmation] = useState(false);
-	const [displaySeriesDetailsModal, setSeriesDetailsModal] = useState(false);
 
 	const user = useAppSelector(state => getUserInformation(state));
 	const hasEvents = useAppSelector(state => getSeriesHasEvents(state));
@@ -57,40 +48,10 @@ const SeriesActionsCell = ({
 		dispatch(deleteSeries(id));
 	};
 
-	const hideSeriesDetailsModal = () => {
-		setSeriesDetailsModal(false);
-	};
-
-	const showSeriesDetailsModal = async () => {
-		await dispatch(fetchSeriesDetailsMetadata(row.id));
-		await dispatch(fetchSeriesDetailsAcls(row.id));
-		await dispatch(fetchSeriesDetailsFeeds(row.id));
-		await dispatch(fetchSeriesDetailsTheme(row.id));
-		await dispatch(fetchSeriesDetailsThemeNames());
-		await dispatch(fetchSeriesDetailsTobira(row.id));
-
-		setSeriesDetailsModal(true);
-	};
-
 	return (
 		<>
 			{/* series details */}
-			{hasAccess("ROLE_UI_SERIES_DETAILS_VIEW", user) && (
-				<Tooltip title={t("EVENTS.SERIES.TABLE.TOOLTIP.DETAILS")}>
-					<button
-						onClick={() => showSeriesDetailsModal()}
-						className="button-like-anchor more-series"
-					/>
-				</Tooltip>
-			)}
-
-			{displaySeriesDetailsModal && (
-				<SeriesDetailsModal
-					handleClose={hideSeriesDetailsModal}
-					seriesId={row.id}
-					seriesTitle={row.title}
-				/>
-			)}
+			<SeriesDetailsAction id={row.id} />
 
 			{/* delete series */}
 			{hasAccess("ROLE_UI_SERIES_DELETE", user) && (

src/components/events/partials/SeriesDetailsAction.tsx

@@ -0,0 +1,30 @@
+import { Tooltip } from "@mui/material";
+import { t } from "i18next";
+import { getUserInformation } from "../../../selectors/userInfoSelectors";
+import { useAppSelector } from "../../../store";
+import { hasAccess } from "../../../utils/utils";
+import { useSearchParams } from "react-router";
+
+export const SeriesDetailsAction = ({ id }: {
+	id: string,
+}) => {
+
+	const user = useAppSelector(state => getUserInformation(state));
+	const [, setSearchParams] = useSearchParams();
+
+	const onClick = () => {
+		setSearchParams(params => {
+			params.set('seriesId', id);
+			return params;
+		});
+	};
+
+	return hasAccess("ROLE_UI_SERIES_DETAILS_VIEW", user) && (
+		<Tooltip title={t("EVENTS.SERIES.TABLE.TOOLTIP.DETAILS")}>
+			<button
+				onClick={onClick}
+				className="button-like-anchor more-series"
+			/>
+		</Tooltip>
+	);
+};

src/components/events/partials/modals/ShowSeriesDetailsModal.tsx

@@ -0,0 +1,51 @@
+import { useEffect, useState } from "react";
+import SeriesDetailsModal from "./SeriesDetailsModal";
+import { useAppDispatch, useAppSelector } from "../../../../store";
+import { fetchSeriesDetailsMetadata, fetchSeriesDetailsAcls, fetchSeriesDetailsFeeds, fetchSeriesDetailsTheme, fetchSeriesDetailsThemeNames, fetchSeriesDetailsTobira } from "../../../../slices/seriesDetailsSlice";
+import { useSearchParams } from "react-router";
+import { getSeriesDetailsMetadata } from "../../../../selectors/seriesDetailsSelectors";
+
+export const ShowSeriesDetailsModal = () => {
+
+	const [searchParams, setSearchParams] = useSearchParams();
+	const seriesId = searchParams.get('seriesId');
+	const metadata = useAppSelector(state => getSeriesDetailsMetadata(state));
+	const title = metadata.fields.find(field => field.id === "title")?.value as string;
+
+	const [loaded, setLoaded] = useState(false);
+
+	const dispatch = useAppDispatch();
+
+	useEffect(() => {
+		if (!seriesId) {
+			setLoaded(false);
+			return;
+		}
+
+		const fetchData = async () => {
+			await dispatch(fetchSeriesDetailsMetadata(seriesId));
+			await dispatch(fetchSeriesDetailsAcls(seriesId));
+			await dispatch(fetchSeriesDetailsFeeds(seriesId));
+			await dispatch(fetchSeriesDetailsTheme(seriesId));
+			await dispatch(fetchSeriesDetailsThemeNames());
+			await dispatch(fetchSeriesDetailsTobira(seriesId));
+
+			setLoaded(true);
+		};
+
+		fetchData();
+	}, [seriesId, dispatch]);
+
+	const handleClose = () => {
+		setSearchParams(params => {
+			params.delete('seriesId');
+			return params;
+		});
+	};
+
+	return loaded && <SeriesDetailsModal
+		seriesId={seriesId!}
+		seriesTitle={title!}
+		handleClose={handleClose}
+	/>;
+};