finish for now

Author: rwieruch

package.json

@@ -10,7 +10,8 @@
     "react-dom": "^15.5.4",
     "react-redux": "^5.0.5",
     "redux": "^3.6.0",
-    "redux-logger": "^3.0.6"
+    "redux-logger": "^3.0.6",
+    "redux-saga": "^0.15.3"
   },
   "scripts": {
     "start": "react-scripts start",

src/actions/story.js

@@ -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/api/story.js

@@ -0,0 +1,9 @@
+const HN_BASE_URL = 'http://hn.algolia.com/api/v1/search?query=';
+
+const fetchStories = query =>
+  fetch(HN_BASE_URL + query)
+    .then(response => response.json());
+
+export {
+  fetchStories,
+};

src/components/App.js

@@ -2,11 +2,15 @@ import React, { Component } from 'react';
 import './App.css';
 
 import Stories from './Stories';
+import SearchStories from './SearchStories';
 
 class App extends Component {
   render() {
     return (
       <div className="app">
+        <div className="interactions">
+          <SearchStories />
+        </div>
         <Stories />
       </div>
     );

src/components/Buttons.js

@@ -30,5 +30,6 @@ const Button = ({
 export default Button;
 
 export {
+  Button,
   ButtonInline,
-};
+};

src/components/SearchStories.js

@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { doFetchStories } from '../actions/story';
+import { Button } from './Buttons';
+
+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) {
+      // TODO: not defined yet
+      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/constants/actionTypes.js

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

src/reducers/story.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/sagas/index.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/story.js

@@ -0,0 +1,13 @@
+import { call, put } from 'redux-saga/effects';
+import { doAddStories } 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));
+}
+
+export {
+  handleFetchStories,
+};