From 3fc38146f79a998393ccf3c480b30846caace33a Mon Sep 17 00:00:00 2001
From: Julian Kniephoff <kniephoff@elan-ev.de>
Date: Tue, 14 Jan 2025 15:10:20 +0100
Subject: [PATCH 1/3] Factor out series details action button

---
 .../events/partials/EventActionCell.tsx       | 10 ++--------
 .../events/partials/SeriesActionsCell.tsx     | 10 ++--------
 .../events/partials/SeriesDetailsAction.tsx   | 19 +++++++++++++++++++
 3 files changed, 23 insertions(+), 16 deletions(-)
 create mode 100644 src/components/events/partials/SeriesDetailsAction.tsx

diff --git a/src/components/events/partials/EventActionCell.tsx b/src/components/events/partials/EventActionCell.tsx
index 0654b63cf2..d5784703be 100644
--- a/src/components/events/partials/EventActionCell.tsx
+++ b/src/components/events/partials/EventActionCell.tsx
@@ -17,6 +17,7 @@ import {
 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
@@ -108,14 +109,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 onClick={onClickSeriesDetails} />}
 
 			{/* Delete an event */}
 			{/*TODO: needs to be checked if event is published */}
diff --git a/src/components/events/partials/SeriesActionsCell.tsx b/src/components/events/partials/SeriesActionsCell.tsx
index 6315c17ba8..a4c2ad3358 100644
--- a/src/components/events/partials/SeriesActionsCell.tsx
+++ b/src/components/events/partials/SeriesActionsCell.tsx
@@ -24,6 +24,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
@@ -75,14 +76,7 @@ const SeriesActionsCell = ({
 	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>
-			)}
+			<SeriesDetailsAction onClick={showSeriesDetailsModal} />
 
 			{displaySeriesDetailsModal && (
 				<SeriesDetailsModal
diff --git a/src/components/events/partials/SeriesDetailsAction.tsx b/src/components/events/partials/SeriesDetailsAction.tsx
new file mode 100644
index 0000000000..366ef5cc77
--- /dev/null
+++ b/src/components/events/partials/SeriesDetailsAction.tsx
@@ -0,0 +1,19 @@
+import { Tooltip } from "@mui/material";
+import { t } from "i18next";
+import { getUserInformation } from "../../../selectors/userInfoSelectors";
+import { useAppSelector } from "../../../store";
+import { hasAccess } from "../../../utils/utils";
+
+export const SeriesDetailsAction = ({ onClick }: { onClick: () => void }) => {
+
+	const user = useAppSelector(state => getUserInformation(state));
+
+	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>
+	);
+};

From 5878a374e0a53279cf3c4498fd5b2c4dbbbcf324 Mon Sep 17 00:00:00 2001
From: Julian Kniephoff <kniephoff@elan-ev.de>
Date: Wed, 15 Jan 2025 17:37:00 +0100
Subject: [PATCH 2/3] Factor out fetch data for and showing series details
 modal

---
 .../events/partials/EventActionCell.tsx       | 25 +++--------------
 .../events/partials/SeriesActionsCell.tsx     | 19 ++-----------
 .../modals/ShowSeriesDetailsModal.tsx         | 27 +++++++++++++++++++
 3 files changed, 32 insertions(+), 39 deletions(-)
 create mode 100644 src/components/events/partials/modals/ShowSeriesDetailsModal.tsx

diff --git a/src/components/events/partials/EventActionCell.tsx b/src/components/events/partials/EventActionCell.tsx
index d5784703be..3e3233f121 100644
--- a/src/components/events/partials/EventActionCell.tsx
+++ b/src/components/events/partials/EventActionCell.tsx
@@ -4,20 +4,13 @@ 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";
+import { ShowSeriesDetailsModal } from "./modals/ShowSeriesDetailsModal";
 
 /**
  * This component renders the action cells of events in the table view
@@ -60,18 +53,6 @@ const EventActionCell = ({
 		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));
 	};
@@ -91,7 +72,7 @@ const EventActionCell = ({
 	return (
 		<>
 			{!!row.series && displaySeriesDetailsModal && (
-				<SeriesDetailsModal
+				<ShowSeriesDetailsModal
 					handleClose={hideSeriesDetailsModal}
 					seriesId={row.series.id}
 					seriesTitle={row.series.title}
@@ -109,7 +90,7 @@ const EventActionCell = ({
 			)}
 
 			{/* If event belongs to a series then the corresponding series details can be opened */}
-			{!!row.series && <SeriesDetailsAction onClick={onClickSeriesDetails} />}
+			{!!row.series && <SeriesDetailsAction onClick={showSeriesDetailsModal} />}
 
 			{/* Delete an event */}
 			{/*TODO: needs to be checked if event is published */}
diff --git a/src/components/events/partials/SeriesActionsCell.tsx b/src/components/events/partials/SeriesActionsCell.tsx
index a4c2ad3358..dba79bb358 100644
--- a/src/components/events/partials/SeriesActionsCell.tsx
+++ b/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 {
@@ -25,6 +16,7 @@ import {
 
 import { Tooltip } from "../../shared/Tooltip";
 import { SeriesDetailsAction } from "./SeriesDetailsAction";
+import { ShowSeriesDetailsModal } from "./modals/ShowSeriesDetailsModal";
 
 /**
  * This component renders the action cells of series in the table view
@@ -63,13 +55,6 @@ const SeriesActionsCell = ({
 	};
 
 	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);
 	};
 
@@ -79,7 +64,7 @@ const SeriesActionsCell = ({
 			<SeriesDetailsAction onClick={showSeriesDetailsModal} />
 
 			{displaySeriesDetailsModal && (
-				<SeriesDetailsModal
+				<ShowSeriesDetailsModal
 					handleClose={hideSeriesDetailsModal}
 					seriesId={row.id}
 					seriesTitle={row.title}
diff --git a/src/components/events/partials/modals/ShowSeriesDetailsModal.tsx b/src/components/events/partials/modals/ShowSeriesDetailsModal.tsx
new file mode 100644
index 0000000000..0a5f3669ec
--- /dev/null
+++ b/src/components/events/partials/modals/ShowSeriesDetailsModal.tsx
@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+import SeriesDetailsModal from "./SeriesDetailsModal";
+import { useAppDispatch } from "../../../../store";
+import { fetchSeriesDetailsMetadata, fetchSeriesDetailsAcls, fetchSeriesDetailsFeeds, fetchSeriesDetailsTheme, fetchSeriesDetailsThemeNames, fetchSeriesDetailsTobira } from "../../../../slices/seriesDetailsSlice";
+
+export const ShowSeriesDetailsModal = (props: Parameters<typeof SeriesDetailsModal>[0]) => {
+	const dispatch = useAppDispatch();
+
+	const [loaded, setLoaded] = useState(false);
+
+	useEffect(() => {
+		const fetchData = async () => {
+			await dispatch(fetchSeriesDetailsMetadata(props.seriesId));
+			await dispatch(fetchSeriesDetailsAcls(props.seriesId));
+			await dispatch(fetchSeriesDetailsFeeds(props.seriesId));
+			await dispatch(fetchSeriesDetailsTheme(props.seriesId));
+			await dispatch(fetchSeriesDetailsThemeNames());
+			await dispatch(fetchSeriesDetailsTobira(props.seriesId));
+
+			setLoaded(true);
+		};
+
+		fetchData();
+	});
+
+	return loaded && <SeriesDetailsModal {...props} />;
+};

From 02e954ae5cb430a2b8ffc41e4adf0433f2512ebd Mon Sep 17 00:00:00 2001
From: Julian Kniephoff <kniephoff@elan-ev.de>
Date: Tue, 14 Jan 2025 15:10:01 +0100
Subject: [PATCH 3/3] Implement shareable links for series

This is done by pulling the series details modal up into the events/series table,
making it read and write the series to show from/into URL parameters.
---
 src/components/events/Events.tsx              |  4 +-
 src/components/events/Series.tsx              |  4 ++
 .../events/partials/EventActionCell.tsx       | 20 +--------
 .../events/partials/SeriesActionsCell.tsx     | 20 +--------
 .../events/partials/SeriesDetailsAction.tsx   | 13 +++++-
 .../modals/ShowSeriesDetailsModal.tsx         | 44 ++++++++++++++-----
 6 files changed, 55 insertions(+), 50 deletions(-)

diff --git a/src/components/events/Events.tsx b/src/components/events/Events.tsx
index 0e1337a4f6..fe797a1be5 100644
--- a/src/components/events/Events.tsx
+++ b/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" /> */}
diff --git a/src/components/events/Series.tsx b/src/components/events/Series.tsx
index 4dcce7f070..64be53c147 100644
--- a/src/components/events/Series.tsx
+++ b/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 />
diff --git a/src/components/events/partials/EventActionCell.tsx b/src/components/events/partials/EventActionCell.tsx
index 3e3233f121..a383b68752 100644
--- a/src/components/events/partials/EventActionCell.tsx
+++ b/src/components/events/partials/EventActionCell.tsx
@@ -10,7 +10,6 @@ import { Event, deleteEvent } from "../../../slices/eventSlice";
 import { Tooltip } from "../../shared/Tooltip";
 import { openModal } from "../../../slices/eventDetailsSlice";
 import { SeriesDetailsAction } from "./SeriesDetailsAction";
-import { ShowSeriesDetailsModal } from "./modals/ShowSeriesDetailsModal";
 
 /**
  * This component renders the action cells of events in the table view
@@ -24,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));
@@ -45,14 +43,6 @@ const EventActionCell = ({
 		setEmbeddingCodeModal(true);
 	};
 
-	const showSeriesDetailsModal = () => {
-		setSeriesDetailsModal(true);
-	};
-
-	const hideSeriesDetailsModal = () => {
-		setSeriesDetailsModal(false);
-	};
-
 	const onClickEventDetails = () => {
 		dispatch(openModal(EventDetailsPage.Metadata, row));
 	};
@@ -71,14 +61,6 @@ const EventActionCell = ({
 
 	return (
 		<>
-			{!!row.series && displaySeriesDetailsModal && (
-				<ShowSeriesDetailsModal
-					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")}>
@@ -90,7 +72,7 @@ const EventActionCell = ({
 			)}
 
 			{/* If event belongs to a series then the corresponding series details can be opened */}
-			{!!row.series && <SeriesDetailsAction onClick={showSeriesDetailsModal} />}
+			{!!row.series && <SeriesDetailsAction id={row.series.id} />}
 
 			{/* Delete an event */}
 			{/*TODO: needs to be checked if event is published */}
diff --git a/src/components/events/partials/SeriesActionsCell.tsx b/src/components/events/partials/SeriesActionsCell.tsx
index dba79bb358..5a59930b6b 100644
--- a/src/components/events/partials/SeriesActionsCell.tsx
+++ b/src/components/events/partials/SeriesActionsCell.tsx
@@ -16,7 +16,6 @@ import {
 
 import { Tooltip } from "../../shared/Tooltip";
 import { SeriesDetailsAction } from "./SeriesDetailsAction";
-import { ShowSeriesDetailsModal } from "./modals/ShowSeriesDetailsModal";
 
 /**
  * This component renders the action cells of series in the table view
@@ -30,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));
@@ -50,26 +48,10 @@ const SeriesActionsCell = ({
 		dispatch(deleteSeries(id));
 	};
 
-	const hideSeriesDetailsModal = () => {
-		setSeriesDetailsModal(false);
-	};
-
-	const showSeriesDetailsModal = async () => {
-		setSeriesDetailsModal(true);
-	};
-
 	return (
 		<>
 			{/* series details */}
-			<SeriesDetailsAction onClick={showSeriesDetailsModal} />
-
-			{displaySeriesDetailsModal && (
-				<ShowSeriesDetailsModal
-					handleClose={hideSeriesDetailsModal}
-					seriesId={row.id}
-					seriesTitle={row.title}
-				/>
-			)}
+			<SeriesDetailsAction id={row.id} />
 
 			{/* delete series */}
 			{hasAccess("ROLE_UI_SERIES_DELETE", user) && (
diff --git a/src/components/events/partials/SeriesDetailsAction.tsx b/src/components/events/partials/SeriesDetailsAction.tsx
index 366ef5cc77..147a5c90b2 100644
--- a/src/components/events/partials/SeriesDetailsAction.tsx
+++ b/src/components/events/partials/SeriesDetailsAction.tsx
@@ -3,10 +3,21 @@ import { t } from "i18next";
 import { getUserInformation } from "../../../selectors/userInfoSelectors";
 import { useAppSelector } from "../../../store";
 import { hasAccess } from "../../../utils/utils";
+import { useSearchParams } from "react-router-dom";
 
-export const SeriesDetailsAction = ({ onClick }: { onClick: () => void }) => {
+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")}>
diff --git a/src/components/events/partials/modals/ShowSeriesDetailsModal.tsx b/src/components/events/partials/modals/ShowSeriesDetailsModal.tsx
index 0a5f3669ec..d73a63f408 100644
--- a/src/components/events/partials/modals/ShowSeriesDetailsModal.tsx
+++ b/src/components/events/partials/modals/ShowSeriesDetailsModal.tsx
@@ -1,27 +1,51 @@
 import { useEffect, useState } from "react";
 import SeriesDetailsModal from "./SeriesDetailsModal";
-import { useAppDispatch } from "../../../../store";
+import { useAppDispatch, useAppSelector } from "../../../../store";
 import { fetchSeriesDetailsMetadata, fetchSeriesDetailsAcls, fetchSeriesDetailsFeeds, fetchSeriesDetailsTheme, fetchSeriesDetailsThemeNames, fetchSeriesDetailsTobira } from "../../../../slices/seriesDetailsSlice";
+import { useSearchParams } from "react-router-dom";
+import { getSeriesDetailsMetadata } from "../../../../selectors/seriesDetailsSelectors";
 
-export const ShowSeriesDetailsModal = (props: Parameters<typeof SeriesDetailsModal>[0]) => {
-	const dispatch = useAppDispatch();
+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(props.seriesId));
-			await dispatch(fetchSeriesDetailsAcls(props.seriesId));
-			await dispatch(fetchSeriesDetailsFeeds(props.seriesId));
-			await dispatch(fetchSeriesDetailsTheme(props.seriesId));
+			await dispatch(fetchSeriesDetailsMetadata(seriesId));
+			await dispatch(fetchSeriesDetailsAcls(seriesId));
+			await dispatch(fetchSeriesDetailsFeeds(seriesId));
+			await dispatch(fetchSeriesDetailsTheme(seriesId));
 			await dispatch(fetchSeriesDetailsThemeNames());
-			await dispatch(fetchSeriesDetailsTobira(props.seriesId));
+			await dispatch(fetchSeriesDetailsTobira(seriesId));
 
 			setLoaded(true);
 		};
 
 		fetchData();
-	});
+	}, [seriesId, dispatch]);
+
+	const handleClose = () => {
+		setSearchParams(params => {
+			params.delete('seriesId');
+			return params;
+		});
+	};
 
-	return loaded && <SeriesDetailsModal {...props} />;
+	return loaded && <SeriesDetailsModal
+		seriesId={seriesId!}
+		seriesTitle={title!}
+		handleClose={handleClose}
+	/>;
 };