From 277fdde5b1b122e6cb217274e9be95f8ac097699 Mon Sep 17 00:00:00 2001
From: sipp11 <sipp11@zzyzx.co>
Date: Mon, 30 Jul 2018 13:05:23 +0900
Subject: [PATCH] Add redux-saga

---
 package.json               |  1 +
 src/components/StopList.js | 17 +++++++++++++----
 src/reducers/stop.js       |  3 +++
 src/sagas.js               | 19 +++++++++++++++++++
 src/store.js               | 13 ++++++++++++-
 5 files changed, 48 insertions(+), 5 deletions(-)
 create mode 100644 src/sagas.js

diff --git a/package.json b/package.json
index d62be9a..7b8c2e6 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "redux-api-middleware": "^2.3.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",
+    "redux-saga": "^0.16.0",
     "redux-thunk": "^2.3.0",
     "styled-components": "^3.3.2"
   },
diff --git a/src/components/StopList.js b/src/components/StopList.js
index 9bf83bc..450fabd 100644
--- a/src/components/StopList.js
+++ b/src/components/StopList.js
@@ -3,8 +3,8 @@ import styled from 'styled-components'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 
-import { getStop } from '../actions/stop'
 import store from '../store'
+import { STOP_REQUEST } from '../constants/ActionTypes'
 
 const StyledBox = styled.div`
 background: #fafafa;
@@ -15,16 +15,25 @@ class StopList extends Component {
   componentWillMount() {
     const { count } = this.props.stop
     if (count === 0)
-      store.dispatch(getStop())
+      store.dispatch({
+        type: STOP_REQUEST,
+        payload: { query: `` }
+      })
   }
 
   handleStopSearch(evt) {
-    store.dispatch(getStop(`search=${evt.target.value}`))
+    store.dispatch({
+      type: STOP_REQUEST,
+      payload: { query: `search=${evt.target.value}` }
+    })
   }
 
   fetchStopNearby(evt) {
     const { lastCenter } = this.props
-    store.dispatch(getStop(`near=${lastCenter[0]},${lastCenter[1]}&range=3&limit=90`))
+    store.dispatch({
+      type: STOP_REQUEST,
+      payload: { query: `near=${lastCenter[0]},${lastCenter[1]}&range=3&limit=90` }
+    })
   }
 
   render() {
diff --git a/src/reducers/stop.js b/src/reducers/stop.js
index 85c25cc..5770a05 100644
--- a/src/reducers/stop.js
+++ b/src/reducers/stop.js
@@ -10,6 +10,7 @@ const stopInitState = {
   next: null,
   count: 0,
   fetching: false,
+  query: '',
 }
 const stop = (state = stopInitState, action) => {
   switch(action.type) {
@@ -20,9 +21,11 @@ const stop = (state = stopInitState, action) => {
         fetching: false,
       }
     case STOP_REQUEST:
+      const q = action.payload && action.payload.query
       return {
         ...state,
         fetching: true,
+        query: q || '',
       }
     case STOP_SUCCESS:
       const { count, next, prev, results } = action.payload
diff --git a/src/sagas.js b/src/sagas.js
new file mode 100644
index 0000000..1073acb
--- /dev/null
+++ b/src/sagas.js
@@ -0,0 +1,19 @@
+import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'
+import { apiClient } from './utils/ApiClient'
+import * as types from './constants/ActionTypes'
+
+function* fetchStop(action) {
+  try {
+    const url = `/stop/?${action.payload.query || ''}`
+    const stops = yield call(apiClient, url)
+    yield put({type: types.STOP_SUCCESS, payload: stops.data})
+  } catch (e) {
+    yield put({type: types.STOP_FAILURE, message: e.message})
+  }
+}
+
+function* mySaga() {
+  yield takeLatest(types.STOP_REQUEST, fetchStop)
+}
+
+export default mySaga
diff --git a/src/store.js b/src/store.js
index 3b78a28..6bd3a38 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,10 +1,12 @@
 import thunk from 'redux-thunk'
 import { createStore, applyMiddleware, compose } from 'redux'
+import createSagaMiddleware from 'redux-saga'
 import { apiMiddleware } from 'redux-api-middleware'
 import { createLogger } from 'redux-logger'
 import { persistReducer } from 'redux-persist'
 import storage from 'redux-persist/lib/storage' // defaults to localStorage for web and AsyncStorage for react-native
 
+import mySaga from './sagas'
 import gruntApp from './reducers'
 
 const persistConfig = {
@@ -13,7 +15,13 @@ const persistConfig = {
   blacklist: ['agency', 'calendar']
 }
 
-const middleware = [ thunk, apiMiddleware ]
+// create the saga middleware
+const sagaMiddleware = createSagaMiddleware()
+const middleware = [
+  thunk,
+  apiMiddleware,
+  sagaMiddleware, // mount sagaMiddleware on the store
+]
 if (process.env.NODE_ENV !== 'production') {
   middleware.push(createLogger())
 }
@@ -26,4 +34,7 @@ const persistedReducer = persistReducer(persistConfig, gruntApp)
 
 const store = createStore(persistedReducer, enhancer)
 
+// run the saga
+sagaMiddleware.run(mySaga)
+
 export default store