diff --git a/client/coral-admin/src/containers/Dashboard/Dashboard.css b/client/coral-admin/src/containers/Dashboard/Dashboard.css index 72b9bd90c..cdad990ba 100644 --- a/client/coral-admin/src/containers/Dashboard/Dashboard.css +++ b/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; + } +} diff --git a/client/coral-admin/src/containers/Dashboard/Dashboard.js b/client/coral-admin/src/containers/Dashboard/Dashboard.js index 96e837a9e..5b4a20282 100644 --- a/client/coral-admin/src/containers/Dashboard/Dashboard.js +++ b/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 ( -
this.setState({noteHidden: true})}>
+ ×
+