Basic react app
This commit is contained in:
parent
103bdb212e
commit
977f67e38a
16
app/app.css
16
app/app.css
|
|
@ -2,10 +2,14 @@ section {
|
|||
float: left;
|
||||
}
|
||||
|
||||
#menu {
|
||||
.app {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 13em;
|
||||
}
|
||||
#menu ul {
|
||||
.menu ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -23,15 +27,15 @@ li.nav {
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
#content {
|
||||
.content {
|
||||
width: calc(100% - 13em);
|
||||
}
|
||||
#content .left, #content .right {
|
||||
.content .left, .content .right {
|
||||
width: 50%;
|
||||
}
|
||||
#content .left {
|
||||
.content .left {
|
||||
background: #5500fa;
|
||||
}
|
||||
#content .right {
|
||||
.content .right {
|
||||
background: #fa0055;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf8">
|
||||
<title>Empact</title>
|
||||
<link rel="stylesheet" href="/normalize.css">
|
||||
<link rel="stylesheet" href="/app.css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script src="/react.js"></script>
|
||||
<script src="/react-router-0.11.6.min.js"></script>
|
||||
<script src="/jquery-2.1.3.min.js"></script>
|
||||
<script src="/app.js"></script>
|
||||
</html>
|
||||
113
app/app.jsx
113
app/app.jsx
|
|
@ -1,4 +1,27 @@
|
|||
var Router = ReactRouter,
|
||||
Route = Router.Route,
|
||||
Link = Router.Link,
|
||||
RouteHandler = Router.RouteHandler,
|
||||
DefaultRoute = Router.DefaultRoute,
|
||||
NotFoundRoute = Router.NotFoundRoute;
|
||||
|
||||
var App = React.createClass({
|
||||
mixins: [Router.Navigation],
|
||||
render: function(){
|
||||
return (
|
||||
<section className="app">
|
||||
<Menu/>
|
||||
<RouteHandler/>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var Menu = React.createClass({
|
||||
mixins: [Router.Navigation, Router.State],
|
||||
api_url: "/api/teams?org=",
|
||||
|
||||
getInitialState: function() {
|
||||
return {teams: []};
|
||||
},
|
||||
|
|
@ -8,7 +31,7 @@ var Menu = React.createClass({
|
|||
},
|
||||
|
||||
loadTeams: function() {
|
||||
$.get(this.props.api, function(res){
|
||||
$.get(this.api_url + this.getParams().org, function(res){
|
||||
this.setState({teams: res})
|
||||
}.bind(this));
|
||||
},
|
||||
|
|
@ -16,17 +39,89 @@ var Menu = React.createClass({
|
|||
render: function() {
|
||||
var renderTeam = function(team) {
|
||||
return (
|
||||
<li className="nav team">{team.name}</li>
|
||||
<li key={team.slug} className="nav team">
|
||||
<Link to="team" params={{org: team.owner, team: team.slug}}>{team.name}</Link>
|
||||
</li>
|
||||
)
|
||||
};
|
||||
return (
|
||||
<ul>
|
||||
<li className="nav empact">Empact</li>
|
||||
<li className="nav dash">Dashboard</li>
|
||||
<li className="nav repos">Repos</li>
|
||||
<li className="nav header">Teams:</li>
|
||||
{this.state.teams.map(renderTeam)}
|
||||
</ul>
|
||||
<section className="menu">
|
||||
<ul>
|
||||
<li key="empact" className="nav empact">
|
||||
<Link to="dashboard" params={{org: this.getParams().org}}>Empact</Link>
|
||||
</li>
|
||||
<li key="dash" className="nav dash">
|
||||
<Link to="dashboard" params={{org: this.getParams().org}}>Dashboard</Link>
|
||||
</li>
|
||||
<li key="teams-header" className="nav header">Teams:</li>
|
||||
{this.state.teams.map(renderTeam)}
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var Dashboard = React.createClass({
|
||||
render: function(){
|
||||
return (
|
||||
<RouteHandler/>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var OrgStats = React.createClass({
|
||||
mixins: [Router.Navigation, Router.State],
|
||||
render: function(){
|
||||
return (
|
||||
<section className="content">Org stats for {this.getParams().org}</section>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var TeamStats = React.createClass({
|
||||
mixins: [Router.Navigation, Router.State],
|
||||
render: function(){
|
||||
return (
|
||||
<section className="content">{this.getParams().team} team stats for {this.getParams().org}</section>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var UserStats = React.createClass({
|
||||
render: function(){
|
||||
return (
|
||||
<section className="content">User stats!</section>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var RepoStats = React.createClass({
|
||||
render: function(){
|
||||
return (
|
||||
<section className="content">Repo Stats!</section>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var NotFound = React.createClass({
|
||||
render: function(){
|
||||
return (
|
||||
<section className="content">NOT FOUND :(</section>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var routes = [
|
||||
<Route name="root" path="/app/" handler={App}>
|
||||
<Route name="dashboard" path=":org" handler={Dashboard}>
|
||||
<DefaultRoute handler={OrgStats} />
|
||||
<Route name="team" path="teams/:team" handler={TeamStats} />
|
||||
<Route name="user" path="users/:user" handler={UserStats} />
|
||||
<Route name="repo" path="repos/:repo" handler={RepoStats} />
|
||||
</Route>
|
||||
<NotFoundRoute handler={NotFound}/>
|
||||
</Route>
|
||||
];
|
||||
Router.run(routes, Router.HistoryLocation, function(Handler) {
|
||||
React.render(<Handler/>, document.body);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Hello</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Hello!</h1>
|
||||
<a href="/auth/signin">Sign In</a>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue