Update ui to go to proxiwash Settings

Remove the header of proxiwash screen
Add a button on proxiwash screen tool bar

App.js

@@ -7,6 +7,7 @@ import {Provider as PaperProvider} from 'react-native-paper';
 import {setSafeBounceHeight} from 'react-navigation-collapsible';
 import SplashScreen from 'react-native-splash-screen';
 import {OverflowMenuProvider} from 'react-navigation-header-buttons';
+import LocaleManager from './src/managers/LocaleManager';
 import AsyncStorageManager from './src/managers/AsyncStorageManager';
 import CustomIntroSlider from './src/components/Overrides/CustomIntroSlider';
 import type {CustomThemeType} from './src/managers/ThemeManager';
@@ -18,7 +19,6 @@ import ConnectionManager from './src/managers/ConnectionManager';
 import type {ParsedUrlDataType} from './src/utils/URLHandler';
 import URLHandler from './src/utils/URLHandler';
 import {setupStatusBar} from './src/utils/Utils';
-import initLocales from './src/utils/Locales';
 
 // Native optimizations https://reactnavigation.org/docs/react-native-screens
 // Crashes app when navigating away from webview on android 9+
@@ -56,7 +56,7 @@ export default class App extends React.Component<null, StateType> {
       showAprilFools: false,
       currentTheme: null,
     };
-    initLocales();
+    LocaleManager.initTranslations();
     this.navigatorRef = React.createRef();
     this.defaultHomeRoute = null;
     this.defaultHomeData = {};

locales/en.json

@@ -62,8 +62,8 @@
       },
       "tripodeB": {
         "title": "Tripode B laundromat",
-        "subtitle": "That of those who live near the metro.",
-        "description": "This is the washing service operated by the CROUS for the Tripode B and C residences as well as Thalès and Pythagore. The room is at the foot of Tripod B in front of the Pythagore residence, with 2 dryers and 6 washers, is open 7d/7 from 7am to 11pm. In addition to the 6kg washers there is one 10kg washers",
+        "subtitle": "[A TRADUIRE] Celle de ceux qui habite prés du métro.",
+        "description": "[A TRADUIRE] C'est le service de laverie proposé par le crous pour les résidences Tripode B et C ainsi que Thalès et Pythagore. Le local situé au pied du Tripode B en face de de la résidence Pythagore avec ses 2 sèche-linges et 6 machines est ouvert 7J/7 de 7h à 23h. En plus des machine 6kg il y as une machine de 10kg.",
         "tariff": "Washers 6kg: 2.60€ the washer + 0.90€ with detergent.\nWashers 10kg: 4.90€ the washer + 1.50€ with detergent.\nDryers 14kg: 0.40€ for 5min of dryer usage.",
         "paymentMethods": "Carte bancaire acceptée."
       },

locales/fr.json

@@ -63,7 +63,7 @@
       "tripodeB": {
         "title": "Laverie Tripode B",
         "subtitle": "Celle de ceux qui habite prés du métro.",
-        "description": "C'est le service de laverie proposé par le CROUS pour les résidences Tripode B et C ainsi que Thalès et Pythagore. Le local situé au pied du Tripode B en face de de la résidence Pythagore avec ses 2 sèche-linges et 6 machines est ouvert 7J/7 de 7h à 23h. En plus des machine 6kg il y as une machine de 10kg.",
+        "description": "C'est le service de laverie proposé par le crous pour les résidences Tripode B et C ainsi que Thalès et Pythagore. Le local situé au pied du Tripode B en face de de la résidence Pythagore avec ses 2 sèche-linges et 6 machines est ouvert 7J/7 de 7h à 23h. En plus des machine 6kg il y as une machine de 10kg.",
         "tariff": "Lave-Linges 6kg: 2.60€ la machine + 0.90€ avec la lessive.\nLave-Linges 10kg: 4.90€ la machine + 1.50€ avec la lessive.\nSèche-Linges 14kg: 0.40€ pour 5min de sèche linge.",
         "paymentMethods": "Carte bancaire acceptée."
       },

src/components/Lists/Proxiwash/ProxiwashListItem.js

@@ -69,7 +69,7 @@ class ProxiwashListItem extends React.Component<PropsType> {
     this.updateStateStrings();
 
     let displayNumber = props.item.number;
-    const displayMaxWeight = props.item.maxWeight;
+    const displayMaxWeight = props.item['maxWeight '];
     if (AprilFoolsManager.getInstance().isAprilFoolsEnabled())
       displayNumber = AprilFoolsManager.getProxiwashMachineDisplayNumber(
         parseInt(props.item.number, 10),

src/managers/LocaleManager.js

@@ -0,0 +1,24 @@
+// @flow
+
+import i18n from 'i18n-js';
+import * as RNLocalize from 'react-native-localize';
+
+import en from '../../locales/en.json';
+import fr from '../../locales/fr.json';
+
+/**
+ * Static class used to manage locales
+ */
+export default class LocaleManager {
+  /**
+   * Initialize translations using language files
+   */
+  static initTranslations() {
+    i18n.fallbacks = true;
+    i18n.translations = {fr, en};
+    i18n.locale = RNLocalize.findBestAvailableLanguage([
+      'en',
+      'fr',
+    ]).languageTag;
+  }
+}

src/navigation/TabNavigator.js

@@ -29,6 +29,7 @@ import {
   getWebsiteStack,
 } from '../utils/CollapsibleUtils';
 import Mascot, {MASCOT_STYLE} from '../components/Mascot/Mascot';
+import ProxiwashSettingsScreen from '../screens/Proxiwash/ProxiwashSettingsScreen';
 
 const modalTransition =
   Platform.OS === 'ios'
@@ -91,6 +92,12 @@ function ProxiwashStackComponent(): React.Node {
         ProxiwashAboutScreen,
         i18n.t('screens.proxiwash.title'),
       )}
+      {createScreenCollapsibleStack(
+        'proxiwash-settings',
+        ProxiwashStack,
+        ProxiwashSettingsScreen,
+        i18n.t('screens.proxiwash.title'),
+      )}
     </ProxiwashStack.Navigator>
   );
 }

src/screens/Other/Settings/SettingsScreen.js

@@ -3,14 +3,7 @@
 import * as React from 'react';
 import {View} from 'react-native';
 import i18n from 'i18n-js';
-import {
-  RadioButton,
-  Card,
-  List,
-  Switch,
-  ToggleButton,
-  withTheme,
-} from 'react-native-paper';
+import {Card, List, Switch, ToggleButton, withTheme} from 'react-native-paper';
 import {Appearance} from 'react-native-appearance';
 import {StackNavigationProp} from '@react-navigation/stack';
 import type {CustomThemeType} from '../../../managers/ThemeManager';
@@ -29,7 +22,6 @@ type StateType = {
   nightMode: boolean,
   nightModeFollowSystem: boolean,
   startScreenPickerSelected: string,
-  selectedWash: string,
   isDebugUnlocked: boolean,
 };
 
@@ -60,9 +52,6 @@ class SettingsScreen extends React.Component<PropsType, StateType> {
       startScreenPickerSelected: AsyncStorageManager.getString(
         AsyncStorageManager.PREFERENCES.defaultStartScreen.key,
       ),
-      selectedWash: AsyncStorageManager.getString(
-        AsyncStorageManager.PREFERENCES.selectedWash.key,
-      ),
       isDebugUnlocked: AsyncStorageManager.getBool(
         AsyncStorageManager.PREFERENCES.debugUnlocked.key,
       ),
@@ -117,29 +106,6 @@ class SettingsScreen extends React.Component<PropsType, StateType> {
     );
   }
 
-  /**
-   * Returns a radio picker allowing the user to select the proxiwash
-   *
-   * @returns {React.Node}
-   */
-  getProxiwashChangePicker(): React.Node {
-    const {selectedWash} = this.state;
-    return (
-      <RadioButton.Group
-        onValueChange={this.onSelectWashValueChange}
-        value={selectedWash}>
-        <RadioButton.Item
-          label={i18n.t('screens.proxiwash.washinsa.title')}
-          value="washinsa"
-        />
-        <RadioButton.Item
-          label={i18n.t('screens.proxiwash.tripodeB.title')}
-          value="tripodeB"
-        />
-      </RadioButton.Group>
-    );
-  }
-
   /**
    * Returns a picker allowing the user to select the start screen
    *
@@ -246,21 +212,6 @@ class SettingsScreen extends React.Component<PropsType, StateType> {
     );
   }
 
-  /**
-   * Saves the value for the proxiwash selected wash
-   *
-   * @param value The value to store
-   */
-  onSelectWashValueChange = (value: string) => {
-    if (value != null) {
-      this.setState({selectedWash: value});
-      AsyncStorageManager.set(
-        AsyncStorageManager.PREFERENCES.selectedWash.key,
-        value,
-      );
-    }
-  };
-
   /**
    * Unlocks debug mode and saves its state to user preferences
    */
@@ -337,20 +288,6 @@ class SettingsScreen extends React.Component<PropsType, StateType> {
             <View style={{marginLeft: 30}}>
               {this.getProxiwashNotifPicker()}
             </View>
-            <List.Item
-              title="Test"
-              description="Test"
-              left={(props: ListIconPropsType): React.Node => (
-                <List.Icon
-                  color={props.color}
-                  style={props.style}
-                  icon="washing-machine"
-                />
-              )}
-            />
-            <View style={{marginLeft: 30}}>
-              {this.getProxiwashChangePicker()}
-            </View>
           </List.Section>
         </Card>
         <Card style={{margin: 5}}>

src/screens/Proxiwash/ProxiwashAboutScreen.js

@@ -9,67 +9,11 @@ import type {CardTitleIconPropsType} from '../../constants/PaperStyles';
 
 const LOGO = 'https://etud.insa-toulouse.fr/~amicale_app/images/Proxiwash.png';
 
-export type LaverieType = {
-  id: string,
-  title: string,
-  subtitle: string,
-  description: string,
-  tarif: string,
-  paymentMethods: string,
-  icon: string,
-  url: string,
-};
-
-export const PROXIWASH_DATA = {
-  washinsa: {
-    id: 'washinsa',
-    title: 'screens.proxiwash.washinsa.title',
-    subtitle: 'screens.proxiwash.washinsa.subtitle',
-    description: 'screens.proxiwash.washinsa.description',
-    tarif: 'screens.proxiwash.washinsa.tariff',
-    paymentMethods: 'screens.proxiwash.washinsa.paymentMethods',
-    icon: 'school-outline',
-    url:
-      'https://etud.insa-toulouse.fr/~amicale_app/v2/washinsa/washinsa_data.json',
-  },
-  tripodeB: {
-    id: 'tripodeB',
-    title: 'screens.proxiwash.tripodeB.title',
-    subtitle: 'screens.proxiwash.tripodeB.subtitle',
-    description: 'screens.proxiwash.tripodeB.description',
-    tarif: 'screens.proxiwash.tripodeB.tariff',
-    paymentMethods: 'screens.proxiwash.tripodeB.paymentMethods',
-    icon: 'domain',
-    url:
-      'https://etud.insa-toulouse.fr/~amicale_app/v2/washinsa/tripode_b_data.json',
-  },
-};
-
 /**
  * Class defining the proxiwash about screen.
  */
+// eslint-disable-next-line react/prefer-stateless-function
 export default class ProxiwashAboutScreen extends React.Component<null> {
-  static getCardItem(item: LaverieType): React.Node {
-    return (
-      <Card style={{margin: 5}}>
-        <Card.Title
-          title={i18n.t(item.title)}
-          subtitle={i18n.t(item.subtitle)}
-          left={(iconProps: CardTitleIconPropsType): React.Node => (
-            <Avatar.Icon size={iconProps.size} icon={item.icon} />
-          )}
-        />
-        <Card.Content>
-          <Paragraph>{i18n.t(item.description)}</Paragraph>
-          <Title>{i18n.t('screens.proxiwash.tariffs')}</Title>
-          <Paragraph>{i18n.t(item.tarif)}</Paragraph>
-          <Title>{i18n.t('screens.proxiwash.paymentMethods')}</Title>
-          <Paragraph>{i18n.t(item.paymentMethods)}</Paragraph>
-        </Card.Content>
-      </Card>
-    );
-  }
-
   render(): React.Node {
     return (
       <CollapsibleScrollView style={{padding: 5}} hasTab>
@@ -88,10 +32,6 @@ export default class ProxiwashAboutScreen extends React.Component<null> {
           />
         </View>
 
-        {ProxiwashAboutScreen.getCardItem(PROXIWASH_DATA.washinsa)}
-
-        {ProxiwashAboutScreen.getCardItem(PROXIWASH_DATA.tripodeB)}
-
         <Card style={{margin: 5}}>
           <Card.Title
             title={i18n.t('screens.proxiwash.dryer')}

src/screens/Proxiwash/ProxiwashScreen.js

@@ -27,7 +27,7 @@ import {MASCOT_STYLE} from '../../components/Mascot/Mascot';
 import MascotPopup from '../../components/Mascot/MascotPopup';
 import type {SectionListDataType} from '../../components/Screens/WebSectionList';
 import type {ListIconPropsType} from '../../constants/PaperStyles';
-import {PROXIWASH_DATA} from './ProxiwashAboutScreen';
+import {PROXIWASH_DATA} from './ProxiwashSettingsScreen';
 
 const modalStateStrings = {};
 
@@ -37,7 +37,7 @@ const LIST_ITEM_HEIGHT = 64;
 export type ProxiwashMachineType = {
   number: string,
   state: string,
-  maxWeight: number,
+  'maxWeight ': number,
   startTime: string,
   endTime: string,
   donePercent: string,
@@ -128,6 +128,11 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
             iconName="information"
             onPress={this.onAboutPress}
           />
+          <Item
+            title="settings"
+            iconName="settings"
+            onPress={this.onSettingsPress}
+          />
         </MaterialHeaderButtons>
       ),
     });
@@ -142,6 +147,15 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
     navigation.navigate('proxiwash-about');
   };
 
+  /**
+   * Callback used when pressing the settings button.
+   * This will open the ProxiwashSettingsScreen.
+   */
+  onSettingsPress = () => {
+    const {navigation} = this.props;
+    navigation.navigate('proxiwash-settings');
+  };
+
   /**
    * Callback used when the user clicks on enable notifications for a machine
    *

src/screens/Proxiwash/ProxiwashSettingsScreen.js

@@ -0,0 +1,135 @@
+// @flow
+
+import * as React from 'react';
+import {
+  Title,
+  Button,
+  Card,
+  Avatar,
+  withTheme,
+  Paragraph,
+} from 'react-native-paper';
+import i18n from 'i18n-js';
+import CollapsibleScrollView from '../../components/Collapsible/CollapsibleScrollView';
+import type {CardTitleIconPropsType} from '../../constants/PaperStyles';
+import AsyncStorageManager from '../../managers/AsyncStorageManager';
+import ThemeManager from '../../managers/ThemeManager';
+import type {CustomThemeType} from '../../managers/ThemeManager';
+
+export type LaverieType = {
+  id: string,
+  title: string,
+  subtitle: string,
+  description: string,
+  tarif: string,
+  paymentMethods: string,
+  icon: string,
+  url: string,
+};
+
+export const PROXIWASH_DATA = {
+  washinsa: {
+    id: 'washinsa',
+    title: i18n.t('screens.proxiwash.washinsa.title'),
+    subtitle: i18n.t('screens.proxiwash.washinsa.subtitle'),
+    description: i18n.t('screens.proxiwash.washinsa.description'),
+    tarif: i18n.t('screens.proxiwash.washinsa.tariff'),
+    paymentMethods: i18n.t('screens.proxiwash.washinsa.paymentMethods'),
+    icon: 'school-outline',
+    url:
+      'https://etud.insa-toulouse.fr/~amicale_app/v2/washinsa/washinsa_data.json',
+  },
+  tripodeB: {
+    id: 'tripodeB',
+    title: i18n.t('screens.proxiwash.tripodeB.title'),
+    subtitle: i18n.t('screens.proxiwash.tripodeB.subtitle'),
+    description: i18n.t('screens.proxiwash.tripodeB.description'),
+    tarif: i18n.t('screens.proxiwash.tripodeB.tariff'),
+    paymentMethods: i18n.t('screens.proxiwash.tripodeB.paymentMethods'),
+    icon: 'domain',
+    url:
+      'https://etud.insa-toulouse.fr/~amicale_app/v2/washinsa/tripode_b_data.json',
+  },
+};
+
+type StateType = {
+  selectedWash: string,
+  currentTheme: CustomThemeType,
+};
+
+/**
+ * Class defining the proxiwash settings screen.
+ */
+class ProxiwashSettingsScreen extends React.Component<null, StateType> {
+  constructor() {
+    super();
+    this.state = {
+      selectedWash: AsyncStorageManager.getString(
+        AsyncStorageManager.PREFERENCES.selectedWash.key,
+      ),
+    };
+  }
+
+  /**
+   * Saves the value for the proxiwash selected wash
+   *
+   * @param value The value to store
+   */
+  onSelectWashValueChange = (value: string) => {
+    if (value != null) {
+      this.setState({selectedWash: value});
+      AsyncStorageManager.set(
+        AsyncStorageManager.PREFERENCES.selectedWash.key,
+        value,
+      );
+    }
+  };
+
+  getCardItem(item: LaverieType): React.Node {
+    const {selectedWash} = this.state;
+    const onSelectWashValueChange = (): void =>
+      this.onSelectWashValueChange(item.id);
+    let cardStyle = {
+      margin: 5,
+    };
+    if (selectedWash === item.id) {
+      cardStyle = {
+        margin: 5,
+        backgroundColor: ThemeManager.getCurrentTheme().colors
+          .proxiwashUnknownColor,
+      };
+    }
+    return (
+      <Card style={cardStyle}>
+        <Card.Title
+          title={item.title}
+          subtitle={item.subtitle}
+          left={(iconProps: CardTitleIconPropsType): React.Node => (
+            <Avatar.Icon size={iconProps.size} icon={item.icon} />
+          )}
+        />
+        <Card.Content>
+          <Paragraph>{item.description}</Paragraph>
+          <Title>{i18n.t('screens.proxiwash.tariffs')}</Title>
+          <Paragraph>{item.tarif}</Paragraph>
+          <Title>{i18n.t('screens.proxiwash.paymentMethods')}</Title>
+          <Paragraph>{item.paymentMethods}</Paragraph>
+        </Card.Content>
+        <Card.Actions>
+          <Button onPress={onSelectWashValueChange}>Select</Button>
+        </Card.Actions>
+      </Card>
+    );
+  }
+
+  render(): React.Node {
+    return (
+      <CollapsibleScrollView style={{padding: 5}} hasTab>
+        {this.getCardItem(PROXIWASH_DATA.washinsa)}
+        {this.getCardItem(PROXIWASH_DATA.tripodeB)}
+      </CollapsibleScrollView>
+    );
+  }
+}
+
+export default withTheme(ProxiwashSettingsScreen);

src/utils/Locales.js

@@ -1,17 +0,0 @@
-// @flow
-
-import i18n from 'i18n-js';
-import * as RNLocalize from 'react-native-localize';
-
-import en from '../../locales/en.json';
-import fr from '../../locales/fr.json';
-
-const initLocales = () => {
-  i18n.fallbacks = true;
-  i18n.translations = {fr, en};
-  i18n.locale = RNLocalize.findBestAvailableLanguage([
-    'en',
-    'fr',
-  ]).languageTag;
-}
-export default initLocales;