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;