DDCreationStudios/votingApp

View on GitHub
src/components/pollsPage/NewPollCon.js

Summary

Maintainability
B
6 hrs
Test Coverage
import React from 'react';
import shortid from 'shortid';
import axios from 'axios';

import NewPoll from './NewPoll';

export default class NewPollCon extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            question: '',
            answers: [{ answer: '', votes: 1 }, { answer: '', votes: 1 }]
        };
        this.addAnswer = this.addAnswer.bind(this);
        this.addPoll = this.addPoll.bind(this);
        this.onChange = this.onChange.bind(this);
        this.onQuestion = this.onQuestion.bind(this);
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            question: '',
            answers: [{ answer: '', votes: 1 }, { answer: '', votes: 1 }]
        });
    }

    reset() {
        this.setState({
            question: '',
            answers: [{ answer: '', votes: 1 }, { answer: '', votes: 1 }]
        });
    }

    onQuestion = e => {
        const newValue = e.target.value;
        this.setState({
            question: newValue,
        });
    };

    onChange = (e, index) => {
        const newValue = e.target.value;
        this.setState(oldState => ({
            answers: oldState.answers.map((answ, ansInd) => {
                if (ansInd !== index) {
                    return { answer: answ.answer, votes: 1 };
                } else {
                    return { answer: newValue, votes: 1 };
                }
            }),
        }));
    };

    addAnswer = () => {
        this.setState(oldState => ({
            answers: [...oldState.answers, { answer: '', votes: 1 }],
        }));
    };

    addPoll = e => {
        if (e) e.preventDefault();
        this.props.addPoll(this.state.question, this.state.answers);
        this.reset();
    };

    render() {
        return (
            <NewPoll
                addPoll={this.addPoll}
                addAnswer={this.addAnswer}
                onChange={this.onChange}
                state={this.state}
                onQuestion={this.onQuestion}
            />
        );
    }
}