ukraine-timemap/src/components/CardStack.jsx

import React from 'react';
import { connect } from 'react-redux'
import * as selectors from '../selectors'

import Card from './Card.jsx';
import copy from '../js/data/copy.json';
import {
  isNotNullNorUndefined
} from '../js/utilities.js';

class CardStack extends React.Component {

  constructor(props) {
    super(props);
  }

  renderCards() {
    if (this.props.selected.length > 0) {
      return this.props.selected.map((event) => {
        return (
          <Card
            event={event}
            sourceError={this.props.sourceError}
            language={this.props.language}
            isLoading={this.props.isLoading}
            getNarrativeLinks={this.props.getNarrativeLinks}
            getCategoryGroup={this.props.getCategoryGroup}
            getCategoryColor={this.props.getCategoryColor}
            getCategoryLabel={this.props.getCategoryLabel}
            highlight={this.props.onHighlight}
            select={this.props.onSelect}
          />
        );
      });
    }
    return '';
  }

  renderCardStackHeader() {
    const header_lang = copy[this.props.language].cardstack.header;

    return (
      <div
        id='card-stack-header'
        className='card-stack-header'
        onClick={() => this.props.onToggleCardstack()}
      >
        <button className="side-menu-burg is-active"><span></span></button>
        <p className="header-copy top">
          {`${this.props.selected.length} ${header_lang}`}
        </p>
      </div>
    )
  }

  renderCardStackContent() {
    return (
      <div id="card-stack-content" className="card-stack-content">
        <ul>
          {this.renderCards()}
        </ul>
      </div>
    );
  }

  render() {
    if (this.props.selected.length > 0) {
      return (
        <div id="card-stack" className={`card-stack ${this.props.isCardstack ? '' : ' folded'}`}>
          {this.renderCardStackHeader()}
          {this.renderCardStackContent()}
        </div>
      );
    }
    return <div/>;
  }
}

function mapStateToProps(state) {
  return {
    selected: selectors.selectSelected(state),
    sourceError: state.app.errors.source,
    language: state.app.language,
    isCardstack: state.app.flags.isCardstack,
    isLoading: state.app.flags.isFetchingSources
  }
}

export default connect(mapStateToProps)(CardStack)