/*

Hierarchy plan:

Mainbox
ImageForm             // Submit new image
Post                  // A post has one or more images and one commentbox
    Image             // Image itself
    Image...
    CommentList       // List of the comments
      Comment         // Individual comment
      Comment         // May have same-level comments
        Comment       // May have children
*/

// Main container
var MainBox = React.createClass({
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  render: function() {
    return (
      <div className="mainBox">
        <ImageForm />
        <Post data={this.state.data}/>
      </div>  
      );
  }
});

// Post has a title, one or more images with captions, and a comment box 
var Post = React.createClass({
  render: function() {
    console.log(this.props.data.images)
    if (this.props.data.images) {
      var images = this.props.data.images.map(function(image) {
        return (
          <Image alt={image.alt} src={image.src} txt={image.txt} />
        )
      })
    } else {
      return (<p>loading...</p>);
    }

    return (
      <div className="post">
        <h2>{this.props.data.title}</h2>
        <p>posted by: {this.props.data.author} </p>
        {images}
        <CommentList comments={this.props.data.comments} />
      </div>
    );
  }
});

// Class for the image posting form
var ImageForm = React.createClass({
  render: function() {
    return (
      <div className="imageForm">
        Placeholder - Image submit form here.
      </div>
    );
  }
});

// Individual image object
var Image = React.createClass({
  render: function() {
    return (
      <figure className="image">
        <img alt={this.props.alt} src={this.props.src} />
        <figcaption>{this.props.txt}</figcaption>
      </figure>
    );
  }
});


// Comments

var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.comments.map(function(comment) {
    return (
      <Comment author={comment.author} key={comment.id}>
        {comment.text}
      </Comment>
    )
    });
    return (
      <div className="commentList">
        <h3>Comments</h3>
        {commentNodes}
        <CommentForm />
      </div>
    );
  }
});

var CommentForm = React.createClass({
  render: function() {
    return (
      <div className="commentForm">
        Placeholder - Comment submit form here.
      </div>
    );
  }
});

var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        <strong className="commentAuthor">
          {this.props.author}:
        </strong>
        {this.props.children}
      </div>
    );
  }
});

var id = window.location.hash.slice(1);
// Index page
if (id.length === 0) {
  ReactDOM.render(
    <div className="index">
      <h1>ReactGIFs</h1>
      <p>ReactGIFs is a React-based image sharing site.</p>
    </div>
    , document.getElementById('content'))
}
else {
  id = "api/" + id;
  ReactDOM.render(<MainBox url={id}/>, document.getElementById('content'))
}

@@ -3001,24 +3001,133 @@
 );%0A  %7D%0A%7D);%0A%0A
+%0A// Main render function;%0A// serve either index page or the page content requested%0Avar main = function() %7B%0A  
 var id = win
@@ -3154,16 +3154,18 @@
 ice(1);%0A
+  
 // Index
@@ -3170,16 +3170,18 @@
 ex page%0A
+  
 if (id.l
@@ -3197,16 +3197,18 @@
  0) %7B%0A  
+ 
+ 
 ReactDOM
@@ -3216,16 +3216,18 @@
 render(%0A
+  
     %3Cdiv
@@ -3242,24 +3242,26 @@
 me=%22index%22%3E%0A
+  
       %3Ch1%3ERe
@@ -3279,16 +3279,18 @@
 %3E%0A      
+  
 %3Cp%3EReact
@@ -3331,24 +3331,26 @@
 g site.%3C/p%3E%0A
+  
     %3C/div%3E%0A 
@@ -3352,16 +3352,18 @@
 iv%3E%0A    
+  
 , docume
@@ -3396,17 +3396,23 @@
 '))%0A
-%7D%0A
+  %7D%0A  
 else %7B%0A
+  
   id
@@ -3429,16 +3429,18 @@
 + id;%0A  
+ 
+ 
 ReactDOM
@@ -3504,10 +3504,157 @@
 tent'))%0A
-%7D%0A
+  %7D%0A%7D%0A%0A// Run main at least once on initial load%0Amain();%0A%0A// Re-run main if the hash-url changes%0A$(window).on('hashchange', function() %7B%0A  main();%0A%7D)

Improve refreshing on url hash change