added more typings and some layout fixes

scm-ui/src/components/Footer.js

@@ -1,16 +1,17 @@
 //@flow
 import React from "react";
+import type { Me } from "../types/me";
 
 type Props = {
-  me: any
+  me: Me
 };
 
 class Footer extends React.Component<Props> {
   render() {
     return (
-      <footer class="footer">
+      <footer className="footer">
-        <div class="container is-centered">
+        <div className="container is-centered">
-          <p class="has-text-centered">{this.props.me.username}</p>
+          <p className="has-text-centered">{this.props.me.username}</p>
         </div>
       </footer>
     );

scm-ui/src/components/Notification.js

@@ -24,7 +24,7 @@ class Notification extends React.Component<Props> {
   }
 
   render() {
-    const { type, children, onClose } = this.props;
+    const { type, children } = this.props;
     return (
       <div className={classNames("notification", "is-" + type)}>
         {this.renderCloseButton()}

scm-ui/src/components/SubmitButton.js

@@ -5,8 +5,8 @@ import classNames from "classnames";
 
 type Props = {
   value: string,
-  disabled: boolean,
+  disabled?: boolean,
-  isLoading: boolean,
+  isLoading?: boolean,
   large?: boolean,
   fullWidth?: boolean
 };

scm-ui/src/containers/App.css

@@ -13,6 +13,10 @@
   margin: 0 !important;
   padding: 0 0 0 3.8em !important; }
 
+html, body {
+  background-color: whitesmoke;
+  height: 100%; }
+
 /*! bulma.io v0.7.1 | MIT License | github.com/jgthms/bulma */
 @keyframes spinAround {
   from {

scm-ui/src/containers/App.js

@@ -10,7 +10,6 @@ import "./App.css";
 import Header from "../components/Header";
 import PrimaryNavigation from "../components/PrimaryNavigation";
 import Loading from "../components/Loading";
-import Notification from "../components/Notification";
 import Footer from "../components/Footer";
 import ErrorNotification from "../components/ErrorNotification";
 
@@ -28,27 +27,25 @@ class App extends Component<Props> {
   render() {
     const { me, loading, error } = this.props;
 
-    let content = [];
+    let content;
     let navigation;
 
     if (loading) {
-      content.push(<Loading />);
+      content = <Loading />;
     } else if (error) {
       // TODO add error page instead of plain notification
-      content.push(<ErrorNotification error={error} />);
+      content = <ErrorNotification error={error} />;
     } else if (!me) {
-      content.push(<Login />);
+      content = <Login />;
     } else {
-      content.push(<Main />, <Footer me={me} />);
+      content = <Main me={me} />;
       navigation = <PrimaryNavigation />;
     }
 
     return (
       <div className="App">
         <Header>{navigation}</Header>
-        {content.map(c => {
+        {content}
-          return c;
-        })}
       </div>
     );
   }

scm-ui/src/containers/App.scss

@@ -26,5 +26,10 @@ $blue: #33B2E8;
   padding: 0 0 0 3.8em !important;
 }
 
+html, body {
+  background-color: whitesmoke;
+  height: 100%;
+}
+
 // 6. Import the rest of Bulma
 @import "bulma/bulma";

scm-ui/src/containers/Login.js

@@ -72,6 +72,7 @@ class Login extends React.Component<Props, State> {
 
   render() {
     const { classes, loading, error } = this.props;
+
     return (
       <section className="hero has-background-light">
         <div className="hero-body">

scm-ui/src/containers/Main.js

@@ -8,29 +8,27 @@ import { Route, withRouter } from "react-router";
 import Repositories from "../repositories/containers/Repositories";
 import Users from "../users/containers/Users";
 import { Switch } from "react-router-dom";
+import Footer from "../components/Footer";
 
-const styles = {
+import type { Me } from "../types/me";
-  content: {
-    paddingTop: "60px"
-  }
-};
 
 type Props = {
-  classes: any
+  me: Me
 };
 
 class Main extends React.Component<Props> {
   render() {
-    const { classes } = this.props;
+    const { me } = this.props;
     return (
-      <div className={classNames("container", classes.content)}>
+      <div>
         <Switch>
           <Route exact path="/" component={Repositories} />
           <Route path="/users" component={Users} />
         </Switch>
+        <Footer me={me} />
       </div>
     );
   }
 }
 
-export default withRouter(injectSheet(styles)(Main));
+export default withRouter(Main);

scm-ui/src/modules/me.js

@@ -1,6 +1,6 @@
 //@flow
-
 import { apiClient, NOT_AUTHENTICATED_ERROR } from "../apiclient";
+import type { Me } from "../types/me";
 
 const AUTHENTICATION_INFO_URL = "/me";
 
@@ -15,7 +15,7 @@ export function meRequest() {
   };
 }
 
-export function meSuccess(user: any) {
+export function meSuccess(user: Me) {
   return {
     type: ME_AUTHENTICATED_SUCCESS,
     payload: user

scm-ui/src/types/me.js

@@ -0,0 +1,4 @@
+// @flow
+export type Me = {
+  username: string
+};