diff --git a/src/screens/About/AboutScreen.js b/src/screens/About/AboutScreen.js index d26253a..9ea57de 100644 --- a/src/screens/About/AboutScreen.js +++ b/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 { + modalRef: Modalize | null; + /** * Data to be displayed in the app card */ @@ -149,7 +153,11 @@ class AboutScreen extends React.Component { */ 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 { }, ]; + /** + * 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 { { 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 { ); } + /** + * Gets the thanks card showing information and links about the team TODO + * + * @return {*} + */ + getThanksCard(): React.Node { + return ( + + ( + + )} + /> + + + ); + } + /** * Gets the techno card showing information and links about the technologies used in the app * @@ -294,6 +408,29 @@ class AboutScreen extends React.Component { ); } + /** + * 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 ( + + {title} + + {message} + + + ); + } + + /** * Gets a chevron icon * @@ -358,6 +495,8 @@ class AboutScreen extends React.Component { 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 { */ 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 ( - + + + + {state.modalCurrentDisplayItem} + + ); } }