trc-client-core/src/qanda/QandaAskForm.jsx

The core of the TRC Client

import React from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import Reflux from 'reflux';
import Immutable from 'immutable';
import { reduxForm, initialize } from 'redux-form';
import RefluxImmutableStoreMixin from 'reflux-immutable/StoreMixin';
import QandaStore from 'trc-client-core/src/qanda/QandaStore';  
import {qandaSubmitAskForm, qandaRequestTags} from 'trc-client-core/src/qanda/QandaActions';  

import Textarea from 'bd-stampy/components/Textarea';
import Button from 'bd-stampy/components/Button';
import Select from 'trc-client-core/src/components/Select';

const QANDA_ASK_FORM_NAME = 'qandaAskForm';
const QANDA_ASK_FORM_FIELDS = ['questionContent', 'tag'];

var QandaAskForm = React.createClass({
    displayName: 'QandaAskForm',
    mixins: [
        PureRenderMixin
    ],
    getInitialState() {
        return {
            success: false  
        };
    },
    componentWillMount() {
        if(!this.props.tags) {
            this.props.dispatch(qandaRequestTags());
        }
    },
    onSubmit(data) {
        this.props.dispatch(qandaSubmitAskForm(data));
        this.setState({
            success: true
        });
        this.setCurrentFormDataAsDefault();
    },
    setCurrentFormDataAsDefault() {
        this.props.dispatch(initialize(QANDA_ASK_FORM_NAME, this.props.values, QANDA_ASK_FORM_FIELDS));
    },
    render() {
        const {fields: {questionContent, tag}, submitting, handleSubmit, valid, dirty} = this.props;
        var success;
        if(this.state.success && !dirty) {
            // show thank you if the question has been posted and if the form hasn't been altered since then
            success = <h3 className="t-center">Your question has been sent, thank you.</h3>;
        }

        return (
            <div className="Widget margin-bottom2">
                <h3 className="margin-top05">Got a question? Ask the experts.</h3>
                <Textarea {...questionContent} error={null}/>
                <Button className="right" onClick={handleSubmit(this.onSubmit)} disabled={!valid}>Submit</Button>
                <div className="w50">
                    <Select 
                        {...tag}
                        options={this.renderTags().toJS()}
                        placeholder='Choose a category'
                        onBlur={null}
                        onChange={(ee, details) => {
                            tag.onChange(details.value)
                        }}
                    />
                </div>
                {success}
                <small><em>* Please Note, questions regarding pricing, future activity or sensitive content may not be able to be responded to.</em></small>
            </div>
        );  
    },
    renderTags() {
        var defaultOption = Immutable.List([{label: 'Choose a Topic', value:''}]);
        if(this.props.defaultTag) {
            defaultOption = Immutable.List([{label: this.props.defaultTag.replace(/_/g, ' '), value: this.props.defaultTag}]);
        }

        if(!this.props.tags) {
            return defaultOption;
        }

        return this.props.tags.map((tag) => {
            var name = tag.get('name');
            return {label: name.replace(/_/g, ' '), value: name};
        });
    }
});

export default reduxForm({
    form: QANDA_ASK_FORM_NAME,
    fields: QANDA_ASK_FORM_FIELDS,
    validate: function(data) {
        const errors = {};
        if(!data.questionContent) {
            errors.questionContent = 'Required';
        }

        if(!data.tag) {
            errors.tag = 'Required';
        }

        return errors;
    }
},
(state) => ({
    tags: state.qanda.get('tags')
})
)(QandaAskForm);