From 0a108739d4b61bb123341a517a708efd73a835dc Mon Sep 17 00:00:00 2001 From: Gregory Eremin Date: Sun, 5 Nov 2017 14:21:06 +0100 Subject: [PATCH] Sort of finish frontend refactoring --- frontend/src/blocks/timestamp.js | 93 +++++++++++++++------------- frontend/src/pages/loading.js | 6 +- frontend/src/pages/login.js | 6 +- frontend/src/pages/select_command.js | 15 +++-- 4 files changed, 61 insertions(+), 59 deletions(-) diff --git a/frontend/src/blocks/timestamp.js b/frontend/src/blocks/timestamp.js index 8ad1da0..d6529a2 100644 --- a/frontend/src/blocks/timestamp.js +++ b/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); - this.state = {timer: null, text: null}; + super(props) + 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); - this.setState({timer: null, text: null}); + clearInterval(this.state.timer) + 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 ( - {text} - ); + {this.formatText()} + ) + } + + 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 monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; + 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 y = date.getFullYear(), m = date.getMonth(), d = date.getDate(), h = leftPad(date.getHours()), i = leftPad(date.getMinutes()), - s = leftPad(date.getSeconds()); - return [d, monthNames[m], y, "at", [h, i, s].join(":")].join(" "); + s = leftPad(date.getSeconds()) + 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 month = timeStamp.toDateString().match(/ [a-zA-Z]*/)[0].replace(" ",""); + let day = timeStamp.getDate() + let month = timeStamp.toDateString().match(/ [a-zA-Z]*/)[0].replace(" ", "") let year = timeStamp.getFullYear() === until.getFullYear() ? "" - : " "+timeStamp.getFullYear(); - return day + " " + month + year; + : " "+ timeStamp.getFullYear() + return day +" "+ month + year } } } diff --git a/frontend/src/pages/loading.js b/frontend/src/pages/loading.js index e6e86a7..a0ef53c 100644 --- a/frontend/src/pages/loading.js +++ b/frontend/src/pages/loading.js @@ -1,5 +1,5 @@ -import React, { Component } from 'react'; -import './loading.css'; +import React, { Component } from 'react' +import './loading.css' export default class Loading extends Component { render() { @@ -7,6 +7,6 @@ export default class Loading extends Component {
Loading...
- ); + ) } } diff --git a/frontend/src/pages/login.js b/frontend/src/pages/login.js index 7514432..0d45a10 100644 --- a/frontend/src/pages/login.js +++ b/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 (
diff --git a/frontend/src/pages/select_command.js b/frontend/src/pages/select_command.js index a80f201..9f8634a 100644 --- a/frontend/src/pages/select_command.js +++ b/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'; - -class SelectCommand extends Component { +export default class SelectCommand extends Component { render() { return (
-
- ); + ) } } - -export default SelectCommand;