move offline network view to react
Audric Ackermann
5 years ago
parent
f9ab90fb71
commit
977569cde0
@ -1,133 +0,0 @@
|
|||||||
/* global Whisper, extension, Backbone, moment, i18n */
|
|
||||||
|
|
||||||
// eslint-disable-next-line func-names
|
|
||||||
(function() {
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
window.Whisper = window.Whisper || {};
|
|
||||||
|
|
||||||
const DISCONNECTED_DELAY = 30000;
|
|
||||||
|
|
||||||
Whisper.NetworkStatusView = Whisper.View.extend({
|
|
||||||
className: 'network-status',
|
|
||||||
templateName: 'networkStatus',
|
|
||||||
initialize() {
|
|
||||||
this.$el.hide();
|
|
||||||
|
|
||||||
this.renderIntervalHandle = setInterval(this.update.bind(this), 5000);
|
|
||||||
extension.windows.onClosed(() => {
|
|
||||||
clearInterval(this.renderIntervalHandle);
|
|
||||||
});
|
|
||||||
|
|
||||||
setTimeout(this.finishConnectingGracePeriod.bind(this), 5000);
|
|
||||||
|
|
||||||
this.withinConnectingGracePeriod = true;
|
|
||||||
this.setSocketReconnectInterval(null);
|
|
||||||
|
|
||||||
window.addEventListener('online', this.update.bind(this));
|
|
||||||
window.addEventListener('offline', this.update.bind(this));
|
|
||||||
|
|
||||||
this.model = new Backbone.Model();
|
|
||||||
this.listenTo(this.model, 'change', this.onChange);
|
|
||||||
this.connectedTimer = null;
|
|
||||||
},
|
|
||||||
onReconnectTimer() {
|
|
||||||
this.setSocketReconnectInterval(60000);
|
|
||||||
},
|
|
||||||
finishConnectingGracePeriod() {
|
|
||||||
this.withinConnectingGracePeriod = false;
|
|
||||||
},
|
|
||||||
setSocketReconnectInterval(millis) {
|
|
||||||
this.socketReconnectWaitDuration = moment.duration(millis);
|
|
||||||
},
|
|
||||||
navigatorOnLine() {
|
|
||||||
return navigator.onLine;
|
|
||||||
},
|
|
||||||
getSocketStatus() {
|
|
||||||
return window.getSocketStatus();
|
|
||||||
},
|
|
||||||
getNetworkStatus(shortCircuit = false) {
|
|
||||||
let message = '';
|
|
||||||
let instructions = '';
|
|
||||||
let hasInterruption = false;
|
|
||||||
|
|
||||||
const socketStatus = this.getSocketStatus();
|
|
||||||
switch (socketStatus) {
|
|
||||||
case WebSocket.CONNECTING:
|
|
||||||
message = i18n('connecting');
|
|
||||||
this.setSocketReconnectInterval(null);
|
|
||||||
window.clearTimeout(this.connectedTimer);
|
|
||||||
this.connectedTimer = null;
|
|
||||||
break;
|
|
||||||
case WebSocket.OPEN:
|
|
||||||
this.setSocketReconnectInterval(null);
|
|
||||||
window.clearTimeout(this.connectedTimer);
|
|
||||||
this.connectedTimer = null;
|
|
||||||
break;
|
|
||||||
case WebSocket.CLOSED:
|
|
||||||
// Intentional fallthrough
|
|
||||||
case WebSocket.CLOSING:
|
|
||||||
// Intentional fallthrough
|
|
||||||
default: {
|
|
||||||
const markOffline = () => {
|
|
||||||
message = i18n('offline');
|
|
||||||
instructions = i18n('checkNetworkConnection');
|
|
||||||
hasInterruption = true;
|
|
||||||
};
|
|
||||||
if (shortCircuit) {
|
|
||||||
// Used to skip the timer for testing
|
|
||||||
markOffline();
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
if (!this.connectedTimer) {
|
|
||||||
// Mark offline if disconnected for 30 seconds
|
|
||||||
this.connectedTimer = window.setTimeout(() => {
|
|
||||||
markOffline();
|
|
||||||
}, DISCONNECTED_DELAY);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (
|
|
||||||
socketStatus === WebSocket.CONNECTING &&
|
|
||||||
!this.withinConnectingGracePeriod
|
|
||||||
) {
|
|
||||||
hasInterruption = true;
|
|
||||||
}
|
|
||||||
if (this.socketReconnectWaitDuration.asSeconds() > 0) {
|
|
||||||
instructions = i18n('attemptingReconnection', [
|
|
||||||
this.socketReconnectWaitDuration.asSeconds(),
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
if (!this.navigatorOnLine()) {
|
|
||||||
hasInterruption = true;
|
|
||||||
message = i18n('offline');
|
|
||||||
instructions = i18n('checkNetworkConnection');
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
message,
|
|
||||||
instructions,
|
|
||||||
hasInterruption,
|
|
||||||
action: null,
|
|
||||||
buttonClass: null,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
update() {
|
|
||||||
const status = this.getNetworkStatus();
|
|
||||||
this.model.set(status);
|
|
||||||
},
|
|
||||||
render_attributes() {
|
|
||||||
return this.model.attributes;
|
|
||||||
},
|
|
||||||
onChange() {
|
|
||||||
this.render();
|
|
||||||
if (this.model.attributes.hasInterruption) {
|
|
||||||
this.$el.slideDown();
|
|
||||||
} else {
|
|
||||||
this.$el.hide();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
@ -1,160 +0,0 @@
|
|||||||
/* global _, $, Whisper */
|
|
||||||
|
|
||||||
describe('NetworkStatusView', () => {
|
|
||||||
describe('getNetworkStatus', () => {
|
|
||||||
let networkStatusView;
|
|
||||||
let socketStatus = WebSocket.OPEN;
|
|
||||||
|
|
||||||
let oldGetSocketStatus;
|
|
||||||
|
|
||||||
/* BEGIN stubbing globals */
|
|
||||||
before(() => {
|
|
||||||
oldGetSocketStatus = window.getSocketStatus;
|
|
||||||
window.getSocketStatus = () => socketStatus;
|
|
||||||
});
|
|
||||||
|
|
||||||
after(() => {
|
|
||||||
window.getSocketStatus = oldGetSocketStatus;
|
|
||||||
|
|
||||||
// It turns out that continued calls to window.getSocketStatus happen
|
|
||||||
// because we host NetworkStatusView in three mock interfaces, and the view
|
|
||||||
// checks every N seconds. That results in infinite errors unless there is
|
|
||||||
// something to call.
|
|
||||||
window.getSocketStatus = () => WebSocket.OPEN;
|
|
||||||
});
|
|
||||||
/* END stubbing globals */
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
networkStatusView = new Whisper.NetworkStatusView();
|
|
||||||
$('.network-status-container').append(networkStatusView.el);
|
|
||||||
});
|
|
||||||
afterEach(() => {
|
|
||||||
// prevents huge number of errors on console after running tests
|
|
||||||
clearInterval(networkStatusView.renderIntervalHandle);
|
|
||||||
networkStatusView = null;
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('initialization', () => {
|
|
||||||
it('should have an empty interval', () => {
|
|
||||||
assert.equal(
|
|
||||||
networkStatusView.socketReconnectWaitDuration.asSeconds(),
|
|
||||||
0
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
describe('network status with no connection', () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
networkStatusView.navigatorOnLine = () => false;
|
|
||||||
});
|
|
||||||
it('should be interrupted', () => {
|
|
||||||
networkStatusView.update();
|
|
||||||
const status = networkStatusView.getNetworkStatus();
|
|
||||||
assert(status.hasInterruption);
|
|
||||||
assert.equal(status.instructions, 'Check your network connection.');
|
|
||||||
});
|
|
||||||
it('should display an offline message', () => {
|
|
||||||
networkStatusView.update();
|
|
||||||
assert.match(networkStatusView.$el.text(), /Offline/);
|
|
||||||
});
|
|
||||||
it('should override socket status', () => {
|
|
||||||
_([
|
|
||||||
WebSocket.CONNECTING,
|
|
||||||
WebSocket.OPEN,
|
|
||||||
WebSocket.CLOSING,
|
|
||||||
WebSocket.CLOSED,
|
|
||||||
]).forEach(socketStatusVal => {
|
|
||||||
socketStatus = socketStatusVal;
|
|
||||||
networkStatusView.update();
|
|
||||||
assert.match(networkStatusView.$el.text(), /Offline/);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
it('should override registration status', () => {
|
|
||||||
Whisper.Registration.remove();
|
|
||||||
networkStatusView.update();
|
|
||||||
assert.match(networkStatusView.$el.text(), /Offline/);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
describe('network status when registration is done', () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
networkStatusView.navigatorOnLine = () => true;
|
|
||||||
Whisper.Registration.markDone();
|
|
||||||
networkStatusView.update();
|
|
||||||
});
|
|
||||||
it('should not display an unlinked message', () => {
|
|
||||||
networkStatusView.update();
|
|
||||||
assert.notMatch(networkStatusView.$el.text(), /Relink/);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
describe('network status when socket is connecting', () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
Whisper.Registration.markDone();
|
|
||||||
socketStatus = WebSocket.CONNECTING;
|
|
||||||
networkStatusView.update();
|
|
||||||
});
|
|
||||||
it('it should display a connecting string if connecting and not in the connecting grace period', () => {
|
|
||||||
networkStatusView.withinConnectingGracePeriod = false;
|
|
||||||
networkStatusView.getNetworkStatus();
|
|
||||||
|
|
||||||
assert.match(networkStatusView.$el.text(), /Connecting/);
|
|
||||||
});
|
|
||||||
it('it should not be interrupted if in connecting grace period', () => {
|
|
||||||
assert(networkStatusView.withinConnectingGracePeriod);
|
|
||||||
const status = networkStatusView.getNetworkStatus();
|
|
||||||
|
|
||||||
assert.match(networkStatusView.$el.text(), /Connecting/);
|
|
||||||
assert(!status.hasInterruption);
|
|
||||||
});
|
|
||||||
it('it should be interrupted if connecting grace period is over', () => {
|
|
||||||
networkStatusView.withinConnectingGracePeriod = false;
|
|
||||||
const status = networkStatusView.getNetworkStatus();
|
|
||||||
|
|
||||||
assert(status.hasInterruption);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
describe('network status when socket is open', () => {
|
|
||||||
before(() => {
|
|
||||||
socketStatus = WebSocket.OPEN;
|
|
||||||
});
|
|
||||||
it('should not be interrupted', () => {
|
|
||||||
const status = networkStatusView.getNetworkStatus();
|
|
||||||
assert(!status.hasInterruption);
|
|
||||||
assert.match(
|
|
||||||
networkStatusView.$el
|
|
||||||
.find('.network-status-message')
|
|
||||||
.text()
|
|
||||||
.trim(),
|
|
||||||
/^$/
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
describe('network status when socket is closed or closing', () => {
|
|
||||||
_([WebSocket.CLOSED, WebSocket.CLOSING]).forEach(socketStatusVal => {
|
|
||||||
it('should be interrupted', () => {
|
|
||||||
socketStatus = socketStatusVal;
|
|
||||||
networkStatusView.update();
|
|
||||||
const shortCircuit = true;
|
|
||||||
const status = networkStatusView.getNetworkStatus(shortCircuit);
|
|
||||||
assert(status.hasInterruption);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
describe('the socket reconnect interval', () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
socketStatus = WebSocket.CLOSED;
|
|
||||||
networkStatusView.setSocketReconnectInterval(61000);
|
|
||||||
networkStatusView.update();
|
|
||||||
});
|
|
||||||
it('should format the message based on the socketReconnectWaitDuration property', () => {
|
|
||||||
assert.equal(
|
|
||||||
networkStatusView.socketReconnectWaitDuration.asSeconds(),
|
|
||||||
61
|
|
||||||
);
|
|
||||||
assert.match(
|
|
||||||
networkStatusView.$('.network-status-message:last').text(),
|
|
||||||
/Attempting reconnect/
|
|
||||||
);
|
|
||||||
});
|
|
||||||
it('should be reset by changing the socketStatus to CONNECTING', () => {});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import { useNetwork } from './useNetwork';
|
||||||
|
|
||||||
|
type ContainerProps = {
|
||||||
|
show: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const OfflineContainer = styled.div<ContainerProps>`
|
||||||
|
background: ${props => props.theme.colors.accent};
|
||||||
|
color: ${props => props.theme.colors.textColor};
|
||||||
|
padding: ${props => (props.show ? props.theme.common.margins.sm : '0px')};
|
||||||
|
margin: ${props => (props.show ? props.theme.common.margins.xs : '0px')};
|
||||||
|
height: ${props => (props.show ? 'auto' : '0px')};
|
||||||
|
overflow: hidden;
|
||||||
|
transition: ${props => props.theme.common.animations.defaultDuration};
|
||||||
|
`;
|
||||||
|
|
||||||
|
const OfflineTitle = styled.h3`
|
||||||
|
padding-top: 0px;
|
||||||
|
margin-top: 0px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const OfflineMessage = styled.div``;
|
||||||
|
|
||||||
|
export const SessionOffline = () => {
|
||||||
|
const isOnline = useNetwork();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<OfflineContainer show={!isOnline}>
|
||||||
|
<OfflineTitle>{window.i18n('offline')}</OfflineTitle>
|
||||||
|
<OfflineMessage>{window.i18n('checkNetworkConnection')}</OfflineMessage>
|
||||||
|
</OfflineContainer>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
export function useNetwork() {
|
||||||
|
const [isOnline, setNetwork] = useState(window.navigator.onLine);
|
||||||
|
const updateNetwork = () => {
|
||||||
|
setNetwork(window.navigator.onLine);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
window.addEventListener('offline', updateNetwork);
|
||||||
|
window.addEventListener('online', updateNetwork);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('offline', updateNetwork);
|
||||||
|
window.removeEventListener('online', updateNetwork);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
return isOnline;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue