1
0
Fork 0

Sort of finish frontend refactoring

This commit is contained in:
Gregory Eremin 2017-11-05 14:21:06 +01:00
parent b298b74521
commit 0a108739d4
4 changed files with 61 additions and 59 deletions

View File

@ -1,9 +1,9 @@
import React, { Component } from 'react'; import React, { Component } from 'react'
export default class Timestamp extends Component { export default class Timestamp extends Component {
constructor(props) { constructor(props) {
super(props); super(props)
this.state = {timer: null, text: null}; this.state = {timer: null, text: null}
} }
componentDidMount() { componentDidMount() {
@ -11,83 +11,90 @@ export default class Timestamp extends Component {
this.setState({ this.setState({
text: this.relativeDate(), text: this.relativeDate(),
timer: setInterval(this.setRelativeDate.bind(this), 1000) timer: setInterval(this.setRelativeDate.bind(this), 1000)
}); })
} else { } else {
this.setState({ this.setState({
text: null, text: null,
timer: null timer: null
}); })
} }
} }
componentWillUnmount() { componentWillUnmount() {
if (this.state.timer !== null) { 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) { relativeDate(date = this.props.date) {
return this.timeSince(new Date(date)) + " ago"; return this.timeSince(new Date(date)) + " ago"
} }
setRelativeDate(date = this.props.date) { setRelativeDate(date = this.props.date) {
this.setState({text: this.relativeDate()}); this.setState({text: this.relativeDate()})
} }
render() { 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 ( 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) { 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(), let y = date.getFullYear(),
m = date.getMonth(), m = date.getMonth(),
d = date.getDate(), d = date.getDate(),
h = leftPad(date.getHours()), h = leftPad(date.getHours()),
i = leftPad(date.getMinutes()), 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()) { timeSince(timeStamp, until = new Date()) {
let secondsPast = (until.getTime() - timeStamp.getTime())/1000; let secondsPast = (until.getTime() - timeStamp.getTime())/1000
if (secondsPast < 60) { if (secondsPast < 60) {
return parseInt(secondsPast, 10) + 's'; return parseInt(secondsPast, 10) + "s"
} else if (secondsPast < 3600) { } else if (secondsPast < 3600) {
return parseInt(secondsPast/60, 10) + 'm'; return parseInt(secondsPast/60, 10) + "m"
} else if (secondsPast <= 86400) { } else if (secondsPast <= 86400) {
return parseInt(secondsPast/3600, 10) + 'h'; return parseInt(secondsPast/3600, 10) + "h"
} else { } 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() let year = timeStamp.getFullYear() === until.getFullYear()
? "" ? ""
: " "+timeStamp.getFullYear(); : " "+ timeStamp.getFullYear()
return day + " " + month + year; return day +" "+ month + year
} }
} }
} }

View File

@ -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 { export default class Loading extends Component {
render() { render() {
@ -7,6 +7,6 @@ export default class Loading extends Component {
<div className="loading-page"> <div className="loading-page">
Loading... Loading...
</div> </div>
); )
} }
} }

View File

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

View File

@ -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() { render() {
return ( return (
<div className="container"> <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> <main>
<div className="select-command"> <div className="select-command">
Please select a command Please select a command
</div> </div>
</main> </main>
</div> </div>
); )
} }
} }
export default SelectCommand;