application/components/content/url-handler.js

import React from 'react';
import PropTypes from 'prop-types';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import Immutable from 'immutable';

import {urlify, timeToFormat} from './../../util/strings';

import Config from './../../config';

/**
 * UrlHandler is a custom component for the content form that handles
 * display of default URLs and management of custom ones.
 */
class UrlHandler extends React.Component {
    constructor(props) {
        super(props);

        this.state = {customUrl: false, showInput: false};
    }

    handleChange(e) {
        const str = urlify(e.target.value, false);

        this.setState({'customUrl': str});

        if (this.props.onChange) {
            this.props.onChange({'customUrl': str});
        }

    }

    handleClick() {
        this.setState({'showInput': true});
    }

    // shouldComponentUpdate(nextProps, nextState) {
    //     if (nextProps.disabled != this.props.disabled) {
    //         return true;
    //     }
    //     if (nextProps.content.get('type') != this.props.content.get('type')
    //         || nextProps.content.get('published_at') != this.props.content.get('published_at')
    //         || nextProps.content.get('created_at') != this.props.content.get('created_at')
    //         || nextProps.content.get('title_url') != this.props.content.get('title_url')
    //         || nextProps.content.get('slug') != this.props.content.get('slug')
    //         || nextProps.content.get('uuid') != this.props.content.get('uuid')) {
    //         return true;
    //     }
    //     if (!Immutable.is(nextProps.content.get('urls'), this.props.content.get('urls'))) {
    //         return true;
    //     }

    //     return false;
    // }

    render() {
        const input = (
            <div className='row middle-xs'>
                <div className='col-xs-3 center-xs prefix'>
                    <div className='box'>
                        {Config.get('base_url')}/
                    </div>
                </div>
                <div className='col-xs-9'>
                    <div className='box'>
                        <TextField
                            type="text"
                            fullWidth={true}
                            name='customUrl'
                            disabled={this.props.disabled}
                            value={this.state.customUrl ? this.state.customUrl : ''}
                            onChange={this.handleChange.bind(this)} />
                    </div>
                </div>
            </div>
        );

        let prefix = '';
        let friendly = null;
        let canonical = null
        if (this.props.content.get('type')) {
            switch (this.props.content.get('type')) {
                case 'article':
                    const articleDate = this.props.content.get('published_at') ? this.props.content.get('published_at') : this.props.content.get('created_at');
                    prefix = 'article/' + timeToFormat(articleDate, 'YYYY/MM/');
                    break;
                case 'post':
                    const postDate = this.props.content.get('published_at') ? this.props.content.get('published_at') : this.props.content.get('created_at');
                    let blogSlug = 'unknown'; // get that from container
                    if (this.props.content.get('container')) {
                        blogSlug = this.props.content.get('container').get('slug');
                    }
                    prefix = 'blog/' + blogSlug + timeToFormat(postDate, '/YYYY/MM/');
                    break;
                case 'page':
                    prefix = 'page/';
                    break;
                default:
                    prefix = this.props.content.get('type') + '/';
                    friendly = Config.get('base_url') + '/' + prefix + (this.props.content.get('uuid') ? this.props.content.get('uuid') : '');
                    canonical = Config.get('base_url') + '/' + (this.props.content.get('uuid') ? this.props.content.get('uuid') : '');
                }
        }

        if (!friendly || !canonical) {
            friendly = Config.get('base_url') + '/' + prefix + (this.props.content.get('title_url') ? this.props.content.get('title_url') : this.props.content.get('slug'));
            canonical = Config.get('base_url') + '/' + (this.props.content.get('uuid') ? this.props.content.get('uuid') : '');
        }

        const urls = this.props.content.get('urls') ? this.props.content.get('urls') : Immutable.fromJS([]);

        if (this.props.displayOnly === true) {
            return (
                <div className="url-handler">
                    <ul>
                        <li><small><a href={friendly}>{friendly}</a> (default)</small></li>
                        <li><small><a href={canonical}>{canonical}</a> (permanent)</small></li>
                        {urls.map((url, i) => {
                            return <li><small>{Config.get('base_url') + '/' + url.get('slug')}</small></li>
                        })}
                    </ul>
                </div>
            );
        }

        return (
            <div className="url-handler">
                <label className='fixed-label'>URLs</label>
                <ul>
                    <li><small><a href={friendly} target="_blank">{friendly}</a> (default)</small></li>
                    <li><small><a href={canonical} target="_blank">{canonical}</a> (permanent)</small></li>
                    {urls.map((url, i) => {
                        return (
                            <li>
                                <small>
                                    <a href={Config.get('base_url') + '/' + url.get('slug')} target="_blank">
                                        {Config.get('base_url') + '/' + url.get('slug')}
                                    </a>
                                    {i == 0 ? ' (original)' : ''}
                                </small>
                            </li>
                        );
                    })}
                </ul>
                {
                    this.state.showInput === true
                    ? input
                    : (<RaisedButton
                        disabled={this.props.disabled}
                        onClick={this.handleClick.bind(this)}
                        label="Add custom URL"
                        />)
                }
            </div>
        );
    }
}

UrlHandler.propTypes = {
    disabled: PropTypes.bool,
    onChange: PropTypes.func,
    content: PropTypes.any
};

export default UrlHandler;