repertory-ui/src/components/ReleaseVersionDisplay/ReleaseVersionDisplay.js

import React from 'react';
import './ReleaseVersionDisplay.css';
import * as Constants from '../../constants';
import {connect} from 'react-redux';
import DropDown from '../UI/DropDown/DropDown';
import Grid from '../UI/Grid/Grid';
import Text from '../UI/Text/Text';
import Button from '../UI/Button/Button';
import UpgradeIcon from '../UpgradeIcon/UpgradeIcon';
import {setActiveRelease} from '../../redux/actions/release_version_actions';
import {downloadItem} from '../../redux/actions/download_actions';

const mapStateToProps = state => {
  return {
    AppPlatform: state.common.AppPlatform,
    DismissDependencies: state.install.DismissDependencies,
    DownloadActive: state.download.DownloadActive,
    InstallActive: state.install.InstallActive,
    InstallType: state.install.InstallType,
    InstalledVersion: state.relver.InstalledVersion,
    LocationsLookup: state.relver.LocationsLookup,
    MountsBusy: state.mounts.MountsBusy,
    Release: state.relver.Release,
    ReleaseUpgradeAvailable: state.relver.ReleaseUpgradeAvailable,
    ReleaseVersion: state.relver.Version,
    VersionLookup: state.relver.VersionLookup,
  };
};

const mapDispatchToProps = dispatch => {
  return {
    downloadItem: (name, type, urls) => dispatch(downloadItem(name, type, urls)),
    setActiveRelease: (release, version) => dispatch(setActiveRelease(release, version)),
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(props => {
  const handleDownloadRelease = () => {
    const fileName = props.version + '.zip';
    props.downloadItem(fileName, Constants.INSTALL_TYPES.Release, props.LocationsLookup[props.version].urls);
  };

  const handleReleaseChanged = e => {
    const release = Constants.RELEASE_TYPES.indexOf(e.target.value);
    const releaseVersion = props.VersionLookup[Constants.RELEASE_TYPES[release]].length - 1;
    props.setActiveRelease(release, releaseVersion);
  };

  const handleVersionChanged = e => {
    const releaseVersion = props.VersionLookup[Constants.RELEASE_TYPES[props.Release]].indexOf(e.target.value);
    props.setActiveRelease(props.Release, releaseVersion);
  };

  const text = props.InstalledVersion + ' [' + props.AppPlatform + ']';
  const disabled = props.DownloadActive || props.InstallActive || props.MountsBusy;
  const releaseExtracting = (props.InstallType === Constants.INSTALL_TYPES.Release);

  let optionsDisplay = [];
  let key = 0;
  if (releaseExtracting) {
    optionsDisplay.push((
      <Text col={dimensions => (dimensions.columns / 3) * 2}
            colSpan={'remain'}
            key={key++}
            rowSpan={4}
            text={'Activating'}
            textAlign={'left'}
            type={'Heading2'}/>
    ));
    optionsDisplay.push((
      <Text col={dimensions => (dimensions.columns / 3) * 2}
            colSpan={'remain'}
            key={key++}
            row={5}
            rowSpan={7}
            text={text}
            textAlign={'left'}/>
    ));
  } else if (props.downloadDisabled || props.DismissDependencies) {
    optionsDisplay.push((
      <Text col={dimensions => (dimensions.columns / 3) * 2}
            colSpan={'remain'}
            key={key++}
            rowSpan={4}
            text={'Installed'}
            textAlign={'left'}
            type={'Heading2'}/>
      ));

    optionsDisplay.push((
      <Text col={dimensions => (dimensions.columns / 3) * 2}
            colSpan={'remain'}
            key={key++}
            row={5}
            rowSpan={7}
            text={text}
            textAlign={'left'}/>
    ));
  } else {
    optionsDisplay.push((
      <Button clicked={handleDownloadRelease}
              col={dimensions => (dimensions.columns / 3) * 2}
              colSpan={20}
              key={key++}
              row={5}
              rowSpan={7}>Install</Button>
    ));
  }

  return (
    <Grid noScroll>
      <Text colSpan={columns=>columns / 3}
            rowSpan={4}
            text={'Release'}
            textAlign={'left'}
            type={'Heading2'}/>
      <DropDown changed={handleReleaseChanged}
                colSpan={remain=>remain / 3 - 1}
                disabled={disabled}
                items={Constants.RELEASE_TYPES}
                row={5}
                rowSpan={7}
                selected={Constants.RELEASE_TYPES[props.Release]}/>
      <Text col={dimensions => dimensions.columns / 3}
            colSpan={remain=>remain / 2}
            rowSpan={4}
            text={'Version'}
            textAlign={'left'}
            type={'Heading2'}/>
      <UpgradeIcon available={props.ReleaseUpgradeAvailable}
                   col={dimensions => ((dimensions.columns / 3) * 2) - 6}
                   colSpan={4}
                   release
                   rowSpan={4}/>
      <DropDown changed={handleVersionChanged}
                col={dimensions => dimensions.columns / 3}
                colSpan={remain=>remain / 2 - 1}
                disabled={disabled}
                items={props.VersionLookup[Constants.RELEASE_TYPES[props.Release]]}
                row={5}
                rowSpan={7}
                selected={props.VersionLookup[Constants.RELEASE_TYPES[props.Release]][props.ReleaseVersion]}/>
      {optionsDisplay}
    </Grid>
  );
});