Skip to content

hfpp2012 / react-spd

Go to a project
Commit f4edc185 by hfpp2012 yinsigan
Options

fix es6

1 parent 813d5d22
Inline Side-by-side
Showing 4 changed files with 74 additions and 26 deletions
src/components/Header.js
...@@ -2,7 +2,7 @@ import React from 'react' ...@@ -2,7 +2,7 @@ import React from 'react'
import ModalRepoForm from './ModalRepoForm' import ModalRepoForm from './ModalRepoForm'
import ReactAddonsUpdate from 'react-addons-update' import ReactAddonsUpdate from 'react-addons-update'
import Loader from 'halogen/PulseLoader' import Loader from 'halogen/PulseLoader'
import { Link } from 'react-router' import { Link } from 'react-router-dom'
export default class Header extends React.Component { export default class Header extends React.Component {
constructor(props){ constructor(props){
...@@ -15,7 +15,8 @@ export default class Header extends React.Component { ...@@ -15,7 +15,8 @@ export default class Header extends React.Component {
componentDidMount() { componentDidMount() {
this.props.promise.then( this.props.promise.then(
value => this.setState({loading: false, data: value}), value => this.setState({loading: false, data: value}),
error => this.setState({loading: false, error: error})) error => this.setState({loading: false, error: error})
)
} }
addRepo(repo) { addRepo(repo) {
...@@ -24,30 +25,28 @@ export default class Header extends React.Component { ...@@ -24,30 +25,28 @@ export default class Header extends React.Component {
} }
render() { render() {
let result = null;
if (this.state.loading) {
result = <Loader color="#286090" size="12px" margin="4px"/>;
}
else if (this.state.error !== null) {
result = <span>Error: {this.state.error.message}</span>;
}
else {
let data = this.state.data.map((repo) => {
let url = `/regional_design/${repo.id}?object=repo`
return (
<Link key={ repo.id } className='btn btn-default mr15' to={ url }>{ repo.name }</Link>
)
})
result = data;
}
return ( return (
<div className="text-left top-header"> <div className="text-left top-header">
<ModalRepoForm handleNewRepo={ this.addRepo } /> <ModalRepoForm handleNewRepo={ this.addRepo } />
<div className='col-md-10'> <div className='col-md-10'>
{function(){ { result }
if (this.state.loading) {
return (
<Loader color="#286090" size="12px" margin="4px"/>
)
}
else if (this.state.error !== null) {
return <span>Error: {this.state.error.message}</span>
}
else {
const data = this.state.data.map(function(repo) {
const url = `/regional_design/${repo.id}?object=repo`
return (
<Link key={ repo.id } activeClassName='btn-primary' className='btn btn-default mr15' to={ url }>{ repo.name }</Link>
)
})
return data
}
}.call(this)}
</div> </div>
<div className="clearfix"></div> <div className="clearfix"></div>
</div> </div>
......
src/index.html
...@@ -3,6 +3,55 @@ ...@@ -3,6 +3,55 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>React App Setup</title> <title>React App Setup</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.meta-element {
border: 1px solid #eee;
padding: 10px;
margin-bottom: 10px;
width: 100px;
}
.input-meta-element {
border: 1px solid #eee;
margin-bottom: 10px;
width: 100px;
}
.dropzone {
border: 1px solid #999;
min-height: 600px;
position: relative;
border-top: none;
border-bottom: none;
padding: 10px;
}
.top-header {
padding: 20px;
border: 1px solid #999;
}
.sidebar {
padding-left: 25px;
}
#app {
border-bottom: 1px solid #999;
}
.sidebar-header {
margin-left: 55px;
}
.alert {
padding: 0;
}
.mr15 {
margin-right: 15px;
}
</style>
</head> </head>
<body> <body>
<div id="root"> <div id="root">
......
src/index.js
...@@ -2,7 +2,7 @@ import React from 'react' ...@@ -2,7 +2,7 @@ import React from 'react'
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom'
import Spd from './containers/Spd' import Spd from './containers/Spd'
import { import {
BrowserRouter as Router, HashRouter as Router,
Route, Route,
Link Link
} from 'react-router-dom' } from 'react-router-dom'
...@@ -11,9 +11,9 @@ import RegionalDesign from './components/RegionalDesign' ...@@ -11,9 +11,9 @@ import RegionalDesign from './components/RegionalDesign'
ReactDOM.render( ReactDOM.render(
<Router handler={Spd} history={Router}> <Router handler={Spd} history={Router}>
<Route path="/" component={Spd}> <Spd>
<Route path="/regional_design/:id" component={RegionalDesign} /> <Route path="/regional_design/:id" component={RegionalDesign} />
</Route> </Spd>
</Router>, </Router>,
document.getElementById('root') document.getElementById('root')
); );
webpack.config.js
...@@ -36,7 +36,7 @@ module.exports = { ...@@ -36,7 +36,7 @@ module.exports = {
inline: true, inline: true,
port: 3000, port: 3000,
proxy: { proxy: {
"/regional_design/repos": { "/regional_design": {
target: "http://localhost:3001", target: "http://localhost:3001",
} }
} }
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!