application/components/common/quips.js

import React from 'react';
import _ from 'lodash';

import QUIPS from './../../data/quips';

/**
 * Quip component, mostly for fun and personality.
 *
 * Quips are stored in data/quips.json.
 */
class Quips extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'Quips';

        this.handleClick = this.handleClick.bind(this);

        this.interval;
        this.last;
    }

    componentWillMount() {
        let key = _.random(0, QUIPS.length-1);
        if (this.last) {
            while (key === this.last) {
                key = _.random(0, QUIPS.length-1);
            }
        }

        const quip = QUIPS[key];

        this.last = key;

        this.setState({quip: quip, activeClass: ''});

        if (this.props.randomize) {
            this.interval = setInterval(this.onUpdate.bind(this), this.props.randomize);
        }
    }

    onUpdate() {
        let key = _.random(0, QUIPS.length-1);
        while (key === this.last) {
            key = _.random(0, QUIPS.length-1);
        }

        this.last = key;
        const quip = QUIPS[key]

        this.setState({activeClass: 'fader'});

        setTimeout(() => {
            this.setState({quip: quip, activeClass: ''});
        }, 400);
    }

    handleClick(e) {
        if (this.interval) {
            clearInterval(this.interval);
            this.interval = setInterval(this.onUpdate.bind(this), this.props.randomize);
        }

        this.onUpdate();
    }

    render() {
        const dhanjerruz = () => {
            return {
                '__html': this.state.quip
            };
        };
        return <div className={this.props.className ? this.props.className : 'quip'} onClick={this.handleClick}><span className={this.state.activeClass} dangerouslySetInnerHTML={dhanjerruz()} /></div>
    }
}

export default Quips;