Correct menu teams and info blocks everywhere

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 (
             <section className="app">
-                <Menu/>
+                <Menu orgs={this.state.orgs} teams={this.state.teams} />
-                <Router.RouteHandler/>
+                <Router.RouteHandler />
             </section>
         );
     }
@@ -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 (
+                <li key={'org-'+ org.login} className="nav org">
+                    <Link to="org" params={{org: org.login}}>{org.login}</Link>
+                </li>
+            )
+        };
         var renderTeam = function(team) {
             return (
-                <li key={team.name} className="nav team">
+                <li key={'team-'+ team.name} className="nav team">
                     <Link to="team" params={{org: team.owner, team: team.name}}>{team.name}</Link>
                 </li>
             )
@@ -43,13 +88,12 @@ var Menu = React.createClass({
             <section className="menu">
                 <ul>
                     <li key="empact" className="nav empact">
-                        <Link to="org" params={{org: this.getParams().org}}>Empact</Link>
+                        <Link to="org" params={this.getParams()}>Empact</Link>
-                    </li>
-                    <li key="dash" className="nav dash">
-                        <Link to="org" params={{org: this.getParams().org}}>{this.getParams().org}</Link>
                     </li>
+                    <li key="orgs-header" className="nav header">Organizations:</li>
+                    {this.props.orgs.map(renderOrg)}
                     <li key="teams-header" className="nav header">Teams:</li>
-                    {this.state.teams.map(renderTeam)}
+                    {this.props.teams.map(renderTeam)}
                 </ul>
             </section>
         );
@@ -59,16 +103,19 @@ var Menu = React.createClass({
 var Org = React.createClass({
     render: function(){
         return (
-            <Router.RouteHandler/>
+            <Router.RouteHandler />
         );
     }
 });
 
 var OrgStats = React.createClass({
     mixins: [Router.State],
+
     render: function(){
+        var org = Storage.get('org', this.getParams().org);
         return (
             <section className="content">
+                <InfoBlock image={org.avatar_url} title={org.login} text={org.descr} />
                 <BarChart key={this.getParams().team} api="/api/stat/orgs/top"
                     params={this.getParams()} items={["repo", "team", "user"]} />
             </section>
@@ -78,6 +125,7 @@ var OrgStats = React.createClass({
 
 var TeamStats = React.createClass({
     mixins: [Router.State],
+
     render: function(){
         return (
             <section className="content">
@@ -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} />
-                <BarChart key={"bar-chart"+ this.getParams().team} api="/api/stat/teams/top"
+                <BarChart key={'bar-chart-'+ this.getParams().team} api="/api/stat/teams/top"
                     params={this.getParams()} items={["repo", "user"]} />
             </section>
         );
@@ -97,7 +145,8 @@ var UserStats = React.createClass({
     render: function(){
         return (
             <section className="content">
-                <BarChart key={this.getParams().team} api="/api/stat/users/top"
+                <InfoBlock title={this.getParams().user} />
+                <BarChart key={'bar-chart-'+ this.getParams().user} api="/api/stat/users/top"
                     params={this.getParams()} items={["repo"]} />
             </section>
         );
@@ -109,6 +158,7 @@ var RepoStats = React.createClass({
     render: function(){
         return (
             <section className="content">
+                <InfoBlock title={this.getParams().repo} />
                 <BarChart key={this.getParams().team} api="/api/stat/repos/top"
                     params={this.getParams()} items={["user", "team"]} />
             </section>
@@ -124,6 +174,14 @@ var NotFound = React.createClass({
     }
 });
 
+var SelectOrg = React.createClass({
+    render: function(){
+        return (
+            <section className="content">Please select organization from the menu!</section>
+        );
+    }
+});
+
 var InfoBlock = React.createClass({
     render: function() {
         var img = <div className="img" style={{backgroundImage: "url("+ this.props.image +")"}} />;
@@ -138,16 +196,17 @@ var InfoBlock = React.createClass({
 });
 
 var routes = [
-        <Router.Route name="root" path="/app/" handler={App}>
+    <Router.Route name="root" path="/app/" handler={App}>
-            <Router.Route name="org" path=":org" handler={Org}>
+        <Router.DefaultRoute handler={SelectOrg} />
-                <Router.DefaultRoute handler={OrgStats} />
+        <Router.NotFoundRoute handler={NotFound} />
-                <Router.Route name="team" path="teams/:team" handler={TeamStats} />
+        <Router.Route name="org" path=":org" handler={Org}>
-                <Router.Route name="user" path="users/:user" handler={UserStats} />
+            <Router.DefaultRoute handler={OrgStats} />
-                <Router.Route name="repo" path="repos/:repo" handler={RepoStats} />
+            <Router.Route name="team" path="teams/:team" handler={TeamStats} />
-            </Router.Route>
+            <Router.Route name="user" path="users/:user" handler={UserStats} />
-            <Router.NotFoundRoute handler={NotFound}/>
+            <Router.Route name="repo" path="repos/:repo" handler={RepoStats} />
         </Router.Route>
-    ];
+    </Router.Route>
+];
 Router.run(routes, Router.HistoryLocation, function(Handler) {
-    React.render(<Handler/>, document.body);
+    React.render(<Handler />, document.body);
 });

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;
 }