diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 2b0b462b4..a0d0d9c9e 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -70,6 +70,7 @@
"CALCULATING_YOUR_POS": "Determining your position",
"TRACKING_YOUR_POS": "Tracking your position",
"CONN_LOST": "Connection lost! Reconnecting",
+ "CONN_LOST_IDLE": "Connection lost!",
"AUTHENTICATING": "Authenticating",
"REFUSE": "Refuse",
"ACCEPT": "Accept",
diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
index 882b887f9..086fda245 100644
--- a/src/i18n/locales/es.json
+++ b/src/i18n/locales/es.json
@@ -65,6 +65,7 @@
"CALCULATING_YOUR_POS": "Cálculando tu posición",
"TRACKING_YOUR_POS": "Seguimiento de su posición",
"CONN_LOST": "Conexión perdida, reconexión",
+ "CONN_LOST_IDLE": "Conexión perdida",
"AUTHENTICATING": "Autenticando",
"REFUSE": "Rechazar",
"ACCEPT": "Acceptar",
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index cb2a65213..baf60acc3 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -67,6 +67,7 @@
"CALCULATING_YOUR_POS": "Calcul de votre position",
"TRACKING_YOUR_POS": "Suivi de votre position",
"CONN_LOST": "Connexion perdue, reconnexion",
+ "CONN_LOST_IDLE": "Connexion perdue",
"AUTHENTICATING": "Authentification…",
"REFUSE": "Refuser",
"ACCEPT": "Accepter",
diff --git a/src/navigation/restaurant/Dashboard.js b/src/navigation/restaurant/Dashboard.js
index 81e8fd97d..014020351 100644
--- a/src/navigation/restaurant/Dashboard.js
+++ b/src/navigation/restaurant/Dashboard.js
@@ -46,7 +46,6 @@ export default function DashboardPage({ navigation, route }) {
state => state.app.isInternetReachable,
);
const isLoading = useSelector(selectIsLoading);
- const isCentrifugoConnected = useSelector(selectIsCentrifugoConnected);
const { navigate } = navigation;
@@ -171,7 +170,7 @@ export default function DashboardPage({ navigation, route }) {
}
/>
)}
-
+
(
-
-
- {connected ? t('WAITING_FOR_ORDER') : t('CONN_LOST')}
-
-
-
-);
+const WebSocketIndicator = () => {
+ const connecting = useSelector(selectIsCentrifugoConnecting);
+ const connected = useSelector(selectIsCentrifugoConnected);
+
+ const dispatch = useDispatch();
+
+ const { t } = useTranslation();
+
+ return (
+
+
+ {connected
+ ? t('WAITING_FOR_ORDER')
+ : connecting
+ ? t('CONN_LOST')
+ : t('CONN_LOST_IDLE')}
+
+ {connected ? (
+
+ ) : null}
+ {!connected && !connecting ? (
+
+ ) : null}
+
+ );
+};
const styles = StyleSheet.create({
container: {
@@ -41,4 +71,4 @@ const styles = StyleSheet.create({
},
});
-export default withTranslation()(WebSocketIndicator);
+export default WebSocketIndicator;
diff --git a/src/redux/App/reducers.js b/src/redux/App/reducers.js
index 62f572afd..5b65b374a 100644
--- a/src/redux/App/reducers.js
+++ b/src/redux/App/reducers.js
@@ -56,6 +56,7 @@ import {
import { EVENT as EVENT_ORDER } from '../../domain/Order';
import { EVENT as EVENT_TASK_COLLECTION } from '../../domain/TaskCollection';
+import { connect } from '../middlewares/CentrifugoMiddleware/actions';
const initialState = {
customBuild: !!Config.DEFAULT_SERVER,
@@ -93,6 +94,7 @@ const initialState = {
loginByEmailErrors: {},
isBackgroundGeolocationEnabled: false,
hasDisclosedBackgroundPermission: false,
+ isCentrifugoConnecting: false,
isCentrifugoConnected: false,
modal: {
show: false,
@@ -168,15 +170,28 @@ export default (state = initialState, action = {}) => {
loading: action.payload,
};
+ case connect.type: {
+ if (state.isCentrifugoConnected) {
+ return state;
+ }
+
+ return {
+ ...state,
+ isCentrifugoConnecting: true,
+ };
+ }
+
case connected.type:
return {
...state,
+ isCentrifugoConnecting: false,
isCentrifugoConnected: true,
};
case disconnected.type:
return {
...state,
+ isCentrifugoConnecting: false,
isCentrifugoConnected: false,
};
diff --git a/src/redux/App/selectors.js b/src/redux/App/selectors.js
index 70b5c02d8..1e747493a 100644
--- a/src/redux/App/selectors.js
+++ b/src/redux/App/selectors.js
@@ -72,6 +72,9 @@ export const selectIsLoading = createSelector(
},
);
+export const selectIsCentrifugoConnecting = state =>
+ state.app.isCentrifugoConnecting;
+
export const selectIsCentrifugoConnected = state =>
state.app.isCentrifugoConnected;