Added ago timers

packages/frontend/src/components/Ago.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import './Tile.css';
+import { timestamp, Types } from '@dotstats/common';
+
+export namespace Ago {
+    export interface Props {
+        when: Types.Timestamp,
+    }
+
+    export interface State {
+        now: Types.Timestamp,
+    }
+}
+
+const tickers = new Map<Ago, (ts: Types.Timestamp) => void>();
+
+function tick() {
+    const now = timestamp();
+
+    for (const ticker of tickers.values()) {
+        ticker(now);
+    }
+
+    setTimeout(tick, 100);
+}
+
+tick();
+
+export namespace Ago {
+    export interface State {
+        now: Types.Timestamp
+    }
+}
+
+export class Ago extends React.Component<Ago.Props, Ago.State> {
+    public static timeDiff = 0 as Types.Milliseconds;
+
+    public state: Ago.State;
+
+    constructor(props: Ago.Props) {
+        super(props);
+
+        this.state = {
+            now: (timestamp() + Ago.timeDiff) as Types.Timestamp
+        };
+    }
+
+    public componentWillMount() {
+        tickers.set(this, (now) => {
+            this.setState({
+                now: (now + Ago.timeDiff) as Types.Timestamp
+            });
+        })
+    }
+
+    public componentWillUnmount() {
+        tickers.delete(this);
+    }
+
+    public render() {
+        const ago = Math.max(this.state.now - this.props.when, 0) / 1000;
+
+        let agoStr: string;
+
+        if (ago < 10) {
+            agoStr = `${ago.toFixed(1)}s`;
+        } else if (ago < 60) {
+            agoStr = `${ago | 0}s`;
+        } else {
+            agoStr = `${ ago / 60 | 0}m`;
+        }
+
+        return <span title={new Date(this.props.when).toUTCString()}>{agoStr} ago</span>
+    }
+}