Sort of finish frontend refactoring

frontend/src/blocks/timestamp.js

@@ -1,9 +1,9 @@
-import React, { Component } from 'react';
+import React, { Component } from 'react'
 
 export default class Timestamp extends Component {
     constructor(props) {
-        super(props);
+        super(props)
-        this.state = {timer: null, text: null};
+        this.state = {timer: null, text: null}
     }
 
     componentDidMount() {
@@ -11,83 +11,90 @@ export default class Timestamp extends Component {
             this.setState({
                 text: this.relativeDate(),
                 timer: setInterval(this.setRelativeDate.bind(this), 1000)
-            });
+            })
         } else {
             this.setState({
                 text: null,
                 timer: null
-            });
+            })
         }
     }
 
     componentWillUnmount() {
         if (this.state.timer !== null) {
-            clearInterval(this.state.timer);
+            clearInterval(this.state.timer)
-            this.setState({timer: null, text: null});
+            this.setState({timer: null, text: null})
         }
     }
 
     relativeDate(date = this.props.date) {
-        return this.timeSince(new Date(date)) + " ago";
+        return this.timeSince(new Date(date)) + " ago"
     }
 
     setRelativeDate(date = this.props.date) {
-        this.setState({text: this.relativeDate()});
+        this.setState({text: this.relativeDate()})
     }
 
     render() {
-        var text;
-        if (this.props.date !== undefined) {
-            if (this.props.relative) {
-                text = this.state.text;
-            } else {
-                text = this.formatDate(new Date(this.props.date));
-            }
-        } else if (this.props.from !== undefined && this.props.until !== undefined) {
-            text = this.timeSince(new Date(this.props.from), new Date(this.props.until));
-        } else {
-            text = "—";
-        }
-
-        var title = "";
-        if (this.props.relative) {
-            title = this.formatDate(new Date(this.props.date));
-        } else if (this.props.until !== undefined) {
-            title = this.formatDate(new Date(this.props.until));
-        }
-
         return (
-            <span title={title}>{text}</span>
+            <span title={this.formatTitle()}>{this.formatText()}</span>
-        );
+        )
+    }
+
+    formatText() {
+        if (this.props.date) {
+            if (this.props.relative) {
+                return this.state.text
+            } else {
+                return this.formatDate(new Date(this.props.date))
+            }
+        } else if (this.props.from && this.props.until) {
+            return this.timeSince(new Date(this.props.from), new Date(this.props.until))
+        } else {
+            return "—"
+        }
+    }
+
+    formatTitle() {
+        if (this.props.relative) {
+            return this.formatDate(new Date(this.props.date))
+        } else if (this.props.until) {
+            return this.formatDate(new Date(this.props.until))
+        } else {
+            return ""
+        }
     }
 
     formatDate(date) {
-        let leftPad = (n) => n > 9 ? n : "0"+ n; // I wish I was a package
+        let leftPad = (n) => n > 9 ? n : "0"+ n // I wish I was a package
-        let monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+        let monthNames = [
+            "Jan", "Feb", "Mar", "Apr", "May", "Jun",
+            "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
+        ]
         let y = date.getFullYear(),
             m = date.getMonth(),
             d = date.getDate(),
             h = leftPad(date.getHours()),
             i = leftPad(date.getMinutes()),
-            s = leftPad(date.getSeconds());
+            s = leftPad(date.getSeconds())
-        return [d, monthNames[m], y, "at", [h, i, s].join(":")].join(" ");
+        return [d, monthNames[m], y, "at", [h, i, s].join(":")].join(" ")
     }
 
     timeSince(timeStamp, until = new Date()) {
-        let secondsPast = (until.getTime() - timeStamp.getTime())/1000;
+        let secondsPast = (until.getTime() - timeStamp.getTime())/1000
         if (secondsPast < 60) {
-            return parseInt(secondsPast, 10) + 's';
+            return parseInt(secondsPast, 10) + "s"
         } else if (secondsPast < 3600) {
-            return parseInt(secondsPast/60, 10) + 'm';
+            return parseInt(secondsPast/60, 10) + "m"
         } else if (secondsPast <= 86400) {
-            return parseInt(secondsPast/3600, 10) + 'h';
+            return parseInt(secondsPast/3600, 10) + "h"
         } else {
-            let day = timeStamp.getDate();
+            let day = timeStamp.getDate()
-            let month = timeStamp.toDateString().match(/ [a-zA-Z]*/)[0].replace(" ","");
+            let month = timeStamp.toDateString().match(/ [a-zA-Z]*/)[0].replace(" ", "")
             let year = timeStamp.getFullYear() === until.getFullYear()
                 ? ""
-                :  " "+timeStamp.getFullYear();
+                : " "+ timeStamp.getFullYear()
-            return day + " " + month + year;
+            return day +" "+ month + year
         }
     }
 }

frontend/src/pages/loading.js

@@ -1,5 +1,5 @@
-import React, { Component } from 'react';
+import React, { Component } from 'react'
-import './loading.css';
+import './loading.css'
 
 export default class Loading extends Component {
     render() {
@@ -7,6 +7,6 @@ export default class Loading extends Component {
             <div className="loading-page">
                 Loading...
             </div>
-        );
+        )
     }
 }

frontend/src/pages/login.js

@@ -1,13 +1,9 @@
 import React, { Component } from 'react';
+
 import './login.css';
 import githubLogo from './github_logo.png';
 
 export default class Login extends Component {
-    componentDidMount() {
-        let page = document.getElementsByClassName("login-page")[0];
-        page.style.height = window.innerHeight + "px";
-    }
-
     render() {
         return (
             <div className="login-page">

frontend/src/pages/select_command.js

@@ -1,20 +1,19 @@
-import React, { Component } from 'react';
+import React, { Component } from 'react'
+import Nav from '../blocks/nav.js'
 
-import Nav from '../blocks/nav.js';
+export default class SelectCommand extends Component {
-
-class SelectCommand extends Component {
     render() {
         return (
             <div className="container">
-                <Nav commands={this.props.commands} onQueryChange={this.props.onQueryChange} query={this.props.query} />
+                <Nav commands={this.props.commands}
+                    onQueryChange={this.props.onQueryChange}
+                    query={this.props.query} />
                 <main>
                     <div className="select-command">
                         Please select a command
                     </div>
                 </main>
             </div>
-        );
+        )
     }
 }
-
-export default SelectCommand;