Add new Screen to select wash

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/Proxiwash/ProxiwashScreen.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import {Alert, View} from 'react-native';
 import i18n from 'i18n-js';
-import {Avatar, Button, Card, Text, withTheme} from 'react-native-paper';
+import {Avatar, Button, Card, List, Text, withTheme} from 'react-native-paper';
 import {StackNavigationProp} from '@react-navigation/stack';
 import {Modalize} from 'react-native-modalize';
 import WebSectionList from '../../components/Screens/WebSectionList';
@@ -26,31 +26,8 @@ import {
 import {MASCOT_STYLE} from '../../components/Mascot/Mascot';
 import MascotPopup from '../../components/Mascot/MascotPopup';
 import type {SectionListDataType} from '../../components/Screens/WebSectionList';
-import type {CardTitleIconPropsType} from '../../constants/PaperStyles';
+import type {ListIconPropsType} from '../../constants/PaperStyles';
-
+import {PROXIWASH_DATA} from './ProxiwashSettingsScreen';
-type LaverieType = {
-  title: string,
-  subtitle: string,
-  icon: string,
-  url: string,
-};
-
-const DATA = {
-  washinsa: {
-    title: 'Laverie INSA',
-    subtitle: 'Ta laverie préférer !!',
-    icon: 'school-outline',
-    url:
-      'https://etud.insa-toulouse.fr/~amicale_app/v2/washinsa/washinsa_data.json',
-  },
-  tripodeB: {
-    title: 'Laverie Tripode B',
-    subtitle: 'En vrai je sais pas trop quoi marqué.',
-    icon: 'domain',
-    url:
-      'https://etud.insa-toulouse.fr/~amicale_app/v2/washinsa/tripode_b_data.json',
-  },
-};
 
 const modalStateStrings = {};
 
@@ -225,9 +202,6 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
         remaining: remainingTime,
         program: item.program,
       });
-    } else if (item.state === ProxiwashConstants.machineStates.AVAILABLE) {
-      if (isDryer) message += `\n${i18n.t('screens.proxiwash.dryersTariff')}`;
-      else message += `\n${i18n.t('screens.proxiwash.washersTariff')}`;
     }
     return (
       <View
@@ -369,6 +343,31 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
     return count;
   }
 
+  /**
+   * Gets a chevron icon
+   *
+   * @param props
+   * @return {*}
+   */
+  static getChevronIcon(props: ListIconPropsType): React.Node {
+    return (
+      <List.Icon color={props.color} style={props.style} icon="chevron-right" />
+    );
+  }
+
+  /**
+   * Gets a custom list item icon
+   *
+   * @param item The item to show the icon for
+   * @param props
+   * @return {*}
+   */
+  static getItemIcon(item: ListItemType, props: ListIconPropsType): React.Node {
+    return (
+      <List.Icon color={props.color} style={props.style} icon={item.icon} />
+    );
+  }
+
   /**
    * Creates the dataset to be used by the FlatList
    *
@@ -423,24 +422,31 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
     }
   };
 
+  onPressCallback = () => {
+    const {navigation} = this.props;
+    navigation.navigate('proxiwash-settings');
+  };
+
   getListHeader = (): React.Node => {
     const {selectedWash} = this.state;
-    let data: LaverieType;
+    let item: LaverieType;
     switch (selectedWash) {
       case 'tripodeB':
-        data = DATA.tripodeB;
+        item = PROXIWASH_DATA.tripodeB;
         break;
       default:
-        data = DATA.washinsa;
+        item = PROXIWASH_DATA.washinsa;
     }
+    const getItemIcon = (props: ListIconPropsType): React.Node =>
+      ProxiwashScreen.getItemIcon(item, props);
     return (
       <Card>
-        <Card.Title
+        <List.Item
-          title={data.title}
+          title={item.title}
-          subtitle={data.subtitle}
+          description={item.subtitle}
-          left={(iconProps: CardTitleIconPropsType): React.Node => (
+          left={getItemIcon}
-            <Avatar.Icon size={iconProps.size} icon={data.icon} />
+          right={ProxiwashScreen.getChevronIcon}
-          )}
+          onPress={this.onPressCallback}
         />
       </Card>
     );
@@ -490,10 +496,10 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
     let data: LaverieType;
     switch (state.selectedWash) {
       case 'tripodeB':
-        data = DATA.tripodeB;
+        data = PROXIWASH_DATA.tripodeB;
         break;
       default:
-        data = DATA.washinsa;
+        data = PROXIWASH_DATA.washinsa;
     }
     return (
       <View

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 reminder notification time
+   *
+   * @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);