Skip to content

hfpp2012 / react-spd

Go to a project
Commit 18613311 by hfpp2012 yinsigan
Options

saga

1 parent b3320e94
Inline Side-by-side
Showing 11 changed files with 120 additions and 27 deletions
package.json
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
}, },
"dependencies": { "dependencies": {
"autobind-decorator": "^1.4.1", "autobind-decorator": "^1.4.1",
"axios": "^0.16.2",
"babel-preset-stage-0": "^6.24.1", "babel-preset-stage-0": "^6.24.1",
"babel-runtime": "^6.23.0", "babel-runtime": "^6.23.0",
"halogen": "^0.2.0", "halogen": "^0.2.0",
......
src/actions/header.js 0 → 100644
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' ...@@ -5,20 +5,16 @@ import Loader from 'halogen/PulseLoader'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import autobind from 'autobind-decorator' import autobind from 'autobind-decorator'
@autobind import { connect } from 'react-redux'
export default class Header extends React.Component {
constructor(props){
super(props);
this.state = {
data: null, loading: true, error: null
};
}
import { bindActionCreators } from 'redux'
import * as HeaderActions from '../actions/header'
@autobind
class Header extends React.Component {
componentDidMount() { componentDidMount() {
this.props.promise.then( const { actions } = this.props
value => this.setState({loading: false, data: value}), actions.getHeader()
error => this.setState({loading: false, error: error})
)
} }
addRepo(repo) { addRepo(repo) {
...@@ -27,15 +23,16 @@ export default class Header extends React.Component { ...@@ -27,15 +23,16 @@ export default class Header extends React.Component {
} }
render() { render() {
const { response, actions } = this.props
let result = null; let result = null;
if (this.state.loading) {
if (response.isFetching) {
result = <Loader color="#286090" size="12px" margin="4px"/>; result = <Loader color="#286090" size="12px" margin="4px"/>;
} }
else if (this.state.error !== null) {
result = <span>Error: {this.state.error.message}</span>; if (!response.isFetching && response.headers) {
} const data = response.headers.map((repo) => {
else {
const data = this.state.data.map((repo) => {
const url = `/web/regional_design/${repo.id}?object=repo` const url = `/web/regional_design/${repo.id}?object=repo`
return ( return (
<Link key={ repo.id } className='btn btn-default mr15' to={ url }>{ repo.name }</Link> <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 { ...@@ -44,6 +41,12 @@ export default class Header extends React.Component {
result = data; result = data;
} }
if (!response.isFetching && response.error_message) {
result = <span>Error: {response.error_message}</span>;
}
return ( return (
<div className="text-left top-header"> <div className="text-left top-header">
<ModalRepoForm handleNewRepo={ this.addRepo } /> <ModalRepoForm handleNewRepo={ this.addRepo } />
...@@ -55,3 +58,16 @@ export default class Header extends React.Component { ...@@ -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 CLONE_ELEMENT = 'CLONE_ELEMENT'
export const DELETE_LAST_ELEMENT = 'DELETE_LAST_ELEMENT' export const DELETE_LAST_ELEMENT = 'DELETE_LAST_ELEMENT'
export const DELETE_ELEMENT = 'DELETE_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 { ...@@ -39,7 +39,7 @@ export default class Spd extends React.Component {
<div id="app"> <div id="app">
<AlertContainer ref={a => this.msg = a} {...this.alertOptions} /> <AlertContainer ref={a => this.msg = a} {...this.alertOptions} />
<div className="row"> <div className="row">
<Header promise={$.getJSON('/regional_design/repos.json')} /> <Header />
</div> </div>
<div className="row"> <div className="row">
<div className="col-md-2 sidebar" id='sidebar'> <div className="col-md-2 sidebar" id='sidebar'>
......
src/index.js
...@@ -15,7 +15,7 @@ import rootReducer from './reducers' ...@@ -15,7 +15,7 @@ import rootReducer from './reducers'
import createSagaMiddleware from 'redux-saga' import createSagaMiddleware from 'redux-saga'
import { helloSaga } from './sagas/header' import rootSaga from './sagas/root'
import configureStore from './store/configureStore' import configureStore from './store/configureStore'
...@@ -25,7 +25,7 @@ const store = configureStore() ...@@ -25,7 +25,7 @@ const store = configureStore()
// const store = createStore(rootReducer, applyMiddleware(sagaMiddleware, logger), window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()) // const store = createStore(rootReducer, applyMiddleware(sagaMiddleware, logger), window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
// store.runSaga(helloSaga) store.runSaga(rootSaga)
ReactDOM.render( ReactDOM.render(
<Provider store={store}> <Provider store={store}>
......
src/reducers/header.js 0 → 100644
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 { combineReducers } from 'redux';
import headergroup from './headergroup'; import headergroup from './headergroup';
import header from './header';
const rootReducer = combineReducers({ const rootReducer = combineReducers({
headergroup headergroup,
header
}); });
export default rootReducer; export default rootReducer;
src/sagas/header.js deleted 100644 → 0
export default function* helloSaga() {
console.log('Hello Sagas!')
}
src/sagas/root.js 0 → 100644
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: ...@@ -233,6 +233,13 @@ aws4@^1.2.1:
version "1.6.0" version "1.6.0"
resolved "http://registry.npm.taobao.org/aws4/download/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e" 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: babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.22.0:
version "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" 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: ...@@ -785,6 +792,12 @@ babel-plugin-transform-regenerator@^6.24.1:
dependencies: dependencies:
regenerator-transform "0.9.11" 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: babel-plugin-transform-strict-mode@^6.24.1:
version "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" 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: ...@@ -885,7 +898,7 @@ babel-register@^6.24.1:
mkdirp "^0.5.1" mkdirp "^0.5.1"
source-map-support "^0.4.2" 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" version "6.23.0"
resolved "http://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b" resolved "http://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b"
dependencies: dependencies:
...@@ -1641,7 +1654,7 @@ debug@2.3.3: ...@@ -1641,7 +1654,7 @@ debug@2.3.3:
dependencies: dependencies:
ms "0.7.2" 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" version "2.6.7"
resolved "http://registry.npm.taobao.org/debug/download/debug-2.6.7.tgz#92bad1f6d05bbb6bba22cca88bcd0ec894c2861e" resolved "http://registry.npm.taobao.org/debug/download/debug-2.6.7.tgz#92bad1f6d05bbb6bba22cca88bcd0ec894c2861e"
dependencies: dependencies:
...@@ -2275,6 +2288,12 @@ flatten@^1.0.2: ...@@ -2275,6 +2288,12 @@ flatten@^1.0.2:
version "1.0.2" version "1.0.2"
resolved "http://registry.npm.taobao.org/flatten/download/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782" 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: for-in@^0.1.3:
version "0.1.8" version "0.1.8"
resolved "http://registry.npm.taobao.org/for-in/download/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1" resolved "http://registry.npm.taobao.org/for-in/download/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!