part 16

Author: rwieruch

src/actions/story.js

@@ -1,6 +1,7 @@
 import {
   STORIES_ADD,
   STORIES_FETCH,
+  STORIES_FETCH_ERROR,
 } from '../constants/actionTypes';
 
 const doAddStories = stories => ({
@@ -13,7 +14,13 @@ const doFetchStories = query => ({
   query,
 });
 
+const doFetchErrorStories = error => ({
+  type: STORIES_FETCH_ERROR,
+  error,
+});
+
 export {
   doAddStories,
   doFetchStories,
+  doFetchErrorStories,
 };

src/components/Stories.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { getReadableStories } from '../selectors/story';
+import {
+  getReadableStories,
+  getFetchError,
+} from '../selectors/story';
 import './Stories.css';
 
 import Story from './Story';
@@ -27,10 +30,12 @@ const COLUMNS = {
   },
 };
 
-const Stories = ({ stories }) =>
+const Stories = ({ stories, error }) =>
   <div className="stories">
     <StoriesHeader columns={COLUMNS} />
 
+    { error && <p className="error">Something went wrong ...</p> }
+
     {(stories || []).map(story =>
       <Story
         key={story.objectID}
@@ -54,6 +59,7 @@ const StoriesHeader = ({ columns }) =>
 
 const mapStateToProps = state => ({
   stories: getReadableStories(state),
+  error: getFetchError(state),
 });
 
 export default connect(

src/constants/actionTypes.js

@@ -1,3 +1,4 @@
 export const STORY_ARCHIVE = 'STORY_ARCHIVE';
 export const STORIES_FETCH = 'STORIES_FETCH';
+export const STORIES_FETCH_ERROR = 'STORIES_FETCH_ERROR';
 export const STORIES_ADD = 'STORIES_ADD';

src/reducers/story.js

@@ -1,15 +1,31 @@
-import { STORIES_ADD } from '../constants/actionTypes';
+import {
+  STORIES_ADD,
+  STORIES_FETCH_ERROR,
+} from '../constants/actionTypes';
 
-const INITIAL_STATE = [];
+const INITIAL_STATE = {
+  stories: [],
+  error: null,
+};
 
-const applyAddStories = (state, action) =>
-  action.stories;
+const applyAddStories = (state, action) => ({
+  stories: action.stories,
+  error: null,
+});
+
+const applyFetchErrorStories = (state, action) => ({
+  stories: [],
+  error: action.error,
+});
 
 function storyReducer(state = INITIAL_STATE, action) {
   switch(action.type) {
     case STORIES_ADD : {
       return applyAddStories(state, action);
     }
+    case STORIES_FETCH_ERROR : {
+      return applyFetchErrorStories(state, action);
+    }
     default : return state;
   }
 }

src/sagas/story.js

@@ -1,11 +1,16 @@
 import { call, put } from 'redux-saga/effects';
-import { doAddStories } from '../actions/story';
+import { doAddStories, doFetchErrorStories } from '../actions/story';
 import { fetchStories } from '../api/story';
 
 function* handleFetchStories(action) {
   const { query } = action;
-  const result = yield call(fetchStories, query);
-  yield put(doAddStories(result.hits));
+
+  try {
+    const result = yield call(fetchStories, query);
+    yield put(doAddStories(result.hits));
+  } catch (error) {
+    yield put(doFetchErrorStories(error));
+  }
 }
 
 export {

src/selectors/story.js

@@ -2,8 +2,12 @@ const isNotArchived = archivedIds => story =>
   archivedIds.indexOf(story.objectID) === -1;
 
 const getReadableStories = ({ storyState, archiveState }) =>
-  storyState.filter(isNotArchived(archiveState));
+  storyState.stories.filter(isNotArchived(archiveState));
+
+const getFetchError = ({ storyState }) =>
+  storyState.error;
 
 export {
   getReadableStories,
+  getFetchError,
 };