diff --git a/app/scripts/app.jsx b/app/scripts/app.jsx
index 6b0d327..4751a3a 100644
--- a/app/scripts/app.jsx
+++ b/app/scripts/app.jsx
@@ -1,13 +1,66 @@
var Router = ReactRouter,
Link = Router.Link;
+var Storage = {
+ set: function(category, key, value) {
+ window.localStorage.setItem(category +'-'+ key, JSON.stringify(value));
+ },
+
+ get: function(category, key) {
+ var val = window.localStorage.getItem(category +'-'+ key);
+ return val === null ? null : JSON.parse(val);
+ }
+};
+
var App = React.createClass({
- mixins: [Router.Navigation],
+ mixins: [Router.Navigation, Router.State],
+
+ orgsURL: "/api/orgs",
+ teamsURL: "/api/teams?org=",
+
+ getInitialState: function() {
+ return {
+ orgs: [],
+ org: null,
+ teams: [],
+ team: null
+ };
+ },
+
+ componentDidMount: function() {
+ this.loadOrgs();
+ this.loadTeams();
+ },
+
+ loadOrgs: function() {
+ $.get(this.orgsURL, function(res){
+ this.setState({orgs: res});
+ if (res !== null) {
+ for (var i = 0; i < res.length; i++) {
+ var org = res[i];
+ Storage.set('org', org.login, org);
+ }
+ }
+ }.bind(this));
+ },
+
+ loadTeams: function() {
+ $.get(this.teamsURL + this.getParams().org, function(res){
+ this.setState({teams: res})
+ if (res !== null) {
+ for (var i = 0; i < res.length; i++) {
+ var team = res[i];
+ Storage.set('team', team.name, team);
+ }
+ }
+ }.bind(this));
+ },
+
render: function(){
return (
);
}
@@ -15,26 +68,18 @@ var App = React.createClass({
var Menu = React.createClass({
mixins: [Router.State],
- api_url: "/api/teams?org=",
-
- getInitialState: function() {
- return {teams: []};
- },
-
- componentDidMount: function() {
- this.loadTeams();
- },
-
- loadTeams: function() {
- $.get(this.api_url + this.getParams().org, function(res){
- this.setState({teams: res})
- }.bind(this));
- },
render: function() {
+ var renderOrg = function(org) {
+ return (
+
+ {org.login}
+
+ )
+ };
var renderTeam = function(team) {
return (
-
+
{team.name}
)
@@ -43,13 +88,12 @@ var Menu = React.createClass({
-
- Empact
-
- -
- {this.getParams().org}
+ Empact
+ - Organizations:
+ {this.props.orgs.map(renderOrg)}
- Teams:
- {this.state.teams.map(renderTeam)}
+ {this.props.teams.map(renderTeam)}
);
@@ -59,16 +103,19 @@ var Menu = React.createClass({
var Org = React.createClass({
render: function(){
return (
-
+
);
}
});
var OrgStats = React.createClass({
mixins: [Router.State],
+
render: function(){
+ var org = Storage.get('org', this.getParams().org);
return (
@@ -78,6 +125,7 @@ var OrgStats = React.createClass({
var TeamStats = React.createClass({
mixins: [Router.State],
+
render: function(){
return (
@@ -85,7 +133,7 @@ var TeamStats = React.createClass({
image="https://media.licdn.com/mpr/mpr/p/8/005/058/14b/0088c48.jpg"
title={this.getParams().team}
text={"The most awesome team in "+ this.getParams().org} />
-
);
@@ -97,7 +145,8 @@ var UserStats = React.createClass({
render: function(){
return (
);
@@ -109,6 +158,7 @@ var RepoStats = React.createClass({
render: function(){
return (
@@ -124,6 +174,14 @@ var NotFound = React.createClass({
}
});
+var SelectOrg = React.createClass({
+ render: function(){
+ return (
+ Please select organization from the menu!
+ );
+ }
+});
+
var InfoBlock = React.createClass({
render: function() {
var img = ;
@@ -138,16 +196,17 @@ var InfoBlock = React.createClass({
});
var routes = [
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
- ];
+
+];
Router.run(routes, Router.HistoryLocation, function(Handler) {
- React.render(, document.body);
+ React.render(, document.body);
});
diff --git a/app/styles/app.css b/app/styles/app.css
index d30a8ea..4af9cb0 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -8,6 +8,7 @@ section {
.menu {
width: 13em;
+ margin-top: 20px;
}
.menu ul {
margin: 0;
@@ -28,8 +29,8 @@ li.nav {
}
.content {
- margin-top: 15px;
width: calc(100% - 13em);
+ margin-top: 20px;
}
.content .left, .content .right {
float: left;
@@ -52,6 +53,9 @@ li.nav {
}
.info-block h1 {
+ font-size: 32px;
+ line-height: 32px;
+ margin: 0;
font-weight: 400;
}