basic channel crew

[alttp.git] / resources / js / components / pages / Schedule.js

diff --git a/resources/js/components/pages/Schedule.js b/resources/js/components/pages/Schedule.js
index 59e6ac4846eeff8aee216d632d90a773a0706170..10b4b4977efc925ab286326075f0739bc73731c3 100644 (file)
--- 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);