part 14

src/components/SearchStories.js

@@ -1,9 +1,15 @@
 import React, { Component } from 'react';
 import { observable, action } from 'mobx';
-import { observer } from 'mobx-react';
+import { observer, inject } from 'mobx-react';
 import Button from './Button';
 
-@observer
+const HN_BASE_URL = 'http://hn.algolia.com/api/v1/search?query=';
+
+const fetchStories = (query) =>
+  fetch(HN_BASE_URL + query)
+    .then(response => response.json());
+
+@inject('storyStore') @observer
 class SearchStories extends Component {
   @observable query = '';
 
@@ -23,8 +29,8 @@ class SearchStories extends Component {
   @action
   onSubmit(event) {
     if (this.query) {
-      // TODO do API fetch stories
-      console.log(this.query);
+      fetchStories(this.query)
+        .then(result => this.props.storyStore.setStories(result.hits))
 
       this.query = '';
     }

src/stores/storyStore.js

@@ -1,33 +1,18 @@
-import { observable, computed } from 'mobx';
-
-const INITIAL_STATE = [
-  {
-    title: 'React',
-    url: 'https://facebook.github.io/react/',
-    author: 'Jordan Walke',
-    num_comments: 3,
-    points: 4,
-    objectID: 0,
-  }, {
-    title: 'Redux',
-    url: 'https://github.com/reactjs/redux',
-    author: 'Dan Abramov, Andrew Clark',
-    num_comments: 2,
-    points: 5,
-    objectID: 1,
-  },
-];
+import { observable, computed, action } from 'mobx';
 
 const isNotArchived = (archivedStoryIds) => (story) =>
   archivedStoryIds.indexOf(story.objectID) === -1;
 
 class StoryStore {
-  @observable stories = INITIAL_STATE;
+  @observable stories = [];
 
   constructor(rootStore) {
     this.rootStore = rootStore;
   }
 
+  @action setStories = stories =>
+    this.stories = stories;
+
   @computed get readableStories() {
     const { archivedStoryIds } = this.rootStore.archiveStore;
     return this.stories.filter(isNotArchived(archivedStoryIds));