understanding-sampling/src/js/components/PollScreen.jsx

import { h, render, Component } from 'preact'; // eslint-disable-line no-unused-vars
import HeaderLightItem from './partials/HeaderLightItem.jsx';
import TextItem from './partials/TextItem.jsx';
import AnimItem from './partials/AnimItem.jsx';

// module04: Poll Screen
// wrapper which contains text and animation (side-by-side)
export default class PollScreen extends Component {

  // construct properties and initialize functions
  constructor (props) {
    super(props);

    this.state = {
      counter: 0,
      point: 1,
      pollindex: 0,
      fillup: false,
      scores: [ 0, 0, 0, 0, 0 ],
      diffperc: [ 0, 0, 0, 0, 0 ],
      shouldUpdate: false,
      continue: false
    };

    this.btns = [];

    // context binding
    this.setData = this.setData.bind(this);
    this.doPoll = this.doPoll.bind(this);
    this.handleNext = this.handleNext.bind(this);
  }

  // set data is triggered from d3js module
  setData (data) {
    if (data.continue) this.setState({ continue: true });

    // all polls completed
    if (this.props.iteration === 14) {
      this.props.toNext();
    } else {
      // iteration equals 7, 10 or 11
      this.setState(Object.assign(data, { shouldUpdate: false, fillup: false }));

      if (data.counter === 10 || data.counter === 100 || data.counter === 1000) {
        this.props.toNext();
      }
    }
  }

  // execute poll
  doPoll (point = 1, fillup = false) {
    this.setState({ shouldUpdate: true, point, fillup });
  }

  // handle next iteration
  handleNext (point = 1) {
    if (this.state.continue) {
      const map = { q7: 10, q10: 100, q11: 1000 };
      const isQ0 = this.props.iteration === 0;
      const isQ4 = this.props.iteration === 4;
      const isQ13 = this.props.iteration === 13;
      const isQ14 = this.props.iteration === 14;
      const condQ7 = this.props.iteration === 7 && this.state.counter < map.q7;
      const condQ10 = this.props.iteration === 10 && this.state.counter < map.q10;
      const condQ11 = this.props.iteration === 11 && this.state.counter < map.q11;

      const condHideBtn = !isQ0 && !isQ4 && !isQ13 && !isQ14;

      if (condHideBtn) this.setState({ continue: false });

      // do poll
      if (condQ7 || condQ10 || condQ11) {
        this.doPoll(point, point === map[`q${this.props.iteration}`]);
      } else if (isQ14) {
        // generate poll
        this.setState({ pollindex: this.state.pollindex + 1, continue: this.state.pollindex < 3 });
      } else {
        // go to next screen
        this.props.toNext();
      }
    }
  }

  // LIFECYCLE methods

  // handle continue button visibility
  componentDidUpdate () {
    // handle question screen
    const isQuestion = (this.props.iteration === 9 || this.props.iteration === 13) && this.props.currentAnswerIndex === null;

    if (this.btns.length && !isQuestion) {
      this.btns.forEach(btn => {
        if (btn) {
          if (this.state.continue) {
            btn.classList.add('isvisible');
          } else {
            btn.classList.remove('isvisible');
          }
        }
      });
    }
    if (!isQuestion) {
      const contentNode = document.querySelector('.fakenews__content');
      if (this.state.continue) {
        contentNode.classList.add('isvisible');
      } else {
        contentNode.classList.remove('isvisible');
      }
    }
  }

  // RENDER
  render () {
    const numberOfBtns = this.props.next.length;
    const multipleBtn = numberOfBtns > 1 && this.state.counter >= 1;
    const pointMap = [ 1, 10, 100, 1000 ];
    const classMap = [
      multipleBtn ? '  button--wide--first' : '', // first button
      numberOfBtns === 2 ? '  button--wide--last' : '  button--wide--between', // second button
      numberOfBtns >= 3 ? '  button--wide--last' : '  button--wide--between', // third button
      '  button--wide--last' // last btn
    ];

    return (
      <section className="wrapper">
        <HeaderLightItem { ...this.props } />
        <main className="wrapper__main  wrapper--centered">

          <div class="wrapper__fakenews">
            <TextItem {...this.props} setData={this.setData} />
            <AnimItem {...this.props} {...this.state} setData={this.setData} />
          </div>

        </main>
        <footer className="footer footer--flex">
          {this.props.next.map((btn, i) => (
            <a href="#" title={btn} className={`button--wide  button--wide--cond  ${classMap[i]}`} key={`key-${i}`}
              onClick={() => this.handleNext(pointMap[i]) } ref={elem => (this.btns[i] = elem)}>
              {btn}
            </a>
          ))}
        </footer>
      </section>
    );
  }

}