Added a welcome box on profile screen

This commit is contained in:
Arnaud Vergnet 2020-06-26 13:01:27 +02:00
parent f2acb59ea7
commit 98359dba7d
3 changed files with 87 additions and 4 deletions

View file

@ -2,7 +2,7 @@
import * as React from 'react';
import {Animated, FlatList, StyleSheet, View} from "react-native";
import {Avatar, Button, Card, Divider, List, withTheme} from 'react-native-paper';
import {Avatar, Button, Card, Divider, List, Paragraph, withTheme} from 'react-native-paper';
import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
import i18n from 'i18n-js';
import LogoutDialog from "../../components/Amicale/LogoutDialog";
@ -10,6 +10,8 @@ import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHead
import CustomTabBar from "../../components/Tabbar/CustomTabBar";
import {Collapsible} from "react-navigation-collapsible";
import {withCollapsible} from "../../utils/withCollapsible";
import type {cardList} from "../../components/Lists/CardList/CardList";
import CardList from "../../components/Lists/CardList/CardList";
type Props = {
navigation: Object,
@ -21,6 +23,11 @@ type State = {
dialogVisible: boolean,
}
const CLUBS_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Clubs.png";
const VOTE_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Vote.png";
const ICON_AMICALE = require('../../../assets/amicale.png');
class ProfileScreen extends React.Component<Props, State> {
state = {
@ -30,6 +37,7 @@ class ProfileScreen extends React.Component<Props, State> {
data: Object;
flatListData: Array<Object>;
amicaleDataset: cardList;
constructor() {
super();
@ -37,7 +45,28 @@ class ProfileScreen extends React.Component<Props, State> {
{id: '0'},
{id: '1'},
{id: '2'},
{id: '3'},
]
this.amicaleDataset = [
{
title: i18n.t('screens.clubsAbout'),
subtitle: i18n.t('servicesScreen.descriptions.clubs'),
image: CLUBS_IMAGE,
onPress: () => this.props.navigation.navigate("club-list"),
},
{
title: i18n.t('screens.vote'),
subtitle: i18n.t('servicesScreen.descriptions.vote'),
image: VOTE_IMAGE,
onPress: () => this.props.navigation.navigate("vote"),
},
{
title: i18n.t('screens.amicaleWebsite'),
subtitle: i18n.t('servicesScreen.descriptions.amicaleWebsite'),
image: ICON_AMICALE,
onPress: () => this.props.navigation.navigate("amicale-website"),
},
];
}
componentDidMount() {
@ -83,14 +112,61 @@ class ProfileScreen extends React.Component<Props, State> {
getRenderItem = ({item}: Object) => {
switch (item.id) {
case '0':
return this.getPersonalCard();
return this.getWelcomeCard();
case '1':
return this.getPersonalCard();
case '2':
return this.getClubCard();
default:
return this.getMembershipCar();
}
};
getServicesList() {
return (
<CardList
dataset={this.amicaleDataset}
isHorizontal={true}
/>
);
}
getWelcomeCard() {
return (
<Card style={styles.card}>
<Card.Title
title={i18n.t("profileScreen.welcomeTitle", {name: this.data.first_name})}
left={(props) => <Avatar.Image
size={64}
source={ICON_AMICALE}
style={{backgroundColor: 'transparent',}}
/>}
titleStyle={{marginLeft: 10}}
/>
<Card.Content>
<Divider/>
<Paragraph>
{i18n.t("profileScreen.welcomeDescription")}
</Paragraph>
{this.getServicesList()}
<Paragraph>
{i18n.t("profileScreen.welcomeFeedback")}
</Paragraph>
<Divider/>
<Card.Actions>
<Button
icon="bug"
mode="contained"
onPress={() => this.props.navigation.navigate('feedback')}
style={styles.editButton}>
{i18n.t("feedbackScreen.homeButtonTitle")}
</Button>
</Card.Actions>
</Card.Content>
</Card>
);
}
/**
* Checks if the given field is available
*

View file

@ -228,7 +228,10 @@
"membership": "Membership Fee",
"membershipSubtitle": "Allows you to take part in various activities",
"membershipPayed": "Payed",
"membershipNotPayed": "Not payed"
"membershipNotPayed": "Not payed",
"welcomeTitle": "Welcome %{name}!",
"welcomeDescription": "This is your Amicale INSA Toulouse personal space. Bellow are the current services you can access thanks to your account. Feels empty? You're right and we plan on fixing that, so stay tuned!",
"welcomeFeedback": "We plan on doing more! If you have any suggestions or found bugs, please tell us by clicking the button bellow."
},
"scannerScreen": {
"errorPermission": "Scanotron 3000 needs access to the camera in order to scan QR codes.\nThe camera will never be used for any other purpose.",

View file

@ -228,7 +228,11 @@
"membership": "Cotisation",
"membershipSubtitle": "Permet de participer à diverses activités",
"membershipPayed": "Payée",
"membershipNotPayed": "Non payée"
"membershipNotPayed": "Non payée",
"welcomeTitle": "Bonjour %{name} !",
"welcomeDescription": "Ceci est votre espace personnel Amicale INSA Toulouse. Vous trouverez ci-dessous les services disponibles avec votre compte. Un peu vide ? Vous avez raison et nous allons essayer de corriger ça, donc restez à jour !",
"welcomeFeedback": "Nous allons essayer de proposer plus de services ! Si vous avez des suggestions, ou avez trouvé des bugs, merci de nous contacter avec le bouton ci-dessous."
},
"scannerScreen": {
"errorPermission": "Scanotron 3000 a besoin d'accéder à la caméra pour scanner des QR codes.\nLa caméra ne sera jamais utilisée autrement.",