Added error display if a comment is unexpectedly null

Author: insin

public/style.css

@@ -296,11 +296,14 @@ span.control:hover {
 .Comment--dead > .Comment__content > .Comment__text {
   color: #ddd !important;
 }
+.Comment--error .Comment__meta {
+  color: #f33;
+}
 
 .UserProfile {
   padding-left: 1.25em;
   padding-top: 1em;
 }
 .UserProfile h4 {
   margin: 0 0 1em 0;
-}
+}

src/Comment.jsx

@@ -45,6 +45,10 @@ var Comment = React.createClass({
   },
 
   componentDidUpdate(prevProps, prevState) {
+    if (!this.state.comment) {
+      return
+    }
+
     if (!prevState.comment.id) {
       // Register a newly-loaded comment with the thread store
       if (this.state.comment.id) {
@@ -117,6 +121,12 @@ var Comment = React.createClass({
   render() {
     var comment = this.state.comment
     var props = this.props
+    if (!comment) {
+      return this.renderError(comment, {
+        id: this.props.id,
+        className: 'Comment Comment--error Comment--level' + props.level
+      })
+    }
     // Render a placeholder while we're waiting for the comment to load
     if (!comment.id) { return this.renderCommentLoading(comment) }
     // Don't show dead coments or their children, when configured
@@ -162,4 +172,4 @@ var Comment = React.createClass({
   }
 })
 
-module.exports = Comment
+module.exports = Comment

src/PermalinkedComment.jsx

@@ -52,6 +52,10 @@ var PermalinkedComment = React.createClass({
   },
 
   componentWillUpdate(nextProps, nextState) {
+    if (!nextState.comment) {
+      return
+    }
+
     if (this.state.comment.id != nextState.comment.id) {
       if (!nextState.comment.deleted) {
         // Redirect to the appropriate route if a Comment "parent" link had a
@@ -95,6 +99,12 @@ var PermalinkedComment = React.createClass({
 
   render() {
     var comment = this.state.comment
+    if (!comment) {
+      return this.renderError(comment, {
+        id: this.props.params.id,
+        className: 'Comment Comment--level0 Comment--error'
+      })
+    }
     // Render a placeholder while we're waiting for the comment to load
     if (!comment.id) { return this.renderCommentLoading(comment) }
     // Render a link to HN for deleted comments
@@ -130,4 +140,4 @@ var PermalinkedComment = React.createClass({
   }
 })
 
-module.exports = PermalinkedComment
+module.exports = PermalinkedComment

src/mixins/CommentMixin.jsx

@@ -57,6 +57,16 @@ var CommentMixin = {
     </div>
   },
 
+  renderError(comment, options) {
+    return <div className={options.className}>
+      <div className="Comment__content">
+        <div className="Comment__meta">
+          [error] | comment is {JSON.stringify(comment)} | <a href={'https://news.ycombinator.com/item?id=' + options.id}>view on Hacker News</a>
+        </div>
+      </div>
+    </div>
+  },
+
   renderCollapseControl(collapsed) {
     return <span className="Comment__collapse" onClick={this.toggleCollapse} onKeyPress={this.toggleCollapse} tabIndex="0">
       [{collapsed ? '+' : '–'}]
@@ -113,4 +123,4 @@ var CommentMixin = {
   }
 }
 
-module.exports =  CommentMixin
+module.exports =  CommentMixin