Merge pull request sap-labs-france#569 from sap-labs-france/hotfix

Fixed Android back button behavior
kiwigrid · Dec 2, 2021 · e89bbde · e89bbde
2 parents e1cce98 + be19a17
commit e89bbde
Show file tree

Hide file tree

Showing 26 changed files with 137 additions and 191 deletions.
diff --git a/android/app/src/main/res/values/colors.xml b/android/app/src/main/res/values/colors.xml
@@ -2,6 +2,7 @@
   <color name="primary_dark">#00376C</color>
   <color name="primary">#0a6ed1</color>
   <color name="status_bar_color">#00376C</color>
+  <color name="modalBackground">#262626</color>
   <color name="navigationBarBackground">#E7E7E7</color>
   <color name="white">#FFF</color>
 </resources>
diff --git a/src/App.tsx b/src/App.tsx
@@ -9,7 +9,6 @@ import { StatusBar } from 'react-native';
 import { RootSiblingParent } from 'react-native-root-siblings';
 import { scale } from 'react-native-size-matters';
 
-import computeStyleSheet from './AppStyles';
 import DeepLinkingManager from './deeplinking/DeepLinkingManager';
 import I18nManager from './I18n/I18nManager';
 import LocationManager from './location/LocationManager';
@@ -171,7 +170,9 @@ function createChargingStationDetailsTabsNavigator(props: BaseProps) {
       inactiveColor={commonColor.topTabBarActiveTextColor}
       barStyle={barStyle}
       labeled
-      backBehavior="none">
+      shifting={true}
+      backBehavior="history"
+    >
       <ChargingStationDetailsTabs.Screen
         name="ChargingStationActions"
         component={ChargingStationActions}
@@ -213,7 +214,9 @@ function createChargingStationConnectorDetailsTabsNavigator(props: BaseProps) {
       inactiveColor={commonColor.topTabBarActiveTextColor}
       barStyle={barStyle}
       labeled
-      shifting={true}>
+      shifting={true}
+      backBehavior="history"
+    >
       <ChargingStationConnectorDetailsTabs.Screen
         name="ChargingStationConnectorDetails"
         component={ChargingStationConnectorDetails}
@@ -247,7 +250,8 @@ function createTransactionDetailsTabsNavigator(props: BaseProps) {
       inactiveColor={commonColor.topTabBarTextColor}
       barStyle={barStyle}
       labeled
-      backBehavior="history">
+      backBehavior="history"
+    >
       <TransactionDetailsTabs.Screen
         name="TransactionDetails"
         component={TransactionDetails}
@@ -263,7 +267,7 @@ function createTransactionDetailsTabsNavigator(props: BaseProps) {
         initialParams={props?.route?.params?.params}
         options={{
           title: I18n.t('details.graph'),
-          tabBarIcon: (iconProps) => createTabBarIcon(iconProps, 'AntDesign', 'linechart')
+          tabBarIcon: (iconProps) => createTabBarIcon(iconProps, 'MaterialCommunityIcons', 'chart-line')
         }}
       />
     </TransactionDetailsTabs.Navigator>
@@ -273,11 +277,31 @@ function createTransactionDetailsTabsNavigator(props: BaseProps) {
 function createSitesNavigator(props: BaseProps) {
   return (
     <SitesStack.Navigator initialRouteName="Sites" screenOptions={{ headerShown: false }}>
-      <SitesStack.Screen name="Sites" component={Sites} initialParams={props?.route?.params?.params} />
-      <SitesStack.Screen name="SiteAreas" component={SiteAreas} initialParams={props?.route?.params?.params} />
-      <SitesStack.Screen name="ChargingStations" component={ChargingStations} initialParams={props?.route?.params?.params} />
       <SitesStack.Screen
-        name="ChargingStationDetailsTabs"
+        name="Sites"
+        component={Sites}
+        initialParams={props?.route?.params?.params}
+      />
+      <SitesStack.Screen
+        name="SiteAreas"
+        component={SiteAreas}
+        initialParams={props?.route?.params?.params}
+      />
+      <SitesStack.Screen
+        name="ChargingStations"
+        component={ChargingStations}
+        initialParams={props?.route?.params?.params}
+      />
+      <SitesStack.Screen
+        name="AddCar" component={AddCar}
+        initialParams={props?.route?.params?.params}
+      />
+      <SitesStack.Screen
+        name="AddPaymentMethod"
+        component={StripePaymentMethodCreationForm}
+        initialParams={props?.route?.params?.params}
+      />
+      <SitesStack.Screen name="ChargingStationDetailsTabs"
         component={createChargingStationDetailsTabsNavigator}
         initialParams={props?.route?.params?.params}
       />
@@ -291,15 +315,23 @@ function createSitesNavigator(props: BaseProps) {
         component={createTransactionDetailsTabsNavigator}
         initialParams={props?.route?.params?.params}
       />
-      <SitesStack.Screen name="ReportError" component={ReportError} initialParams={props?.route?.params?.params} />
+      <SitesStack.Screen
+        name="ReportError"
+        component={ReportError}
+        initialParams={props?.route?.params?.params}
+      />
     </SitesStack.Navigator>
   );
 }
 
 function createChargingStationsNavigator(props: BaseProps) {
   return (
     <ChargingStationsStack.Navigator initialRouteName="ChargingStations" screenOptions={{ headerShown: false, gestureEnabled: false }}>
-      <ChargingStationsStack.Screen name="ChargingStations" component={ChargingStations} initialParams={props?.route?.params?.params} />
+      <ChargingStationsStack.Screen
+        name="ChargingStations"
+        component={ChargingStations}
+        initialParams={props?.route?.params?.params}
+      />
       <ChargingStationsStack.Screen
         name="ChargingStationDetailsTabs"
         component={createChargingStationDetailsTabsNavigator}
@@ -316,13 +348,17 @@ function createChargingStationsNavigator(props: BaseProps) {
         component={StripePaymentMethodCreationForm}
         initialParams={props?.route?.params?.params}
       />
-      <AppDrawer.Screen name="QRCodeScanner" component={ChargingStationQrCode} initialParams={props?.route?.params?.params} />
+      <ChargingStationsStack.Screen name="QRCodeScanner" component={ChargingStationQrCode} initialParams={props?.route?.params?.params} />
       <ChargingStationsStack.Screen
         name="TransactionDetailsTabs"
         component={createTransactionDetailsTabsNavigator}
         initialParams={props?.route?.params?.params}
       />
-      <ChargingStationsStack.Screen name="ReportError" component={ReportError} initialParams={props?.route?.params?.params} />
+      <ChargingStationsStack.Screen
+        name="ReportError"
+        component={ReportError}
+        initialParams={props?.route?.params?.params}
+      />
     </ChargingStationsStack.Navigator>
   );
 }
@@ -352,11 +388,6 @@ function createTransactionInProgressNavigator(props: BaseProps) {
         component={TransactionsInProgress}
         initialParams={props?.route?.params?.params}
       />
-      <TransactionInProgressStack.Screen
-        name="ChargingStationDetailsTabs"
-        component={createChargingStationDetailsTabsNavigator}
-        initialParams={props?.route?.params?.params}
-      />
       <TransactionInProgressStack.Screen
         name="ChargingStationConnectorDetailsTabs"
         component={createChargingStationConnectorDetailsTabsNavigator}
@@ -402,7 +433,11 @@ function createInvoicesNavigator(props: BaseProps) {
 function createPaymentMethodsNavigator(props: BaseProps) {
   return (
     <PaymentMethodsStack.Navigator initialRouteName="PaymentMethods" screenOptions={{ headerShown: false }}>
-      <PaymentMethodsStack.Screen name="PaymentMethods" component={PaymentMethods} initialParams={props?.route?.params?.params} />
+      <PaymentMethodsStack.Screen
+        name="PaymentMethods"
+        component={PaymentMethods}
+        initialParams={props?.route?.params?.params}
+      />
       <PaymentMethodsStack.Screen
         name="StripePaymentMethodCreationForm"
         component={StripePaymentMethodCreationForm}
@@ -413,7 +448,6 @@ function createPaymentMethodsNavigator(props: BaseProps) {
 }
 
 function createAppDrawerNavigator(props: BaseProps) {
-  const appStyles = computeStyleSheet();
   return (
     <AppDrawer.Navigator
       initialRouteName="ChargingStationsNavigator"
@@ -427,34 +461,18 @@ function createAppDrawerNavigator(props: BaseProps) {
       backBehavior={'history'}
       drawerPosition="left"
       drawerContent={(drawerProps) => <Sidebar {...drawerProps} />}>
-      <AppDrawer.Screen
-        name="ChargingStationsNavigator"
-        component={createChargingStationsNavigator}
-        initialParams={props?.route?.params?.params}
-      />
+      <AppDrawer.Screen name="ChargingStationsNavigator" component={createChargingStationsNavigator} initialParams={props?.route?.params?.params}/>
       <AppDrawer.Screen name="QRCodeScanner" component={ChargingStationQrCode} initialParams={props?.route?.params?.params} />
       <AppDrawer.Screen name="SitesNavigator" component={createSitesNavigator} initialParams={props?.route?.params?.params} />
       <AppDrawer.Screen name="StatisticsNavigator" component={createStatsNavigator} initialParams={props?.route?.params?.params} />
       <AppDrawer.Screen name="ReportErrorNavigator" component={createReportErrorNavigator} initialParams={props?.route?.params?.params} />
-      <AppDrawer.Screen
-        name="TransactionHistoryNavigator"
-        component={createTransactionHistoryNavigator}
-        initialParams={props?.route?.params?.params}
-      />
-      <AppDrawer.Screen
-        name="TransactionInProgressNavigator"
-        component={createTransactionInProgressNavigator}
-        initialParams={props?.route?.params?.params}
-      />
+      <AppDrawer.Screen name="TransactionHistoryNavigator" component={createTransactionHistoryNavigator} initialParams={props?.route?.params?.params}/>
+      <AppDrawer.Screen name="TransactionInProgressNavigator" component={createTransactionInProgressNavigator} initialParams={props?.route?.params?.params}/>
       <AppDrawer.Screen name="UsersNavigator" component={createUsersNavigator} initialParams={props?.route?.params?.params} />
       <AppDrawer.Screen name="TagsNavigator" component={createTagsNavigator} initialParams={props?.route?.params?.params} />
       <AppDrawer.Screen name="CarsNavigator" component={createCarsNavigator} initialParams={props?.route?.params?.params} />
       <AppDrawer.Screen name="InvoicesNavigator" component={createInvoicesNavigator} initialParams={props?.route?.params?.params} />
-      <AppDrawer.Screen
-        name="PaymentMethodsNavigator"
-        component={createPaymentMethodsNavigator}
-        initialParams={props?.route?.params?.params}
-      />
+      <AppDrawer.Screen name="PaymentMethodsNavigator" component={createPaymentMethodsNavigator} initialParams={props?.route?.params?.params}/>
     </AppDrawer.Navigator>
   );
 }
@@ -559,7 +577,6 @@ export default class App extends React.Component<Props, State> {
 
   public render() {
     const { showAppUpdateDialog } = this.state;
-    const commonColors = Utils.getCurrentCommonColor();
     return (
       this.state.isNavigationStateLoaded && (
         <RootSiblingParent>

diff --git a/src/components/modal/ModalSelect.tsx b/src/components/modal/ModalSelect.tsx
@@ -69,6 +69,9 @@ export default class ModalSelect<T extends ListItem> extends React.Component<Pro
           swipeDirection={'down'}
           animationInTiming={1000}
           onSwipeComplete={() => this.setState({ isVisible: false })}
+          // Modal component registers the given method for hardwareBackPress event and unregisters it when the modal inner content unmounts.
+          // Inner component list also unsubscribe on unmount, allowing the last subscriber to choose back implementation.
+          // Here the last subscriber is the parent component
           onBackButtonPress={() => this.setState({ isVisible: false })}
           onBackdropPress={() => this.setState({ isVisible: false })}
           hideModalContentWhileAnimating={true}>

diff --git a/src/components/transaction/header/TransactionHeaderComponent.tsx b/src/components/transaction/header/TransactionHeaderComponent.tsx
@@ -2,7 +2,6 @@ import { Text, View } from 'native-base';
 import React from 'react';
 
 import I18nManager from '../../../I18n/I18nManager';
-import BaseScreen from '../../../screens/base-screen/BaseScreen';
 import BaseProps from '../../../types/BaseProps';
 import Transaction from '../../../types/Transaction';
 import Utils from '../../../utils/Utils';
@@ -16,7 +15,7 @@ export interface Props extends BaseProps {
 }
 
 interface State {}
-export default class TransactionHeaderComponent extends BaseScreen<Props, State> {
+export default class TransactionHeaderComponent extends React.Component<Props, State> {
   public state: State;
   public props: Props;
 

diff --git a/src/screens/auth/AuthHeader.tsx b/src/screens/auth/AuthHeader.tsx
@@ -5,7 +5,6 @@ import { Image, ImageStyle } from 'react-native';
 import DeviceInfo from 'react-native-device-info';
 
 import BaseProps from '../../types/BaseProps';
-import BaseScreen from '../base-screen/BaseScreen';
 import computeStyleSheet from './AuthStyles';
 
 export interface Props extends BaseProps {
@@ -15,15 +14,10 @@ export interface Props extends BaseProps {
 
 interface State {}
 
-export default class AuthHeader extends BaseScreen<Props, State> {
+export default class AuthHeader extends React.Component<Props, State>{
   public state: State;
   public props: Props;
 
-  // eslint-disable-next-line no-useless-constructor
-  public constructor(props: Props) {
-    super(props);
-  }
-
   public setState = (
     state: State | ((prevState: Readonly<State>, props: Readonly<Props>) => State | Pick<State, never>) | Pick<State, never>,
     callback?: () => void

diff --git a/src/screens/auth/eula/Eula.tsx b/src/screens/auth/eula/Eula.tsx
@@ -61,13 +61,6 @@ export default class Eula extends BaseScreen<Props, State> {
     }
   };
 
-  public onBack = () => {
-    // Back mobile button: Force navigation
-    this.props.navigation.navigate('Login');
-    // Do not bubble up
-    return true;
-  };
-
   public render() {
     const style = computeStyleSheet();
     const { eulaTextHtml, loading } = this.state;

diff --git a/src/screens/auth/login/Login.tsx b/src/screens/auth/login/Login.tsx
@@ -1,16 +1,7 @@
 import I18n from 'i18n-js';
 import { Button, CheckBox, Form, Icon, Item, Spinner, Text, View } from 'native-base';
 import React from 'react';
-import {
-  BackHandler,
-  Keyboard,
-  KeyboardAvoidingView,
-  NativeEventSubscription,
-  ScrollView,
-  TextInput,
-  TouchableOpacity
-} from 'react-native';
-
+import { BackHandler, Keyboard, KeyboardAvoidingView, ScrollView, TextInput, TouchableOpacity } from 'react-native';
 import DialogModal from '../../../components/modal/DialogModal';
 import ExitAppDialog from '../../../components/modal/exit-app/ExitAppDialog';
 import computeModalCommonStyle from '../../../components/modal/ModalCommonStyle';
@@ -53,7 +44,6 @@ export default class Login extends BaseScreen<Props, State> {
   public props: Props;
   private tenants: TenantConnection[] = [];
   private passwordInput: TextInput;
-  private backHandler: NativeEventSubscription;
   private formValidationDef = {
     tenantSubDomain: {
       presence: {
@@ -114,8 +104,6 @@ export default class Login extends BaseScreen<Props, State> {
 
   public async componentDidMount() {
     await super.componentDidMount();
-    // Bind the back button to the onBack method (Android)
-    this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.onBack.bind(this));
     let email = (this.state.email = '');
     let password = (this.state.password = '');
     let tenant: TenantConnection;
@@ -174,10 +162,8 @@ export default class Login extends BaseScreen<Props, State> {
 
   public async componentDidFocus() {
     super.componentDidFocus();
-    // Bind the back button to the onBack method (Android)
-    this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.onBack.bind(this));
     const tenantSubDomain = Utils.getParamFromNavigation(this.props.route, 'tenantSubDomain', this.state.tenantSubDomain);
-    // Check if current Tenant selection is still valid (handle delete tenant usee case)
+    // Check if current Tenant selection is still valid (handle delete tenant use case)
     if (tenantSubDomain) {
       // Get the current Tenant
       const tenant = await this.centralServerProvider.getTenant(tenantSubDomain.toString());
@@ -202,18 +188,6 @@ export default class Login extends BaseScreen<Props, State> {
     }
   }
 
-  public componentWillUnmount() {
-    super.componentWillUnmount();
-    // Unbind the back button and reset its default behavior (Android)
-    this.backHandler.remove();
-  }
-
-  public componentDidBlur() {
-    super.componentDidBlur();
-    // Unbind the back button and reset its default behavior (Android)
-    this.backHandler.remove();
-  }
-
   public async checkAutoLogin(tenant: TenantConnection, email: string, password: string) {
     // Check if user can be logged
     if (

diff --git a/src/screens/auth/reset-password/ResetPassword.tsx b/src/screens/auth/reset-password/ResetPassword.tsx
@@ -92,10 +92,6 @@ export default class ResetPassword extends BaseScreen<Props, State> {
     this.centralServerProvider.setAutoLoginDisabled(true);
   }
 
-  public recaptchaResponseToken = (captcha: string) => {
-    this.setState({ captcha });
-  };
-
   public resetPassword = async () => {
     // Check field
     const formIsValid = Utils.validateInput(this, this.formValidationDef);
@@ -148,13 +144,6 @@ export default class ResetPassword extends BaseScreen<Props, State> {
     }
   };
 
-  public onBack = (): boolean => {
-    // Back mobile button: Force navigation
-    this.props.navigation.navigate('Login');
-    // Do not bubble up
-    return true;
-  };
-
   public render() {
     const style = computeStyleSheet();
     const formStyle = computeFormStyleSheet();

diff --git a/src/screens/auth/retrieve-password/RetrievePassword.tsx b/src/screens/auth/retrieve-password/RetrievePassword.tsx
@@ -134,13 +134,6 @@ export default class RetrievePassword extends BaseScreen<Props, State> {
     }
   };
 
-  public onBack = () => {
-    // Back mobile button: Force navigation
-    this.props.navigation.navigate('Login');
-    // Do not bubble up
-    return true;
-  };
-
   public render() {
     const style = computeStyleSheet();
     const formStyle = computeFormStyleSheet();

diff --git a/src/screens/auth/sign-up/SignUp.tsx b/src/screens/auth/sign-up/SignUp.tsx
@@ -214,7 +214,7 @@ export default class SignUp extends BaseScreen<Props, State> {
     }
   };
 
-  public onBack = (): boolean => {
+  public onBack(): boolean {
     // Back mobile button: Force navigation
     this.props.navigation.navigate('Login', {
       tenantSubDomain: this.state.tenantSubDomain