application/components/admin/settings.js

import React, {Component} from 'react';
import Immutable from 'immutable';

import {List, ListItem} from 'material-ui/List';
import Subheader from 'material-ui/Subheader';
import Divider from 'material-ui/Divider';
import Toggle from 'material-ui/Toggle';

import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';
import IconButton from 'material-ui/IconButton';
import TextField from 'material-ui/TextField';

import {Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarTitle} from 'material-ui/Toolbar';

import {connect} from 'react-redux';
import Config from '../../config';
import ExpandingCard from './../expanding-card';

import {
    snackbarShowMessage
} from './../../redux/actions/snackbar-actions';

import {
    applicationFetchSettings,
    applicationUpdateSetting
} from './../../redux/actions/application-actions';

import {Row, Col} from './../flexbox';

class SettingsCard extends Component {
    constructor(props) {
        super(props);

        this.state = {
            expanded: false,
        };
    }

    handleToggle(expanded) {
        if (this.props.onToggle) {
            this.props.onToggle('settings', expanded);
        }

        if (expanded && !this.state.hasLoaded) {
            const {dispatch} = this.props;
        }
    }

    toggleSetting(slug, e, checked) {
        const {dispatch} = this.props;
        dispatch(applicationUpdateSetting(slug, checked))
    }

    render() {

        return (
            <ExpandingCard
                onToggle={this.handleToggle.bind(this)}
                title="Settings"
                subtitle="Global application settings"
                expanded={this.props.openCard === 'settings'}
                >
                <Toggle
                    label='Automatically Educate Quotes'
                    labelPosition='right'
                    toggled={this.props.application.settings.get('educateQuotes') ? true : false}
                    onToggle={this.toggleSetting.bind(this, 'educateQuotes')}
                    />
                <p>Automatically covert straight single and double quotation marks into typographer's, or "smart", quotes.</p>
                <Toggle
                    label='Daily Developer Exports'
                    labelPosition='right'
                    toggled={this.props.application.settings.get('developerExports') ? true : false}
                    onToggle={this.toggleSetting.bind(this, 'developerExports')}
                    />
                <p>Create daily content exports for local development.</p>
                <Toggle
                    label='Section/Subsection/Topic/Subtopic'
                    labelPosition='right'
                    toggled={this.props.application.settings.get('ssts') ? true : false}
                    onToggle={this.toggleSetting.bind(this, 'ssts')}
                    />
                <p>Enable SSTS classification.</p>

                <Divider />

                <Subheader>Labs</Subheader>
                <Toggle
                    label='RichEditor2 Beta: Safe Mode'
                    labelPosition='right'
                    toggled={this.props.application.settings.get('labsEditor2') ? true : false}
                    onToggle={this.toggleSetting.bind(this, 'labsEditor2')}
                    />
                <p>Labs: Enable RichEditor2 for all NEW content.</p>
                <Toggle
                    label='Related Content'
                    labelPosition='right'
                    toggled={this.props.application.settings.get('relatedContent') ? true : false}
                    onToggle={this.toggleSetting.bind(this, 'relatedContent')}
                    />
                <p>
                    Labs: Enabled automatic, keyword driven related content for articles.
                    {
                        this.props.application.settings.get('relatedContent') && this.props.application.settings.get('relatedContentBuilt')
                        ? (<span className='success-box' style={{marginLeft: '10px'}}>Index is current</span>)
                        : ''
                    }
                    {
                        this.props.application.settings.get('relatedContent') && !this.props.application.settings.get('relatedContentBuilt')
                        ? (<span className='warning-box' style={{marginLeft: '10px'}}>Index is running</span>)
                        : ''
                    }
                </p>
            </ExpandingCard>
        );
    }
}

let mapStateToProps = (state) => {
    return {
        application: state.application
    };
};

export default connect(mapStateToProps)(SettingsCard);