Sync server_time every 30 secs

src/botPage/view/View.js

@@ -56,10 +56,6 @@ api.events.on('website_status', response => {
     }
 });
 
-api.send({ time: '1' }).then(response => {
-    ReactDOM.render(<ServerTime startTime={response.time} />, $('#server-time')[0]);
-});
-
 api.events.on('balance', response => {
     const {
         balance: { balance: b, currency },
@@ -666,6 +662,7 @@ function initRealityCheck(stopCallback) {
     );
 }
 function renderReactComponents() {
+    ReactDOM.render(<ServerTime api={api} />, $('#server-time')[0]);
     ReactDOM.render(<Tour />, $('#tour')[0]);
     ReactDOM.render(
         <OfficialVersionWarning

src/botPage/view/react-components/HeaderWidgets.js

@@ -1,25 +1,35 @@
 import React, { Component } from 'react';
 
 export default class ServerTime extends Component {
-    constructor() {
+    constructor(props) {
         super();
         this.state = {};
+        const getServerTime = () => {
+            props.api.send({ time: '1' }).then(response =>
+                this.setState(
+                    {
+                        date: new Date(response.time * 1000),
+                    },
+                    this.updateTime()
+                )
+            );
+        };
+        getServerTime();
+        setInterval(() => this.updateTime(), 1000);
+        setInterval(() => getServerTime(), 30000);
     }
     updateTime() {
-        this.date.setSeconds(this.date.getSeconds() + 1);
-        const year = this.date.getUTCFullYear();
-        const month = `0${this.date.getMonth() + 1}`.slice(-2);
-        const date = `0${this.date.getUTCDate()}`.slice(-2);
-        const hours = `0${this.date.getUTCHours()}`.slice(-2);
-        const minutes = `0${this.date.getMinutes()}`.slice(-2);
-        const seconds = `0${this.date.getSeconds()}`.slice(-2);
-        this.setState({ date: `${year}-${month}-${date} ${hours}:${minutes}:${seconds} GMT` });
-    }
-    componentWillMount() {
-        this.date = new Date(this.props.startTime * 1000);
-        setInterval(() => this.updateTime(), 1000);
+        if (!this.state.date) return;
+        this.state.date.setSeconds(this.state.date.getSeconds() + 1);
+        const year = this.state.date.getUTCFullYear();
+        const month = `0${this.state.date.getMonth() + 1}`.slice(-2);
+        const day = `0${this.state.date.getUTCDate()}`.slice(-2);
+        const hours = `0${this.state.date.getUTCHours()}`.slice(-2);
+        const minutes = `0${this.state.date.getMinutes()}`.slice(-2);
+        const seconds = `0${this.state.date.getSeconds()}`.slice(-2);
+        this.setState({ dateString: `${year}-${month}-${day} ${hours}:${minutes}:${seconds} GMT` });
     }
     render() {
-        return <b>{this.state.date}</b>;
+        return <b>{this.state.dateString}</b>;
     }
 }