Skip to content

Instantly share code, notes, and snippets.

@petehunt

petehunt/gist:5687276

Forked from zpao/gist:5686416
Last active June 3, 2022 06:37
Download ZIP

Revisions

  1. petehunt revised this gist May 31, 2013. 1 changed file with 21 additions and 19 deletions.
    40 changes: 21 additions & 19 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,21 @@
    /** @jsx React.DOM */
    var MyRootComponent = React.createClass({
    getInitialState: function() {
    return {perMinute: '-', perDay: '-'};
    },
    componentDidMount: function() {
    var socket = io.connect(this.props.url);
    socket.on('business.clickout', this.setState.bind(this));
    },
    render: function() {
    return <MyComponent perMinute={this.state.perMinute} perDay={this.state.perDay} />;
    }
    });

    var MyComponent = React.createClass({
    render: function() {
    // Defaults in case the props are undefined. We'll have a solution for this
    // soon that is less awkward.
    var perMinute = this.props.perMinute || '-';
    var perDay = this.props.perDay || '-';
    var perMinute = this.props.perMinute;
    var perDay = this.props.perDay;
    return (
    <div>
    <h3>Clickouts</h3>
    @@ -14,18 +25,9 @@ var MyComponent = React.createClass({
    );
    }
    });

    function renderOrUpdate(data) {
    // React.renderComponent will do an initial render OR perform an update if
    // needed. In this case you'll just continuously pass data in and as it comes
    // from the socket and the DOM will just keep updating. What this means is
    // that if only data.perMinute is updated and data.perDay stays the same,
    // we'll only update the <p> containing perMinute.
    React.renderComponent(
    <MyComponent perDay={data.perDay}, perMinute={data.perMinute} />,
    document.getElementById('domid')
    );
    }

    var socket = io.connect('http://localhost:3000');
    socket.on('business.clickout', renderOrUpdate);


    React.renderComponent(
    <MyRootComponent url="http://localhost:3000" />,
    document.getElementById('domid')
    );
  2. @zpao zpao created this gist May 31, 2013.
    31 changes: 31 additions & 0 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    /** @jsx React.DOM */
    var MyComponent = React.createClass({
    render: function() {
    // Defaults in case the props are undefined. We'll have a solution for this
    // soon that is less awkward.
    var perMinute = this.props.perMinute || '-';
    var perDay = this.props.perDay || '-';
    return (
    <div>
    <h3>Clickouts</h3>
    <p>last Minute: {perMinute}</p>
    <p>today: {perDay}</p>
    </div>
    );
    }
    });

    function renderOrUpdate(data) {
    // React.renderComponent will do an initial render OR perform an update if
    // needed. In this case you'll just continuously pass data in and as it comes
    // from the socket and the DOM will just keep updating. What this means is
    // that if only data.perMinute is updated and data.perDay stays the same,
    // we'll only update the <p> containing perMinute.
    React.renderComponent(
    <MyComponent perDay={data.perDay}, perMinute={data.perMinute} />,
    document.getElementById('domid')
    );
    }

    var socket = io.connect('http://localhost:3000');
    socket.on('business.clickout', renderOrUpdate);