lpitault/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Update Screen

Browse source
This commit is contained in:
docjyJ 2020-09-02 14:53:11 +02:00
parent 47e749b528
commit 955eb11b84
1 changed files with 95 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

165
src/screens/About/AboutScreen.js
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,8 +13,7 @@ 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,
@ -82,23 +81,25 @@ class AboutScreen extends React.Component<PropsType> {
*/ */
teamUsers = { teamUsers = {
arnaud: { arnaud: {
name: 'Arnaud VERGNET', name: 'Arnaud Vergnrt',
message: 'C vrément tro 1 bg !!', message: i18n.t('screens.about.user.arnaud'),
icon: 'account-circle', icon: 'crown',
btnTrool: { btnTrool: {
title: 'SWAG', title: 'SWAG',
onPress: () => { onPress: () => {
openWebLink(links.meme); openWebLink(links.meme);
},
}, },
},
btnLinkedin: { btnLinkedin: {
title: 'Linkedin', title: '',
icon: 'linkedin',
onPress: () => { onPress: () => {
openWebLink(links.arnaudMail); openWebLink(links.arnaudMail);
}, },
}, },
btnMail: { btnMail: {
title: i18n.t('screens.about.authorMail'), title: '',
icon: 'email-edit',
onPress: () => { onPress: () => {
openWebLink(links.arnaudLinkedin); openWebLink(links.arnaudLinkedin);
}, },
@ -106,22 +107,38 @@ class AboutScreen extends React.Component<PropsType> {
}, },
yohan: { yohan: {
name: 'Yohan Simard', name: 'Yohan Simard',
message: 'Correction de quelques bugs', message: i18n.t('screens.about.user.yohan'),
icon: 'account-circle', icon: 'xml',
btnTrool: null, btnTrool: null,
btnLinkedin: { btnLinkedin: {
title: 'Linkedin', title: '',
icon: 'linkedin',
onPress: () => { onPress: () => {
openWebLink(links.yohanLinkedin); openWebLink(links.yohanLinkedin);
}, },
}, },
btnMail: { btnMail: {
title: i18n.t('screens.about.authorMail'), title: '',
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,
},
}; };
/** /**
@ -130,40 +147,40 @@ class AboutScreen extends React.Component<PropsType> {
thanksUsers = { thanksUsers = {
beranger: { beranger: {
name: 'Béranger Quintana Y Arciosana', name: 'Béranger Quintana Y Arciosana',
message: 'É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.', message: i18n.t('screens.about.user.beranger'),
icon: 'account-circle', icon: 'account-heart',
btnTrool: null, btnTrool: null,
btnLinkedin: null, btnLinkedin: null,
btnMail: null, btnMail: null,
}, },
celine: { celine: {
name: 'Céline Tassin', name: 'Céline Tassin',
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 🦊.', message: i18n.t('screens.about.user.celine'),
icon: 'account-circle', icon: 'brush',
btnTrool: null, btnTrool: null,
btnLinkedin: null, btnLinkedin: null,
btnMail: null, btnMail: null,
}, },
damien: { damien: {
name: 'Damien Molina', name: 'Damien Molina',
message: 'É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.', message: i18n.t('screens.about.user.damien'),
icon: 'account-circle', icon: 'web',
btnTrool: null, btnTrool: null,
btnLinkedin: null, btnLinkedin: null,
btnMail: null, btnMail: null,
}, },
titouan: { titouan: {
name: 'Titouan Labourdette', name: 'Titouan Labourdette',
message: 'É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.', message: i18n.t('screens.about.user.titouan'),
icon: 'account-circle', icon: 'shield-bug',
btnTrool: null, btnTrool: null,
btnLinkedin: null, btnLinkedin: null,
btnMail: null, btnMail: null,
}, },
theo: { theo: {
name: 'Théo Tami', name: 'Théo Tami',
message: 'Étudiant en IR (2020). Il a beaucoup aidé pour trouver des bugs et proposer des nouvelles fonctionnalités.', message: i18n.t('screens.about.user.theo'),
icon: 'account-circle', icon: 'food-apple',
btnTrool: null, btnTrool: null,
btnLinkedin: null, btnLinkedin: null,
btnMail: null, btnMail: null,
@ -240,6 +257,14 @@ 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,
},
]; ];
/** /**
@ -346,24 +371,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 TODO * @param user A user key
*/ */
onListItemPress(user: AthorsItemType) { onListItemPress(user: AthorsItemType) {
const dialogBtn: Array<OptionsDialogButtonType> = [ const dialogBtn: Array<IconOptionsDialogButtonType> = [
{ {
title: 'OK', title: 'OK',
onPress: () => { onPress: () => {
this.onDialogDismiss(); this.setState({dialogVisible: false});
}, },
} },
]; ];
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({
@ -430,27 +455,27 @@ class AboutScreen extends React.Component<PropsType> {
} }
/** /**
* Gets the thanks card showing information and links about the team TODO * Get the thank you card showing support information and links
* *
* @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>
<FlatList </Card>
data={this.thanksData}
keyExtractor={this.keyExtractor}
renderItem={this.getCardItem}
/>
</Card.Content>
</Card>
); );
} }
@ -461,21 +486,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="build" /> <Avatar.Icon size={iconProps.size} icon="wrench" />
)} )}
/>
<Card.Content>
<FlatList
data={this.technoData}
keyExtractor={this.keyExtractor}
renderItem={this.getCardItem}
/> />
<Card.Content> </Card.Content>
<FlatList </Card>
data={this.technoData}
keyExtractor={this.keyExtractor}
renderItem={this.getCardItem}
/>
</Card.Content>
</Card>
); );
} }
@ -564,20 +589,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>
); );