sonarr-repo-only/frontend/src/Episode/EpisodeDetailsModalContent.js

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
import Button from 'Components/Link/Button';
import ModalBody from 'Components/Modal/ModalBody';
import ModalContent from 'Components/Modal/ModalContent';
import ModalFooter from 'Components/Modal/ModalFooter';
import ModalHeader from 'Components/Modal/ModalHeader';
import MonitorToggleButton from 'Components/MonitorToggleButton';
import episodeEntities from 'Episode/episodeEntities';
import translate from 'Utilities/String/translate';
import EpisodeHistoryConnector from './History/EpisodeHistoryConnector';
import EpisodeSearchConnector from './Search/EpisodeSearchConnector';
import SeasonEpisodeNumber from './SeasonEpisodeNumber';
import EpisodeSummaryConnector from './Summary/EpisodeSummaryConnector';
import styles from './EpisodeDetailsModalContent.css';

const tabs = [
  'details',
  'history',
  'search'
];

class EpisodeDetailsModalContent extends Component {

  //
  // Lifecycle

  constructor(props, context) {
    super(props, context);

    this.state = {
      selectedTab: props.selectedTab
    };
  }

  //
  // Listeners

  onTabSelect = (index, lastIndex) => {
    const selectedTab = tabs[index];
    this.props.onTabChange(selectedTab === 'search');
    this.setState({ selectedTab });
  };

  //
  // Render

  render() {
    const {
      episodeId,
      episodeEntity,
      episodeFileId,
      seriesId,
      seriesTitle,
      titleSlug,
      seriesMonitored,
      seriesType,
      seasonNumber,
      episodeNumber,
      absoluteEpisodeNumber,
      episodeTitle,
      airDate,
      monitored,
      isSaving,
      showOpenSeriesButton,
      startInteractiveSearch,
      onMonitorEpisodePress,
      onModalClose
    } = this.props;

    const seriesLink = `/series/${titleSlug}`;

    return (
      <ModalContent
        onModalClose={onModalClose}
      >
        <ModalHeader>
          <MonitorToggleButton
            className={styles.toggleButton}
            id={episodeId}
            monitored={monitored}
            size={18}
            isDisabled={!seriesMonitored}
            isSaving={isSaving}
            onPress={onMonitorEpisodePress}
          />

          <span className={styles.seriesTitle}>
            {seriesTitle}
          </span>

          <span className={styles.separator}>-</span>

          <SeasonEpisodeNumber
            seasonNumber={seasonNumber}
            episodeNumber={episodeNumber}
            absoluteEpisodeNumber={absoluteEpisodeNumber}
            airDate={airDate}
            seriesType={seriesType}
          />

          <span className={styles.separator}>-</span>

          {episodeTitle}
        </ModalHeader>

        <ModalBody>
          <Tabs
            className={styles.tabs}
            selectedIndex={tabs.indexOf(this.state.selectedTab)}
            onSelect={this.onTabSelect}
          >
            <TabList
              className={styles.tabList}
            >
              <Tab
                className={styles.tab}
                selectedClassName={styles.selectedTab}
              >
                {translate('Details')}
              </Tab>

              <Tab
                className={styles.tab}
                selectedClassName={styles.selectedTab}
              >
                {translate('History')}
              </Tab>

              <Tab
                className={styles.tab}
                selectedClassName={styles.selectedTab}
              >
                {translate('Search')}
              </Tab>
            </TabList>

            <TabPanel>
              <div className={styles.tabContent}>
                <EpisodeSummaryConnector
                  episodeId={episodeId}
                  episodeEntity={episodeEntity}
                  episodeFileId={episodeFileId}
                  seriesId={seriesId}
                />
              </div>
            </TabPanel>

            <TabPanel>
              <div className={styles.tabContent}>
                <EpisodeHistoryConnector
                  episodeId={episodeId}
                />
              </div>
            </TabPanel>

            <TabPanel>
              {/* Don't wrap in tabContent so we not have a top margin */}
              <EpisodeSearchConnector
                episodeId={episodeId}
                startInteractiveSearch={startInteractiveSearch}
                onModalClose={onModalClose}
              />
            </TabPanel>
          </Tabs>
        </ModalBody>

        <ModalFooter>
          {
            showOpenSeriesButton &&
              <Button
                className={styles.openSeriesButton}
                to={seriesLink}
                onPress={onModalClose}
              >
                {translate('OpenSeries')}
              </Button>
          }

          <Button
            onPress={onModalClose}
          >
            {translate('Close')}
          </Button>
        </ModalFooter>
      </ModalContent>
    );
  }
}

EpisodeDetailsModalContent.propTypes = {
  episodeId: PropTypes.number.isRequired,
  episodeEntity: PropTypes.string.isRequired,
  episodeFileId: PropTypes.number,
  seriesId: PropTypes.number.isRequired,
  seriesTitle: PropTypes.string.isRequired,
  titleSlug: PropTypes.string.isRequired,
  seriesMonitored: PropTypes.bool.isRequired,
  seriesType: PropTypes.string.isRequired,
  seasonNumber: PropTypes.number.isRequired,
  episodeNumber: PropTypes.number.isRequired,
  absoluteEpisodeNumber: PropTypes.number,
  airDate: PropTypes.string.isRequired,
  episodeTitle: PropTypes.string.isRequired,
  monitored: PropTypes.bool.isRequired,
  isSaving: PropTypes.bool,
  showOpenSeriesButton: PropTypes.bool,
  selectedTab: PropTypes.string.isRequired,
  startInteractiveSearch: PropTypes.bool.isRequired,
  onMonitorEpisodePress: PropTypes.func.isRequired,
  onTabChange: PropTypes.func.isRequired,
  onModalClose: PropTypes.func.isRequired
};

EpisodeDetailsModalContent.defaultProps = {
  selectedTab: 'details',
  episodeEntity: episodeEntities.EPISODES,
  startInteractiveSearch: false
};

export default EpisodeDetailsModalContent;