localhots/empact
1
0
Fork 0
Code Releases Activity

Basic react app

Browse Source
This commit is contained in:
Gregory Eremin 2015-03-07 21:13:47 +07:00
parent 103bdb212e
commit 977f67e38a
4 changed files with 140 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/app.css
View File

@ -2,10 +2,14 @@ section {
float: left; float: left;
} }
#menu { .app {
width: 100%;
}
.menu {
width: 13em; width: 13em;
} }
#menu ul { .menu ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@ -23,15 +27,15 @@ li.nav {
cursor: default; cursor: default;
} }
#content { .content {
width: calc(100% - 13em); width: calc(100% - 13em);
} }
#content .left, #content .right { .content .left, .content .right {
width: 50%; width: 50%;
} }
#content .left { .content .left {
background: #5500fa; background: #5500fa;
} }
#content .right { .content .right {
background: #fa0055; background: #fa0055;
} }

14
app/app.html Normal file
View File

@ -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>

107
app/app.jsx
View File

@ -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({ var Menu = React.createClass({
mixins: [Router.Navigation, Router.State],
api_url: "/api/teams?org=",
getInitialState: function() { getInitialState: function() {
return {teams: []}; return {teams: []};
}, },
@ -8,7 +31,7 @@ var Menu = React.createClass({
}, },
loadTeams: function() { loadTeams: function() {
$.get(this.props.api, function(res){ $.get(this.api_url + this.getParams().org, function(res){
this.setState({teams: res}) this.setState({teams: res})
}.bind(this)); }.bind(this));
}, },
@ -16,17 +39,89 @@ var Menu = React.createClass({
render: function() { render: function() {
var renderTeam = function(team) { var renderTeam = function(team) {
return ( 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 ( return (
<section className="menu">
<ul> <ul>
<li className="nav empact">Empact</li> <li key="empact" className="nav empact">
<li className="nav dash">Dashboard</li> <Link to="dashboard" params={{org: this.getParams().org}}>Empact</Link>
<li className="nav repos">Repos</li> </li>
<li className="nav header">Teams:</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)} {this.state.teams.map(renderTeam)}
</ul> </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);
});

12
app/hello.html Normal file
View File

@ -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>