application/components/tag/tag-item.js

import React, { Component } from 'react';
import {browserHistory} from 'react-router';
import {connect} from 'react-redux';
import Immutable from 'immutable';

import Paper from 'material-ui/Paper';
import FontIcon from 'material-ui/FontIcon';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
import Checkbox from 'material-ui/Checkbox';
import Subheader from 'material-ui/Subheader';
import Divider from 'material-ui/Divider';

import {Row, Col} from './../flexbox';
import LoadingIndicator from './../common/loading-indicator';
import DeleteButton from './../common/delete-button';

import {sluggify} from './../../util/strings';

import {
    tagCreate,
    tagUpdate,
    tagsFetchOne,
    tagsRemove
} from './../../redux/actions/tag-actions';

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

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

        this.getUuid = this.getUuid.bind(this);
        this.isNew = this.isNew.bind(this);

        this.state = {
            isReady: false,
            tag: Immutable.fromJS({})
        };
    }

    componentWillMount() {
        const {dispatch} = this.props;

        if (!this.isNew()) {
            dispatch(tagsFetchOne(this.getUuid()))
                .then(() => {
                    const tag = this.props.tags.items.find((item) => item.get('uuid') == this.getUuid());
                    this.setState({
                        tag: tag,
                        isReady: true
                    });
                });
        } else {
            this.setState({
                tag: Immutable.fromJS({}),
                isReady: true
            });
        }
    }

    /**
     * Return the requested UID, starts with UUID property,
     * then goes to the URL property.
     * @return {string}
     */
    getUuid() {
        if (this.props.uuid) {
            return this.props.uuid;
        }

        if (this.props.params && this.props.params.id) {
            return this.props.params.id;
        }

        return false;
    }

    toHtml(contentState) {
        return rawToHtml(contentState);
    }

    isNew() {
        if (!this.getUuid() || this.getUuid() === 'new') {
            return true;
        }

        return false;
    }

    handleTextChange(e) {
        const key = e.target.name;
        let tag = this.state.tag.asMutable();

        switch(key) {
            case 'status':
                tag.set('status', this.state.tag.get('status') ? false : true);
                break;
            case 'slug':
                tag.set(key, sluggify(e.target.value, true));
                break;
            case 'name':
                tag.set('slug', sluggify(e.target.value, true));
                tag.set(key, e.target.value);
                break;
            default:
                tag.set(key, e.target.value);
                break;
        }

        this.setState({'tag': tag.asImmutable()});
    }

    handleCheckChange(e, isChecked) {
        const key = e.target.name;
        let tag = this.state.tag.asMutable();

        tag.set('status', isChecked ? 1 : 0);

        this.setState({'tag': tag.asImmutable()});
    }

    handleDelete() {
        const {dispatch} = this.props;
        dispatch(tagsRemove(this.getUuid()))
            .then(() => {
                browserHistory.goBack();
                dispatch(snackbarShowMessage('Tag removed'));
            });
    }

    handleSave() {
        let data = {
            'name':                this.state.tag.get('name'),
            'slug':                this.state.tag.get('slug'),
            'status':              this.state.tag.get('status')
        };

        const {dispatch} = this.props;

        if (!this.isNew()) {
            dispatch(tagUpdate(this.getUuid(), data))
                .then(() => {
                    dispatch(snackbarShowMessage('Tag updated'));
                })
                .then(() => {
                    browserHistory.goBack();
                });
        } else {
            dispatch(tagCreate(data))
                .then(() => {
                    dispatch(snackbarShowMessage('Tag created'));
                })
                .then(() => {
                    browserHistory.goBack();
                });
        }
    }

    render() {
        return (
            <div className="tag-item-root">
                <Row>
                    <Col xs={8} offsetXs={2}>
                        <Paper>
                            <Row middle='xs'>
                                <Col xs={6}>
                                    <FlatButton
                                        primary={true}
                                        label='Save'
                                        icon={<FontIcon className='mui-icons'>save</FontIcon>}
                                        onClick={this.handleSave.bind(this)}
                                        style={{marginLeft:'20px'}}
                                        />
                                </Col>
                                <Col xs={6} end='xs'>
                                    <DeleteButton
                                        disabled={this.isNew()}
                                        onDelete={this.handleDelete.bind(this)}
                                        />
                                </Col>
                            </Row>
                        </Paper>

                        <Paper className='clear-top clear-bottom padded'>
                            <TextField
                                name='name'
                                fullWidth={true}
                                floatingLabelText='Tag Name'
                                value={this.state.tag.get('name')}
                                onChange={this.handleTextChange.bind(this)}
                                />

                            <TextField
                                name='slug'
                                fullWidth={true}
                                floatingLabelText='Slug'
                                value={this.state.tag.get('slug')}
                                onChange={this.handleTextChange.bind(this)}
                                />


                            <div className='clear-top clear-bottom'>
                                <Checkbox
                                    label='Active tag'
                                    name='active'
                                    checked={parseInt(this.state.tag.get('status')) || this.isNew() ? true : false}
                                    onCheck={this.handleCheckChange.bind(this)}
                                    />
                            </div>
                        </Paper>
                    </Col>
                </Row>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        tags: state.tags
    };
}
export default connect(mapStateToProps)(TagItem);