digitalmacgyver/test.html

## test.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="test"></div>

    <script type="text/javascript" src="build/bundletest.js" charset="utf-8"></script>

</body>
</html>

## test.js
import ReactDOM from 'react-dom';
import React from 'react';

import update from 'immutability-helper';


class AuthorList extends React.Component {

  render() {
    let authors = this.props.authors;
    return (
      <div>
        { Object.keys( authors ).map( ( author_id ) => {
          return <Author key={author_id} author={authors[author_id]} />;
        } ) }
      </div>
    );
  }
}

class Author extends React.Component {

  render() {
    if ( this.props.author.name === 'Bob Baker' ) {
      alert( "Rendering Bob!" );
    }

    return (
      <div>
        <p>Name: {this.props.author.name}</p>
        <p>Bio: {this.props.author.bio}</p>
      </div>
    );
  }
}

class PublicationList extends React.Component {

  render() {
    console.log( 'Rendering PublicationList' );
    let authors = this.props.authors;
    let publications = this.props.publications;
    return (
      <div>
        { Object.keys( publications ).map( ( publication_id ) => {
          return <Publication key={publication_id} publication={publications[publication_id]} authors={authors} />;
        } ) }
      </div>
    );
  }
}

class Publication extends React.Component {

  render() {
    console.log( 'Rendering Publication' );
    let authors = this.props.authors;
    let publication_authors = this.props.publication.authors.reduce( function( obj, x ) {
      obj[x] = authors[x];
      return obj;
    }, {} );

    return (
      <div>
        <p>Title: {this.props.publication.title}</p>
        <div>Authors:
          <AuthorList authors={publication_authors} />
        </div>
      </div>
    );
  }
}

class TestApp extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      'authors': {
        1: {
          'name': 'Alice Author',
          'bio': 'Alice initial bio.'
        },
        2: {
          'name': 'Bob Baker',
          'bio': 'Bob initial bio.'
        }
      },
      'publications': {
        1 : {
          'title' : 'Two Authors',
          'authors' : [ 1, 2 ]
        },
        2 : {
          'title' : 'One Author',
          'authors' : [ 1 ]
        }
      }
    };

    this.updateState = this.updateState.bind( this );
  }

  updateState() {
    let new_bio = this.state.authors['1'].bio + ' updated ';
    //this.setState( update( this.state, { 'authors' : { '1' : { 'bio' : {$set : new_bio } } } } ) );
    let new_state = {
      ...this.state,
      authors : {
        ...this.state.authors,
        [ 1 ] : {
          ...this.state.authors[1],
          bio : new_bio
        }
      }
    };
    this.setState(new_state);
  }

  render() {
    return (
      <div>
        <p>
          <span onClick={this.updateState}><b>Click to Change Alice!</b></span>
        </p>

        <div>Authors:
          <AuthorList authors={this.state.authors} />
        </div>
        <div>Publications:
          <PublicationList authors={this.state.authors} publications={this.state.publications} />
        </div>
      </div>
    );
  }

}

ReactDOM.render(
  <TestApp />,
  document.getElementById( 'test' )
);
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	</head>
	<body>
	<div id="test"></div>

	<script type="text/javascript" src="build/bundletest.js" charset="utf-8"></script>

	</body>
	</html>
	import ReactDOM from 'react-dom';
	import React from 'react';

	import update from 'immutability-helper';


	class AuthorList extends React.Component {

	render() {
	let authors = this.props.authors;
	return (
	<div>
	{ Object.keys( authors ).map( ( author_id ) => {
	return <Author key={author_id} author={authors[author_id]} />;
	} ) }
	</div>
	);
	}
	}

	class Author extends React.Component {

	render() {
	if ( this.props.author.name === 'Bob Baker' ) {
	alert( "Rendering Bob!" );
	}

	return (
	<div>
	<p>Name: {this.props.author.name}</p>
	<p>Bio: {this.props.author.bio}</p>
	</div>
	);
	}
	}

	class PublicationList extends React.Component {

	render() {
	console.log( 'Rendering PublicationList' );
	let authors = this.props.authors;
	let publications = this.props.publications;
	return (
	<div>
	{ Object.keys( publications ).map( ( publication_id ) => {
	return <Publication key={publication_id} publication={publications[publication_id]} authors={authors} />;
	} ) }
	</div>
	);
	}
	}

	class Publication extends React.Component {

	render() {
	console.log( 'Rendering Publication' );
	let authors = this.props.authors;
	let publication_authors = this.props.publication.authors.reduce( function( obj, x ) {
	obj[x] = authors[x];
	return obj;
	}, {} );

	return (
	<div>
	<p>Title: {this.props.publication.title}</p>
	<div>Authors:
	<AuthorList authors={publication_authors} />
	</div>
	</div>
	);
	}
	}

	class TestApp extends React.Component {
	constructor(props) {
	super(props);

	this.state = {
	'authors': {
	1: {
	'name': 'Alice Author',
	'bio': 'Alice initial bio.'
	},
	2: {
	'name': 'Bob Baker',
	'bio': 'Bob initial bio.'
	}
	},
	'publications': {
	1 : {
	'title' : 'Two Authors',
	'authors' : [ 1, 2 ]
	},
	2 : {
	'title' : 'One Author',
	'authors' : [ 1 ]
	}
	}
	};

	this.updateState = this.updateState.bind( this );
	}

	updateState() {
	let new_bio = this.state.authors['1'].bio + ' updated ';
	//this.setState( update( this.state, { 'authors' : { '1' : { 'bio' : {$set : new_bio } } } } ) );
	let new_state = {
	...this.state,
	authors : {
	...this.state.authors,
	[ 1 ] : {
	...this.state.authors[1],
	bio : new_bio
	}
	}
	};
	this.setState(new_state);
	}

	render() {
	return (
	<div>
	<p>
	<span onClick={this.updateState}><b>Click to Change Alice!</b></span>
	</p>

	<div>Authors:
	<AuthorList authors={this.state.authors} />
	</div>
	<div>Publications:
	<PublicationList authors={this.state.authors} publications={this.state.publications} />
	</div>
	</div>
	);
	}

	}

	ReactDOM.render(
	<TestApp />,
	document.getElementById( 'test' )
	);