<commit_before>import * as React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import Instruction  from '../pages/proms_page/components/instruction';
import Question from '../pages/proms_page/components/question';
import { goPrevious, goNext, submitAnswers } from '../pages/proms_page/reducers';

import { Button } from 'reactstrap';
import { Container, Row, Col } from 'reactstrap';

import { ElementList } from '../pages/proms_page/logic';

interface AppInterface {
    title: string,
    stage: number,
    questions: ElementList,
    goNext: any,
    goPrevious: any,
    submitAnswers: any,
}


class App extends React.Component<AppInterface, object> {
    atEnd() {
	let lastIndex = this.props.questions.length - 1;
	console.log("lastIndex = " + lastIndex.toString());
	console.log("stage = " + this.props.stage.toString());
	return this.props.stage == lastIndex;
    }

    render() {
	var nextButton;
	if(this.atEnd()) {
	    console.log("at end");
	    nextButton = (<Button onClick={this.props.submitAnswers}>Submit Answers</Button>);
	}
	else {
	    console.log("not at end"); 
	    nextButton = (<Button onClick={this.props.goNext}>Next</Button>);
	};
	
        return (

		<div className="App">
	          <Container>
                    <Row>
		     <Col>
		       <Instruction stage={this.props.stage} />
		     </Col>
                    </Row>

                    <Row>
		      <Col>
		       <Question title={this.props.title} stage={this.props.stage} questions={this.props.questions}/>
		      </Col>
                    </Row>

		  <Row>
		    <Col>
		      <Button onClick={this.props.goPrevious} >Prev</Button>
		    </Col>
		    <Col>
		      {nextButton}
		    </Col>
		  </Row>
		</Container>
		</div>

		        );
    }

}

function mapStateToProps(state) {
    return {stage: state.stage,
	    title: state.title,<commit_msg>rdrf #635 progress bar and validation<commit_after>import * as React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import Instruction  from '../pages/proms_page/components/instruction';
import Question from '../pages/proms_page/components/question';
import { goPrevious, goNext, submitAnswers } from '../pages/proms_page/reducers';

import { Button } from 'reactstrap';
import { Progress } from 'reactstrap';
import { Container, Row, Col } from 'reactstrap';

import { ElementList } from '../pages/proms_page/logic';

interface AppInterface {
    title: string,
    stage: number,
    answers: any,
    questions: ElementList,
    goNext: any,
    goPrevious: any,
    submitAnswers: any,
}


class App extends React.Component<AppInterface, object> {
    atEnd() {
	let lastIndex = this.props.questions.length - 1;
	console.log("lastIndex = " + lastIndex.toString());
	console.log("stage = " + this.props.stage.toString());
	return this.props.stage == lastIndex;
    }

    getProgress(): number {
	let numQuestions: number = this.props.questions.length;
	let numAnswers : number = Object.keys(this.props.answers).length;
	return Math.floor(100.00 * ( numAnswers / numQuestions)) ; 
    }

    isNextButtonDisabled(): boolean {
	let questionCode = this.props.questions[this.props.stage].cde;
	return !(this.props.answers.hasOwnProperty(questionCode));
    }

    render() {
	var nextButton;
	if(this.atEnd()) {
	    console.log("at end");
	    nextButton = (<Button onClick={this.props.submitAnswers}>Submit Answers</Button>);
	}
	else {
	    console.log("not at end"); 
	    nextButton = (<Button disabled={this.isNextButtonDisabled()} onClick={this.props.goNext}>Next</Button>);
	};
	
        return (

		<div className="App">
	          <Container>
                    <Row>
		     <Col>
		       <Instruction stage={this.props.stage} />
		     </Col>
                    </Row>

                    <Row>
		      <Col>
		       <Question title={this.props.title} stage={this.props.stage} questions={this.props.questions}/>
		      </Col>
                    </Row>

		  <Row>
		    <Col>
		      <Button onClick={this.props.goPrevious} >Prev</Button>
		    </Col>
		    <Col>
		      {nextButton}
		    </Col>
		  </Row>
		<Row>
		<Col sm={{ size: 4, order: 2, offset: 1 }}>
		<Progress color="info" value={this.getProgress()}>{this.getProgress()}%</Progress>
		</Col>
		</Row>
		</Container>
		</div>

		        );
    }

}

function mapStateToProps(state) {
    return {stage: state.stage,
	    title: state.title,
	    answers: state.answers,
{'fraction_non_alphanumeric': 0.1497670290658975, 'fraction_numerical': 0.002884402041269137, 'mean_word_length': 2.7164056059356967, 'pattern_counts': {'":': 0, '<': 63, '<?xml version=': 0, '>': 63, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '804635', 'n_tokens_mistral': 1525, 'n_tokens_neox': 1376, 'n_words': 300}