Arc Short Quiz (React)

ARC TEST - 1st

let React = require('react');

// TODO: Create the Notification Component

const map = {
  success: 'success',
  message: 'info',
  caution: 'warning',
  error: 'danger'
};

class Notification extends React.Component {
  render() {
    const { type, message, children } = this.props;
    const className = `alert alert-${map[type] || 'info'}`;
    
    if (message) {
      return (
        <div className={className}>
          <p>{message}</p>
          {children}
        </div>
      )
    }
    
    return null;
  }
}

function App(props) {
    // TODO: Pass Notification its props
	return (
		<div id="app">
			<Notification {...props.notification} />
		</div>
	)
}

ARC TEST 2nd

let React = require('react');

// TODO: Create the Notification Component

const map = {
  success: 'success',
  message: 'info',
  caution: 'warning',
  error: 'danger'
};

class Notification extends React.Component {
  render() {
    const { type, message, children } = this.props;
    const className = `alert alert-${map[type] || 'info'}`;
    
    if (message) {
      return (
        <div className={className}>
          <p>{message}</p>
          {children}
        </div>
      )
    }
    
    return null;
  }
}

class Confirmation extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      isOpen: true
    };
    
    this.accept = this.accept.bind(this);
    this.decline = this.decline.bind(this);
  }
  
  accept() {
    const { accept } = this.props;
    if (accept) accept();
    this.setState({ isOpen: false });
  }
  
  decline() {
    const { decline } = this.props;
    if (decline) decline();
    this.setState({ isOpen: false });
  }
  
  render() {
    const { isOpen } = this.state;
    
    if (isOpen) {
      return (
        <Notification {...this.props}>
          <div className="btn btn-primary" onClick={this.accept}>Sure</div>
          <div className="btn btn-danger" onClick={this.decline}>No Thanks</div>
        </Notification>
      );
    }
    
    return null;
  }
}

function App(props) {
    // TODO: Pass Notification its props
	return (
		<div id="app">
			<Confirmation {...props} />
		</div>
	)
}

// TODO: Create a Confirmation Component

ARC TEST 3rd

let React = require('react');

// TODO: Create the Notification Component

const map = {
  success: 'success',
  message: 'info',
  caution: 'warning',
  error: 'danger'
};

class Notification extends React.Component {
  render() {
    const { type, message, children } = this.props;
    const className = `alert alert-${map[type] || 'info'}`;
    
    return (
      <div className={className}>
        <p>{message}</p>
        {children}
      </div>
    )
  }
}

class Confirmation extends React.Component {  
  render() {
    const { message, type, accept, decline } = this.props;
    
    return (
      <Notification message={message} type={type}>
        <div className="btn btn-primary" onClick={accept}>Yes Please</div>
        <div className="btn btn-danger" onClick={decline}>Not Yet</div>
      </Notification>
    );
  }
}

class QuestionContainer extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      showAnswer: false,
      showConfirmation: false
    };
    
    this.handleAccept = this.handleAccept.bind(this);
    this.handleDecline = this.handleDecline.bind(this);
    this.handleShowConfirmation = this.handleShowConfirmation.bind(this);
  }
  
  handleShowConfirmation() {
    this.setState({ showConfirmation: true });
  }  
  
  handleAccept() {
    this.setState({ showConfirmation: false, showAnswer: true });
  }
  
  handleDecline() {
    this.setState({ showConfirmation: false, showAnswer: false });
  }
  
  render() {
    const {
      answer,
      question,
    } = this.props;
    const { showAnswer, showConfirmation } = this.state;

    return (
      <div className="container">
       {showConfirmation ? (
          <Confirmation
            message="Revel the answer?"
            type="message"
            accept={this.handleAccept}
            decline={this.handleDecline}
          />
        ) : null}
        {!showConfirmation ? <p className="question">{question}</p> : null}
        {!showConfirmation ? (
          <div
            className="btn btn-primary show-answer"
            onClick={this.handleShowConfirmation}
            disabled={showAnswer}
          >
            Show Answer
          </div>
        ) : null}
        {showAnswer ? <p className="answer">{answer}</p> : null}
      </div>
    );
  }
}

class QuestionList extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      showAnswer: false,
      hideAnswer: false,
      showConfirmation: false
    };
  }
  
  render() {
    const { questions } = this.props;
    const { showAnswer, showConfirmation } = this.state;
    
    if (questions.length > 0) {
      return (
        <div>
          {questions.map(({ id, question, answer }) => (
            <QuestionContainer
              key={id}
              question={question}
              answer={answer}
              showAnswer={showAnswer}
            />
          ))}
        </div>
      );
    }
    
    return null;
  }
}

function App(props) {
    // TODO: Pass Notification its props
  
  console.log('PROPS - ', props)
	return (
		<div id="app">
			<QuestionList questions={props.questions} />
		</div>
	)
}

// TODO: Create a Confirmation Component