{"size": 3602, "ext": "js", "max_stars_repo_path": "src/admin-app/containers/setting/setting-editor.js", "max_stars_repo_name": "ippei-tanaka/weblogjs", "max_stars_repo_stars_event_min_datetime": "2016-07-07T18:14:01.000Z", "max_stars_repo_stars_event_max_datetime": "2016-07-07T18:14:01.000Z", "max_issues_repo_path": "src/admin-app/containers/setting/setting-editor.js", "max_issues_repo_name": "ippei-tanaka/weblogjs", "max_issues_repo_issues_event_min_datetime": "2015-12-01T18:54:33.000Z", "max_issues_repo_issues_event_max_datetime": "2016-07-12T17:17:26.000Z", "max_forks_repo_path": "src/admin-app/containers/setting/setting-editor.js", "max_forks_repo_name": "ippei-tanaka/weblogjs", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 14, "max_forks_count": null, "avg_line_length": 30.7863247863, "max_line_length": 134, "alphanum_fraction": 0.4780677401}
import React, { Component } from 'react';
import { FieldSet, SubmitButton, ButtonList, Select, Option, Title, Form, FlushMessage, Input } from '../../../react-components/form';
import actions from '../../actions';
import { connect } from 'react-redux';
import { RESOLVED } from '../../constants/transaction-status';

class SettingEditor extends Component {

    constructor (props)
    {
        super(props);

        this.state = {
            values: {},
            actionId: null
        }
    }

    componentDidMount ()
    {
        this.setState({actionId: Symbol()});
        this.props.loadSetting();
        this.props.loadThemes();
    }

    componentWillUnmount ()
    {
        this.props.finishTransaction({actionId: this.state.actionId});
    }

    render ()
    {
        const {settingStore, transactionStore, themeStore} = this.props;
        const transaction = transactionStore.get(this.state.actionId);
        const themeList = themeStore.toArray().map(obj => obj.name);
        const postsPerPageList = Object.freeze([1, 2, 3, 5, 10, 15]);
        const errors = transaction ? transaction.get('errors') : {};
        const values = Object.assign({}, settingStore, this.state.values);
        const updateSucceeded = transaction && transaction.get('status') === RESOLVED;

        return (
            <Form onSubmit={this._onSubmit.bind(this)}>

                <Title>Setting</Title>

                <FieldSet label="Name"
                          error={errors.name}>
                    <Input value={values.name}
                           onChange={this._onChange.bind(this, "name")}/>
                </FieldSet>

                <FieldSet label="Posts per Page"
                          error={errors.posts_per_page}>
                    <Select value={values.posts_per_page}
                            onChange={this._onChange.bind(this, "posts_per_page")}>
                        {postsPerPageList.map((value, index) =>
                            <Option key={index}
                                    value={value}>
                                {value === 1 ? `${value} post` : `${value} posts`}
                            </Option>
                        )}
                    </Select>
                </FieldSet>

                <FieldSet label="Theme"
                          error={errors.theme}>
                    <Select value={values.theme}
                            onChange={this._onChange.bind(this, "theme")}>
                        {themeList.map((value, index) =>
                            <Option key={index}
                                    value={value}>
                                {value}
                            </Option>
                        )}
                    </Select>
                </FieldSet>

                <ButtonList>
                    <SubmitButton>Update</SubmitButton>
                </ButtonList>

                {updateSucceeded ? (
                    <FlushMessage>Successfully Updated!</FlushMessage>
                ) : null}

            </Form>
        );
    }

    _onChange (field, value)
    {
        this.setState(state =>
        {
            state.values[field] = value;
        });
    }

    _onSubmit (e)
    {
        e.preventDefault();

        this.props.editSetting({
            actionId: this.state.actionId,
            data: this.state.values
        });
    }
}

export default connect(
    state => ({
        settingStore: state.setting,
        transactionStore: state.transaction,
        themeStore: state.theme
    }),
    actions
)(SettingEditor);
