saga

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "autobind-decorator": "^1.4.1",
+    "axios": "^0.16.2",
     "babel-preset-stage-0": "^6.24.1",
     "babel-runtime": "^6.23.0",
     "halogen": "^0.2.0",

src/actions/header.js

+import * as types from '../constants/ActionTypes'
+
+export const getHeader = () => ({
+  type: types.HEADER_FETCH_REQUESTED
+})

src/components/Header.js

@@ -5,20 +5,16 @@ import Loader from 'halogen/PulseLoader'
 import { Link } from 'react-router-dom'
 import autobind from 'autobind-decorator'
 
-@autobind
-export default class Header extends React.Component {
-  constructor(props){
-    super(props);
-    this.state = {
-      data: null, loading: true, error: null
-    };
-  }
+import { connect } from 'react-redux'
 
+import { bindActionCreators } from 'redux'
+import * as HeaderActions from '../actions/header'
+
+@autobind
+class Header extends React.Component {
   componentDidMount() {
-    this.props.promise.then(
-      value => this.setState({loading: false, data: value}),
-      error => this.setState({loading: false, error: error})
-    )
+    const { actions } = this.props
+    actions.getHeader()
   }
 
   addRepo(repo) {
@@ -27,15 +23,16 @@ export default class Header extends React.Component {
   }
 
   render() {
+    const { response, actions } = this.props
+
     let result = null;
-    if (this.state.loading) {
+
+    if (response.isFetching) {
       result = <Loader color="#286090" size="12px" margin="4px"/>;
     }
-    else if (this.state.error !== null) {
-      result = <span>Error: {this.state.error.message}</span>;
-    }
-    else {
-      const data = this.state.data.map((repo) => {
+
+    if (!response.isFetching && response.headers) {
+      const data = response.headers.map((repo) => {
         const url = `/web/regional_design/${repo.id}?object=repo`
         return (
           <Link key={ repo.id } className='btn btn-default mr15' to={ url }>{ repo.name }</Link>
@@ -44,6 +41,12 @@ export default class Header extends React.Component {
 
       result = data;
     }
+
+    if (!response.isFetching && response.error_message) {
+      result = <span>Error: {response.error_message}</span>;
+    }
+
+
     return (
       <div className="text-left top-header">
         <ModalRepoForm handleNewRepo={ this.addRepo } />
@@ -55,3 +58,16 @@ export default class Header extends React.Component {
     )
   }
 }
+
+const mapStateToProps = (state, ownProps) => ({
+  response: state.header
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  actions: bindActionCreators(HeaderActions, dispatch)
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Header)

src/constants/ActionTypes.js

+// headergroup
 export const CLONE_ELEMENT = 'CLONE_ELEMENT'
 export const DELETE_LAST_ELEMENT = 'DELETE_LAST_ELEMENT'
 export const DELETE_ELEMENT = 'DELETE_ELEMENT'
+
+// header
+export const HEADER_FETCH_REQUESTED = 'HEADER_FETCH_REQUESTED'
+export const HEADER_FETCH_SUCCEEDED = 'HEADER_FETCH_SUCCEEDED'
+export const HEADER_FETCH_FAILED = 'HEADER_FETCH_FAILED'

src/containers/Spd.js

@@ -39,7 +39,7 @@ export default class Spd extends React.Component {
       <div id="app">
         <AlertContainer ref={a => this.msg = a} {...this.alertOptions} />
         <div className="row">
-          <Header promise={$.getJSON('/regional_design/repos.json')} />
+          <Header />
         </div>
         <div className="row">
           <div className="col-md-2 sidebar" id='sidebar'>

src/index.js

@@ -15,7 +15,7 @@ import rootReducer from './reducers'
 
 import createSagaMiddleware from 'redux-saga'
 
-import { helloSaga } from './sagas/header'
+import rootSaga from './sagas/root'
 
 import configureStore from './store/configureStore'
 
@@ -25,7 +25,7 @@ const store = configureStore()
 
 // const store = createStore(rootReducer, applyMiddleware(sagaMiddleware, logger), window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
 
-// store.runSaga(helloSaga)
+store.runSaga(rootSaga)
 
 ReactDOM.render(
   <Provider store={store}>

src/reducers/header.js

+import { HEADER_FETCH_REQUESTED, HEADER_FETCH_SUCCEEDED, HEADER_FETCH_FAILED } from '../constants/ActionTypes'
+
+const header = (state = {}, action) => {
+  switch (action.type) {
+    case HEADER_FETCH_REQUESTED:
+      return {
+        isFetching: true,
+        headers: []
+      }
+    case HEADER_FETCH_SUCCEEDED:
+      return {
+        isFetching: false,
+        headers: action.headers
+      }
+    case HEADER_FETCH_FAILED:
+      return {
+        isFetching: false,
+        error_message: action.message,
+        headers: []
+      }
+    default:
+      return state
+  }
+}
+
+export default header

src/reducers/index.js

 import { combineReducers } from 'redux';
 
 import headergroup from './headergroup';
+import header from './header';
 
 const rootReducer = combineReducers({
-  headergroup
+  headergroup,
+  header
 });
 
 export default rootReducer;

src/sagas/header.js

-export default function* helloSaga() {
-  console.log('Hello Sagas!')
-}

src/sagas/root.js

+import { call, put, takeEvery } from 'redux-saga/effects'
+import axios from 'axios'
+
+export function* getHeader() {
+  try {
+    const response = yield call(axios.get, '/regional_design/repos.json');
+    yield put({type: "HEADER_FETCH_SUCCEEDED", headers: response.data});
+  } catch (e) {
+    yield put({type: "HEADER_FETCH_FAILED", message: e.message});
+  }
+}
+
+export function* watchGetHeader() {
+  yield takeEvery("HEADER_FETCH_REQUESTED", getHeader)
+}
+
+export default function* rootSaga() {
+  yield [
+    watchGetHeader()
+  ]
+}

yarn.lock

@@ -233,6 +233,13 @@ aws4@^1.2.1:
   version "1.6.0"
   resolved "http://registry.npm.taobao.org/aws4/download/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
 
+axios@^0.16.2:
+  version "0.16.2"
+  resolved "http://registry.npm.taobao.org/axios/download/axios-0.16.2.tgz#ba4f92f17167dfbab40983785454b9ac149c3c6d"
+  dependencies:
+    follow-redirects "^1.2.3"
+    is-buffer "^1.1.5"
+
 babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.22.0:
   version "6.22.0"
   resolved "http://registry.npm.taobao.org/babel-code-frame/download/babel-code-frame-6.22.0.tgz#027620bee567a88c32561574e7fd0801d33118e4"
@@ -785,6 +792,12 @@ babel-plugin-transform-regenerator@^6.24.1:
   dependencies:
     regenerator-transform "0.9.11"
 
+babel-plugin-transform-runtime@^6.23.0:
+  version "6.23.0"
+  resolved "http://registry.npm.taobao.org/babel-plugin-transform-runtime/download/babel-plugin-transform-runtime-6.23.0.tgz#88490d446502ea9b8e7efb0fe09ec4d99479b1ee"
+  dependencies:
+    babel-runtime "^6.22.0"
+
 babel-plugin-transform-strict-mode@^6.24.1:
   version "6.24.1"
   resolved "http://registry.npm.taobao.org/babel-plugin-transform-strict-mode/download/babel-plugin-transform-strict-mode-6.24.1.tgz#d5faf7aa578a65bbe591cf5edae04a0c67020758"
@@ -885,7 +898,7 @@ babel-register@^6.24.1:
     mkdirp "^0.5.1"
     source-map-support "^0.4.2"
 
-babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.22.0:
+babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0:
   version "6.23.0"
   resolved "http://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b"
   dependencies:
@@ -1641,7 +1654,7 @@ debug@2.3.3:
   dependencies:
     ms "0.7.2"
 
-debug@2.6.7, debug@^2.1.1, debug@^2.2.0:
+debug@2.6.7, debug@^2.1.1, debug@^2.2.0, debug@^2.4.5:
   version "2.6.7"
   resolved "http://registry.npm.taobao.org/debug/download/debug-2.6.7.tgz#92bad1f6d05bbb6bba22cca88bcd0ec894c2861e"
   dependencies:
@@ -2275,6 +2288,12 @@ flatten@^1.0.2:
   version "1.0.2"
   resolved "http://registry.npm.taobao.org/flatten/download/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
 
+follow-redirects@^1.2.3:
+  version "1.2.3"
+  resolved "http://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.2.3.tgz#01abaeca85e3609837d9fcda3167a7e42fdaca21"
+  dependencies:
+    debug "^2.4.5"
+
 for-in@^0.1.3:
   version "0.1.8"
   resolved "http://registry.npm.taobao.org/for-in/download/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"