application/components/content/diff.js

import React from 'react';
import {htmlDiff, degraf} from './../../util/strings';

/**
 * Diff accepts two HTML strings and displays
 * a marked up diff of the two
 */
class Diff extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'Diff';

        this.getDiff = this.getDiff.bind(this);

        this.state = {
            diff: '',
            inputA: this.props.inputA,
            inputB: this.props.inputB
        };
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.inputA != this.state.inputA
            || nextProps.inputB != this.state.inputB) {

            this.setState(nextProps);
            this.setState({diff: htmlDiff(nextProps.inputA, nextProps.inputB)});
        }
    }

    componentWillMount() {
        if (this.state.inputA && this.state.inputB) {
            this.setState({diff: htmlDiff(this.state.inputA, this.state.inputB)});
        }
    }

    /**
     * Used to dangerously set the html of the differ. You can also
     * use this method to get a copy of the html diff.
     * @see react-application/__tests__/components/content/diff-test.js
     * @return {object} object with '__html' key containing the diff
     */
    getDiff() {
        return {
            '__html': degraf(this.state.diff)
        };
    }

    render() {
        if (!this.state.diff) {
            return <div>Waiting for second input...</div>;
        }

        return <div dangerouslySetInnerHTML={this.getDiff()}></div>;
    }
}

export default Diff;