add local state

Author: rwieruch

src/components/SearchStories.js

@@ -1,51 +1,47 @@
 import React, { Component } from 'react';
-import { inject, observer } from 'mobx-react';
+import { observable, action } from 'mobx';
+import { observer, inject } from 'mobx-react';
 import Button from './Button';
 import { fetchStories } from '../api/story';
 
-const applyQueryState = query => () => ({
-  query
-});
-
 @inject('storyStore') @observer
 class SearchStories extends Component {
+  @observable query = '';
+
   constructor(props) {
     super(props);
 
-    this.state = {
-      query: '',
-    };
-
     this.onChange = this.onChange.bind(this);
     this.onSubmit = this.onSubmit.bind(this);
   }
 
+  @action
   onSubmit(event) {
     const { storyStore } = this.props;
-    const { query } = this.state;
 
-    if (query) {
-      fetchStories(query)
+    if (this.query) {
+      fetchStories(this.query)
         .then(result => storyStore.setStories(result.hits))
         .catch(error => storyStore.setError(error));
 
-      this.setState(applyQueryState(''));
+      this.query = '';
     }
 
     event.preventDefault();
   }
 
+  @action
   onChange(event) {
     const { value } = event.target;
-    this.setState(applyQueryState(value));
+    this.query = value;;
   }
 
   render() {
     return (
       <form onSubmit={this.onSubmit}>
         <input
           type="text"
-          value={this.state.query}
+          value={this.query}
           onChange={this.onChange}
         />
         <Button type="submit">
@@ -56,4 +52,4 @@ class SearchStories extends Component {
   }
 }
 
-export default SearchStories;
+export default SearchStories;