Changing themes of series fixed (#1254)

* Changing themes of series fixed

In the series dialog the themes selection is fixed.

fixes #1205

* Review comments solved

* Provides type of variable

Author: wsmirnow

src/components/events/partials/ModalTabsAndPages/SeriesDetailsThemeTab.tsx

@@ -11,6 +11,8 @@ import { updateSeriesTheme } from "../../../../slices/seriesDetailsSlice";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
 import ModalContentTable from "../../../shared/modals/ModalContentTable";
 
+type SeriesTheme = { id: string; value: string; };
+
 /**
  * This component renders the tab for editing the theme of a certain series
  */
@@ -19,23 +21,20 @@ const SeriesDetailsThemeTab = ({
 	themeNames,
 	seriesId,
 }: {
-	theme: string,
-	themeNames: {
-		id: string;
-		value: string;
-	}[],
+	theme: SeriesTheme | null,
+	themeNames: SeriesTheme[],
 	seriesId: string
 }) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
 
 	const user = useAppSelector(state => getUserInformation(state));
 
-	const handleSubmit = (values: { theme: string }) => {
+	const handleSubmit = (values: { theme: SeriesTheme | null }) => {
 		dispatch(updateSeriesTheme({id: seriesId, values: values}));
 	};
 
-	const checkValidity = (formik: FormikProps<{theme: string }>) => {
+	const checkValidity = (formik: FormikProps<{theme: SeriesTheme | null }>) => {
 		if (formik.dirty && formik.isValid) {
 			// check if user provided values differ from initial ones
 			return !_.isEqual(formik.values, formik.initialValues);
@@ -64,13 +63,13 @@ const SeriesDetailsThemeTab = ({
 										{themeNames.length > 0 && (
 											<div className="editable">
 												<DropDown
-													value={formik.values.theme}
-													text={formik.values.theme}
+													value={formik.values.theme?.id}
+													text={formik.values.theme?.value || ''}
 													options={themeNames.map(names => ({ label: names.value, value: names.id }))}
 													required={false}
 													handleChange={(element) => {
 														if (element) {
-															formik.setFieldValue("theme", element.value)
+															formik.setFieldValue("theme", {id: element.value, value: element.label})
 														}
 													}}
 													placeholder={t("EVENTS.SERIES.NEW.THEME.LABEL")}

src/slices/seriesDetailsSlice.ts

@@ -51,7 +51,7 @@ type SeriesDetailsState = {
   	metadata: MetadataCatalog,
 	extendedMetadata: MetadataCatalog[],
 	acl: TransformedAcl[],
-	theme: string,
+	theme: { id: string, value: string } | null,
 	themeNames: { id: string, value: string }[],
 	fetchingStatisticsInProgress: boolean,
 	statistics: Statistics[],
@@ -83,7 +83,7 @@ const initialState: SeriesDetailsState = {
 	},
 	extendedMetadata: [],
 	acl: [],
-	theme: "",
+	theme: null,
 	themeNames: [],
 	fetchingStatisticsInProgress: false,
 	statistics: [],
@@ -165,12 +165,12 @@ export const fetchSeriesDetailsTheme = createAppAsyncThunk('seriesDetails/fetchS
 	const res = await axios.get(`/admin-ng/series/${id}/theme.json`);
 	const themeResponse = res.data;
 
-	let seriesTheme = "";
+	let seriesTheme: SeriesDetailsState["theme"] = null;
 
 	// check if series has a theme
 	if (!_.isEmpty(themeResponse)) {
 		// transform response for further use
-		seriesTheme = transformToIdValueArray(themeResponse)[0].value;
+		seriesTheme = transformToIdValueArray(themeResponse)[0];
 	}
 
 	return seriesTheme;
@@ -302,67 +302,55 @@ export const updateSeriesAccess = createAppAsyncThunk('seriesDetails/updateSerie
 export const updateSeriesTheme = createAppAsyncThunk('seriesDetails/updateSeriesTheme', async (params: {
 	id: string,
 	values: { theme: SeriesDetailsState["theme"] },
-}, {dispatch, getState}) => {
+}, {dispatch}) => {
 	const { id, values } = params;
 
-	let themeNames = getSeriesDetailsThemeNames(getState());
-
-	let themeId = themeNames.find((theme) => theme.value === values.theme)?.id;
-
-	if (!values.theme) {
-        axios
-            .delete(`/admin-ng/series/${id}/theme`)
-            .then((response) => {
-                dispatch(
-                    addNotification({
-                        type: "warning",
-                        key: "SERIES_THEME_REPROCESS_EXISTING_EVENTS",
-                        duration: 10,
-                        parameter: undefined,
-                        context: NOTIFICATION_CONTEXT
-                    })
-                );
-            })
-            .catch((response) => {
-                console.error(response);
-            });
-	} else if (!themeId) {
-        console.error("Can't update series theme. " + values.theme + " not found");
-        dispatch(
-            addNotification({
-                type: "error",
-                key: "SERIES_NOT_SAVED",
-                duration: 10,
-                parameter: undefined,
-                context: NOTIFICATION_CONTEXT
-            })
-        );
-    } else {
-        let data = new URLSearchParams();
-        data.append("themeId", themeId);
-
-        axios
-            .put(`/admin-ng/series/${id}/theme`, data)
-            .then((response) => {
-                let themeResponse = response.data;
-
-                let seriesTheme = transformToIdValueArray(themeResponse)[0].value;
-
-                dispatch(setSeriesDetailsTheme(seriesTheme));
-                dispatch(
-                    addNotification({
-                        type: "warning",
-                        key: "SERIES_THEME_REPROCESS_EXISTING_EVENTS",
-                        duration: 10,
-                        parameter: undefined,
-                        context: NOTIFICATION_CONTEXT
-                    })
-                );
-            })
-            .catch((response) => {
-                console.error(response);
-            });
-    }
+	let themeId = values.theme?.id;
+
+	if (!themeId || themeId === '') {
+		axios
+			.delete(`/admin-ng/series/${id}/theme`)
+			.then((response) => {
+				dispatch(setSeriesDetailsTheme(values.theme));
+				dispatch(
+					addNotification({
+						type: "warning",
+						key: "SERIES_THEME_REPROCESS_EXISTING_EVENTS",
+						duration: 10,
+						parameter: undefined,
+						context: NOTIFICATION_CONTEXT
+					})
+				);
+			})
+			.catch((response) => {
+				console.error(response);
+			});
+	} else {
+		let data = new URLSearchParams();
+		data.append("themeId", themeId);
+
+		axios
+			.put(`/admin-ng/series/${id}/theme`, data)
+			.then((response) => {
+				let themeResponse = response.data;
+
+				let seriesTheme = transformToIdValueArray(themeResponse)[0];
+
+				dispatch(setSeriesDetailsTheme(seriesTheme));
+				dispatch(
+					addNotification({
+						type: "warning",
+						key: "SERIES_THEME_REPROCESS_EXISTING_EVENTS",
+						duration: 10,
+						parameter: undefined,
+						context: NOTIFICATION_CONTEXT
+					})
+				);
+			})
+			.catch((response) => {
+				console.error(response);
+			});
+	}
 });
 
 // fetch Tobira data of certain series from server