part 14

Author: rwieruch

package-lock.json

@@ -8,7 +8,8 @@
     "react-redux": "^5.0.5",
     "react-scripts": "1.0.10",
     "redux": "^3.7.2",
-    "redux-logger": "^3.0.6"
+    "redux-logger": "^3.0.6",
+    "redux-saga": "^0.15.6"
   },
   "scripts": {
     "start": "react-scripts start",

package.json

@@ -0,0 +1,19 @@
+import {
+  STORIES_ADD,
+  STORIES_FETCH,
+} from '../constants/actionTypes';
+
+const doAddStories = stories => ({
+  type: STORIES_ADD,
+  stories,
+});
+
+const doFetchStories = query => ({
+  type: STORIES_FETCH,
+  query,
+});
+
+export {
+  doAddStories,
+  doFetchStories,
+};

src/actions/story.js

@@ -2,9 +2,13 @@ import React from 'react';
 import './App.css';
 
 import Stories from './Stories';
+import SearchStories from './SearchStories';
 
 const App = () =>
   <div className="app">
+    <div className="interactions">
+      <SearchStories />
+    </div>
     <Stories />
   </div>
 

src/components/App.js

@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { doFetchStories } from '../actions/story';
+import Button from './Button';
+
+const applyQueryState = query => () => ({
+  query
+});
+
+class SearchStories extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      query: '',
+    };
+
+    this.onChange = this.onChange.bind(this);
+    this.onSubmit = this.onSubmit.bind(this);
+  }
+
+  onSubmit(event) {
+    const { query } = this.state;
+    if (query) {
+      this.props.onFetchStories(query)
+
+      this.setState(applyQueryState(''));
+    }
+
+    event.preventDefault();
+  }
+
+  onChange(event) {
+    const { value } = event.target;
+    this.setState(applyQueryState(value));
+  }
+
+  render() {
+    return (
+      <form onSubmit={this.onSubmit}>
+        <input
+          type="text"
+          value={this.state.query}
+          onChange={this.onChange}
+        />
+        <Button type="submit">
+          Search
+        </Button>
+      </form>
+    );
+  }
+}
+
+const mapDispatchToProps = (dispatch) => ({
+  onFetchStories: query => dispatch(doFetchStories(query)),
+});
+
+export default connect(
+  null,
+  mapDispatchToProps
+)(SearchStories);

src/components/SearchStories.js

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

src/constants/actionTypes.js

@@ -1,23 +1,15 @@
-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 { STORIES_ADD } from '../constants/actionTypes';
+
+const INITIAL_STATE = [];
+
+const applyAddStories = (state, action) =>
+  action.stories;
 
 function storyReducer(state = INITIAL_STATE, action) {
   switch(action.type) {
+    case STORIES_ADD : {
+      return applyAddStories(state, action);
+    }
     default : return state;
   }
 }

src/reducers/story.js

@@ -0,0 +1,11 @@
+import { takeEvery, all } from 'redux-saga/effects';
+import { STORIES_FETCH } from '../constants/actionTypes';
+import { handleFetchStories } from './story';
+
+function *watchAll() {
+  yield all([
+    takeEvery(STORIES_FETCH, handleFetchStories),
+  ])
+}
+
+export default watchAll;

src/sagas/index.js

@@ -0,0 +1,18 @@
+import { call, put } from 'redux-saga/effects';
+import { doAddStories } from '../actions/story';
+
+const HN_BASE_URL = 'http://hn.algolia.com/api/v1/search?query=';
+
+const fetchStories = query =>
+  fetch(HN_BASE_URL + query)
+    .then(response => response.json());
+
+function* handleFetchStories(action) {
+  const { query } = action;
+  const result = yield call(fetchStories, query);
+  yield put(doAddStories(result.hits));
+}
+
+export {
+  handleFetchStories,
+};

src/sagas/story.js

@@ -1,13 +1,18 @@
 import { createStore, applyMiddleware } from 'redux';
 import { createLogger } from 'redux-logger';
+import createSagaMiddleware from 'redux-saga';
 import rootReducer from '../reducers';
+import rootSaga from '../sagas';
 
 const logger = createLogger();
+const saga = createSagaMiddleware();
 
 const store = createStore(
   rootReducer,
   undefined,
-  applyMiddleware(logger)
+  applyMiddleware(saga, logger)
 );
 
+saga.run(rootSaga);
+
 export default store;