Browse Source

Update About Screen

docjyJ 1 year ago
parent
commit
a9a2b9150b
3 changed files with 192 additions and 153 deletions
  1. 0
    2
      locales/en.json
  2. 0
    2
      locales/fr.json
  3. 192
    149
      src/screens/About/AboutScreen.js

+ 0
- 2
locales/en.json View File

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

+ 0
- 2
locales/fr.json View File

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

+ 192
- 149
src/screens/About/AboutScreen.js View File

@@ -1,19 +1,20 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {FlatList, Linking, Platform, Image, View, ScrollView} from 'react-native';
4
+import {FlatList, Linking, Platform, Image, View} from 'react-native';
5 5
 import i18n from 'i18n-js';
6
-import {Avatar, Card, List, Text, Title, withTheme} from 'react-native-paper';
6
+import {Avatar, Card, List, withTheme} from 'react-native-paper';
7 7
 import {StackNavigationProp} from '@react-navigation/stack';
8 8
 import {Modalize} from "react-native-modalize";
9 9
 import packageJson from '../../../package.json';
10 10
 import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
11
-import APP_LOGO from '../../../assets/android.icon.png';
11
+import APP_LOGO from '../../../assets/android.icon.round.png';
12 12
 import type {
13 13
   CardTitleIconPropsType,
14 14
   ListIconPropsType,
15 15
 } from '../../constants/PaperStyles';
16
-import CustomModal from "../../components/Overrides/CustomModal";
16
+import OptionsDialog from "../../components/Dialogs/OptionsDialog";
17
+import type {OptionsDialogButtonType} from "../../components/Dialogs/OptionsDialog";
17 18
 
18 19
 type ListItemType = {
19 20
   onPressCallback: () => void,
@@ -22,6 +23,14 @@ type ListItemType = {
22 23
   showChevron: boolean,
23 24
 };
24 25
 
26
+type AthorsItemType = {
27
+  name: string,
28
+  message: string,
29
+  btnTrool: OptionsDialogButtonType,
30
+  btnLinkedin: OptionsDialogButtonType,
31
+  btnMail: OptionsDialogButtonType,
32
+};
33
+
25 34
 const links = {
26 35
   appstore: 'https://apps.apple.com/us/app/campus-amicale-insat/id1477722148',
27 36
   playstore:
@@ -32,13 +41,13 @@ const links = {
32 41
     'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/Changelog.md',
33 42
   license:
34 43
     'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/LICENSE',
35
-  authorMail:
44
+  arnaudMail:
36 45
     'mailto:vergnet@etud.insa-toulouse.fr?' +
37 46
     'subject=' +
38 47
     'Application Amicale INSA Toulouse' +
39 48
     '&body=' +
40 49
     'Coucou !\n\n',
41
-  authorLinkedin: 'https://www.linkedin.com/in/arnaud-vergnet-434ba5179/',
50
+  arnaudLinkedin: 'https://www.linkedin.com/in/arnaud-vergnet-434ba5179/',
42 51
   yohanMail:
43 52
     'mailto:ysimard@etud.insa-toulouse.fr?' +
44 53
     'subject=' +
@@ -69,6 +78,99 @@ class AboutScreen extends React.Component<PropsType> {
69 78
   modalRef: Modalize | null;
70 79
 
71 80
   /**
81
+   * Data team
82
+   */
83
+  teamUsers = {
84
+    arnaud: {
85
+      name: 'Arnaud VERGNET',
86
+      message: 'C vrément tro 1 bg !!',
87
+      icon: 'account-circle',
88
+      btnTrool: {
89
+          title: 'SWAG',
90
+          onPress: () => {
91
+            openWebLink(links.meme);
92
+          },
93
+        },
94
+      btnLinkedin: {
95
+        title: 'Linkedin',
96
+        onPress: () => {
97
+          openWebLink(links.arnaudMail);
98
+        },
99
+      },
100
+      btnMail: {
101
+        title: i18n.t('screens.about.authorMail'),
102
+        onPress: () => {
103
+          openWebLink(links.arnaudLinkedin);
104
+        },
105
+      },
106
+    },
107
+    yohan: {
108
+      name: 'Yohan Simard',
109
+      message: 'Correction de quelques bugs',
110
+      icon: 'account-circle',
111
+      btnTrool: null,
112
+      btnLinkedin: {
113
+        title: 'Linkedin',
114
+        onPress: () => {
115
+          openWebLink(links.yohanLinkedin);
116
+        },
117
+      },
118
+      btnMail: {
119
+        title: i18n.t('screens.about.authorMail'),
120
+        onPress: () => {
121
+          openWebLink(links.yohanMail);
122
+        },
123
+      },
124
+    },
125
+  };
126
+
127
+  /**
128
+   * Data thanks
129
+   */
130
+  thanksUsers = {
131
+    beranger: {
132
+      name: 'Béranger Quintana Y Arciosana',
133
+      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.',
134
+      icon: 'account-circle',
135
+      btnTrool: null,
136
+      btnLinkedin: null,
137
+      btnMail: null,
138
+    },
139
+    celine: {
140
+      name: 'Céline Tassin',
141
+      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 🦊.',
142
+      icon: 'account-circle',
143
+      btnTrool: null,
144
+      btnLinkedin: null,
145
+      btnMail: null,
146
+    },
147
+    damien: {
148
+      name: 'Damien Molina',
149
+      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.',
150
+      icon: 'account-circle',
151
+      btnTrool: null,
152
+      btnLinkedin: null,
153
+      btnMail: null,
154
+    },
155
+    titouan: {
156
+      name: 'Titouan Labourdette',
157
+      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.',
158
+      icon: 'account-circle',
159
+      btnTrool: null,
160
+      btnLinkedin: null,
161
+      btnMail: null,
162
+    },
163
+    theo: {
164
+      name: 'Théo Tami',
165
+      message: 'Étudiant en IR (2020). Il a beaucoup aidé pour trouver des bugs et proposer des nouvelles fonctionnalités.',
166
+      icon: 'account-circle',
167
+      btnTrool: null,
168
+      btnLinkedin: null,
169
+      btnMail: null,
170
+    },
171
+  };
172
+
173
+  /**
72 174
    * Data to be displayed in the app card
73 175
    */
74 176
   appData = [
@@ -119,64 +221,24 @@ class AboutScreen extends React.Component<PropsType> {
119 221
   ];
120 222
 
121 223
   /**
122
-   * Data to be displayed in the author card
123
-   */
124
-  authorData = [
125
-    {
126
-      onPressCallback: () => {
127
-        openWebLink(links.meme);
128
-      },
129
-      icon: 'account-circle',
130
-      text: 'Arnaud VERGNET',
131
-      showChevron: false,
132
-    },
133
-    {
134
-      onPressCallback: () => {
135
-        openWebLink(links.authorMail);
136
-      },
137
-      icon: 'email',
138
-      text: i18n.t('screens.about.authorMail'),
139
-      showChevron: true,
140
-    },
141
-    {
142
-      onPressCallback: () => {
143
-        openWebLink(links.authorLinkedin);
144
-      },
145
-      icon: 'linkedin',
146
-      text: 'Linkedin',
147
-      showChevron: true,
148
-    },
149
-  ];
150
-
151
-  /**
152 224
    * Data to be displayed in the additional developer card
153 225
    */
154
-  additionalDevData = [
226
+  teamData = [
155 227
     {
156 228
       onPressCallback: () => {
157
-        this.onListItemPress(
158
-            'Yohan Simard',
159
-            'Correction de quelques bugs');
229
+        this.onListItemPress(this.teamUsers.arnaud);
160 230
       },
161
-      icon: 'account',
162
-      text: 'Yohan SIMARD',
231
+      icon: this.teamUsers.arnaud.icon,
232
+      text: this.teamUsers.arnaud.name,
163 233
       showChevron: false,
164 234
     },
165 235
     {
166 236
       onPressCallback: () => {
167
-        openWebLink(links.yohanMail);
168
-      },
169
-      icon: 'email',
170
-      text: i18n.t('screens.about.authorMail'),
171
-      showChevron: true,
172
-    },
173
-    {
174
-      onPressCallback: () => {
175
-        openWebLink(links.yohanLinkedin);
237
+        this.onListItemPress(this.teamUsers.yohan);
176 238
       },
177
-      icon: 'linkedin',
178
-      text: 'Linkedin',
179
-      showChevron: true,
239
+      icon: this.teamUsers.yohan.icon,
240
+      text: this.teamUsers.yohan.name,
241
+      showChevron: false,
180 242
     },
181 243
   ];
182 244
 
@@ -186,52 +248,42 @@ class AboutScreen extends React.Component<PropsType> {
186 248
   thanksData = [
187 249
     {
188 250
       onPressCallback: () => {
189
-        this.onListItemPress(
190
-            'Béranger Quintana Y Arciosana',
191
-            'É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.');
251
+        this.onListItemPress(this.thanksUsers.beranger);
192 252
       },
193
-      icon: 'account-circle',
194
-      text: 'Béranger Quintana Y Arciosana',
253
+      icon: this.thanksUsers.beranger.icon,
254
+      text: this.thanksUsers.beranger.name,
195 255
       showChevron: false,
196 256
     },
197 257
     {
198 258
       onPressCallback: () => {
199
-        this.onListItemPress(
200
-            'Céline Tassin',
201
-            'É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 🦊.');
259
+        this.onListItemPress(this.thanksUsers.celine);
202 260
       },
203
-      icon: 'account-circle',
204
-      text: 'Céline Tassin',
261
+      icon: this.thanksUsers.celine.icon,
262
+      text: this.thanksUsers.celine.name,
205 263
       showChevron: false,
206 264
     },
207 265
     {
208 266
       onPressCallback: () => {
209
-        this.onListItemPress(
210
-            'Damien Molina',
211
-            'É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.');
267
+        this.onListItemPress(this.thanksUsers.damien);
212 268
       },
213
-      icon: 'account-circle',
214
-      text: 'Damien Molina',
269
+      icon: this.thanksUsers.damien.icon,
270
+      text: this.thanksUsers.damien.name,
215 271
       showChevron: false,
216 272
     },
217 273
     {
218 274
       onPressCallback: () => {
219
-        this.onListItemPress(
220
-            'Titouan Labourdette',
221
-            'É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.');
275
+        this.onListItemPress(this.thanksUsers.titouan);
222 276
       },
223
-      icon: 'account-circle',
224
-      text: 'Titouan Labourdette',
277
+      icon: this.thanksUsers.titouan.icon,
278
+      text: this.thanksUsers.titouan.name,
225 279
       showChevron: false,
226 280
     },
227 281
     {
228 282
       onPressCallback: () => {
229
-        this.onListItemPress(
230
-            'Titouan Labourdette',
231
-            'Étudiant en IR (2020). Il a beaucoup aidé pour trouver des bugs et proposer des nouvelles fonctionnalités.');
283
+        this.onListItemPress(this.thanksUsers.theo);
232 284
       },
233
-      icon: 'account-circle',
234
-      text: 'Titouan Labourdette',
285
+      icon: this.thanksUsers.theo.icon,
286
+      text: this.thanksUsers.theo.name,
235 287
       showChevron: false,
236 288
     },
237 289
   ];
@@ -277,10 +329,16 @@ class AboutScreen extends React.Component<PropsType> {
277 329
     },
278 330
   ];
279 331
 
280
-  constructor() {
281
-    super();
332
+  constructor(props: PropsType) {
333
+    super(props);
282 334
     this.state = {
283
-      modalCurrentDisplayItem: null,
335
+      dialogVisible: false,
336
+      dialogTitle: '',
337
+      dialogMessage: '',
338
+      dialogButtons: [],
339
+      onDialogDismiss: () => {
340
+        this.setState({dialogVisible: false});
341
+      },
284 342
     };
285 343
   }
286 344
 
@@ -288,16 +346,32 @@ class AboutScreen extends React.Component<PropsType> {
288 346
    * Callback used when clicking an article in the list.
289 347
    * It opens the modal to show detailed information about the article
290 348
    *
291
-   * @param title TODO
292
-   * @param message TODO
349
+   * @param user TODO
293 350
    */
294
-  onListItemPress(title: string, message : string) {
351
+  onListItemPress(user: AthorsItemType) {
352
+    const dialogBtn: Array<OptionsDialogButtonType> = [
353
+      {
354
+        title: 'OK',
355
+        onPress: () => {
356
+          this.onDialogDismiss();
357
+        },
358
+      }
359
+    ];
360
+    if(user.btnMail != null) {
361
+      dialogBtn.push(user.btnMail);
362
+    }
363
+    if(user.btnLinkedin != null) {
364
+      dialogBtn.push(user.btnLinkedin);
365
+    }
366
+    if(user.btnTrool != null) {
367
+      dialogBtn.push(user.btnTrool);
368
+    }
295 369
     this.setState({
296
-      modalCurrentDisplayItem: AboutScreen.getModalItemContent(title, message),
370
+      dialogVisible: true,
371
+      dialogTitle: user.name,
372
+      dialogMessage: user.message,
373
+      dialogButtons: dialogBtn,
297 374
     });
298
-    if (this.modalRef) {
299
-      this.modalRef.open();
300
-    }
301 375
   }
302 376
 
303 377
   /**
@@ -345,18 +419,9 @@ class AboutScreen extends React.Component<PropsType> {
345 419
           )}
346 420
         />
347 421
         <Card.Content>
348
-          <Title>{i18n.t('screens.about.author')}</Title>
349
-          <FlatList
350
-            data={this.authorData}
351
-            keyExtractor={this.keyExtractor}
352
-            listKey="1"
353
-            renderItem={this.getCardItem}
354
-          />
355
-          <Title>{i18n.t('screens.about.additionalDev')}</Title>
356 422
           <FlatList
357
-            data={this.additionalDevData}
423
+            data={this.teamData}
358 424
             keyExtractor={this.keyExtractor}
359
-            listKey="2"
360 425
             renderItem={this.getCardItem}
361 426
           />
362 427
         </Card.Content>
@@ -378,12 +443,13 @@ class AboutScreen extends React.Component<PropsType> {
378 443
                   <Avatar.Icon size={iconProps.size} icon="hand-heart" />
379 444
               )}
380 445
           />
381
-          <FlatList
382
-              data={this.thanksData}
383
-              keyExtractor={this.keyExtractor}
384
-              listKey="1"
385
-              renderItem={this.getCardItem}
386
-          />
446
+          <Card.Content>
447
+            <FlatList
448
+                data={this.thanksData}
449
+                keyExtractor={this.keyExtractor}
450
+                renderItem={this.getCardItem}
451
+            />
452
+          </Card.Content>
387 453
         </Card>
388 454
     );
389 455
   }
@@ -395,42 +461,24 @@ class AboutScreen extends React.Component<PropsType> {
395 461
    */
396 462
   getTechnoCard(): React.Node {
397 463
     return (
398
-      <Card style={{marginBottom: 10}}>
399
-        <Card.Content>
400
-          <Title>{i18n.t('screens.about.technologies')}</Title>
401
-          <FlatList
402
-            data={this.technoData}
403
-            keyExtractor={this.keyExtractor}
404
-            renderItem={this.getCardItem}
464
+        <Card style={{marginBottom: 10}}>
465
+          <Card.Title
466
+              title={i18n.t('screens.about.technologies')}
467
+              left={(iconProps: CardTitleIconPropsType): React.Node => (
468
+                  <Avatar.Icon size={iconProps.size} icon="build" />
469
+              )}
405 470
           />
406
-        </Card.Content>
407
-      </Card>
408
-    );
409
-  }
410
-
411
-  /**
412
-   * Gets the modal content depending on the given article TODO
413
-   *
414
-   * @param title TODO
415
-   * @param message TODO
416
-   * @return {*}
417
-   */
418
-  static getModalItemContent(title: string, message : string): React.Node {
419
-    return (
420
-        <View
421
-            style={{
422
-              flex: 1,
423
-              padding: 20,
424
-            }}>
425
-          <Title>{title}</Title>
426
-          <ScrollView>
427
-            <Text>{message}</Text>
428
-          </ScrollView>
429
-        </View>
471
+          <Card.Content>
472
+            <FlatList
473
+                data={this.technoData}
474
+                keyExtractor={this.keyExtractor}
475
+                renderItem={this.getCardItem}
476
+            />
477
+          </Card.Content>
478
+        </Card>
430 479
     );
431 480
   }
432 481
 
433
-
434 482
   /**
435 483
    * Gets a chevron icon
436 484
    *
@@ -512,15 +560,6 @@ class AboutScreen extends React.Component<PropsType> {
512 560
    */
513 561
   keyExtractor = (item: ListItemType): string => item.icon;
514 562
 
515
-  /**
516
-   * Callback used when receiving the modal ref
517
-   *
518
-   * @param ref
519
-   */
520
-  onModalRef = (ref: Modalize) => {
521
-    this.modalRef = ref;
522
-  };
523
-
524 563
   render(): React.Node {
525 564
     const {state} = this;
526 565
     return (
@@ -533,9 +572,13 @@ class AboutScreen extends React.Component<PropsType> {
533 572
           data={this.dataOrder}
534 573
           renderItem={this.getMainCard}
535 574
         />
536
-        <CustomModal onRef={this.onModalRef}>
537
-          {state.modalCurrentDisplayItem}
538
-        </CustomModal>
575
+        <OptionsDialog
576
+            visible={state.dialogVisible}
577
+            title={state.dialogTitle}
578
+            message={state.dialogMessage}
579
+            buttons={state.dialogButtons}
580
+            onDismiss={state.onDialogDismiss}
581
+        />
539 582
       </View>
540 583
     );
541 584
   }

Loading…
Cancel
Save