part 16

Author: rwieruch

src/components/SearchStories.js

@@ -23,9 +23,12 @@ class SearchStories extends Component {
 
   @action
   onSubmit(event) {
+    const { storyStore } = this.props;
+
     if (this.query) {
       fetchStories(this.query)
-        .then(result => this.props.storyStore.setStories(result.hits))
+        .then(result => storyStore.setStories(result.hits))
+        .catch(storyStore.setError);
 
       this.query = '';
     }

src/components/Stories.js

@@ -29,6 +29,8 @@ const Stories = ({ storyStore }) =>
   <div className="stories">
     <StoriesHeader columns={COLUMNS} />
 
+    { storyStore.error && <p className="error">Something went wrong ...</p> }
+
     {(storyStore.readableStories || []).map(story =>
       <Story
         key={story.objectID}

src/stores/storyStore.js

@@ -5,13 +5,21 @@ const isNotArchived = (archivedStoryIds) => (story) =>
 
 class StoryStore {
   @observable stories = [];
+  @observable error = null;
 
   constructor(rootStore) {
     this.rootStore = rootStore;
   }
 
-  @action setStories = stories =>
+  @action setStories = stories => {
     this.stories = stories;
+    this.error = null;
+  }
+
+  @action setError = error => {
+    this.stories = [];
+    this.error = error;
+  }
 
   @computed get readableStories() {
     const { archivedStoryIds } = this.rootStore.archiveStore;