understanding-graphs/src/js/components/QuestionScreen.jsx

import { h, render, Component } from 'preact'; // eslint-disable-line no-unused-vars
import GraphItem from './partials/GraphItem.jsx';
import IntroItem from './partials/IntroItem.jsx';
import QuestionItem from './partials/QuestionItem.jsx';
import UserVoteItem from './partials/UserVoteItem.jsx';
import HeaderLightItem from './partials/HeaderLightItem.jsx';

// module02: Question Screen
// outputs the wrapper which contains
// - a) the current question
// - b) the current user vote result
// - c) the initial intro item
export default class QuestionScreen extends Component {

  // get answer and validate it
  getAnswers (question) {
    return Object.prototype.hasOwnProperty.call(question, 'antworten') ? question.antworten : [];
  }

  // RENDER
  render () {
    let topItem = ''; // content (will either be questions or statistics)
    let isCorrectClass = '';
    let isIncorrectClass = '';
    let buttonLabel = this.props.next;
    const question = this.props.questions[this.props.currentQuestion];
    const answers = this.getAnswers(question);

    // set classes to style lines in svg graph
    const hasAnswered = this.props.currentAnswerIndex !== null;
    const correct = answers.find(item => item.korrekt === true);

    if (this.props.currentGroup === 1 && hasAnswered) {
      isCorrectClass = `correct--${answers.indexOf(correct) + 1}`;
      isIncorrectClass = !this.props.currentAnswerCorrect
        ? `incorrect--${this.props.currentAnswerIndex + 1}` : '';
    } else if (this.props.currentGroup === 2) {
      isCorrectClass = this.props.currentAnswerCorrect ? 'correct' : 'incorrect';
      buttonLabel = `${this.props.success} ${this.props.next}`;
    }

    // d3js properties to pass through
    const graphItemProps = {
      dataSet: question,
      setData: this.props.setData,
      chartMode: this.props.chartMode,
      currentQuestion: this.props.currentQuestion,
      points: this.props.points
    };

    // render sub component depending on chartMode
    if (this.props.chartMode === 'question') {
      topItem = <QuestionItem question={question} answers={answers} currentGroup={this.props.currentGroup}
        currentQuestion={this.props.currentQuestion} currentAnswerIndex={this.props.currentAnswerIndex} setAnswer={this.props.setAnswer} />;
    } else if (this.props.voteRatios !== null) {
      topItem = <UserVoteItem usersRight={this.props.usersRight} voteRatios={this.props.voteRatios} />;
    } else {
      topItem = <IntroItem headline={this.props.usersVoteHeadline} />;
    }

    // output
    return (
      <section className="wrapper  wrapper__question">
        <HeaderLightItem { ...this.props } />

        <main className={`wrapper__main  wrapper--centered  wrapper__main--question  ${isCorrectClass}  ${isIncorrectClass}`}>
          {topItem}
          <GraphItem { ...graphItemProps } />
        </main>

        <footer className="footer footer--chart">
          {this.props.currentAnswerIndex !== null
            ? <a href="#" title={this.props.next} className="button--wide" onClick={() => this.props.toNextQuestion('score')}>
              {buttonLabel}
            </a>
            : []}
        </footer>
      </section>
    );
  }

}