Browse Source

Improve structure and flow types

Arnaud Vergnet 3 years ago
parent
commit
182360aabd
1 changed files with 135 additions and 159 deletions
  1. 135
    159
      src/screens/About/AboutScreen.js

+ 135
- 159
src/screens/About/AboutScreen.js View File

@@ -13,6 +13,7 @@ import type {
13 13
   ListIconPropsType,
14 14
 } from '../../constants/PaperStyles';
15 15
 import OptionsDialog from '../../components/Dialogs/OptionsDialog';
16
+import type {OptionsDialogButtonType} from '../../components/Dialogs/OptionsDialog';
16 17
 
17 18
 type ListItemType = {
18 19
   onPressCallback: () => void,
@@ -21,12 +22,13 @@ type ListItemType = {
21 22
   showChevron: boolean,
22 23
 };
23 24
 
24
-type AthorsItemType = {
25
+type MemberItemType = {
25 26
   name: string,
26 27
   message: string,
27
-  btnTrool: OptionsDialogButtonType,
28
-  btnLinkedin: OptionsDialogButtonType,
29
-  btnMail: OptionsDialogButtonType,
28
+  icon: string,
29
+  trollLink?: string,
30
+  linkedin?: string,
31
+  mail?: string,
30 32
 };
31 33
 
32 34
 const links = {
@@ -39,28 +41,20 @@ const links = {
39 41
     'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/Changelog.md',
40 42
   license:
41 43
     'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/LICENSE',
42
-  arnaudMail:
43
-    'mailto:vergnet@etud.insa-toulouse.fr?' +
44
-    'subject=' +
45
-    'Application Amicale INSA Toulouse' +
46
-    '&body=' +
47
-    'Coucou !\n\n',
48
-  arnaudLinkedin: 'https://www.linkedin.com/in/arnaud-vergnet-434ba5179/',
49
-  yohanMail:
50
-    'mailto:ysimard@etud.insa-toulouse.fr?' +
51
-    'subject=' +
52
-    'Application Amicale INSA Toulouse' +
53
-    '&body=' +
54
-    'Coucou !\n\n',
55
-  yohanLinkedin: 'https://www.linkedin.com/in/yohan-simard',
56 44
   react: 'https://facebook.github.io/react-native/',
57
-  meme: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
58 45
 };
59 46
 
60 47
 type PropsType = {
61 48
   navigation: StackNavigationProp,
62 49
 };
63 50
 
51
+type StateType = {
52
+  dialogVisible: boolean,
53
+  dialogTitle: string,
54
+  dialogMessage: string,
55
+  dialogButtons: Array<OptionsDialogButtonType>,
56
+};
57
+
64 58
 /**
65 59
  * Opens a link in the device's browser
66 60
  * @param link The link to open
@@ -70,110 +64,75 @@ function openWebLink(link: string) {
70 64
 }
71 65
 
72 66
 /**
73
- * Class defining an about screen. This screen shows the user information about the app and it's author.
67
+ * Object containing data relative to major contributors
74 68
  */
75
-class AboutScreen extends React.Component<PropsType> {
76
-  /**
77
-   * Data team
78
-   */
79
-  teamUsers = {
80
-    arnaud: {
81
-      name: 'Arnaud Vergnrt',
82
-      message: i18n.t('screens.about.user.arnaud'),
83
-      icon: 'crown',
84
-      btnTrool: {
85
-        title: 'SWAG',
86
-        onPress: () => {
87
-          openWebLink(links.meme);
88
-        },
89
-      },
90
-      btnLinkedin: {
91
-        title: '',
92
-        icon: 'linkedin',
93
-        onPress: () => {
94
-          openWebLink(links.arnaudMail);
95
-        },
96
-      },
97
-      btnMail: {
98
-        title: '',
99
-        icon: 'email-edit',
100
-        onPress: () => {
101
-          openWebLink(links.arnaudLinkedin);
102
-        },
103
-      },
104
-    },
105
-    yohan: {
106
-      name: 'Yohan Simard',
107
-      message: i18n.t('screens.about.user.yohan'),
108
-      icon: 'xml',
109
-      btnTrool: null,
110
-      btnLinkedin: {
111
-        title: '',
112
-        icon: 'linkedin',
113
-        onPress: () => {
114
-          openWebLink(links.yohanLinkedin);
115
-        },
116
-      },
117
-      btnMail: {
118
-        title: '',
119
-        icon: 'email-edit',
120
-        onPress: () => {
121
-          openWebLink(links.yohanMail);
122
-        },
123
-      },
124
-    },
125
-  };
69
+const majorContributors: {[key: string]: MemberItemType} = {
70
+  arnaud: {
71
+    name: 'Arnaud Vergnet',
72
+    message: i18n.t('screens.about.user.arnaud'),
73
+    icon: 'crown',
74
+    trollLink: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
75
+    linkedin: 'https://www.linkedin.com/in/arnaud-vergnet-434ba5179/',
76
+    mail:
77
+      'mailto:vergnet@etud.insa-toulouse.fr?' +
78
+      'subject=' +
79
+      'Application Amicale INSA Toulouse' +
80
+      '&body=' +
81
+      'Coucou !\n\n',
82
+  },
83
+  yohan: {
84
+    name: 'Yohan Simard',
85
+    message: i18n.t('screens.about.user.yohan'),
86
+    icon: 'xml',
87
+    linkedin: 'https://www.linkedin.com/in/yohan-simard',
88
+    mail: 'mailto:ysimard@etud.insa-toulouse.fr?' +
89
+      'subject=' +
90
+      'Application Amicale INSA Toulouse' +
91
+      '&body=' +
92
+      'Coucou !\n\n',
93
+  },
94
+};
126 95
 
127
-  /**
128
-   * Data thanks
129
-   */
130
-  thanksUsers = {
131
-    beranger: {
132
-      name: 'Béranger Quintana Y Arciosana',
133
-      message: i18n.t('screens.about.user.beranger'),
134
-      icon: 'account-heart',
135
-      btnTrool: null,
136
-      btnLinkedin: null,
137
-      btnMail: null,
138
-    },
139
-    celine: {
140
-      name: 'Céline Tassin',
141
-      message: i18n.t('screens.about.user.celine'),
142
-      icon: 'brush',
143
-      btnTrool: null,
144
-      btnLinkedin: null,
145
-      btnMail: null,
146
-    },
147
-    damien: {
148
-      name: 'Damien Molina',
149
-      message: i18n.t('screens.about.user.damien'),
150
-      icon: 'web',
151
-      btnTrool: null,
152
-      btnLinkedin: null,
153
-      btnMail: null,
154
-    },
155
-    titouan: {
156
-      name: 'Titouan Labourdette',
157
-      message: i18n.t('screens.about.user.titouan'),
158
-      icon: 'shield-bug',
159
-      btnTrool: null,
160
-      btnLinkedin: null,
161
-      btnMail: null,
162
-    },
163
-    theo: {
164
-      name: 'Théo Tami',
165
-      message: i18n.t('screens.about.user.theo'),
166
-      icon: 'food-apple',
167
-      btnTrool: null,
168
-      btnLinkedin: null,
169
-      btnMail: null,
170
-    },
171
-  };
96
+/**
97
+ * Object containing data relative to users who helped during development
98
+ */
99
+const helpfulUsers: {[key: string]: MemberItemType} = {
100
+  beranger: {
101
+    name: 'Béranger Quintana Y Arciosana',
102
+    message: i18n.t('screens.about.user.beranger'),
103
+    icon: 'account-heart',
104
+  },
105
+  celine: {
106
+    name: 'Céline Tassin',
107
+    message: i18n.t('screens.about.user.celine'),
108
+    icon: 'brush',
109
+  },
110
+  damien: {
111
+    name: 'Damien Molina',
112
+    message: i18n.t('screens.about.user.damien'),
113
+    icon: 'web',
114
+  },
115
+  titouan: {
116
+    name: 'Titouan Labourdette',
117
+    message: i18n.t('screens.about.user.titouan'),
118
+    icon: 'shield-bug',
119
+  },
120
+  theo: {
121
+    name: 'Théo Tami',
122
+    message: i18n.t('screens.about.user.theo'),
123
+    icon: 'food-apple',
124
+  },
125
+};
126
+
127
+/**
128
+ * Class defining an about screen. This screen shows the user information about the app and it's author.
129
+ */
130
+class AboutScreen extends React.Component<PropsType, StateType> {
172 131
 
173 132
   /**
174 133
    * Data to be displayed in the app card
175 134
    */
176
-  appData = [
135
+  appData: Array<ListItemType> = [
177 136
     {
178 137
       onPressCallback: () => {
179 138
         openWebLink(Platform.OS === 'ios' ? links.appstore : links.playstore);
@@ -221,23 +180,23 @@ class AboutScreen extends React.Component<PropsType> {
221 180
   ];
222 181
 
223 182
   /**
224
-   * Data to be displayed in the additional developer card
183
+   * Data to be displayed in the team card
225 184
    */
226
-  teamData = [
185
+  teamData: Array<ListItemType> = [
227 186
     {
228 187
       onPressCallback: () => {
229
-        this.onListItemPress(this.teamUsers.arnaud);
188
+        this.onContributorListItemPress(majorContributors.arnaud);
230 189
       },
231
-      icon: this.teamUsers.arnaud.icon,
232
-      text: this.teamUsers.arnaud.name,
190
+      icon: majorContributors.arnaud.icon,
191
+      text: majorContributors.arnaud.name,
233 192
       showChevron: false,
234 193
     },
235 194
     {
236 195
       onPressCallback: () => {
237
-        this.onListItemPress(this.teamUsers.yohan);
196
+        this.onContributorListItemPress(majorContributors.yohan);
238 197
       },
239
-      icon: this.teamUsers.yohan.icon,
240
-      text: this.teamUsers.yohan.name,
198
+      icon: majorContributors.yohan.icon,
199
+      text: majorContributors.yohan.name,
241 200
       showChevron: false,
242 201
     },
243 202
     {
@@ -254,45 +213,45 @@ class AboutScreen extends React.Component<PropsType> {
254 213
   /**
255 214
    * Data to be displayed in the thanks card
256 215
    */
257
-  thanksData = [
216
+  thanksData: Array<ListItemType> = [
258 217
     {
259 218
       onPressCallback: () => {
260
-        this.onListItemPress(this.thanksUsers.beranger);
219
+        this.onContributorListItemPress(helpfulUsers.beranger);
261 220
       },
262
-      icon: this.thanksUsers.beranger.icon,
263
-      text: this.thanksUsers.beranger.name,
221
+      icon: helpfulUsers.beranger.icon,
222
+      text: helpfulUsers.beranger.name,
264 223
       showChevron: false,
265 224
     },
266 225
     {
267 226
       onPressCallback: () => {
268
-        this.onListItemPress(this.thanksUsers.celine);
227
+        this.onContributorListItemPress(helpfulUsers.celine);
269 228
       },
270
-      icon: this.thanksUsers.celine.icon,
271
-      text: this.thanksUsers.celine.name,
229
+      icon: helpfulUsers.celine.icon,
230
+      text: helpfulUsers.celine.name,
272 231
       showChevron: false,
273 232
     },
274 233
     {
275 234
       onPressCallback: () => {
276
-        this.onListItemPress(this.thanksUsers.damien);
235
+        this.onContributorListItemPress(helpfulUsers.damien);
277 236
       },
278
-      icon: this.thanksUsers.damien.icon,
279
-      text: this.thanksUsers.damien.name,
237
+      icon: helpfulUsers.damien.icon,
238
+      text: helpfulUsers.damien.name,
280 239
       showChevron: false,
281 240
     },
282 241
     {
283 242
       onPressCallback: () => {
284
-        this.onListItemPress(this.thanksUsers.titouan);
243
+        this.onContributorListItemPress(helpfulUsers.titouan);
285 244
       },
286
-      icon: this.thanksUsers.titouan.icon,
287
-      text: this.thanksUsers.titouan.name,
245
+      icon: helpfulUsers.titouan.icon,
246
+      text: helpfulUsers.titouan.name,
288 247
       showChevron: false,
289 248
     },
290 249
     {
291 250
       onPressCallback: () => {
292
-        this.onListItemPress(this.thanksUsers.theo);
251
+        this.onContributorListItemPress(helpfulUsers.theo);
293 252
       },
294
-      icon: this.thanksUsers.theo.icon,
295
-      text: this.thanksUsers.theo.name,
253
+      icon: helpfulUsers.theo.icon,
254
+      text: helpfulUsers.theo.name,
296 255
       showChevron: false,
297 256
     },
298 257
   ];
@@ -345,35 +304,48 @@ class AboutScreen extends React.Component<PropsType> {
345 304
       dialogTitle: '',
346 305
       dialogMessage: '',
347 306
       dialogButtons: [],
348
-      onDialogDismiss: () => {
349
-        this.setState({dialogVisible: false});
350
-      },
351 307
     };
352 308
   }
353 309
 
354 310
   /**
355
-   * Callback used when clicking an article in the list.
356
-   * It opens the modal to show detailed information about the article
311
+   * Callback used when clicking a member in the list
312
+   * It opens a dialog to show detailed information this member
357 313
    *
358
-   * @param user A user key
314
+   * @param user The member to show information for
359 315
    */
360
-  onListItemPress(user: AthorsItemType) {
361
-    const dialogBtn: Array<IconOptionsDialogButtonType> = [
316
+  onContributorListItemPress(user: MemberItemType) {
317
+    const dialogBtn = [
362 318
       {
363 319
         title: 'OK',
364
-        onPress: () => {
365
-          this.setState({dialogVisible: false});
366
-        },
320
+        onPress: this.onDialogDismiss,
367 321
       },
368 322
     ];
369
-    if (user.btnMail != null) {
370
-      dialogBtn.push(user.btnMail);
323
+    const {linkedin, trollLink, mail} = user;
324
+    if (linkedin != null) {
325
+      dialogBtn.push({
326
+        title: '',
327
+        icon: 'linkedin',
328
+        onPress: () => {
329
+          openWebLink(linkedin);
330
+        },
331
+      });
371 332
     }
372
-    if (user.btnLinkedin != null) {
373
-      dialogBtn.push(user.btnLinkedin);
333
+    if (mail) {
334
+      dialogBtn.push({
335
+        title: '',
336
+        icon: 'email-edit',
337
+        onPress: () => {
338
+          openWebLink(mail);
339
+        },
340
+      });
374 341
     }
375
-    if (user.btnTrool != null) {
376
-      dialogBtn.push(user.btnTrool);
342
+    if (trollLink) {
343
+      dialogBtn.push({
344
+        title: 'SWAG',
345
+        onPress: () => {
346
+          openWebLink(trollLink);
347
+        },
348
+      });
377 349
     }
378 350
     this.setState({
379 351
       dialogVisible: true,
@@ -561,6 +533,10 @@ class AboutScreen extends React.Component<PropsType> {
561 533
     }
562 534
   };
563 535
 
536
+  onDialogDismiss = () => {
537
+    this.setState({dialogVisible: false});
538
+  };
539
+
564 540
   /**
565 541
    * Extracts a key from the given item
566 542
    *
@@ -586,7 +562,7 @@ class AboutScreen extends React.Component<PropsType> {
586 562
           title={state.dialogTitle}
587 563
           message={state.dialogMessage}
588 564
           buttons={state.dialogButtons}
589
-          onDismiss={state.onDialogDismiss}
565
+          onDismiss={this.onDialogDismiss}
590 566
         />
591 567
       </View>
592 568
     );

Loading…
Cancel
Save