added: a button to manually re-connect to centrifugo

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",

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",

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",

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 }) {
           }
         />
       )}
-      <WebSocketIndicator connected={isCentrifugoConnected} />
+      <WebSocketIndicator />
       <OrdersToPrintQueue />
       <DatePickerHeader
         date={date}

src/navigation/restaurant/components/WebSocketIndicator.js

@@ -1,20 +1,50 @@
-import { Text } from 'native-base';
+import { Button, Text } from 'native-base';
 import React from 'react';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  selectIsCentrifugoConnected,
+  selectIsCentrifugoConnecting,
+} from '../../../redux/App/selectors';
+import { connect } from '../../../redux/middlewares/CentrifugoMiddleware/actions';
 
-const WebSocketIndicator = ({ connected, t }) => (
-  <View
-    style={[
-      styles.container,
-      connected ? styles.connected : styles.disconnected,
-    ]}>
-    <Text style={styles.text}>
-      {connected ? t('WAITING_FOR_ORDER') : t('CONN_LOST')}
-    </Text>
-    <ActivityIndicator size="small" color="white" animating={connected} />
-  </View>
-);
+const WebSocketIndicator = () => {
+  const connecting = useSelector(selectIsCentrifugoConnecting);
+  const connected = useSelector(selectIsCentrifugoConnected);
+
+  const dispatch = useDispatch();
+
+  const { t } = useTranslation();
+
+  return (
+    <View
+      style={[
+        styles.container,
+        connected ? styles.connected : styles.disconnected,
+      ]}>
+      <Text style={styles.text}>
+        {connected
+          ? t('WAITING_FOR_ORDER')
+          : connecting
+          ? t('CONN_LOST')
+          : t('CONN_LOST_IDLE')}
+      </Text>
+      {connected ? (
+        <ActivityIndicator size="small" color="white" animating={true} />
+      ) : null}
+      {!connected && !connecting ? (
+        <Button
+          variant="link"
+          onPress={() => {
+            dispatch(connect());
+          }}>
+          <Text style={styles.text}>{t('RETRY')}</Text>
+        </Button>
+      ) : null}
+    </View>
+  );
+};
 
 const styles = StyleSheet.create({
   container: {
@@ -41,4 +71,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default withTranslation()(WebSocketIndicator);
+export default WebSocketIndicator;

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,
       };
 

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;