add algolia

src/components/App/App.js

@@ -24,12 +24,12 @@ class App extends Component {
     storyIds: PropTypes.array.isRequired,
     isFetching: PropTypes.bool.isRequired,
     hasMoreStores: PropTypes.bool.isRequired,
-    fetchStories: PropTypes.func.isRequired,
-    fetchStoriesFirstPage: PropTypes.func.isRequired,
+    fetchHits: PropTypes.func.isRequired,
   };
 
   componentDidMount() {
-    this.props.fetchStoriesFirstPage();
+    const { page, fetchHits } = this.props;
+    fetchHits({ page });
     this.setBodyBackgroundColor();
   }
 
@@ -48,22 +48,24 @@ class App extends Component {
   }
 
   fetchStories = () => {
-    const { storyIds, page, fetchStories, isFetching } = this.props;
+    const { page, fetchHits, isFetching } = this.props;
     if (!isFetching) {
-      fetchStories({ storyIds, page });
+      fetchHits({ page: page + 1 });
     }
   };
 
   render() {
     const { stories, layout, theme, hasMoreStores } = this.props;
+    const title = '// Hacker News Reader';
+
     return (
       <ThemeProvider theme={theme === themes.light ? colorsLight : colorsDark}>
         <div>
           <Nav />
           <Wrapper>
             <TitleWrapper>
               <Title>
-                // Hacker News Reader{' '}
+                <span style={{ marginRight: 5 }}>{title}</span>
                 <GithubLink
                   href="https://github.com/gitconnected/hacker-news-reader"
                   target="_blank"

src/components/App/index.js

@@ -14,8 +14,7 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = dispatch => ({
-  fetchStories: ({ storyIds, page }) => dispatch(actions.fetchStories({ storyIds, page })),
-  fetchStoriesFirstPage: () => dispatch(actions.fetchStoryIds()),
+  fetchHits: ({ page }) => dispatch(actions.fetchHits({ page })),
 });
 
 export default connect(

src/components/GridItem/index.js

@@ -8,6 +8,7 @@ import { Item, Card, Image, Content, Title, Source } from './styles';
 const GridItem = ({ url, title, id }) => {
   const site = getSiteHostname(url) || 'news.ycombinator.com';
   const link = getArticleLink({ url, id });
+  const sourceStr = `// ${site}`;
 
   return (
     <a href={link} target="_blank" rel="nofollow noreferrer nofollow">
@@ -16,7 +17,7 @@ const GridItem = ({ url, title, id }) => {
           <Image src="https://miro.medium.com/max/1176/1*F9RzuXseG1VrTjFJd403gw.png" />
           <Content>
             <Title>{title}</Title>
-            <Source>// {site}</Source>
+            <Source>{sourceStr}</Source>
           </Content>
         </Card>
       </Item>

src/components/List/index.js

@@ -14,7 +14,7 @@ class List extends Component {
     return (
       <ListWrapper>
         {stories.map(story => (
-          <ListItem key={story.id} {...story} />
+          <ListItem key={story.objectID} {...story} />
         ))}
       </ListWrapper>
     );

src/components/ListItem/index.js

@@ -8,10 +8,11 @@ import { Item, Title, Host, ExernalLink, Description, CommentLink } from './styl
 
 const timeago = Timeago();
 
-const ListItem = ({ by, kids = [], score, url, title, id, type, time }) => {
+const ListItem = props => {
+  const { author, num_comments, points, url, title, objectID, created_at } = props;
   const site = getSiteHostname(url) || 'news.ycombinator.com';
-  const link = getArticleLink({ url, id });
-  const commentUrl = `${HN_ITEM}${id}`;
+  const link = getArticleLink({ url, objectID });
+  const commentUrl = `${HN_ITEM}${objectID}`;
 
   return (
     <Item>
@@ -20,29 +21,33 @@ const ListItem = ({ by, kids = [], score, url, title, id, type, time }) => {
           {title} <Host>({site})</Host>
         </Title>
       </ExernalLink>
+
       <Description>
-        {score} points by{' '}
-        <CommentLink href={`${HN_USER}${by}`} rel="nofollow noreferrer noopener" target="_blank">
-          {by}
+        {points} points by{' '}
+        <CommentLink
+          href={`${HN_USER}${author}`}
+          rel="nofollow noreferrer noopener"
+          target="_blank"
+        >
+          {author}
         </CommentLink>{' '}
-        {timeago.format(new Date(time * 1000).toISOString())} {' | '}
+        {timeago.format(new Date(created_at).toISOString())} {' | '}
         <CommentLink href={commentUrl} rel="nofollow noreferrer noopener" target="_blank">
-          {kids.length} Comments
+          {num_comments} Comments
         </CommentLink>
       </Description>
     </Item>
   );
 };
 
 ListItem.propTypes = {
-  by: PropTypes.string.isRequired,
-  kids: PropTypes.array,
-  score: PropTypes.number.isRequired,
+  author: PropTypes.string.isRequired,
+  num_comments: PropTypes.number,
+  points: PropTypes.number.isRequired,
   url: PropTypes.string,
   title: PropTypes.string.isRequired,
-  id: PropTypes.number.isRequired,
-  type: PropTypes.string.isRequired,
-  time: PropTypes.number.isRequired,
+  objectID: PropTypes.string.isRequired,
+  created_at: PropTypes.string.isRequired,
 };
 
 export default ListItem;

src/services/hackerNewsApi.js

@@ -1,7 +1,7 @@
 import ApiService from './Api';
 
 const JSON_QUERY = '.json?print=pretty';
-const BASE_URL = 'https://hacker-news.firebaseio.com/v0';
+const BASE_URL = 'http://hn.algolia.com/api/v1';
 const client = new ApiService({ baseURL: BASE_URL });
 
 const hackerNewsApi = {};
@@ -19,4 +19,6 @@ hackerNewsApi.getStoriesByPage = (ids, page) => {
   return Promise.all(storyPromises);
 };
 
+hackerNewsApi.getFromPage = page => client.get(`/search?page=${page}&tags=(story,poll)`);
+
 export default hackerNewsApi;

src/store/story/actions.js

@@ -23,6 +23,7 @@ const actions = {
         .catch(err => dispatch(request.failure(err)));
     },
   ),
+
   fetchStories: buildRequestCreator(actionTypes.FETCH_STORIES, ({ request, payload, dispatch }) => {
     const { storyIds, page } = payload;
     dispatch(request.request(payload));
@@ -31,6 +32,17 @@ const actions = {
       .then(stories => dispatch(request.success({ stories })))
       .catch(err => dispatch(request.failure(err)));
   }),
+
+  fetchHits: buildRequestCreator(actionTypes.FETCH_STORIES, ({ request, payload, dispatch }) => {
+    const { page } = payload;
+    dispatch(request.request(payload));
+    return hackerNewsApi
+      .getFromPage(page)
+      .then(({ hits, nbPages }) => {
+        dispatch(request.success({ stories: hits, nbPages, page }));
+      })
+      .catch(err => dispatch(request.failure(err)));
+  }),
 };
 
 export default actions;

src/store/story/reducer.js

@@ -4,6 +4,7 @@ const getInitialState = () => ({
   storyIds: [],
   stories: [],
   page: 0,
+  nbPages: 0,
   isFetching: false,
   error: '',
 });
@@ -25,7 +26,8 @@ const story = (state = getInitialState(), { type, payload }) => {
       return {
         ...state,
         stories: [...state.stories, ...payload.stories],
-        page: state.page + 1,
+        page: payload.page,
+        nbPages: payload.nbPages,
         isFetching: false,
       };
     default:

src/store/story/selectors.js

@@ -1,10 +1,10 @@
 import { createSelector } from 'reselect';
 
-const storyIdsSelector = state => state.story.storyIds;
-const storiesSelector = state => state.story.stories;
+const storyPageSelector = state => state.story.page;
+const storyNbPagesSelector = state => state.story.nbPages;
 
 export const hasMoreStoriesSelector = createSelector(
-  storyIdsSelector,
-  storiesSelector,
-  (storyIds, stories) => storyIds.length > stories.length,
+  storyPageSelector,
+  storyNbPagesSelector,
+  (page, nbPages) => page < nbPages,
 );