Browse Source

Update Screen

docjyJ 3 years ago
parent
commit
955eb11b84
1 changed files with 95 additions and 70 deletions
  1. 95
    70
      src/screens/About/AboutScreen.js

+ 95
- 70
src/screens/About/AboutScreen.js View File

@@ -5,7 +5,7 @@ import {FlatList, Linking, Platform, Image, View} from 'react-native';
5 5
 import i18n from 'i18n-js';
6 6
 import {Avatar, Card, List, withTheme} from 'react-native-paper';
7 7
 import {StackNavigationProp} from '@react-navigation/stack';
8
-import {Modalize} from "react-native-modalize";
8
+import {Modalize} from 'react-native-modalize';
9 9
 import packageJson from '../../../package.json';
10 10
 import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
11 11
 import APP_LOGO from '../../../assets/android.icon.round.png';
@@ -13,8 +13,7 @@ import type {
13 13
   CardTitleIconPropsType,
14 14
   ListIconPropsType,
15 15
 } from '../../constants/PaperStyles';
16
-import OptionsDialog from "../../components/Dialogs/OptionsDialog";
17
-import type {OptionsDialogButtonType} from "../../components/Dialogs/OptionsDialog";
16
+import OptionsDialog from '../../components/Dialogs/OptionsDialog';
18 17
 
19 18
 type ListItemType = {
20 19
   onPressCallback: () => void,
@@ -82,23 +81,25 @@ class AboutScreen extends React.Component<PropsType> {
82 81
    */
83 82
   teamUsers = {
84 83
     arnaud: {
85
-      name: 'Arnaud VERGNET',
86
-      message: 'C vrément tro 1 bg !!',
87
-      icon: 'account-circle',
84
+      name: 'Arnaud Vergnrt',
85
+      message: i18n.t('screens.about.user.arnaud'),
86
+      icon: 'crown',
88 87
       btnTrool: {
89
-          title: 'SWAG',
90
-          onPress: () => {
91
-            openWebLink(links.meme);
92
-          },
88
+        title: 'SWAG',
89
+        onPress: () => {
90
+          openWebLink(links.meme);
93 91
         },
92
+      },
94 93
       btnLinkedin: {
95
-        title: 'Linkedin',
94
+        title: '',
95
+        icon: 'linkedin',
96 96
         onPress: () => {
97 97
           openWebLink(links.arnaudMail);
98 98
         },
99 99
       },
100 100
       btnMail: {
101
-        title: i18n.t('screens.about.authorMail'),
101
+        title: '',
102
+        icon: 'email-edit',
102 103
         onPress: () => {
103 104
           openWebLink(links.arnaudLinkedin);
104 105
         },
@@ -106,22 +107,38 @@ class AboutScreen extends React.Component<PropsType> {
106 107
     },
107 108
     yohan: {
108 109
       name: 'Yohan Simard',
109
-      message: 'Correction de quelques bugs',
110
-      icon: 'account-circle',
110
+      message: i18n.t('screens.about.user.yohan'),
111
+      icon: 'xml',
111 112
       btnTrool: null,
112 113
       btnLinkedin: {
113
-        title: 'Linkedin',
114
+        title: '',
115
+        icon: 'linkedin',
114 116
         onPress: () => {
115 117
           openWebLink(links.yohanLinkedin);
116 118
         },
117 119
       },
118 120
       btnMail: {
119
-        title: i18n.t('screens.about.authorMail'),
121
+        title: '',
122
+        icon: 'email-edit',
120 123
         onPress: () => {
121 124
           openWebLink(links.yohanMail);
122 125
         },
123 126
       },
124 127
     },
128
+    you: {
129
+      name: i18n.t('screens.about.user.youName'),
130
+      message: i18n.t('screens.about.user.you'),
131
+      icon: 'hand-pointing-right',
132
+      btnTrool: {
133
+        title: '',
134
+        icon: 'git',
135
+        onPress: () => {
136
+          openWebLink(links.git);
137
+        },
138
+      },
139
+      btnLinkedin: null,
140
+      btnMail: null,
141
+    },
125 142
   };
126 143
 
127 144
   /**
@@ -130,40 +147,40 @@ class AboutScreen extends React.Component<PropsType> {
130 147
   thanksUsers = {
131 148
     beranger: {
132 149
       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',
150
+      message: i18n.t('screens.about.user.beranger'),
151
+      icon: 'account-heart',
135 152
       btnTrool: null,
136 153
       btnLinkedin: null,
137 154
       btnMail: null,
138 155
     },
139 156
     celine: {
140 157
       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',
158
+      message: i18n.t('screens.about.user.celine'),
159
+      icon: 'brush',
143 160
       btnTrool: null,
144 161
       btnLinkedin: null,
145 162
       btnMail: null,
146 163
     },
147 164
     damien: {
148 165
       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',
166
+      message: i18n.t('screens.about.user.damien'),
167
+      icon: 'web',
151 168
       btnTrool: null,
152 169
       btnLinkedin: null,
153 170
       btnMail: null,
154 171
     },
155 172
     titouan: {
156 173
       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',
174
+      message: i18n.t('screens.about.user.titouan'),
175
+      icon: 'shield-bug',
159 176
       btnTrool: null,
160 177
       btnLinkedin: null,
161 178
       btnMail: null,
162 179
     },
163 180
     theo: {
164 181
       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',
182
+      message: i18n.t('screens.about.user.theo'),
183
+      icon: 'food-apple',
167 184
       btnTrool: null,
168 185
       btnLinkedin: null,
169 186
       btnMail: null,
@@ -240,6 +257,14 @@ class AboutScreen extends React.Component<PropsType> {
240 257
       text: this.teamUsers.yohan.name,
241 258
       showChevron: false,
242 259
     },
260
+    {
261
+      onPressCallback: () => {
262
+        this.onListItemPress(this.teamUsers.you);
263
+      },
264
+      icon: this.teamUsers.you.icon,
265
+      text: this.teamUsers.you.name,
266
+      showChevron: false,
267
+    },
243 268
   ];
244 269
 
245 270
   /**
@@ -346,24 +371,24 @@ class AboutScreen extends React.Component<PropsType> {
346 371
    * Callback used when clicking an article in the list.
347 372
    * It opens the modal to show detailed information about the article
348 373
    *
349
-   * @param user TODO
374
+   * @param user A user key
350 375
    */
351 376
   onListItemPress(user: AthorsItemType) {
352
-    const dialogBtn: Array<OptionsDialogButtonType> = [
377
+    const dialogBtn: Array<IconOptionsDialogButtonType> = [
353 378
       {
354 379
         title: 'OK',
355 380
         onPress: () => {
356
-          this.onDialogDismiss();
381
+          this.setState({dialogVisible: false});
357 382
         },
358
-      }
383
+      },
359 384
     ];
360
-    if(user.btnMail != null) {
385
+    if (user.btnMail != null) {
361 386
       dialogBtn.push(user.btnMail);
362 387
     }
363
-    if(user.btnLinkedin != null) {
388
+    if (user.btnLinkedin != null) {
364 389
       dialogBtn.push(user.btnLinkedin);
365 390
     }
366
-    if(user.btnTrool != null) {
391
+    if (user.btnTrool != null) {
367 392
       dialogBtn.push(user.btnTrool);
368 393
     }
369 394
     this.setState({
@@ -430,27 +455,27 @@ class AboutScreen extends React.Component<PropsType> {
430 455
   }
431 456
 
432 457
   /**
433
-   * Gets the thanks card showing information and links about the team TODO
458
+   * Get the thank you card showing support information and links
434 459
    *
435 460
    * @return {*}
436 461
    */
437 462
   getThanksCard(): React.Node {
438 463
     return (
439
-        <Card style={{marginBottom: 10}}>
440
-          <Card.Title
441
-              title={i18n.t('screens.about.thanks')}
442
-              left={(iconProps: CardTitleIconPropsType): React.Node => (
443
-                  <Avatar.Icon size={iconProps.size} icon="hand-heart" />
444
-              )}
464
+      <Card style={{marginBottom: 10}}>
465
+        <Card.Title
466
+          title={i18n.t('screens.about.thanks')}
467
+          left={(iconProps: CardTitleIconPropsType): React.Node => (
468
+            <Avatar.Icon size={iconProps.size} icon="hand-heart" />
469
+          )}
470
+        />
471
+        <Card.Content>
472
+          <FlatList
473
+            data={this.thanksData}
474
+            keyExtractor={this.keyExtractor}
475
+            renderItem={this.getCardItem}
445 476
           />
446
-          <Card.Content>
447
-            <FlatList
448
-                data={this.thanksData}
449
-                keyExtractor={this.keyExtractor}
450
-                renderItem={this.getCardItem}
451
-            />
452
-          </Card.Content>
453
-        </Card>
477
+        </Card.Content>
478
+      </Card>
454 479
     );
455 480
   }
456 481
 
@@ -461,21 +486,21 @@ class AboutScreen extends React.Component<PropsType> {
461 486
    */
462 487
   getTechnoCard(): React.Node {
463 488
     return (
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
-              )}
489
+      <Card style={{marginBottom: 10}}>
490
+        <Card.Title
491
+          title={i18n.t('screens.about.technologies')}
492
+          left={(iconProps: CardTitleIconPropsType): React.Node => (
493
+            <Avatar.Icon size={iconProps.size} icon="wrench" />
494
+          )}
495
+        />
496
+        <Card.Content>
497
+          <FlatList
498
+            data={this.technoData}
499
+            keyExtractor={this.keyExtractor}
500
+            renderItem={this.getCardItem}
470 501
           />
471
-          <Card.Content>
472
-            <FlatList
473
-                data={this.technoData}
474
-                keyExtractor={this.keyExtractor}
475
-                renderItem={this.getCardItem}
476
-            />
477
-          </Card.Content>
478
-        </Card>
502
+        </Card.Content>
503
+      </Card>
479 504
     );
480 505
   }
481 506
 
@@ -564,20 +589,20 @@ class AboutScreen extends React.Component<PropsType> {
564 589
     const {state} = this;
565 590
     return (
566 591
       <View
567
-          style={{
568
-            height: '100%',
569
-          }}>
592
+        style={{
593
+          height: '100%',
594
+        }}>
570 595
         <CollapsibleFlatList
571 596
           style={{padding: 5}}
572 597
           data={this.dataOrder}
573 598
           renderItem={this.getMainCard}
574 599
         />
575 600
         <OptionsDialog
576
-            visible={state.dialogVisible}
577
-            title={state.dialogTitle}
578
-            message={state.dialogMessage}
579
-            buttons={state.dialogButtons}
580
-            onDismiss={state.onDialogDismiss}
601
+          visible={state.dialogVisible}
602
+          title={state.dialogTitle}
603
+          message={state.dialogMessage}
604
+          buttons={state.dialogButtons}
605
+          onDismiss={state.onDialogDismiss}
581 606
         />
582 607
       </View>
583 608
     );

Loading…
Cancel
Save