Update About Screen

This commit is contained in:
docjyJ 2020-09-01 11:21:26 +02:00
parent 3ff5a40f8d
commit c6bb1ccc86
3 changed files with 70 additions and 99 deletions

View file

@ -346,9 +346,7 @@
"license": "License", "license": "License",
"debug": "Debug", "debug": "Debug",
"team": "Team", "team": "Team",
"author": "Author and maintainer",
"authorMail": "Send an email", "authorMail": "Send an email",
"additionalDev": "Developer",
"technologies": "Technologies", "technologies": "Technologies",
"reactNative": "Made with React Native", "reactNative": "Made with React Native",
"libs": "Libraries used", "libs": "Libraries used",

View file

@ -345,9 +345,7 @@
"license": "Licence", "license": "Licence",
"debug": "Debug", "debug": "Debug",
"team": "Équipe", "team": "Équipe",
"author": "Auteur et mainteneur",
"authorMail": "Envoyer un mail", "authorMail": "Envoyer un mail",
"additionalDev": "Dévelopeur",
"technologies": "Technologies", "technologies": "Technologies",
"reactNative": "Créé avec React Native", "reactNative": "Créé avec React Native",
"libs": "Librairies utilisées", "libs": "Librairies utilisées",

View file

@ -5,7 +5,7 @@ import {FlatList, Linking, Platform, Image, View} from 'react-native';
import i18n from 'i18n-js'; import i18n from 'i18n-js';
import {Avatar, Card, List, withTheme} from 'react-native-paper'; import {Avatar, Card, List, withTheme} from 'react-native-paper';
import {StackNavigationProp} from '@react-navigation/stack'; import {StackNavigationProp} from '@react-navigation/stack';
import {Modalize} from 'react-native-modalize'; import {Modalize} from "react-native-modalize";
import packageJson from '../../../package.json'; import packageJson from '../../../package.json';
import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList'; import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
import APP_LOGO from '../../../assets/android.icon.round.png'; import APP_LOGO from '../../../assets/android.icon.round.png';
@ -13,7 +13,8 @@ import type {
CardTitleIconPropsType, CardTitleIconPropsType,
ListIconPropsType, ListIconPropsType,
} from '../../constants/PaperStyles'; } from '../../constants/PaperStyles';
import OptionsDialog from '../../components/Dialogs/OptionsDialog'; import OptionsDialog from "../../components/Dialogs/OptionsDialog";
import type {OptionsDialogButtonType} from "../../components/Dialogs/OptionsDialog";
type ListItemType = { type ListItemType = {
onPressCallback: () => void, onPressCallback: () => void,
@ -81,25 +82,23 @@ class AboutScreen extends React.Component<PropsType> {
*/ */
teamUsers = { teamUsers = {
arnaud: { arnaud: {
name: 'Arnaud Vergnrt', name: 'Arnaud VERGNET',
message: i18n.t('screens.about.user.arnaud'), message: 'C vrément tro 1 bg !!',
icon: 'crown', icon: 'account-circle',
btnTrool: { btnTrool: {
title: 'SWAG', title: 'SWAG',
onPress: () => { onPress: () => {
openWebLink(links.meme); openWebLink(links.meme);
},
}, },
},
btnLinkedin: { btnLinkedin: {
title: '', title: 'Linkedin',
icon: 'linkedin',
onPress: () => { onPress: () => {
openWebLink(links.arnaudMail); openWebLink(links.arnaudMail);
}, },
}, },
btnMail: { btnMail: {
title: '', title: i18n.t('screens.about.authorMail'),
icon: 'email-edit',
onPress: () => { onPress: () => {
openWebLink(links.arnaudLinkedin); openWebLink(links.arnaudLinkedin);
}, },
@ -107,38 +106,22 @@ class AboutScreen extends React.Component<PropsType> {
}, },
yohan: { yohan: {
name: 'Yohan Simard', name: 'Yohan Simard',
message: i18n.t('screens.about.user.yohan'), message: 'Correction de quelques bugs',
icon: 'xml', icon: 'account-circle',
btnTrool: null, btnTrool: null,
btnLinkedin: { btnLinkedin: {
title: '', title: 'Linkedin',
icon: 'linkedin',
onPress: () => { onPress: () => {
openWebLink(links.yohanLinkedin); openWebLink(links.yohanLinkedin);
}, },
}, },
btnMail: { btnMail: {
title: '', title: i18n.t('screens.about.authorMail'),
icon: 'email-edit',
onPress: () => { onPress: () => {
openWebLink(links.yohanMail); 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,
},
}; };
/** /**
@ -147,40 +130,40 @@ class AboutScreen extends React.Component<PropsType> {
thanksUsers = { thanksUsers = {
beranger: { beranger: {
name: 'Béranger Quintana Y Arciosana', name: 'Béranger Quintana Y Arciosana',
message: i18n.t('screens.about.user.beranger'), message: 'Étudiant en AE (2020) et Président de lAmicale au moment de la création et du lancement du projet. Lapplication, cétait son idée. Il a beaucoup aidé pour trouver des bugs, de nouvelles fonctionnalités et faire de la com.',
icon: 'account-heart', icon: 'account-circle',
btnTrool: null, btnTrool: null,
btnLinkedin: null, btnLinkedin: null,
btnMail: null, btnMail: null,
}, },
celine: { celine: {
name: 'Céline Tassin', name: 'Céline Tassin',
message: i18n.t('screens.about.user.celine'), message: 'É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: 'brush', icon: 'account-circle',
btnTrool: null, btnTrool: null,
btnLinkedin: null, btnLinkedin: null,
btnMail: null, btnMail: null,
}, },
damien: { damien: {
name: 'Damien Molina', name: 'Damien Molina',
message: i18n.t('screens.about.user.damien'), message: 'Étudiant en IR (2020) et créateur de la dernière version du site de lAmicale. Grâce à son aide, intégrer les services de lAmicale à lapplication a été très simple.',
icon: 'web', icon: 'account-circle',
btnTrool: null, btnTrool: null,
btnLinkedin: null, btnLinkedin: null,
btnMail: null, btnMail: null,
}, },
titouan: { titouan: {
name: 'Titouan Labourdette', name: 'Titouan Labourdette',
message: i18n.t('screens.about.user.titouan'), message: 'Étudiant en AE (2020) et Président de lAmicale au moment de la création et du lancement du projet. Lapplication, cétait son idée. Il a beaucoup aidé pour trouver des bugs, de nouvelles fonctionnalités et faire de la com.',
icon: 'shield-bug', icon: 'account-circle',
btnTrool: null, btnTrool: null,
btnLinkedin: null, btnLinkedin: null,
btnMail: null, btnMail: null,
}, },
theo: { theo: {
name: 'Théo Tami', name: 'Théo Tami',
message: i18n.t('screens.about.user.theo'), message: 'Étudiant en IR (2020). Il a beaucoup aidé pour trouver des bugs et proposer des nouvelles fonctionnalités.',
icon: 'food-apple', icon: 'account-circle',
btnTrool: null, btnTrool: null,
btnLinkedin: null, btnLinkedin: null,
btnMail: null, btnMail: null,
@ -257,14 +240,6 @@ class AboutScreen extends React.Component<PropsType> {
text: this.teamUsers.yohan.name, text: this.teamUsers.yohan.name,
showChevron: false, showChevron: false,
}, },
{
onPressCallback: () => {
this.onListItemPress(this.teamUsers.you);
},
icon: this.teamUsers.you.icon,
text: this.teamUsers.you.name,
showChevron: false,
},
]; ];
/** /**
@ -371,24 +346,24 @@ class AboutScreen extends React.Component<PropsType> {
* Callback used when clicking an article in the list. * Callback used when clicking an article in the list.
* It opens the modal to show detailed information about the article * It opens the modal to show detailed information about the article
* *
* @param user A user key * @param user TODO
*/ */
onListItemPress(user: AthorsItemType) { onListItemPress(user: AthorsItemType) {
const dialogBtn: Array<IconOptionsDialogButtonType> = [ const dialogBtn: Array<OptionsDialogButtonType> = [
{ {
title: 'OK', title: 'OK',
onPress: () => { onPress: () => {
this.setState({dialogVisible: false}); this.onDialogDismiss();
}, },
}, }
]; ];
if (user.btnMail != null) { if(user.btnMail != null) {
dialogBtn.push(user.btnMail); dialogBtn.push(user.btnMail);
} }
if (user.btnLinkedin != null) { if(user.btnLinkedin != null) {
dialogBtn.push(user.btnLinkedin); dialogBtn.push(user.btnLinkedin);
} }
if (user.btnTrool != null) { if(user.btnTrool != null) {
dialogBtn.push(user.btnTrool); dialogBtn.push(user.btnTrool);
} }
this.setState({ this.setState({
@ -455,27 +430,27 @@ class AboutScreen extends React.Component<PropsType> {
} }
/** /**
* Get the thank you card showing support information and links * Gets the thanks card showing information and links about the team TODO
* *
* @return {*} * @return {*}
*/ */
getThanksCard(): React.Node { getThanksCard(): React.Node {
return ( return (
<Card style={{marginBottom: 10}}> <Card style={{marginBottom: 10}}>
<Card.Title <Card.Title
title={i18n.t('screens.about.thanks')} title={i18n.t('screens.about.thanks')}
left={(iconProps: CardTitleIconPropsType): React.Node => ( left={(iconProps: CardTitleIconPropsType): React.Node => (
<Avatar.Icon size={iconProps.size} icon="hand-heart" /> <Avatar.Icon size={iconProps.size} icon="hand-heart" />
)} )}
/>
<Card.Content>
<FlatList
data={this.thanksData}
keyExtractor={this.keyExtractor}
renderItem={this.getCardItem}
/> />
</Card.Content> <Card.Content>
</Card> <FlatList
data={this.thanksData}
keyExtractor={this.keyExtractor}
renderItem={this.getCardItem}
/>
</Card.Content>
</Card>
); );
} }
@ -486,21 +461,21 @@ class AboutScreen extends React.Component<PropsType> {
*/ */
getTechnoCard(): React.Node { getTechnoCard(): React.Node {
return ( return (
<Card style={{marginBottom: 10}}> <Card style={{marginBottom: 10}}>
<Card.Title <Card.Title
title={i18n.t('screens.about.technologies')} title={i18n.t('screens.about.technologies')}
left={(iconProps: CardTitleIconPropsType): React.Node => ( left={(iconProps: CardTitleIconPropsType): React.Node => (
<Avatar.Icon size={iconProps.size} icon="wrench" /> <Avatar.Icon size={iconProps.size} icon="build" />
)} )}
/>
<Card.Content>
<FlatList
data={this.technoData}
keyExtractor={this.keyExtractor}
renderItem={this.getCardItem}
/> />
</Card.Content> <Card.Content>
</Card> <FlatList
data={this.technoData}
keyExtractor={this.keyExtractor}
renderItem={this.getCardItem}
/>
</Card.Content>
</Card>
); );
} }
@ -589,20 +564,20 @@ class AboutScreen extends React.Component<PropsType> {
const {state} = this; const {state} = this;
return ( return (
<View <View
style={{ style={{
height: '100%', height: '100%',
}}> }}>
<CollapsibleFlatList <CollapsibleFlatList
style={{padding: 5}} style={{padding: 5}}
data={this.dataOrder} data={this.dataOrder}
renderItem={this.getMainCard} renderItem={this.getMainCard}
/> />
<OptionsDialog <OptionsDialog
visible={state.dialogVisible} visible={state.dialogVisible}
title={state.dialogTitle} title={state.dialogTitle}
message={state.dialogMessage} message={state.dialogMessage}
buttons={state.dialogButtons} buttons={state.dialogButtons}
onDismiss={state.onDialogDismiss} onDismiss={state.onDialogDismiss}
/> />
</View> </View>
); );