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

import { h, render, Component } from 'preact'; // eslint-disable-line no-unused-vars
// content and config:
import content from '../content/module.json';
import data from '../content/data.json';
import config from '../config';
// services and helper:
import { fixedDigits } from '../utilities/formatter';
// screens and items:
import TitleScreen from './TitleScreen.jsx';
import PollScreen from './PollScreen.jsx';

/**
 * titlescreen -> pollscreen (*n)
 */
export default class App extends Component {

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

    this.state = {
      route: 'titlescreen',
      iteration: 0,
      currentAnswerIndex: null
    };

    if (window.location.hash) this.state.route = window.location.hash.replace('#', '');

    // context binding
    this.navigate = this.navigate.bind(this);
    this.reset = this.reset.bind(this);
    this.toNext = this.toNext.bind(this);
    this.setAnswer = this.setAnswer.bind(this);
    this.jumpTo = this.jumpTo.bind(this);
  }

  // set navigation state
  navigate (route) {
    this.setState({ route });
  }

  // reset everything to restart the module
  reset () {
    this.setState({
      route: 'titlescreen',
      currentAnswerIndex: null
    });
  }

  // shortcut: jump to specific screen using `#question_2`
  jumpTo () {
    if (window.location.hash) {
      const hashInfo = window.location.hash.replace('#', '').split('_');

      if (hashInfo[1] === '1') {
        this.setState({ iteration: 8, continue: false, question: 0, route: 'pollscreen' });
        this.toNext();
      } else if (hashInfo[1] === '2') {
        this.setState({ iteration: 9, continue: false, question: 1, route: 'pollscreen' });
        this.toNext();
      }
    }
  }

  // to next question, if finished trigger restart
  toNext () {
    if (this.state.iteration < config.numberQuestions - 1) {
      this.setState({
        iteration: this.state.iteration + 1,
        currentAnswerIndex: null
      });
    } else {
      location.reload();
    }
  }

  // set and check answer
  setAnswer (checked) {
    if (this.state.currentAnswerIndex === null) {
      this.setState({ currentAnswerIndex: checked });
    }
  }

  // LIFECYLCE
  componentWillMount () {
    this.jumpTo();
  }

  // RENDER
  render () {
    let outputContent;

    // get header content
    const total = fixedDigits(config.numberQuestions, 2);
    const index = this.state.iteration + 1; // 0-indexed
    const headerState = `${fixedDigits(index, 2)}/${total}`;

    // get header and intro content
    const header = { title: content.title, number: content.number, headerState };
    const introContent = { number: content.number, title: content.title, introtext: content.introtext, start: content.start };

    switch (this.state.route) {
      case 'pollscreen':
        outputContent = <PollScreen
          {...header }
          {...content.sections[this.state.iteration]}
          data={data}
          toNext={this.toNext}
          iteration={this.state.iteration}
          currentAnswerIndex={this.state.currentAnswerIndex}
          setAnswer={this.setAnswer} />;
        break;

      case 'titlescreen':
      default:
        outputContent = <TitleScreen
          {...introContent}
          navigateTo='pollscreen'
          navigate={this.navigate} />;
        break;
    }

    return outputContent;
  }

}