More semicolons deleted and functions created

frontend/src/blocks/alert.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-
 import './alert.css';
 
 export default class Alert extends Component {

frontend/src/blocks/header.js

@@ -1,21 +1,19 @@
-import React, { Component } from 'react';
+import React, { Component } from 'react'
+import './header.css'
 
-import './header.css';
+export default class Header extends Component {
-
-class Header extends Component {
     render() {
+        let user = this.props.user
         return (
             <header>
                 <div className="header-container">
                     <div className="go-api">go-api<span>commands</span></div>
                     <div className="auth">
-                        <div className="name">{this.props.user.name}</div>
+                        <div className="name">{user.name}</div>
-                        <img src={this.props.user.picture} alt="" />
+                        <img src={user.picture} alt={"Picture of "+ user.name} />
                     </div>
                 </div>
             </header>
-        );
+        )
     }
 }
-
-export default Header;

frontend/src/blocks/job_list.js

@@ -1,13 +1,13 @@
-import React, { Component } from 'react';
+import React, { Component } from 'react'
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom'
 
-import Timestamp from './timestamp.js';
+import Timestamp from './timestamp.js'
-import './job_list.css';
+import './job_list.css'
 
 export default class JobList extends Component {
     render() {
         if (this.props.jobs === undefined) {
-            return null;
+            return null
         }
 
         return (
@@ -26,7 +26,7 @@ export default class JobList extends Component {
     }
 
     renderJob(job) {
-        let shortID = job.id.substring(0, 8);
+        let shortID = job.id.substring(0, 8)
         return (
             <div key={job.id} className={"job-details short"}>
                 <div className={"dot "+ job.state}></div>
@@ -36,7 +36,7 @@ export default class JobList extends Component {
                 <div className="started"><Timestamp date={job.started_at} /></div>
                 <div className="took"><Timestamp from={job.started_at} until={job.finished_at} /></div>
             </div>
-        );
+        )
     }
 }
 

frontend/src/blocks/nav.js

@@ -1,40 +1,37 @@
-import React, { Component } from 'react';
+import React, { Component } from 'react'
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom'
 
-import './nav.css';
+import './nav.css'
 
 export default class Nav extends Component {
     constructor(props) {
-        super(props);
+        super(props)
-        this.state = {
+        this.state = {query: ""}
-            query: "",
-        };
     }
+
     render() {
         return (
             <nav>
                 <input className="search" type="search" placeholder="Search for commands"
                     value={this.props.query} onChange={this.props.onQueryChange} results="0" />
                 <ul>
-                    {Object.keys(this.props.commands).map((name) => {
+                    {Object.keys(this.props.commands).map(this.renderItem)}
-                        let cmd = this.props.commands[name];
-                        if (cmd.name.indexOf(this.props.query) === -1) {
-                            return null;
-                        }
-
-                        var className = "";
-                        if (this.props.active && cmd.name === this.props.active) {
-                            className = "active";
-                        }
-
-                        return (
-                            <li key={cmd.name}>
-                                <Link to={"/cmd/" + cmd.name} className={className}>{cmd.name}</Link>
-                            </li>
-                        );
-                    })}
                 </ul>
             </nav>
-        );
+        )
+    }
+
+    renderItem(name) {
+        let cmd = this.props.commands[name]
+        if (cmd.name.indexOf(this.props.query) === -1) {
+            return null
+        }
+
+        let className = this.props.active && cmd.name === this.props.active ? "active" : ""
+        return (
+            <li key={cmd.name}>
+                <Link to={"/cmd/" + cmd.name} className={className}>{cmd.name}</Link>
+            </li>
+        )
     }
 }

frontend/src/blocks/output.js

@@ -1,75 +1,75 @@
-import React, { Component } from 'react';
+import React, { Component } from 'react'
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom'
 
-import Timestamp from './timestamp.js';
+import Timestamp from './timestamp.js'
-import { api, httpGET, httpStreamGET } from '../http.js';
+import { api, httpGET, httpStreamGET } from '../http.js'
-import './output.css';
+import './output.css'
 
 export default class Output extends Component {
     constructor(props) {
-        super(props);
+        super(props)
         this.state = {
             job: null,
             xhr: null
-        };
+        }
     }
 
     componentDidMount() {
-        let jobID = this.props.jobID;
+        let jobID = this.props.jobID
         if (jobID !== null) {
-            this.loadCommandLog(jobID);
+            this.loadCommandLog(jobID)
-            this.loadJobDetails(jobID);
+            this.loadJobDetails(jobID)
         }
     }
 
     componentWillUnmount() {
         if (this.state.xhr !== null) {
-            this.state.xhr.abort();
+            this.state.xhr.abort()
         }
     }
 
     loadJobDetails(id) {
         if (id === null) {
-            return;
+            return
         }
 
         httpGET(api("/jobs/" + id),
             (status, body) => {
-                this.setState({job: JSON.parse(body)});
+                this.setState({job: JSON.parse(body)})
             },
             (error) => {
-                console.log("Failed to load job details:", error);
+                console.log("Failed to load job details:", error)
             }
-        );
+        )
     }
 
     loadCommandLog(id) {
         if (id === null || this.state.xhr !== null) {
-            return;
+            return
         }
 
         let xhr = httpStreamGET(api("/jobs/" + id + "/log"),
             (chunk) => { // Progress
-                let target = this.refs["output"];
+                let target = this.refs["output"]
-                target.innerHTML += chunk.replace(/\n/g, "<br/>");
+                target.innerHTML += chunk.replace(/\n/g, "<br/>")
-                this.autoScroll();
+                this.autoScroll()
             },
             (status) => { // Complete
                 // Request cancelled
                 if (status === 0) {
-                    return;
+                    return
                 }
 
                 // Reload job details
-                this.setState({xhr: null});
+                this.setState({xhr: null})
-                this.loadJobDetails(id);
+                this.loadJobDetails(id)
             },
             (error) => {
-                let target = this.refs["output"];
+                let target = this.refs["output"]
-                target.innerHTML = "Failed to fetch command log: "+ error;
+                target.innerHTML = "Failed to fetch command log: "+ error
             }
-        );
+        )
-        this.setState({xhr: xhr});
+        this.setState({xhr: xhr})
     }
 
     autoScroll() {
@@ -77,32 +77,28 @@ export default class Output extends Component {
     }
 
     render() {
-        var outputClass = "output";
+        let className = this.state.job ? "output visible" : "output"
-        if (this.state.job) {
-            outputClass += " visible";
-        }
-
         return (
             <div>
                 {this.renderJobDetails()}
-                <div ref="output" className={outputClass}></div>
+                <div ref="output" className={className}></div>
             </div>
-        );
+        )
     }
 
     renderJobDetails() {
-        let details = this.state.job;
+        let details = this.state.job
         if (!details) {
-            return (<div></div>);
+            return null
         }
 
-        // let shortID = details.id.substring(0, 8);
+        // let shortID = details.id.substring(0, 8)
-        var state = details.state;
+        var state = details.state
-        state = state.charAt(0).toUpperCase() + state.substr(1);
+        state = state.charAt(0).toUpperCase() + state.substr(1)
 
-        var args;
+        var args
         if (details.args !== "") {
-            args = <span className="args">{details.args}</span>;
+            args = <span className="args">{details.args}</span>
         }
         return (
             <div className="job-details full">
@@ -126,34 +122,34 @@ export default class Output extends Component {
                 {this.renderStarted()}
                 {this.renderFinished()}
             </div>
-        );
+        )
     }
 
     renderStarted() {
-        let details = this.state.job;
+        let details = this.state.job
         return (
             <div className="item started_at">
                 <div className="name">Started</div>
                 <div className="val"><Timestamp date={details.started_at} relative={details.finished_at === null} /></div>
             </div>
-        );
+        )
     }
 
     renderFinished() {
-        let details = this.state.job;
+        let details = this.state.job
-        if (details.finished_at !== null) {
+        if (details.finished_at === null) {
-            return [
+            return null
-                <div className="item finished_at" key="finished_at">
-                    <div className="name">Finished</div>
-                    <div className="val"><Timestamp date={details.finished_at} /></div>
-                </div>,
-                <div className="item took" key="took">
-                    <div className="name">Took</div>
-                    <div className="val"><Timestamp from={details.started_at} until={details.finished_at} /></div>
-                </div>
-            ];
-        } else {
-            return null;
         }
+
+        return [
+            <div className="item finished_at" key="finished_at">
+                <div className="name">Finished</div>
+                <div className="val"><Timestamp date={details.finished_at} /></div>
+            </div>,
+            <div className="item took" key="took">
+                <div className="name">Took</div>
+                <div className="val"><Timestamp from={details.started_at} until={details.finished_at} /></div>
+            </div>
+        ]
     }
 }

frontend/src/blocks/user.js

@@ -1,46 +1,52 @@
-import React, { Component } from 'react';
+import React, { Component } from 'react'
 
-import { api, httpGET } from '../http.js';
+import { api, httpGET } from '../http.js'
-import './user.css';
+import './user.css'
 
 export default class User extends Component {
     constructor(props) {
-        super(props);
+        super(props)
-        this.state = {user: undefined};
+        this.state = {user: undefined}
     }
     componentDidMount() {
-        if (this.props.id === undefined || this.props.id === null) {
+        if (!this.props.id) {
-            return;
+            return
         }
+
         httpGET(api("/users/"+ this.props.id),
             (status, body) => {
-                this.setState({user: JSON.parse(body)});
+                this.setState({user: JSON.parse(body)})
             },
             (error) => {
-                console.log("Failed to load user details:", error);
+                console.log("Failed to load user details:", error)
             }
-        );
+        )
     }
 
     render() {
-        if (this.props.id === undefined || this.props.id === null || this.state.user === undefined) {
+        let details = this.state.user
-            return null;
+        if (!this.props.id || details === undefined) {
-        } else if (this.state.user === null) {
+            return null
-            let shortID = this.props.id.substring(0, 8);
-            return (
-                <div className="user-details">
-                    User
-                    <div className="user-id">{shortID}</div>
-                </div>
-            );
-        } else {
-            let details = this.state.user;
-            return (
-                <div className="user-details">
-                    <img src={details.picture} alt={details.name +" picture"} />
-                    <div className="name">{details.name}</div>
-                </div>
-            );
         }
+        if (details === null) {
+            return this.renderUnknownUser()
+        }
+
+        return (
+            <div className="user-details">
+                <img src={details.picture} alt={details.name +" picture"} />
+                <div className="name">{details.name}</div>
+            </div>
+        )
+    }
+
+    renderUnknownUser() {
+        let shortID = this.props.id.substring(0, 8)
+        return (
+            <div className="user-details">
+                User
+                <div className="user-id">{shortID}</div>
+            </div>
+        )
     }
 }