Merge pull request #398 from coralproject/widget-auto-update

Auto-update Dashboard

client/coral-admin/src/containers/Dashboard/Dashboard.css

@@ -7,3 +7,28 @@
   font-size: 1.5rem;
   font-weight: bold;
 }
+
+.autoUpdate {
+  background-color: #d5d5d5;
+  padding: 3px 10px 10px 10px;
+  margin-bottom: 0;
+
+  i {
+    position: relative;
+    top: 7px;
+  }
+
+  b {
+    float: right;
+    border-radius: 20px;
+    cursor: pointer;
+    background-color: #c0c0c0;
+    width: 30px;
+    height: 30px;
+    text-align: center;
+    top: 4px;
+    position: relative;
+    line-height: 1.7em;
+    font-size: 1.3em;
+  }
+}

client/coral-admin/src/containers/Dashboard/Dashboard.js

@@ -6,11 +6,41 @@ import {getMetrics} from 'coral-admin/src/graphql/queries';
 import FlagWidget from './FlagWidget';
 import LikeWidget from './LikeWidget';
 import {showBanUserDialog, hideBanUserDialog} from 'coral-admin/src/actions/moderation';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-admin/src/translations';
+import {Spinner, Icon} from 'coral-ui';
 
-import {Spinner} from 'coral-ui';
+const lang = new I18n(translations);
+const refreshIntervalSeconds = 60 * 5;
 
 class Dashboard extends React.Component {
 
+  state = {
+    noteHidden: false,
+    secondsUntilRefresh: refreshIntervalSeconds
+  }
+
+  componentWillMount () {
+    setInterval(() => { // the countdown timer
+      let nextCount = this.state.secondsUntilRefresh - 1;
+      if (nextCount < 0) {
+        nextCount = refreshIntervalSeconds;
+        this.props.data.refetch();
+      }
+      this.setState({secondsUntilRefresh: nextCount});
+    }, 1000);
+  }
+
+  formatTime = () => {
+    const minutes = Math.floor(this.state.secondsUntilRefresh / 60);
+    let seconds = (this.state.secondsUntilRefresh % 60).toString();
+    if (seconds.length < 2) {
+      seconds = `0${seconds}`;
+    }
+
+    return `${minutes}:${seconds}`;
+  }
+
   render () {
 
     if (this.props.data && this.props.data.loading) {
@@ -20,9 +50,18 @@ class Dashboard extends React.Component {
     const {data: {assetsByLike, assetsByFlag}} = this.props;
 
     return (
-      <div className={styles.Dashboard}>
-        <FlagWidget assets={assetsByFlag} />
-        <LikeWidget assets={assetsByLike} />
+      <div>
+        <p
+          style={{display: this.state.noteHidden ? 'none' : 'block'}}
+          className={styles.autoUpdate}
+          onClick={() => this.setState({noteHidden: true})}>
+          <b>×</b>
+          <Icon name='timer' /> <strong>{lang.t('dashboard.next-update', this.formatTime())}</strong> {lang.t('dashboard.auto-update')}
+        </p>
+        <div className={styles.Dashboard}>
+          <FlagWidget assets={assetsByFlag} />
+          <LikeWidget assets={assetsByLike} />
+        </div>
       </div>
     );
   }

client/coral-admin/src/containers/Dashboard/Widget.css

@@ -3,12 +3,11 @@
 }
 
 .widget {
-  box-sizing: border-box;
   margin: 10px 5px 5px 5px;
   box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
-  padding: 15px;
   flex: 1;
   background-color: white;
+  box-sizing: border-box;
 }
 
 .widget * {
@@ -20,6 +19,7 @@
   padding-left: 10px;
   font-size: 1.5rem;
   font-weight: bold;
+  background-color: #e0e0e0;
 }
 
 .widgetTable {

client/coral-admin/src/translations.json

@@ -117,6 +117,8 @@
       "write_message": "Write a message"
     },
     "dashboard": {
+      "next-update": "{0} minutes until next update.",
+      "auto-update": "Data automatically updates every five minutes or when you Reload.",
       "no_flags": "There have been no flags in the last 5 minutes! Hooray!",
       "no_likes": "There have been no likes in the last 5 minutes. All quiet.",
       "flags": "Flags",
@@ -235,6 +237,8 @@
       "yes_ban_user": "Si, Suspendan el usuario"
     },
     "dashbord": {
+      "next-update": "{0} minutos hasta la siguiente actualización.",
+      "auto-update": "Los datos se actualizan automaticamente cada 5 minutos o cuando Recargas.",
       "no_flags": "¡Nadie ha marcado nada en los últimos 5 minutos! ¡Bravo!",
       "no_likes": "A nadie le ha gustado algún comentario en los últimos 5 minutos. Todo tranquilo.",
       "flags": "Marcados",