Browse Source

Added a welcome box on profile screen

Arnaud Vergnet 3 years ago
parent
commit
98359dba7d
3 changed files with 87 additions and 4 deletions
  1. 78
    2
      src/screens/Amicale/ProfileScreen.js
  2. 4
    1
      translations/en.json
  3. 5
    1
      translations/fr.json

+ 78
- 2
src/screens/Amicale/ProfileScreen.js View File

@@ -2,7 +2,7 @@
2 2
 
3 3
 import * as React from 'react';
4 4
 import {Animated, FlatList, StyleSheet, View} from "react-native";
5
-import {Avatar, Button, Card, Divider, List, withTheme} from 'react-native-paper';
5
+import {Avatar, Button, Card, Divider, List, Paragraph, withTheme} from 'react-native-paper';
6 6
 import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
7 7
 import i18n from 'i18n-js';
8 8
 import LogoutDialog from "../../components/Amicale/LogoutDialog";
@@ -10,6 +10,8 @@ import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHead
10 10
 import CustomTabBar from "../../components/Tabbar/CustomTabBar";
11 11
 import {Collapsible} from "react-navigation-collapsible";
12 12
 import {withCollapsible} from "../../utils/withCollapsible";
13
+import type {cardList} from "../../components/Lists/CardList/CardList";
14
+import CardList from "../../components/Lists/CardList/CardList";
13 15
 
14 16
 type Props = {
15 17
     navigation: Object,
@@ -21,6 +23,11 @@ type State = {
21 23
     dialogVisible: boolean,
22 24
 }
23 25
 
26
+const CLUBS_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Clubs.png";
27
+const VOTE_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Vote.png";
28
+
29
+const ICON_AMICALE = require('../../../assets/amicale.png');
30
+
24 31
 class ProfileScreen extends React.Component<Props, State> {
25 32
 
26 33
     state = {
@@ -30,6 +37,7 @@ class ProfileScreen extends React.Component<Props, State> {
30 37
     data: Object;
31 38
 
32 39
     flatListData: Array<Object>;
40
+    amicaleDataset: cardList;
33 41
 
34 42
     constructor() {
35 43
         super();
@@ -37,7 +45,28 @@ class ProfileScreen extends React.Component<Props, State> {
37 45
             {id: '0'},
38 46
             {id: '1'},
39 47
             {id: '2'},
48
+            {id: '3'},
40 49
         ]
50
+        this.amicaleDataset = [
51
+            {
52
+                title: i18n.t('screens.clubsAbout'),
53
+                subtitle: i18n.t('servicesScreen.descriptions.clubs'),
54
+                image: CLUBS_IMAGE,
55
+                onPress: () => this.props.navigation.navigate("club-list"),
56
+            },
57
+            {
58
+                title: i18n.t('screens.vote'),
59
+                subtitle: i18n.t('servicesScreen.descriptions.vote'),
60
+                image: VOTE_IMAGE,
61
+                onPress: () => this.props.navigation.navigate("vote"),
62
+            },
63
+            {
64
+                title: i18n.t('screens.amicaleWebsite'),
65
+                subtitle: i18n.t('servicesScreen.descriptions.amicaleWebsite'),
66
+                image: ICON_AMICALE,
67
+                onPress: () => this.props.navigation.navigate("amicale-website"),
68
+            },
69
+        ];
41 70
     }
42 71
 
43 72
     componentDidMount() {
@@ -83,14 +112,61 @@ class ProfileScreen extends React.Component<Props, State> {
83 112
     getRenderItem = ({item}: Object) => {
84 113
         switch (item.id) {
85 114
             case '0':
86
-                return this.getPersonalCard();
115
+                return this.getWelcomeCard();
87 116
             case '1':
117
+                return this.getPersonalCard();
118
+            case '2':
88 119
                 return this.getClubCard();
89 120
             default:
90 121
                 return this.getMembershipCar();
91 122
         }
92 123
     };
93 124
 
125
+    getServicesList() {
126
+        return (
127
+            <CardList
128
+                dataset={this.amicaleDataset}
129
+                isHorizontal={true}
130
+            />
131
+        );
132
+    }
133
+
134
+    getWelcomeCard() {
135
+        return (
136
+            <Card style={styles.card}>
137
+                <Card.Title
138
+                    title={i18n.t("profileScreen.welcomeTitle", {name: this.data.first_name})}
139
+                    left={(props) => <Avatar.Image
140
+                        size={64}
141
+                        source={ICON_AMICALE}
142
+                        style={{backgroundColor: 'transparent',}}
143
+                    />}
144
+                    titleStyle={{marginLeft: 10}}
145
+                />
146
+                <Card.Content>
147
+                    <Divider/>
148
+                    <Paragraph>
149
+                        {i18n.t("profileScreen.welcomeDescription")}
150
+                    </Paragraph>
151
+                    {this.getServicesList()}
152
+                    <Paragraph>
153
+                        {i18n.t("profileScreen.welcomeFeedback")}
154
+                    </Paragraph>
155
+                    <Divider/>
156
+                    <Card.Actions>
157
+                        <Button
158
+                            icon="bug"
159
+                            mode="contained"
160
+                            onPress={() => this.props.navigation.navigate('feedback')}
161
+                            style={styles.editButton}>
162
+                            {i18n.t("feedbackScreen.homeButtonTitle")}
163
+                        </Button>
164
+                    </Card.Actions>
165
+                </Card.Content>
166
+            </Card>
167
+        );
168
+    }
169
+
94 170
     /**
95 171
      * Checks if the given field is available
96 172
      *

+ 4
- 1
translations/en.json View File

@@ -228,7 +228,10 @@
228 228
     "membership": "Membership Fee",
229 229
     "membershipSubtitle": "Allows you to take part in various activities",
230 230
     "membershipPayed": "Payed",
231
-    "membershipNotPayed": "Not payed"
231
+    "membershipNotPayed": "Not payed",
232
+    "welcomeTitle": "Welcome %{name}!",
233
+    "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!",
234
+    "welcomeFeedback": "We plan on doing more! If you have any suggestions or found bugs, please tell us by clicking the button bellow."
232 235
   },
233 236
   "scannerScreen": {
234 237
     "errorPermission": "Scanotron 3000 needs access to the camera in order to scan QR codes.\nThe camera will never be used for any other purpose.",

+ 5
- 1
translations/fr.json View File

@@ -228,7 +228,11 @@
228 228
     "membership": "Cotisation",
229 229
     "membershipSubtitle": "Permet de participer à diverses activités",
230 230
     "membershipPayed": "Payée",
231
-    "membershipNotPayed": "Non payée"
231
+    "membershipNotPayed": "Non payée",
232
+    "welcomeTitle": "Bonjour %{name} !",
233
+    "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 !",
234
+    "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."
235
+
232 236
   },
233 237
   "scannerScreen": {
234 238
     "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.",

Loading…
Cancel
Save