feat(widgets): refreshing ability

SIGSEV · Mar 18, 2017 · 34be8b5 · 34be8b5
1 parent 1b2a880
commit 34be8b5
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 15 deletions.
diff --git a/src/components/Loader.js b/src/components/Loader.js
@@ -2,9 +2,15 @@ import React, { Component } from 'react'
 
 class Loader extends Component {
 
+  static defaultProps = {
+    className: ''
+  }
+
   render () {
+    const { className } = this.props
+
     return (
-      <div className='Loader'>
+      <div className={`Loader ${className}`}>
         <i className='ion-radio-waves' />
       </div>
     )

diff --git a/src/components/Widget.js b/src/components/Widget.js
@@ -92,16 +92,17 @@ class Widget extends Component {
     dispatch(fetchWidget(id))
   }
 
-  toggleEditMode () {
+  toggleEditMode = () => {
     this.setState({ edit: !this.state.edit })
   }
 
-  removeWidget (id) {
+  removeWidget = () => {
+    const { id } = this.props
     this.props.dispatch(removeWidget(id))
     this.props.dispatch(save())
   }
 
-  configureWidget (config, shouldClose) {
+  configureWidget = (config, shouldClose) => {
     const { id, dispatch } = this.props
     dispatch(configWidget({ id, config }))
     if (shouldClose) { this.setState({ edit: false }) }
@@ -116,7 +117,7 @@ class Widget extends Component {
       connectDragPreview
     } = this.props
     const { edit } = this.state
-    const { loading, loaded, type } = widget
+    const { loading, loaded, lastFetch, type } = widget
     const component = widgets[widget.type]
 
     const W = widgetsComponents[type]
@@ -135,12 +136,12 @@ class Widget extends Component {
         <div className='ctx'>
           {editMode && (
             <div>
-              <div className='ctx-btn' onClick={this.removeWidget.bind(this, id)} tabIndex={1}>
+              <div className='ctx-btn' onClick={this.removeWidget} tabIndex={1}>
                 <i className='ion-close' />
               </div>
               {moveButton}
               {component && !!component.config && (
-                <div className='ctx-btn' onClick={::this.toggleEditMode} tabIndex={2}>
+                <div className='ctx-btn' onClick={this.toggleEditMode} tabIndex={2}>
                   <i className='ion-edit' />
                 </div>
               )}
@@ -151,7 +152,19 @@ class Widget extends Component {
         {component && (
           <div className={`Widget ${type}`} style={{ ...component.style }}>
 
-            {loading && (
+            {(edit || (loaded || lastFetch)) && (
+              <div>
+                <W
+                  id={id}
+                  onSave={this.configureWidget}
+                  edit={edit && editMode}
+                  loaded={loaded}
+                  data={widget} />
+                {loading && (<Loader className='refreshing' />)}
+              </div>
+            )}
+
+            {(loading && !lastFetch) && (
               <div className='loading'>
                 <Loader />
               </div>
@@ -163,10 +176,6 @@ class Widget extends Component {
               </div>
             )}
 
-            {(edit || !loading && loaded) && (
-              <W id={id} onSave={::this.configureWidget} edit={edit && editMode} data={widget} />
-            )}
-
           </div>
         )}
 

diff --git a/src/components/widgets/Crypto.js b/src/components/widgets/Crypto.js
@@ -11,20 +11,32 @@ class Crypto extends Component {
   state = { now: new Date() }
 
   componentWillMount () {
-    this._int = setInterval(() => this.setState({ now: new Date() }), 1E3)
+    this.start()
   }
 
-  componentWillUpdate () {
+  componentWillUpdate (nextProps) {
     const { fetchWidget, id } = this.props
-    if (this.getDiff() > 30) {
+
+    if (this._int && this.getDiff() > 30) {
+      clearInterval(this._int)
+      this._int = null
       fetchWidget(id)
     }
+
+    if (!this._int && nextProps.loaded) {
+      this.start()
+    }
   }
 
   componentWillUnmount () {
     clearInterval(this._int)
   }
 
+  start = () => {
+    this.setState({ now: new Date() })
+    this._int = setInterval(() => this.setState({ now: new Date() }), 1E3)
+  }
+
   getDiff = () => {
     const { now } = this.state
     const { values: { timestamp } } = this.props.data

diff --git a/src/styles/app.scss b/src/styles/app.scss
@@ -157,6 +157,15 @@ body {
   background: $cb1;
 }
 
+.refreshing {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 1rem !important;
+  width: 1rem !important;
+  font-size: 1rem !important;
+}
+
 .Loader {
   @extend .z;
   width: 2.5rem;