Implemented new feeds for job, ask, show. Comments now work deeply nested on a news item. Comments returned from the HN api as dead, deleted or null are rejected as promises and become undefined, which gets array filtered before returning the GraphQL result. Made the GraphQL type for some comment properties non-nullable. Everything nullable in the graphql schema should be handled when null on the client side, and everything non-nullable in the schema should be handled in resolvers.

Author: clintonwoo

src/components/Comments.js

@@ -6,23 +6,40 @@ import Comment from './Comment';
 
 const Comments = (props) => {
   const rows = [];
+  function buildComment(comment, indent) {
+    return (
+      <Comment
+        key={comment.id}
+        parentId={comment.parent}
+        indentationLevel={indent}
+        {...comment}
+      />
+    );
+  }
   props.newsItem.comments.forEach((rootComment) => {
-    rows.push(<Comment
-      key={rootComment.id}
-      parentId={props.newsItem.id}
-      indentationLevel={0}
-      {...rootComment}
-    />);
-    rootComment.comments.forEach((one) => {
-      rows.push(<Comment
-        key={one.id}
-        parentId={one.parent}
-        indentationLevel={1}
-        {...one}
-      />);
+    rows.push(buildComment(rootComment, 0));
+    
+    rootComment.comments.forEach((commentOne) => {
+      rows.push(buildComment(commentOne, 1));
+
+      commentOne.comments.forEach((commentTwo) => {
+        rows.push(buildComment((commentTwo), 2));
+
+        commentTwo.comments.forEach((commentThree) => {
+          rows.push(buildComment(commentThree, 3));
+
+          commentThree.comments.forEach((commentFour) => {
+            rows.push(buildComment(commentFour, 4));
+            
+            commentFour.comments.forEach((commentFive) => {
+              rows.push(buildComment(commentFive, 5));
+            });
+          });
+        });
+      });
     });
   });
-  
+
   return (
     <table className="comment-tree" style={{ border: '0' }} >
       <tbody>
@@ -48,19 +65,24 @@ Comments.fragments = {
       id,
       comments {
         id,
+        comments {
+          id,
+          comments {
+            id,
+            comments {
+              id,
+              ...Comment
+            }
+            ...Comment
+          }
+          ...Comment
+        }
         ...Comment
       }
       ...Comment
     }
     ${Comment.fragments.comment}
   `,
 };
-// comments {
-//   id
-//   ...Comment
-// }
-// ...Comment
-// comments {
-//   ...Comment
-// }
+
 export default Comments;

src/components/HeaderNav.js

@@ -14,29 +14,34 @@ const HeaderNav = props => (
       {props.userId && <Link prefetch href="/newswelcome"><a>welcome</a></Link>}
       {props.userId && ' | '}
       <Link prefetch href="/newest">
-        <a>new</a>
+        <a className={props.currentURL === '/newest' ? 'topsel' : ''}>new</a>
       </Link>
       {props.userId && ' | '}
-      {props.userId && <Link prefetch href={`/threads?id=${props.userId}`}><a>threads</a></Link>}
+      {
+        props.userId &&
+        <Link prefetch href={`/threads?id=${props.userId}`}>
+          <a className={props.currentURL === '/threads' ? 'topsel' : ''}>threads</a>
+        </Link>
+      }
       {' | '}
       <Link prefetch href="/newcomments">
-        <a>comments</a>
+        <a className={props.currentURL === '/newcomments' ? 'topsel' : ''}>comments</a>
       </Link>
       {' | '}
       <Link prefetch href="/show">
-        <a>show</a>
+        <a className={props.currentURL === '/show' ? 'topsel' : ''}>show</a>
       </Link>
       {' | '}
       <Link prefetch href="/ask">
-        <a>ask</a>
+        <a className={props.currentURL === '/ask' ? 'topsel' : ''}>ask</a>
       </Link>
       {' | '}
       <Link prefetch href="/jobs">
-        <a>jobs</a>
+        <a className={props.currentURL === '/jobs' ? 'topsel' : ''}>jobs</a>
       </Link>
       {' | '}
       <Link prefetch href="/submit">
-        <a>submit</a>
+        <a className={props.currentURL === '/submit' ? 'topsel' : ''}>submit</a>
       </Link>
     </span>
     :
@@ -49,6 +54,7 @@ HeaderNav.defaultProps = {
 };
 HeaderNav.propTypes = {
   userId: PropTypes.string,
+  currentURL: PropTypes.string.isRequired,
   isNavVisible: PropTypes.bool.isRequired,
   title: PropTypes.string.isRequired,
 };

src/components/NewsDetail.js

@@ -16,10 +16,12 @@ class NewsDetail extends Component {
     points: PropTypes.number.isRequired,
     isPostScrutinyVisible: PropTypes.bool,
     isFavoriteVisible: PropTypes.bool,
+    isJobListing: PropTypes.bool,
   }
   static defaultProps = {
     isFavoriteVisible: true,
     isPostScrutinyVisible: false,
+    isJobListing: false,
   }
   static fragments = {
     newsItem: gql`
@@ -42,56 +44,70 @@ class NewsDetail extends Component {
   }
   render() {
     return (
-      <tr>
-        <td colSpan="2" />
-        <td className="subtext">
-          <span className="score">{this.props.points} points</span>
-          {' by '}
-          <Link prefetch href={`/user?id=${this.props.submitterId}`}>
-            <a className="hnuser">
-              {this.props.submitterId}
+      this.props.isJobListing ?
+        <tr>
+          <td colSpan="2" />
+          <td className="subtext">
+            <span className="age">
+              <Link prefetch href={`/item?id=${this.props.id}`}>
+                <a>
+                  {convertNumberToTimeAgo(this.props.creationTime)}
+                </a>
+              </Link>
+            </span>
+          </td>
+        </tr>
+        :
+        <tr>
+          <td colSpan="2" />
+          <td className="subtext">
+            <span className="score">{this.props.points} points</span>
+            {' by '}
+            <Link prefetch href={`/user?id=${this.props.submitterId}`}>
+              <a className="hnuser">
+                {this.props.submitterId}
+              </a>
+            </Link>
+            {' '}
+            <span className="age">
+              <Link prefetch href={`/item?id=${this.props.id}`}>
+                <a>
+                  {convertNumberToTimeAgo(this.props.creationTime)}
+                </a>
+              </Link>
+            </span>
+            {' | '}
+            <a href="javascript:void(0)" onClick={this.hidestory}>
+            hide
             </a>
-          </Link>
-          {' '}
-          <span className="age">
+            {
+              this.props.isPostScrutinyVisible &&
+              <span>
+                {' | '}
+                <a href="https://hn.algolia.com/?query=Sublime%20Text%203.0&sort=byDate&dateRange=all&type=story&storyText=false&prefix&page=0" onClick={this.hidestory}>
+                past
+                </a>
+                {' | '}
+                <a href="https://www.google.com/search?q=Sublime%20Text%203.0" onClick={this.hidestory}>
+                web
+                </a>
+              </span>
+            }
+            {' | '}
             <Link prefetch href={`/item?id=${this.props.id}`}>
               <a>
-                {convertNumberToTimeAgo(this.props.creationTime)}
+                {(() => {
+                  switch (this.props.commentCount) {
+                    case 0: return 'discuss';
+                    case 1: return '1 comment';
+                    default: return `${this.props.commentCount} comments`;
+                  }
+                })()}
               </a>
             </Link>
-          </span>
-          {' | '}
-          <a href="javascript:void(0)" onClick={this.hidestory}>
-          hide
-          </a>
-          {
-            this.props.isPostScrutinyVisible &&
-            <span>
-              {' | '}
-              <a href="https://hn.algolia.com/?query=Sublime%20Text%203.0&sort=byDate&dateRange=all&type=story&storyText=false&prefix&page=0" onClick={this.hidestory}>
-              past
-              </a>
-              {' | '}
-              <a href="https://www.google.com/search?q=Sublime%20Text%203.0" onClick={this.hidestory}>
-              web
-              </a>
-            </span>
-          }
-          {' | '}
-          <Link prefetch href={`/item?id=${this.props.id}`}>
-            <a>
-              {(() => {
-                switch (this.props.commentCount) {
-                  case 0: return 'discuss';
-                  case 1: return '1 comment';
-                  default: return `${this.props.commentCount} comments`;
-                }
-              })()}
-            </a>
-          </Link>
-          {this.props.isFavoriteVisible && ' | favorite'}
-        </td>
-      </tr>
+            {this.props.isFavoriteVisible && ' | favorite'}
+          </td>
+        </tr>
     );
   }
 }

src/components/NewsFeed.js

@@ -8,11 +8,13 @@ import NewsDetail from './NewsDetail';
 const NewsFeed = (props) => {
   // props.newsItems.sort((a, b) => (a.rank - b.rank));
   const rows = [];
+  if (props.notice) rows.push(...props.notice);
   props.newsItems.forEach((newsItem, index) => {
     rows.push(
       <NewsTitle
         key={`${newsItem.id.toString()}title`}
-        isRankVisible={true}
+        isRankVisible={props.isRankVisible}
+        isUpvoteVisible={props.isUpvoteVisible}
         rank={index}
         {...newsItem}
       />,
@@ -22,6 +24,7 @@ const NewsFeed = (props) => {
         key={`${newsItem.id.toString()}detail`}
         isFavoriteVisible={false}
         isPostScrutinyVisible={props.isPostScrutinyVisible}
+        isJobListing={props.isJobListing}
         {...newsItem}
       />,
     );
@@ -58,6 +61,10 @@ const NewsFeed = (props) => {
 };
 NewsFeed.defaultProps = {
   isPostScrutinyVisible: false,
+  isJobListing: false,
+  isRankVisible: true,
+  isUpvoteVisible: true,
+  notice: null,
 };
 NewsFeed.propTypes = {
   isPostScrutinyVisible: PropTypes.bool,
@@ -71,6 +78,10 @@ NewsFeed.propTypes = {
     commentCount: PropTypes.number.isRequired,
     points: PropTypes.number.isRequired,
   })).isRequired,
+  notice: PropTypes.arrayOf(PropTypes.element),
+  isJobListing: PropTypes.bool,
+  isRankVisible: PropTypes.bool,
+  isUpvoteVisible: PropTypes.bool,
   currentURL: PropTypes.string.isRequired,
 };
 NewsFeed.fragments = {

src/components/NewsFeedWithApolloRenderer.js

@@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
 
 import NewsFeed from './NewsFeed';
 
-export default ({ data: { loading, error, feed }, currentURL }) => {
+export default ({ data: { loading, error, feed }, options }) => {
   if (error) return <tr><td>Error loading news items.</td></tr>;
   if (feed && feed.length) {
     return (
-      <NewsFeed newsItems={feed} currentURL={currentURL} />
+      <NewsFeed newsItems={feed} {...options} />
     );
   }
   return <tr><td>Loading</td></tr>;

src/components/NewsTitle.js

@@ -11,12 +11,14 @@ class NewsTitle extends Component {
     url: PropTypes.string,
     rank: PropTypes.number,
     isRankVisible: PropTypes.bool,
+    isUpvoteVisible: PropTypes.bool,
   }
   static defaultProps = {
     // text: undefined,
     url: undefined,
     rank: undefined,
     isRankVisible: true,
+    isUpvoteVisible: true,
   }
   static fragments = {
     newsItem: gql`
@@ -43,7 +45,12 @@ class NewsTitle extends Component {
         </td>
         <td style={{ verticalAlign: 'top' }} className="votelinks">
           <center>
-            <a onClick={this.upvote} href="vote?id=15077519&amp;how=up&amp;auth=b73e5ad6975f51978fed805f4c3c079e9516fe1d&amp; goto=news"><div className="votearrow" title="upvote" /></a>
+            {
+              this.props.isUpvoteVisible &&
+              <a onClick={this.upvote} href="vote?id=15077519&amp;how=up&amp;auth=b73e5ad6975f51978fed805f4c3c079e9516fe1d&amp; goto=news">
+                <div className="votearrow" title="upvote" />
+              </a>
+            }
           </center>
         </td>
         <td className="title">

src/data/HNDataAPI.js

@@ -60,7 +60,7 @@ export function fetchComment(id) {
   return new Promise((resolve, reject) => {
     api.child(`item/${id}`).once('value', (itemSnapshot) => {
       const item = itemSnapshot.val();
-      if (item !== null && !item.deleted) {
+      if (item !== null && !item.deleted && !item.dead) {
         const comment = {
           id: item.id,
           creationTime: item.time * 1000,
@@ -107,17 +107,15 @@ const rebuildFeed = (feedType) => {
 
 /* BEGIN SEED DATA */
 
-export function seedCache() {
+export function seedCache(delay) {
   // TODO: Build sample cache then seed
-  logger('Seeding cache');
-  function delayedSeed() {
+  logger(`Waiting ${delay} ms before seeding the app with data.`);
+  setTimeout(() => {
+    logger('Seeding cache');
     ['top', 'new', 'show', 'ask', 'job'].forEach((feedType) => {
       rebuildFeed(feedType);
     });
-  }
-
-  logger('Waiting 1 min before seeding the app with data.');
-  setTimeout(delayedSeed, 1000 * 60 * 1);
-  // Delay seeding the cache so we don't spam using Nodemon
+  }, delay);
+  // Delay seeding the cache so we don't spam in dev
 }
 /*  END SEED DATA */