Update ui to go to proxiwash Settings

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

locales/en.json

@@ -355,12 +355,20 @@
       "license": "License",
       "debug": "Debug",
       "team": "Team",
-      "author": "Author and maintainer",
-      "authorMail": "Send an email",
-      "additionalDev": "Thanks",
       "technologies": "Technologies",
       "reactNative": "Made with React Native",
-      "libs": "Libraries used"
+      "libs": "Libraries used",
+      "thanks": "Thanks",
+      "user": {
+        "you": "You ?",
+        "arnaud": "Student in IR (2020). He is the creator of this beautiful app you use everyday. Some say he is handsome as well.",
+        "yohan":  "Student in IR (2020). He helped to fix bugs. I think he is handsome as well but I don't know him personally.",
+        "beranger": "Student in AE (2020) and president of the Amicale when the app was created. The app was his idea. He helped a lot to find bugs, new features and communication.",
+        "celine": "Student in GPE (2020). Without her, everything would be less cute. She helped to write the text, for communication, and also to create the mascot 🦊.",
+        "damien": "Student in IR (2020) and creator of the 2020 version of the Amicale's website. Thanks to his help, integrating Amicale's services into the app was child's play.",
+        "titouan": "Student in IR (2020). He helped a lot in finding bugs and new features.",
+        "theo": "Student in AE (2020). If the app works on iOS, this is all thanks to his help during his numerous tests."
+      }
     },
     "feedback": {
       "title": "Contribute",

locales/fr.json

@@ -355,12 +355,20 @@
       "license": "Licence",
       "debug": "Debug",
       "team": "Équipe",
-      "author": "Auteur et mainteneur",
-      "authorMail": "Envoyer un mail",
-      "additionalDev": "Remerciements",
       "technologies": "Technologies",
       "reactNative": "Créé avec React Native",
-      "libs": "Librairies utilisées"
+      "libs": "Librairies utilisées",
+      "thanks": "Remerciements",
+      "user": {
+        "you": "Toi ?",
+        "arnaud": "Étudiant en IR (2020). C'est le créateur de cette magnifique application que t'utilises tous les jour. Et il est vraiment BG aussi.",
+        "yohan":  "Étudiant en IR (2020). Il a aidé à corriger des bug. Et j'imagine aussi qu'il est BG mais je le connait pas.",
+        "beranger": "Étudiant en AE (2020) et Président de l’Amicale au moment de la création et du lancement du projet. L’application, c’était son idée. Il a beaucoup aidé pour trouver des bugs, de nouvelles fonctionnalités et faire de la com.",
+        "celine": "Étudiante en GPE (2020). Sans elle, tout serait moins mignon. Elle a aidé pour écrire le texte, faire de la com, et aussi à créer la mascotte 🦊.",
+        "damien": "Étudiant en IR (2020) et créateur de la dernière version du site de l’Amicale. Grâce à son aide, intégrer les services de l’Amicale à l’application a été très simple.",
+        "titouan": "Étudiant en IR (2020). Il a beaucoup aidé pour trouver des bugs et proposer des nouvelles fonctionnalités.",
+        "theo": "Étudiant en AE (2020). Si l’application marche sur iOS, c’est grâce à son aide lors de ses nombreux tests."
+      }
     },
     "feedback": {
       "title": "Participer",

src/components/Dialogs/OptionsDialog.js

@@ -6,6 +6,7 @@ import {FlatList} from 'react-native';
 
 export type OptionsDialogButtonType = {
   title: string,
+  icon?: string,
   onPress: () => void,
 };
 
@@ -19,10 +20,19 @@ type PropsType = {
 
 class OptionsDialog extends React.PureComponent<PropsType> {
   getButtonRender = ({item}: {item: OptionsDialogButtonType}): React.Node => {
-    return <Button onPress={item.onPress}>{item.title}</Button>;
+    return (
+      <Button onPress={item.onPress} icon={item.icon}>
+        {item.title}
+      </Button>
+    );
   };
 
-  keyExtractor = (item: OptionsDialogButtonType): string => item.title;
+  keyExtractor = (item: OptionsDialogButtonType): string => {
+    if (item.icon != null) {
+      return item.title + item.icon;
+    }
+    return item.title;
+  };
 
   render(): React.Node {
     const {props} = this;

src/components/Lists/Proxiwash/ProxiwashListItem.js

@@ -59,6 +59,8 @@ class ProxiwashListItem extends React.Component<PropsType> {
 
   title: string;
 
+  titlePopUp: string;
+
   constructor(props: PropsType) {
     super(props);
     this.stateColors = {};
@@ -67,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),
@@ -76,7 +78,8 @@ class ProxiwashListItem extends React.Component<PropsType> {
     this.title = props.isDryer
       ? i18n.t('screens.proxiwash.dryer')
       : i18n.t('screens.proxiwash.washer');
-    this.title += ` n°${displayNumber} - ${displayMaxWeight} kg`;
+    this.title += ` n°${displayNumber}`;
+    this.titlePopUp = `${this.title} - ${displayMaxWeight} kg`;
   }
 
   shouldComponentUpdate(nextProps: PropsType): boolean {
@@ -91,7 +94,7 @@ class ProxiwashListItem extends React.Component<PropsType> {
 
   onListItemPress = () => {
     const {props} = this;
-    props.onPress(this.title, props.item, props.isDryer);
+    props.onPress(this.titlePopUp, props.item, props.isDryer);
   };
 
   updateStateStrings() {

src/screens/About/AboutScreen.js

@@ -1,17 +1,19 @@
 // @flow
 
 import * as React from 'react';
-import {FlatList, Linking, Platform, Image} from 'react-native';
+import {FlatList, Linking, Platform, Image, View} from 'react-native';
 import i18n from 'i18n-js';
-import {Avatar, Card, List, Title, withTheme} from 'react-native-paper';
+import {Avatar, Card, List, withTheme} from 'react-native-paper';
 import {StackNavigationProp} from '@react-navigation/stack';
 import packageJson from '../../../package.json';
 import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
-import APP_LOGO from '../../../assets/android.icon.png';
+import APP_LOGO from '../../../assets/android.icon.round.png';
 import type {
   CardTitleIconPropsType,
   ListIconPropsType,
 } from '../../constants/PaperStyles';
+import OptionsDialog from '../../components/Dialogs/OptionsDialog';
+import type {OptionsDialogButtonType} from '../../components/Dialogs/OptionsDialog';
 
 type ListItemType = {
   onPressCallback: () => void,
@@ -20,6 +22,15 @@ type ListItemType = {
   showChevron: boolean,
 };
 
+type MemberItemType = {
+  name: string,
+  message: string,
+  icon: string,
+  trollLink?: string,
+  linkedin?: string,
+  mail?: string,
+};
+
 const links = {
   appstore: 'https://apps.apple.com/us/app/campus-amicale-insat/id1477722148',
   playstore:
@@ -30,28 +41,20 @@ const links = {
     'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/Changelog.md',
   license:
     'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/LICENSE',
-  authorMail:
-    'mailto:vergnet@etud.insa-toulouse.fr?' +
-    'subject=' +
-    'Application Amicale INSA Toulouse' +
-    '&body=' +
-    'Coucou !\n\n',
-  authorLinkedin: 'https://www.linkedin.com/in/arnaud-vergnet-434ba5179/',
-  yohanMail:
-    'mailto:ysimard@etud.insa-toulouse.fr?' +
-    'subject=' +
-    'Application Amicale INSA Toulouse' +
-    '&body=' +
-    'Coucou !\n\n',
-  yohanLinkedin: 'https://www.linkedin.com/in/yohan-simard',
   react: 'https://facebook.github.io/react-native/',
-  meme: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
 };
 
 type PropsType = {
   navigation: StackNavigationProp,
 };
 
+type StateType = {
+  dialogVisible: boolean,
+  dialogTitle: string,
+  dialogMessage: string,
+  dialogButtons: Array<OptionsDialogButtonType>,
+};
+
 /**
  * Opens a link in the device's browser
  * @param link The link to open
@@ -60,14 +63,76 @@ function openWebLink(link: string) {
   Linking.openURL(link);
 }
 
+/**
+ * Object containing data relative to major contributors
+ */
+const majorContributors: {[key: string]: MemberItemType} = {
+  arnaud: {
+    name: 'Arnaud Vergnet',
+    message: i18n.t('screens.about.user.arnaud'),
+    icon: 'crown',
+    trollLink: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+    linkedin: 'https://www.linkedin.com/in/arnaud-vergnet-434ba5179/',
+    mail:
+      'mailto:vergnet@etud.insa-toulouse.fr?' +
+      'subject=' +
+      'Application Amicale INSA Toulouse' +
+      '&body=' +
+      'Coucou !\n\n',
+  },
+  yohan: {
+    name: 'Yohan Simard',
+    message: i18n.t('screens.about.user.yohan'),
+    icon: 'xml',
+    linkedin: 'https://www.linkedin.com/in/yohan-simard',
+    mail: 'mailto:ysimard@etud.insa-toulouse.fr?' +
+      'subject=' +
+      'Application Amicale INSA Toulouse' +
+      '&body=' +
+      'Coucou !\n\n',
+  },
+};
+
+/**
+ * Object containing data relative to users who helped during development
+ */
+const helpfulUsers: {[key: string]: MemberItemType} = {
+  beranger: {
+    name: 'Béranger Quintana Y Arciosana',
+    message: i18n.t('screens.about.user.beranger'),
+    icon: 'account-heart',
+  },
+  celine: {
+    name: 'Céline Tassin',
+    message: i18n.t('screens.about.user.celine'),
+    icon: 'brush',
+  },
+  damien: {
+    name: 'Damien Molina',
+    message: i18n.t('screens.about.user.damien'),
+    icon: 'web',
+  },
+  titouan: {
+    name: 'Titouan Labourdette',
+    message: i18n.t('screens.about.user.titouan'),
+    icon: 'shield-bug',
+  },
+  theo: {
+    name: 'Théo Tami',
+    message: i18n.t('screens.about.user.theo'),
+    icon: 'food-apple',
+  },
+};
+
 /**
  * Class defining an about screen. This screen shows the user information about the app and it's author.
  */
-class AboutScreen extends React.Component<PropsType> {
+class AboutScreen extends React.Component<PropsType, StateType> {
+
   /**
    * Data to be displayed in the app card
    */
-  appData = [
+  appData: Array<ListItemType> = [
     {
       onPressCallback: () => {
         openWebLink(Platform.OS === 'ios' ? links.appstore : links.playstore);
@@ -115,60 +180,79 @@ class AboutScreen extends React.Component<PropsType> {
   ];
 
   /**
-   * Data to be displayed in the author card
+   * Data to be displayed in the team card
    */
-  authorData = [
+  teamData: Array<ListItemType> = [
     {
       onPressCallback: () => {
-        openWebLink(links.meme);
+        this.onContributorListItemPress(majorContributors.arnaud);
       },
-      icon: 'account-circle',
+      icon: majorContributors.arnaud.icon,
-      text: 'Arnaud VERGNET',
+      text: majorContributors.arnaud.name,
       showChevron: false,
     },
     {
       onPressCallback: () => {
-        openWebLink(links.authorMail);
+        this.onContributorListItemPress(majorContributors.yohan);
       },
-      icon: 'email',
+      icon: majorContributors.yohan.icon,
-      text: i18n.t('screens.about.authorMail'),
+      text: majorContributors.yohan.name,
-      showChevron: true,
+      showChevron: false,
     },
     {
       onPressCallback: () => {
-        openWebLink(links.authorLinkedin);
+        const {navigation} = this.props;
+        navigation.navigate('feedback');
       },
-      icon: 'linkedin',
+      icon: 'hand-pointing-right',
-      text: 'Linkedin',
+      text: i18n.t('screens.about.user.you'),
       showChevron: true,
     },
   ];
 
   /**
-   * Data to be displayed in the additional developer card
+   * Data to be displayed in the thanks card
    */
-  additionalDevData = [
+  thanksData: Array<ListItemType> = [
     {
-      onPressCallback: () => {},
+      onPressCallback: () => {
-      icon: 'account',
+        this.onContributorListItemPress(helpfulUsers.beranger);
-      text: 'Yohan SIMARD',
+      },
+      icon: helpfulUsers.beranger.icon,
+      text: helpfulUsers.beranger.name,
       showChevron: false,
     },
     {
       onPressCallback: () => {
-        openWebLink(links.yohanMail);
+        this.onContributorListItemPress(helpfulUsers.celine);
       },
-      icon: 'email',
+      icon: helpfulUsers.celine.icon,
-      text: i18n.t('screens.about.authorMail'),
+      text: helpfulUsers.celine.name,
-      showChevron: true,
+      showChevron: false,
     },
     {
       onPressCallback: () => {
-        openWebLink(links.yohanLinkedin);
+        this.onContributorListItemPress(helpfulUsers.damien);
       },
-      icon: 'linkedin',
+      icon: helpfulUsers.damien.icon,
-      text: 'Linkedin',
+      text: helpfulUsers.damien.name,
-      showChevron: true,
+      showChevron: false,
+    },
+    {
+      onPressCallback: () => {
+        this.onContributorListItemPress(helpfulUsers.titouan);
+      },
+      icon: helpfulUsers.titouan.icon,
+      text: helpfulUsers.titouan.name,
+      showChevron: false,
+    },
+    {
+      onPressCallback: () => {
+        this.onContributorListItemPress(helpfulUsers.theo);
+      },
+      icon: helpfulUsers.theo.icon,
+      text: helpfulUsers.theo.name,
+      showChevron: false,
     },
   ];
 
@@ -205,11 +289,72 @@ class AboutScreen extends React.Component<PropsType> {
     {
       id: 'team',
     },
+    {
+      id: 'thanks',
+    },
     {
       id: 'techno',
     },
   ];
 
+  constructor(props: PropsType) {
+    super(props);
+    this.state = {
+      dialogVisible: false,
+      dialogTitle: '',
+      dialogMessage: '',
+      dialogButtons: [],
+    };
+  }
+
+  /**
+   * Callback used when clicking a member in the list
+   * It opens a dialog to show detailed information this member
+   *
+   * @param user The member to show information for
+   */
+  onContributorListItemPress(user: MemberItemType) {
+    const dialogBtn = [
+      {
+        title: 'OK',
+        onPress: this.onDialogDismiss,
+      },
+    ];
+    const {linkedin, trollLink, mail} = user;
+    if (linkedin != null) {
+      dialogBtn.push({
+        title: '',
+        icon: 'linkedin',
+        onPress: () => {
+          openWebLink(linkedin);
+        },
+      });
+    }
+    if (mail) {
+      dialogBtn.push({
+        title: '',
+        icon: 'email-edit',
+        onPress: () => {
+          openWebLink(mail);
+        },
+      });
+    }
+    if (trollLink) {
+      dialogBtn.push({
+        title: 'SWAG',
+        onPress: () => {
+          openWebLink(trollLink);
+        },
+      });
+    }
+    this.setState({
+      dialogVisible: true,
+      dialogTitle: user.name,
+      dialogMessage: user.message,
+      dialogButtons: dialogBtn,
+    });
+  }
+
   /**
    * Gets the app card showing information and links about the app.
    *
@@ -255,18 +400,34 @@ class AboutScreen extends React.Component<PropsType> {
           )}
         />
         <Card.Content>
-          <Title>{i18n.t('screens.about.author')}</Title>
           <FlatList
-            data={this.authorData}
+            data={this.teamData}
             keyExtractor={this.keyExtractor}
-            listKey="1"
             renderItem={this.getCardItem}
           />
-          <Title>{i18n.t('screens.about.additionalDev')}</Title>
+        </Card.Content>
+      </Card>
+    );
+  }
+
+  /**
+   * Get the thank you card showing support information and links
+   *
+   * @return {*}
+   */
+  getThanksCard(): React.Node {
+    return (
+      <Card style={{marginBottom: 10}}>
+        <Card.Title
+          title={i18n.t('screens.about.thanks')}
+          left={(iconProps: CardTitleIconPropsType): React.Node => (
+            <Avatar.Icon size={iconProps.size} icon="hand-heart" />
+          )}
+        />
+        <Card.Content>
           <FlatList
-            data={this.additionalDevData}
+            data={this.thanksData}
             keyExtractor={this.keyExtractor}
-            listKey="2"
             renderItem={this.getCardItem}
           />
         </Card.Content>
@@ -282,8 +443,13 @@ class AboutScreen extends React.Component<PropsType> {
   getTechnoCard(): React.Node {
     return (
       <Card style={{marginBottom: 10}}>
+        <Card.Title
+          title={i18n.t('screens.about.technologies')}
+          left={(iconProps: CardTitleIconPropsType): React.Node => (
+            <Avatar.Icon size={iconProps.size} icon="wrench" />
+          )}
+        />
         <Card.Content>
-          <Title>{i18n.t('screens.about.technologies')}</Title>
           <FlatList
             data={this.technoData}
             keyExtractor={this.keyExtractor}
@@ -358,6 +524,8 @@ class AboutScreen extends React.Component<PropsType> {
         return this.getAppCard();
       case 'team':
         return this.getTeamCard();
+      case 'thanks':
+        return this.getThanksCard();
       case 'techno':
         return this.getTechnoCard();
       default:
@@ -365,6 +533,10 @@ class AboutScreen extends React.Component<PropsType> {
     }
   };
 
+  onDialogDismiss = () => {
+    this.setState({dialogVisible: false});
+  };
+
   /**
    * Extracts a key from the given item
    *
@@ -374,12 +546,25 @@ class AboutScreen extends React.Component<PropsType> {
   keyExtractor = (item: ListItemType): string => item.icon;
 
   render(): React.Node {
+    const {state} = this;
     return (
+      <View
+        style={{
+          height: '100%',
+        }}>
         <CollapsibleFlatList
           style={{padding: 5}}
           data={this.dataOrder}
           renderItem={this.getMainCard}
         />
+        <OptionsDialog
+          visible={state.dialogVisible}
+          title={state.dialogTitle}
+          message={state.dialogMessage}
+          buttons={state.dialogButtons}
+          onDismiss={this.onDialogDismiss}
+        />
+      </View>
     );
   }
 }

src/screens/Proxiwash/ProxiwashScreen.js

@@ -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
    *
@@ -422,34 +436,6 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
     }
   };
 
-  onPressCallback = () => {
-    const {navigation} = this.props;
-    navigation.navigate('proxiwash-settings');
-  };
-
-  getListHeader = (): React.Node => {
-    const {selectedWash} = this.state;
-    let item: LaverieType;
-    switch (selectedWash) {
-      case 'tripodeB':
-        item = PROXIWASH_DATA.tripodeB;
-        break;
-      default:
-        item = PROXIWASH_DATA.washinsa;
-    }
-    const getItemIcon = (props: ListIconPropsType): React.Node =>
-      ProxiwashScreen.getItemIcon(item, props);
-    return (
-      <List.Item
-        title={item.title}
-        description={item.subtitle}
-        left={getItemIcon}
-        right={ProxiwashScreen.getChevronIcon}
-        onPress={this.onPressCallback}
-      />
-    );
-  };
-
   /**
    * Adds the given notifications associated to a machine ID to the watchlist, and saves the array to the preferences
    *
@@ -519,7 +505,6 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
             autoRefreshTime={REFRESH_TIME}
             refreshOnFocus
             updateData={state.machinesWatched.length}
-            renderListHeaderComponent={this.getListHeader}
           />
         </View>
         <MascotPopup