X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fpages%2FSchedule.js;h=10b4b4977efc925ab286326075f0739bc73731c3;hb=638802eaf20d636c16d7ce337ace508708705f2c;hp=59e6ac4846eeff8aee216d632d90a773a0706170;hpb=ed531959edb865805c828f2c318146c43f6e581b;p=alttp.git

diff --git a/resources/js/components/pages/Schedule.js b/resources/js/components/pages/Schedule.js
index 59e6ac4..10b4b49 100644
--- a/resources/js/components/pages/Schedule.js
+++ b/resources/js/components/pages/Schedule.js
@@ -1,20 +1,27 @@
 import axios from 'axios';
 import moment from 'moment';
+import PropTypes from 'prop-types';
 import React from 'react';
 import { Alert, Container } from 'react-bootstrap';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
+import toastr from 'toastr';
 
 import CanonicalLinks from '../common/CanonicalLinks';
 import ErrorBoundary from '../common/ErrorBoundary';
 import Filter from '../episodes/Filter';
 import List from '../episodes/List';
+import RestreamDialog from '../episodes/RestreamDialog';
+import { withUser } from '../../helpers/UserContext';
 
-const Schedule = () => {
-	const [ahead, setAhead] = React.useState(14);
-	const [behind, setBehind] = React.useState(0);
+const Schedule = ({ user }) => {
+	const [ahead] = React.useState(14);
+	const [behind] = React.useState(0);
 	const [episodes, setEpisodes] = React.useState([]);
 	const [filter, setFilter] = React.useState({});
+	const [restreamChannel, setRestreamChannel] = React.useState(null);
+	const [restreamEpisode, setRestreamEpisode] = React.useState(null);
+	const [showRestreamDialog, setShowRestreamDialog] = React.useState(false);
 
 	const { t } = useTranslation();
 
@@ -49,6 +56,63 @@ const Schedule = () => {
 		});
 	}, []);
 
+	const onAddRestream = React.useCallback(episode => {
+		setRestreamEpisode(episode);
+		setShowRestreamDialog(true);
+	}, []);
+
+	const onAddRestreamSubmit = React.useCallback(async values => {
+		try {
+			const response = await axios.post(
+				`/api/episodes/${values.episode_id}/add-restream`, values);
+			const newEpisode = response.data;
+			setEpisodes(episodes => episodes.map(episode =>
+				episode.id === newEpisode.id ? {
+					...episode,
+					...newEpisode,
+				} : episode
+			));
+			toastr.success(t('episodes.restreamDialog.addSuccess'));
+		} catch (e) {
+			toastr.error(t('episodes.restreamDialog.addError'));
+			throw e;
+		}
+		setRestreamEpisode(null);
+		setShowRestreamDialog(false);
+	}, []);
+
+	const onRemoveRestream = React.useCallback(async (episode, channel) => {
+		try {
+			const response = await axios.post(
+				`/api/episodes/${episode.id}/remove-restream`, { channel_id: channel.id });
+			const newEpisode = response.data;
+			setEpisodes(episodes => episodes.map(episode =>
+				episode.id === newEpisode.id ? {
+					...episode,
+					...newEpisode,
+				} : episode
+			));
+			toastr.success(t('episodes.restreamDialog.removeSuccess'));
+			setRestreamChannel(null);
+			setRestreamEpisode(null);
+			setShowRestreamDialog(false);
+		} catch (e) {
+			toastr.error(t('episodes.restreamDialog.removeError'));
+		}
+	}, []);
+
+	const onEditRestream = React.useCallback((episode, channel) => {
+		setRestreamChannel(channel);
+		setRestreamEpisode(episode);
+		setShowRestreamDialog(true);
+	}, []);
+
+	const onHideRestreamDialog = React.useCallback(() => {
+		setShowRestreamDialog(false);
+		setRestreamChannel(null);
+		setRestreamEpisode(null);
+	}, []);
+
 	React.useEffect(() => {
 		const controller = new AbortController();
 		fetchEpisodes(controller, ahead, behind, filter);
@@ -75,14 +139,31 @@ const Schedule = () => {
 		</div>
 		<ErrorBoundary>
 			{episodes.length ?
-				<List episodes={episodes} />
+				<List
+					episodes={episodes}
+					onAddRestream={onAddRestream}
+					onEditRestream={onEditRestream}
+				/>
 			:
 				<Alert variant="info">
 					{t('episodes.empty')}
 				</Alert>
 			}
 		</ErrorBoundary>
+		<RestreamDialog
+			channel={restreamChannel}
+			episode={restreamEpisode}
+			onRemoveRestream={onRemoveRestream}
+			onHide={onHideRestreamDialog}
+			onSubmit={onAddRestreamSubmit}
+			show={showRestreamDialog}
+		/>
 	</Container>;
 };
 
-export default Schedule;
+Schedule.propTypes = {
+	user: PropTypes.shape({
+	}),
+};
+
+export default withUser(Schedule);