--- 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"></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)
}
}