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;