Merge pull request #9 from matthiaskern/add-real-best-data

Add best feed type

Author: Clinton D'Annolfo

src/components/presentational/HeaderNav.js

@@ -43,6 +43,16 @@ const HeaderNav = props => (
       <Link prefetch href="/submit">
         <a className={props.currentURL === '/submit' ? 'topsel' : ''}>submit</a>
       </Link>
+      {
+        props.currentURL === '/best' && ' | '
+      }
+      {
+        props.currentURL === '/best' && (
+          <Link prefetch href="/best">
+             <a className="topsel">best</a>
+          </Link>
+        )
+      }
     </span>
     :
     <span className="pagetop">

src/data/HNDataAPI.js

@@ -129,7 +129,7 @@ export function seedCache(delay) {
   logger(`Waiting ${delay} ms before seeding the app with data.`);
   setTimeout(() => {
     logger('Seeding cache');
-    ['top', 'new', 'show', 'ask', 'job'].forEach((feedType) => {
+    ['top', 'new', 'best', 'show', 'ask', 'job'].forEach((feedType) => {
       rebuildFeed(feedType);
     });
   }, delay);

src/data/Schema.js

@@ -56,6 +56,9 @@ const typeDefs = `
     # Newest entries first
     NEW
 
+    # Sort by score
+    BEST
+
     # SHOW HN articles
     SHOW
 

src/data/models/Feed.js

@@ -21,6 +21,10 @@ class Feed {
         return Promise.all(
           this.new.slice(skip, first + skip)
             .map(id => cache.getNewsItem(id) || HNDB.fetchNewsItem(id)));
+      case 'BEST':
+        return Promise.all(
+          this.best.slice(skip, first + skip)
+            .map(id => cache.getNewsItem(id) || HNDB.fetchNewsItem(id)));
       case 'SHOW':
         return this.showNewsItems.slice(skip, first + skip);
       case 'ASK':
@@ -35,13 +39,15 @@ class Feed {
   /* Arrays of post ids in descending rank order */
   top = sampleData.top;
   new = sampleData.new;
+  best = [];
   show = [];
   ask = [];
   job = [];
 
   /* A pre constructed cache of news feeds */
   topNewsItems = sampleData.topStoriesCache;
   newNewsItems = sampleData.topStoriesCache;
+  bestNewsItems = sampleData.topStoriesCache;
   showNewsItems = sampleData.topStoriesCache;
   askNewsItems = sampleData.topStoriesCache;
   jobNewsItems = sampleData.topStoriesCache;

src/pages/__tests__/best.js

@@ -4,7 +4,7 @@ import { shallow } from 'enzyme';
 import Page from '../best';
 
 
-describe('Newest Posts Page', () => {
+describe('Best Posts Page', () => {
   it('is defined', () => {
     const app = shallow(<Page serverState={{}} />);
     expect(app).toBeDefined();

src/pages/best.js

@@ -1,15 +1,45 @@
 import React from 'react';
+import { graphql, gql } from 'react-apollo';
 
 import Main from '../layouts/Main';
 import NewsFeed from '../components/presentational/NewsFeed';
+import NewsFeedApolloHOC from '../components/container/NewsFeedWithApolloRenderer';
 import withData from '../helpers/withData';
 
-import data from '../data/SampleData';
+const POSTS_PER_PAGE = 30;
 
-export default withData(props => (
-  <Main currentURL={props.url.pathname}>
-    <NewsFeed
-      newsItems={data.newsItems}
-    />
-  </Main>
-));
+const query = gql`
+  query bestNewsItems($type: FeedType!, $first: Int!, $skip: Int!) {
+    feed(type: $type, first: $first, skip: $skip) {
+      ...NewsFeed
+    }
+  }
+  ${NewsFeed.fragments.newsItem}
+`;
+
+const BestNewsFeed = graphql(query, {
+  options: ({ options: { first, skip } }) => ({
+    variables: {
+      type: 'BEST',
+      first,
+      skip
+    }
+  }),
+  props: ({ data }) => ({
+    data,
+  }),
+})(NewsFeedApolloHOC);
+
+export default withData(props => {
+  const pageNumber = (props.url.query && +props.url.query.p) || 0;
+  return (
+    <Main currentURL={props.url.pathname}>
+      <BestNewsFeed options={{
+          currentURL: props.url.pathname,
+          first: POSTS_PER_PAGE,
+          skip: POSTS_PER_PAGE * pageNumber
+        }}
+      />
+    </Main>
+  );
+});