Add Thaks card

src/screens/About/AboutScreen.js

@@ -1,10 +1,11 @@
 // @flow
 
 import * as React from 'react';
-import {FlatList, Linking, Platform, Image} from 'react-native';
+import {FlatList, Linking, Platform, Image, View, ScrollView} from 'react-native';
 import i18n from 'i18n-js';
-import {Avatar, Card, List, Title, withTheme} from 'react-native-paper';
+import {Avatar, Card, List, Text, Title, 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';
@@ -12,6 +13,7 @@ import type {
   CardTitleIconPropsType,
   ListIconPropsType,
 } from '../../constants/PaperStyles';
+import CustomModal from "../../components/Overrides/CustomModal";
 
 type ListItemType = {
   onPressCallback: () => void,
@@ -64,6 +66,8 @@ 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 to be displayed in the app card
    */
@@ -149,7 +153,11 @@ class AboutScreen extends React.Component<PropsType> {
    */
   additionalDevData = [
     {
-      onPressCallback: () => {},
+      onPressCallback: () => {
+        this.onListItemPress(
+            'Yohan Simard',
+            'Correction de quelques bugs');
+      },
       icon: 'account',
       text: 'Yohan SIMARD',
       showChevron: false,
@@ -172,6 +180,62 @@ class AboutScreen extends React.Component<PropsType> {
     },
   ];
 
+  /**
+   * Data to be displayed in the thanks card
+   */
+  thanksData = [
+    {
+      onPressCallback: () => {
+        this.onListItemPress(
+            'Béranger Quintana Y Arciosana',
+            'É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.');
+      },
+      icon: 'account-circle',
+      text: 'Béranger Quintana Y Arciosana',
+      showChevron: false,
+    },
+    {
+      onPressCallback: () => {
+        this.onListItemPress(
+            'Céline Tassin',
+            'É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 🦊.');
+      },
+      icon: 'account-circle',
+      text: 'Céline Tassin',
+      showChevron: false,
+    },
+    {
+      onPressCallback: () => {
+        this.onListItemPress(
+            'Damien Molina',
+            'É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.');
+      },
+      icon: 'account-circle',
+      text: 'Damien Molina',
+      showChevron: false,
+    },
+    {
+      onPressCallback: () => {
+        this.onListItemPress(
+            'Titouan Labourdette',
+            'É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.');
+      },
+      icon: 'account-circle',
+      text: 'Titouan Labourdette',
+      showChevron: false,
+    },
+    {
+      onPressCallback: () => {
+        this.onListItemPress(
+            'Titouan Labourdette',
+            'Étudiant en IR (2020). Il a beaucoup aidé pour trouver des bugs et proposer des nouvelles fonctionnalités.');
+      },
+      icon: 'account-circle',
+      text: 'Titouan Labourdette',
+      showChevron: false,
+    },
+  ];
+
   /**
    * Data to be displayed in the technologies card
    */
@@ -205,11 +269,37 @@ class AboutScreen extends React.Component<PropsType> {
     {
       id: 'team',
     },
+    {
+      id: 'thanks',
+    },
     {
       id: 'techno',
     },
   ];
 
+  constructor() {
+    super();
+    this.state = {
+      modalCurrentDisplayItem: null,
+    };
+  }
+
+  /**
+   * Callback used when clicking an article in the list.
+   * It opens the modal to show detailed information about the article
+   *
+   * @param title TODO
+   * @param message TODO
+   */
+  onListItemPress(title: string, message : string) {
+    this.setState({
+      modalCurrentDisplayItem: AboutScreen.getModalItemContent(title, message),
+    });
+    if (this.modalRef) {
+      this.modalRef.open();
+    }
+  }
+
   /**
    * Gets the app card showing information and links about the app.
    *
@@ -274,6 +364,30 @@ class AboutScreen extends React.Component<PropsType> {
     );
   }
 
+  /**
+   * Gets the thanks card showing information and links about the team TODO
+   *
+   * @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" />
+              )}
+          />
+          <FlatList
+              data={this.thanksData}
+              keyExtractor={this.keyExtractor}
+              listKey="1"
+              renderItem={this.getCardItem}
+          />
+        </Card>
+    );
+  }
+
   /**
    * Gets the techno card showing information and links about the technologies used in the app
    *
@@ -294,6 +408,29 @@ class AboutScreen extends React.Component<PropsType> {
     );
   }
 
+  /**
+   * Gets the modal content depending on the given article TODO
+   *
+   * @param title TODO
+   * @param message TODO
+   * @return {*}
+   */
+  static getModalItemContent(title: string, message : string): React.Node {
+    return (
+        <View
+            style={{
+              flex: 1,
+              padding: 20,
+            }}>
+          <Title>{title}</Title>
+          <ScrollView>
+            <Text>{message}</Text>
+          </ScrollView>
+        </View>
+    );
+  }
+
+
   /**
    * Gets a chevron icon
    *
@@ -358,6 +495,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:
@@ -373,13 +512,31 @@ class AboutScreen extends React.Component<PropsType> {
    */
   keyExtractor = (item: ListItemType): string => item.icon;
 
+  /**
+   * Callback used when receiving the modal ref
+   *
+   * @param ref
+   */
+  onModalRef = (ref: Modalize) => {
+    this.modalRef = ref;
+  };
+
   render(): React.Node {
+    const {state} = this;
     return (
-      <CollapsibleFlatList
+      <View
-        style={{padding: 5}}
+          style={{
-        data={this.dataOrder}
+            height: '100%',
-        renderItem={this.getMainCard}
+          }}>
-      />
+        <CollapsibleFlatList
+          style={{padding: 5}}
+          data={this.dataOrder}
+          renderItem={this.getMainCard}
+        />
+        <CustomModal onRef={this.onModalRef}>
+          {state.modalCurrentDisplayItem}
+        </CustomModal>
+      </View>
     );
   }
 }