From bf62eee4d5fdedbf62b0b980a15ae9823a1da89f Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Thu, 12 Jul 2018 08:23:24 +0200
Subject: [PATCH] added more typings and some layout fixes

---
 scm-ui/src/components/Footer.js       |  9 +++++----
 scm-ui/src/components/Notification.js |  2 +-
 scm-ui/src/components/SubmitButton.js |  4 ++--
 scm-ui/src/containers/App.css         |  4 ++++
 scm-ui/src/containers/App.js          | 15 ++++++---------
 scm-ui/src/containers/App.scss        |  5 +++++
 scm-ui/src/containers/Login.js        |  1 +
 scm-ui/src/containers/Main.js         | 16 +++++++---------
 scm-ui/src/modules/me.js              |  4 ++--
 scm-ui/src/types/me.js                |  4 ++++
 10 files changed, 37 insertions(+), 27 deletions(-)
 create mode 100644 scm-ui/src/types/me.js

diff --git a/scm-ui/src/components/Footer.js b/scm-ui/src/components/Footer.js
index 5cc2cc9f2c..6673b77949 100644
--- a/scm-ui/src/components/Footer.js
+++ b/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">
-        <div class="container is-centered">
-          <p class="has-text-centered">{this.props.me.username}</p>
+      <footer className="footer">
+        <div className="container is-centered">
+          <p className="has-text-centered">{this.props.me.username}</p>
         </div>
       </footer>
     );
diff --git a/scm-ui/src/components/Notification.js b/scm-ui/src/components/Notification.js
index a66fc1cd9c..b48ae16851 100644
--- a/scm-ui/src/components/Notification.js
+++ b/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()}
diff --git a/scm-ui/src/components/SubmitButton.js b/scm-ui/src/components/SubmitButton.js
index c7332491cf..9fce2ba0f1 100644
--- a/scm-ui/src/components/SubmitButton.js
+++ b/scm-ui/src/components/SubmitButton.js
@@ -5,8 +5,8 @@ import classNames from "classnames";
 
 type Props = {
   value: string,
-  disabled: boolean,
-  isLoading: boolean,
+  disabled?: boolean,
+  isLoading?: boolean,
   large?: boolean,
   fullWidth?: boolean
 };
diff --git a/scm-ui/src/containers/App.css b/scm-ui/src/containers/App.css
index a69d76f2ac..a2714191ff 100644
--- a/scm-ui/src/containers/App.css
+++ b/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 {
diff --git a/scm-ui/src/containers/App.js b/scm-ui/src/containers/App.js
index dd54ab8001..28787c2fe7 100644
--- a/scm-ui/src/containers/App.js
+++ b/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 => {
-          return c;
-        })}
+        {content}
       </div>
     );
   }
diff --git a/scm-ui/src/containers/App.scss b/scm-ui/src/containers/App.scss
index d495d22170..0b26d6e0f0 100644
--- a/scm-ui/src/containers/App.scss
+++ b/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";
diff --git a/scm-ui/src/containers/Login.js b/scm-ui/src/containers/Login.js
index 0ac140cd30..c70075e012 100644
--- a/scm-ui/src/containers/Login.js
+++ b/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">
diff --git a/scm-ui/src/containers/Main.js b/scm-ui/src/containers/Main.js
index 0e636a3b2f..c0eb90b1da 100644
--- a/scm-ui/src/containers/Main.js
+++ b/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 = {
-  content: {
-    paddingTop: "60px"
-  }
-};
+import type { Me } from "../types/me";
 
 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);
diff --git a/scm-ui/src/modules/me.js b/scm-ui/src/modules/me.js
index b80b48f4ef..70631cc6c9 100644
--- a/scm-ui/src/modules/me.js
+++ b/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
diff --git a/scm-ui/src/types/me.js b/scm-ui/src/types/me.js
new file mode 100644
index 0000000000..d17798bf5f
--- /dev/null
+++ b/scm-ui/src/types/me.js
@@ -0,0 +1,4 @@
+// @flow
+export type Me = {
+  username: string
+};