Update Screen

locales/en.json

@@ -346,12 +346,21 @@
       "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": {
+        "youName": "You",
+        "you": "[NON TRADUIT] Toi aussi devient le prochaint dévelopeur à rejoindre la team, passe voir le git de l'application y'a tout plein d'info",
+        "arnaud": "[NON TRADUIT] Étudiant en IR (2020). C'est le créateur de cette magnifique application que t'utilise tout les jour. Et il est vraiment BG aussi.",
+        "yohan":  "[NON TRADUIT] Étudiant en [Je sais pas quoi] (2020). Il nous aide à corriger les bug. Et j'imagine aussi qu'il est BG mais je le connait pas.",
+        "beranger": "[NON TRADUIT] É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": "[NON TRADUIT] É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": "[NON TRADUIT] É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": "[NON TRADUIT] Étudiant en IR (2020). Il a beaucoup aidé pour trouver des bugs et proposer des nouvelles fonctionnalités.",
+        "theo": "[NON TRADUIT] Étudiant en AE (2020). Si l’application marche sur iOS, c’est grâce à son aide lors de ses nombreux tests."
+      }
     },
     "feedback": {
       "title": "Feedback",

locales/fr.json

@@ -345,12 +345,21 @@
       "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": {
+        "youName": "Toi",
+        "you": "Toi aussi devient le prochaint dévelopeur à rejoindre la team, passe voir le git de l'application y'a tout plein d'info",
+        "arnaud": "Étudiant en IR (2020). C'est le créateur de cette magnifique application que t'utilise tout les jour. Et il est vraiment BG aussi.",
+        "yohan":  "Étudiant en [Je sais pas quoi] (2020). Il nous aide à corriger les 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": "Feedback",

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/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 {Modalize} from 'react-native-modalize';
 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';
 
 type ListItemType = {
   onPressCallback: () => void,
@@ -20,6 +22,14 @@ type ListItemType = {
   showChevron: boolean,
 };
 
+type AthorsItemType = {
+  name: string,
+  message: string,
+  btnTrool: OptionsDialogButtonType,
+  btnLinkedin: OptionsDialogButtonType,
+  btnMail: OptionsDialogButtonType,
+};
+
 const links = {
   appstore: 'https://apps.apple.com/us/app/campus-amicale-insat/id1477722148',
   playstore:
@@ -30,13 +40,13 @@ 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:
+  arnaudMail:
     'mailto:vergnet@etud.insa-toulouse.fr?' +
     'subject=' +
     'Application Amicale INSA Toulouse' +
     '&body=' +
     'Coucou !\n\n',
-  authorLinkedin: 'https://www.linkedin.com/in/arnaud-vergnet-434ba5179/',
+  arnaudLinkedin: 'https://www.linkedin.com/in/arnaud-vergnet-434ba5179/',
   yohanMail:
     'mailto:ysimard@etud.insa-toulouse.fr?' +
     'subject=' +
@@ -64,6 +74,119 @@ function openWebLink(link: string) {
  * Class defining an about screen. This screen shows the user information about the app and it's author.
  */
 class AboutScreen extends React.Component<PropsType> {
+  modalRef: Modalize | null;
+
+  /**
+   * Data team
+   */
+  teamUsers = {
+    arnaud: {
+      name: 'Arnaud Vergnrt',
+      message: i18n.t('screens.about.user.arnaud'),
+      icon: 'crown',
+      btnTrool: {
+        title: 'SWAG',
+        onPress: () => {
+          openWebLink(links.meme);
+        },
+      },
+      btnLinkedin: {
+        title: '',
+        icon: 'linkedin',
+        onPress: () => {
+          openWebLink(links.arnaudMail);
+        },
+      },
+      btnMail: {
+        title: '',
+        icon: 'email-edit',
+        onPress: () => {
+          openWebLink(links.arnaudLinkedin);
+        },
+      },
+    },
+    yohan: {
+      name: 'Yohan Simard',
+      message: i18n.t('screens.about.user.yohan'),
+      icon: 'xml',
+      btnTrool: null,
+      btnLinkedin: {
+        title: '',
+        icon: 'linkedin',
+        onPress: () => {
+          openWebLink(links.yohanLinkedin);
+        },
+      },
+      btnMail: {
+        title: '',
+        icon: 'email-edit',
+        onPress: () => {
+          openWebLink(links.yohanMail);
+        },
+      },
+    },
+    you: {
+      name: i18n.t('screens.about.user.youName'),
+      message: i18n.t('screens.about.user.you'),
+      icon: 'hand-pointing-right',
+      btnTrool: {
+        title: '',
+        icon: 'git',
+        onPress: () => {
+          openWebLink(links.git);
+        },
+      },
+      btnLinkedin: null,
+      btnMail: null,
+    },
+  };
+
+  /**
+   * Data thanks
+   */
+  thanksUsers = {
+    beranger: {
+      name: 'Béranger Quintana Y Arciosana',
+      message: i18n.t('screens.about.user.beranger'),
+      icon: 'account-heart',
+      btnTrool: null,
+      btnLinkedin: null,
+      btnMail: null,
+    },
+    celine: {
+      name: 'Céline Tassin',
+      message: i18n.t('screens.about.user.celine'),
+      icon: 'brush',
+      btnTrool: null,
+      btnLinkedin: null,
+      btnMail: null,
+    },
+    damien: {
+      name: 'Damien Molina',
+      message: i18n.t('screens.about.user.damien'),
+      icon: 'web',
+      btnTrool: null,
+      btnLinkedin: null,
+      btnMail: null,
+    },
+    titouan: {
+      name: 'Titouan Labourdette',
+      message: i18n.t('screens.about.user.titouan'),
+      icon: 'shield-bug',
+      btnTrool: null,
+      btnLinkedin: null,
+      btnMail: null,
+    },
+    theo: {
+      name: 'Théo Tami',
+      message: i18n.t('screens.about.user.theo'),
+      icon: 'food-apple',
+      btnTrool: null,
+      btnLinkedin: null,
+      btnMail: null,
+    },
+  };
+
   /**
    * Data to be displayed in the app card
    */
@@ -115,60 +238,78 @@ class AboutScreen extends React.Component<PropsType> {
   ];
 
   /**
-   * Data to be displayed in the author card
+   * Data to be displayed in the additional developer card
    */
-  authorData = [
+  teamData = [
     {
       onPressCallback: () => {
-        openWebLink(links.meme);
+        this.onListItemPress(this.teamUsers.arnaud);
       },
-      icon: 'account-circle',
+      icon: this.teamUsers.arnaud.icon,
-      text: 'Arnaud VERGNET',
+      text: this.teamUsers.arnaud.name,
       showChevron: false,
     },
     {
       onPressCallback: () => {
-        openWebLink(links.authorMail);
+        this.onListItemPress(this.teamUsers.yohan);
       },
-      icon: 'email',
+      icon: this.teamUsers.yohan.icon,
-      text: i18n.t('screens.about.authorMail'),
+      text: this.teamUsers.yohan.name,
-      showChevron: true,
+      showChevron: false,
     },
     {
       onPressCallback: () => {
-        openWebLink(links.authorLinkedin);
+        this.onListItemPress(this.teamUsers.you);
       },
-      icon: 'linkedin',
+      icon: this.teamUsers.you.icon,
-      text: 'Linkedin',
+      text: this.teamUsers.you.name,
-      showChevron: true,
+      showChevron: false,
     },
   ];
 
   /**
-   * Data to be displayed in the additional developer card
+   * Data to be displayed in the thanks card
    */
-  additionalDevData = [
+  thanksData = [
     {
-      onPressCallback: () => {},
+      onPressCallback: () => {
-      icon: 'account',
+        this.onListItemPress(this.thanksUsers.beranger);
-      text: 'Yohan SIMARD',
+      },
+      icon: this.thanksUsers.beranger.icon,
+      text: this.thanksUsers.beranger.name,
       showChevron: false,
     },
     {
       onPressCallback: () => {
-        openWebLink(links.yohanMail);
+        this.onListItemPress(this.thanksUsers.celine);
       },
-      icon: 'email',
+      icon: this.thanksUsers.celine.icon,
-      text: i18n.t('screens.about.authorMail'),
+      text: this.thanksUsers.celine.name,
-      showChevron: true,
+      showChevron: false,
     },
     {
       onPressCallback: () => {
-        openWebLink(links.yohanLinkedin);
+        this.onListItemPress(this.thanksUsers.damien);
       },
-      icon: 'linkedin',
+      icon: this.thanksUsers.damien.icon,
-      text: 'Linkedin',
+      text: this.thanksUsers.damien.name,
-      showChevron: true,
+      showChevron: false,
+    },
+    {
+      onPressCallback: () => {
+        this.onListItemPress(this.thanksUsers.titouan);
+      },
+      icon: this.thanksUsers.titouan.icon,
+      text: this.thanksUsers.titouan.name,
+      showChevron: false,
+    },
+    {
+      onPressCallback: () => {
+        this.onListItemPress(this.thanksUsers.theo);
+      },
+      icon: this.thanksUsers.theo.icon,
+      text: this.thanksUsers.theo.name,
+      showChevron: false,
     },
   ];
 
@@ -205,11 +346,59 @@ class AboutScreen extends React.Component<PropsType> {
     {
       id: 'team',
     },
+    {
+      id: 'thanks',
+    },
     {
       id: 'techno',
     },
   ];
 
+  constructor(props: PropsType) {
+    super(props);
+    this.state = {
+      dialogVisible: false,
+      dialogTitle: '',
+      dialogMessage: '',
+      dialogButtons: [],
+      onDialogDismiss: () => {
+        this.setState({dialogVisible: false});
+      },
+    };
+  }
+
+  /**
+   * Callback used when clicking an article in the list.
+   * It opens the modal to show detailed information about the article
+   *
+   * @param user A user key
+   */
+  onListItemPress(user: AthorsItemType) {
+    const dialogBtn: Array<IconOptionsDialogButtonType> = [
+      {
+        title: 'OK',
+        onPress: () => {
+          this.setState({dialogVisible: false});
+        },
+      },
+    ];
+    if (user.btnMail != null) {
+      dialogBtn.push(user.btnMail);
+    }
+    if (user.btnLinkedin != null) {
+      dialogBtn.push(user.btnLinkedin);
+    }
+    if (user.btnTrool != null) {
+      dialogBtn.push(user.btnTrool);
+    }
+    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 +444,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 +487,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 +568,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:
@@ -374,12 +586,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={state.onDialogDismiss}
+        />
+      </View>
     );
   }
 }