Respect publication channels listprovider more (#738)

* Respect publication channels listprovider more

While we were already getting information on
publications from the respective listprovider for
the event details, we were not putting all of it to
use, for example ordering. Also, the event table
did not have access to this information at all.
This should fix that.

* Fix variable name

* Remove unexpected tab character

* Fix thunk naming

Author: Arnei

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

@@ -61,7 +61,7 @@ const EventDetailsPublicationTab = ({
 															)}
 														</span>
 														<div>
-															<span>{t(publication.name)}</span>
+															<span>{publication.label ? t(publication.label) : t(publication.name)}</span>
 															{publication.description && (
 																<p className="description">
 																	{publication.description}

src/components/events/partials/PublishedCell.tsx

@@ -40,7 +40,7 @@ const PublishCell = ({
 
 	const onlyEngage = row.publications.length === 1
 		&& row.publications[0].enabled
-		&& !row.publications[0].hiding
+		&& !row.publications[0].hide
 		&& row.publications[0].id === 'engage-player';
 
 	return (
@@ -65,7 +65,7 @@ const PublishCell = ({
 							<div className="popover__content">
 								{/* Show a list item for each publication of an event that isn't hidden*/}
 								{row.publications.map((publication, key) =>
-									!publication.hiding ? (
+									!publication.hide ? (
 										// Check if publications is enabled and choose icon according
 										publication.enabled ? (
 											<a
@@ -75,11 +75,11 @@ const PublishCell = ({
 												rel='noreferrer'
 												key={key}
 											>
-												<span>{t(publication.name)}</span>
+												<span>{publication.label ? t(publication.label) : t(publication.name)}</span>
 											</a>
 										) : (
 											<button key={key} className="button-like-anchor popover__list-item">
-												<span>{t(publication.name)}</span>
+												<span>{publication.label ? t(publication.label) : t(publication.name)}</span>
 											</button>
 										)
 									) : null

src/slices/eventDetailsSlice.ts

@@ -25,6 +25,7 @@ import { fetchRecordings } from "./recordingSlice";
 import { getRecordings } from "../selectors/recordingSelectors";
 import { createAppAsyncThunk } from '../createAsyncThunkWithTypes';
 import { Statistics, fetchStatistics, fetchStatisticsValueUpdate } from './statisticsSlice';
+import { enrichPublications } from '../thunks/assetsThunks';
 import { TransformedAcl } from './aclDetailsSlice';
 import { MetadataCatalog } from './eventSlice';
 import { Event } from "./eventSlice";
@@ -127,11 +128,11 @@ export type UploadAssetOption = {
 
 export type Publication = {
 	enabled: boolean,
-	hide?: string,
 	icon?: string,
 	id: string,
 	label?: string,
-	name: string,  // translation key
+	hide?: boolean,
+	name: string, // translation key
 	order: number,
 	url: string,
 	description?: string,
@@ -910,66 +911,20 @@ export const fetchComments = createAppAsyncThunk('eventDetails/fetchComments', a
 	return { comments, commentReasons }
 });
 
-export const fetchEventPublications = createAppAsyncThunk('eventDetails/fetchEventPublications', async (eventId: string) => {
+export const fetchEventPublications = createAppAsyncThunk('eventDetails/fetchEventPublications', async (eventId: string, { dispatch }) => {
 	let data = await axios.get(`/admin-ng/event/${eventId}/publications.json`);
 
 	let publications: {
-		"start-date": string,
-		"end-date": string,
 		publications: {
 			id: string,
 			name: string,
 			url: string,
 		}[],
+		"start-date": string,
+		"end-date": string,
 	} = await data.data;
 
-	// get information about possible publication channels
-	data = await axios.get("/admin-ng/resources/PUBLICATION.CHANNELS.json");
-
-	let publicationChannels: { [key: string]: string } = await data.data;
-
-	let now = new Date();
-
-	let transformedPublications: Publication[] = [];
-
-	// fill publication objects with additional information
-	publications.publications.forEach((publication) => {
-		let transformedPublication: Publication = {
-			...publication,
-			enabled: false,
-			order: 0,
-		};
-
-		transformedPublication.enabled = !(
-			publication.id === "engage-live" &&
-			(now < new Date(publications["start-date"]) ||
-				now > new Date(publications["end-date"]))
-		);
-
-		if (publicationChannels[publication.id]) {
-			let channel = JSON.parse(publicationChannels[publication.id]);
-
-			if (channel.label) {
-				transformedPublication.label = channel.label;
-			}
-			if (channel.icon) {
-				transformedPublication.icon = channel.icon;
-			}
-			if (channel.hide) {
-				transformedPublication.hide = channel.hide;
-			}
-			if (channel.description) {
-				transformedPublication.description = channel.description;
-			}
-			if (channel.order) {
-				transformedPublication.order = channel.order;
-			}
-		}
-
-		transformedPublications.push(transformedPublication)
-	});
-
-	return transformedPublications;
+	return await dispatch(enrichPublications(publications)).unwrap();
 });
 
 // fetch Tobira data of certain series from server

src/slices/eventSlice.ts

@@ -1,4 +1,4 @@
-import { PayloadAction, SerializedError, createSlice } from '@reduxjs/toolkit'
+import { PayloadAction, SerializedError, createSlice, unwrapResult } from '@reduxjs/toolkit'
 import { eventsTableConfig } from "../configs/tableConfigs/eventsTableConfig";
 import axios, { AxiosProgressEvent } from 'axios';
 import moment from "moment-timezone";
@@ -23,9 +23,10 @@ import {
 import { getAssetUploadOptions, getSchedulingEditedEvents } from '../selectors/eventSelectors';
 import { fetchSeriesOptions } from "./seriesSlice";
 import { AppDispatch } from '../store';
-import { fetchAssetUploadOptions } from '../thunks/assetsThunks';
+import { enrichPublications, fetchAssetUploadOptions } from '../thunks/assetsThunks';
 import { TransformedAcl } from './aclDetailsSlice';
 import { TableConfig } from '../configs/tableConfigs/aclsTableConfig';
+import { Publication } from './eventDetailsSlice';
 import { createAppAsyncThunk } from '../createAsyncThunkWithTypes';
 import { FormikErrors } from 'formik';
 
@@ -73,13 +74,7 @@ export type Event = {
 	managedAcl: string,
 	needs_cutting: boolean,
 	presenters: string[],
-	publications: {
-		enabled: boolean,
-		hiding: boolean,
-		id: string,
-		name: string,
-		url: string,
-	}[],
+	publications: Publication[],
 	selected?: boolean,
 	series?: { id: string, title: string }
 	source: string,
@@ -233,7 +228,7 @@ const initialState: EventState = {
 };
 
 // fetch events from server
-export const fetchEvents = createAppAsyncThunk('events/fetchEvents', async (_, { getState }) => {
+export const fetchEvents = createAppAsyncThunk('events/fetchEvents', async (_, { dispatch, getState }) => {
 	const state = getState();
 	let params: ReturnType<typeof getURLParams> & { getComments?: boolean } = getURLParams(state);
 
@@ -257,16 +252,15 @@ export const fetchEvents = createAppAsyncThunk('events/fetchEvents', async (_, {
 			...response.results[i],
 			date: response.results[i].start_date,
 		};
-		// insert enabled and hiding property of publications, if result has publications
+		// insert enabled and hide property of publications, if result has publications
 		let result = response.results[i];
 		if (!!result.publications && result.publications.length > 0) {
-			let transformedPublications = [];
-			for (let j = 0; result.publications.length > j; j++) {
-				transformedPublications.push({
-					...result.publications[j],
-					enabled: true,
-					hiding: false,
-				});
+			let transformedPublications: Publication[] = [];
+			try {
+				const resultAction = await dispatch(enrichPublications({ publications: result.publications }));
+				transformedPublications = unwrapResult(resultAction);
+			} catch (rejectedValueOrSerializedError) {
+				console.error(rejectedValueOrSerializedError)
 			}
 			response.results[i] = {
 				...response.results[i],

src/thunks/assetsThunks.ts

@@ -2,6 +2,7 @@ import axios from "axios";
 import { getAssetUploadOptions } from "../selectors/eventSelectors";
 import { createAppAsyncThunk } from '../createAsyncThunkWithTypes';
 import { UploadAssetOption } from "../slices/eventSlice";
+import { Publication } from "../slices/eventDetailsSlice";
 
 // thunks for assets, especially for getting asset options
 
@@ -54,3 +55,71 @@ export const fetchAssetUploadOptions = createAppAsyncThunk('assets/fetchAssetUpl
 		return { workflow, newAssetUploadOptions };
 	}
 });
+
+/**
+ * Adds information from the publication list provider to publications.
+ * The additional info is used for rendering purposes
+ */
+export const enrichPublications = createAppAsyncThunk('assets/enrichPublications', async (
+	publications: {
+		publications: {
+			id: string,
+			name: string,
+			url: string,
+		}[],
+		"start-date"?: string,
+		"end-date"?: string,
+	},
+) => {
+	// get information about possible publication channels
+	let data = await axios.get("/admin-ng/resources/PUBLICATION.CHANNELS.json");
+
+	let publicationChannels: { [key: string]: string } = await data.data;
+
+	let now = new Date();
+	let combinedPublications: Publication[] = [];
+
+	// fill publication objects with additional information
+	publications.publications.forEach((publication) => {
+		let newPublication: Publication = {
+			enabled: true,
+			id: publication.id,
+			name: publication.name,
+			order: 0,
+			url: publication.url,
+		};
+		newPublication.enabled = (publications["start-date"] && publications["end-date"]) ?
+		!(
+			publication.id === "engage-live" &&
+			(now < new Date(publications["start-date"]) ||
+				now > new Date(publications["end-date"]))
+		)
+		:
+		true;
+
+		if (publicationChannels[publication.id]) {
+			let channel = JSON.parse(publicationChannels[publication.id]);
+
+			if (channel.label) {
+				newPublication.label = channel.label;
+			}
+			if (channel.icon) {
+				newPublication.icon = channel.icon;
+			}
+			if (channel.hide) {
+				newPublication.hide = channel.hide;
+			}
+			if (channel.description) {
+				newPublication.description = channel.description;
+			}
+			if (channel.order) {
+				newPublication.order = channel.order;
+			}
+		}
+		combinedPublications.push(newPublication);
+	});
+
+	combinedPublications = combinedPublications.sort(({order: a}, {order:b}) => a - b);
+
+	return combinedPublications;
+});