client/src/components/Navbar.js
changeset 129 d48946d164c6
parent 107 e6f85e26b08c
child 130 78246db1cbac
--- a/client/src/components/Navbar.js	Tue Jul 25 19:11:26 2017 +0200
+++ b/client/src/components/Navbar.js	Fri Jul 28 19:40:35 2017 +0200
@@ -6,6 +6,8 @@
 // import logo from './logo.svg';
 import { Navbar, Nav, NavItem, NavDropdown, MenuItem, Modal, Button } from 'react-bootstrap';
 import * as authActions from '../actions/authActions';
+import { forceSync } from '../actions/networkActions';
+import { ActionEnum } from '../constants';
 
 const LoginNav = ({isAuthenticated, currentUser, history, authActions, onLogout}) => {
 
@@ -32,10 +34,19 @@
   );
 }
 
-const Online = ({ offline }) => {
+const Online = ({ online }) => {
   return (
     <NavItem>
-      <span className="material-icons" style={{ color: offline.online ? '#2ECC71' : '#E74C3C' }}>signal_wifi_4_bar</span>
+      <span className="material-icons" style={{ color: online ? '#2ECC71' : '#E74C3C' }}>signal_wifi_4_bar</span>
+    </NavItem>
+  )
+}
+
+const SyncButton = ({ onSyncClick, isSynchronizing }) => {
+  return (
+    <NavItem onClick={onSyncClick}>
+      Sync
+      {isSynchronizing && <span className="material-icons">&#xE627;</span>}
     </NavItem>
   )
 }
@@ -55,14 +66,14 @@
     this.props.history.push('/');
   }
 
-  isOutboxEmpty = () => {
-    return this.props.offline.outbox.length === 0;
+  isSynchronized = () => {
+    return this.props.isSynchronized;
   }
 
   onClickLogout = (e) => {
     e.preventDefault();
-    const isOutboxEmpty = this.isOutboxEmpty();
-    if (isOutboxEmpty) {
+    const isSynchronized = this.isSynchronized();
+    if (isSynchronized) {
       this.logout();
     } else {
       this.setState({ showModal: true })
@@ -70,9 +81,9 @@
   }
 
   confirmLogout = () => {
-    const isOutboxEmpty = this.isOutboxEmpty();
-    if (!isOutboxEmpty) {
-      this.props.authActions.purgeOutbox();
+    const isSynchronized = this.isSynchronized();
+    if (!isSynchronized) {
+      this.props.authActions.resetAll();
     }
     this.logout();
     this.closeModal();
@@ -88,6 +99,11 @@
     this.props.history.push('/sessions');
   }
 
+  onSyncClick = (e) => {
+    e.preventDefault();
+    this.props.networkActions.forceSync();
+  }
+
   render() {
     return (
       <Navbar fluid inverse fixedTop>
@@ -102,6 +118,7 @@
             <NavItem onClick={this.onClickSessions} href="/sessions">Sessions</NavItem>
           </Nav>
           <Nav pullRight>
+            <SyncButton onSyncClick={this.onSyncClick} isSynchronizing={this.props.isSynchronizing}/>
             <Online {...this.props} />
             <LoginNav {...this.props} onLogout={this.onClickLogout} />
           </Nav>
@@ -130,15 +147,19 @@
 
 function mapStateToProps(state, props) {
   return {
-    isAuthenticated: state['isAuthenticated'],
-    currentUser: state['currentUser'],
-    offline: state['offline']
+    isAuthenticated: state.getIn(['authStatus', 'isAuthenticated']),
+    currentUser: state.getIn(['authStatus', 'currentUser']),
+    online: state.getIn(['status', 'online']),
+    isSynchronizing: state.getIn(['status', 'isSynchronizing']),
+    isSynchronized: state.get('notes').every((n) => n.get('action')===ActionEnum.NONE) &&
+      state.get('sessions').every((n) => n.get('action')===ActionEnum.NONE)
   };
 }
 
 function mapDispatchToProps(dispatch) {
   return {
     authActions: bindActionCreators(authActions, dispatch),
+    networkActions: bindActionCreators({ forceSync }, dispatch)
   }
 }