From 6687758a3ac568024ec6cb882b07e5dfe6b26b33 Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
Date: Sun, 17 Dec 2017 22:11:04 +0000
Subject: [PATCH] Add a refresh button and make it spinable.

This also adds a HOC that makes icons spinable.
---
 src/App.tsx              | 21 +++++++++++++++++++++
 src/widgets/withSpin.css | 15 +++++++++++++++
 src/widgets/withSpin.tsx | 18 ++++++++++++++++++
 3 files changed, 54 insertions(+)
 create mode 100644 src/widgets/withSpin.css
 create mode 100644 src/widgets/withSpin.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 039f896..564a42d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,15 +12,18 @@ import IconButton from 'material-ui/IconButton';
 
 import NavigationMenu from 'material-ui/svg-icons/navigation/menu';
 import NavigationBack from 'material-ui/svg-icons/navigation/arrow-back';
+import NavigationRefresh from 'material-ui/svg-icons/navigation/refresh';
 
 import './App.css';
 
+import withSpin from './widgets/withSpin';
 import SideMenu from './SideMenu';
 import LoginGate from './LoginGate';
 import { RouteResolver } from './routes';
 
 import * as C from './constants';
 import * as store from './store';
+import * as actions from './store/actions';
 
 import { History } from 'history';
 
@@ -85,6 +88,7 @@ const AppBarWitHistory = withRouter(
       toggleDrawerIcon: any,
       history?: History;
       staticContext?: any;
+      iconElementRight: any,
     };
 
     constructor(props: any) {
@@ -125,6 +129,8 @@ const AppBarWitHistory = withRouter(
   }
 );
 
+const IconRefreshWithSpin = withSpin(NavigationRefresh);
+
 class App extends React.PureComponent {
   state: {
     drawerOpen: boolean,
@@ -132,6 +138,8 @@ class App extends React.PureComponent {
 
   props: {
     credentials: store.CredentialsType;
+    entries: store.EntriesType;
+    fetchCount: number;
   };
 
   constructor(props: any) {
@@ -140,6 +148,7 @@ class App extends React.PureComponent {
 
     this.toggleDrawer = this.toggleDrawer.bind(this);
     this.closeDrawer = this.closeDrawer.bind(this);
+    this.refresh = this.refresh.bind(this);
   }
 
   toggleDrawer() {
@@ -150,9 +159,15 @@ class App extends React.PureComponent {
     this.setState({drawerOpen: false});
   }
 
+  refresh() {
+    store.store.dispatch(actions.fetchAll(this.props.credentials.value!, this.props.entries));
+  }
+
   render() {
     const credentials = (this.props.credentials) ? this.props.credentials.value : null;
 
+    const fetching = this.props.fetchCount > 0;
+
     return (
       <MuiThemeProvider muiTheme={muiTheme}>
         <BrowserRouter>
@@ -160,6 +175,10 @@ class App extends React.PureComponent {
           <AppBarWitHistory
             title={C.appName}
             toggleDrawerIcon={<IconButton onClick={this.toggleDrawer}><NavigationMenu /></IconButton>}
+            iconElementRight={
+              <IconButton disabled={!credentials || fetching} onClick={this.refresh}>
+                <IconRefreshWithSpin spin={fetching} />
+              </IconButton>}
 
           />
           <Drawer
@@ -203,6 +222,8 @@ const credentialsSelector = createSelector(
 const mapStateToProps = (state: store.StoreState) => {
   return {
     credentials: credentialsSelector(state),
+    entries: state.cache.entries,
+    fetchCount: state.fetchCount,
   };
 };
 
diff --git a/src/widgets/withSpin.css b/src/widgets/withSpin.css
new file mode 100644
index 0000000..2bbf300
--- /dev/null
+++ b/src/widgets/withSpin.css
@@ -0,0 +1,15 @@
+.withSpin-spin {
+  animation: withSpin-spin 2s infinite linear;
+}
+
+@keyframes withSpin-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+
diff --git a/src/widgets/withSpin.tsx b/src/widgets/withSpin.tsx
new file mode 100644
index 0000000..b89b4bd
--- /dev/null
+++ b/src/widgets/withSpin.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { pure } from 'recompose';
+
+import './withSpin.css';
+
+const withSpin = (Component: any) => {
+  return pure((_props: any) => {
+    const {
+      spin,
+      ...props,
+    } = _props;
+    return (
+      <Component {...props} className={spin ? 'withSpin-spin' : ''} />
+    );
+  });
+};
+
+export default withSpin;