|
@@ -1,17 +1,19 @@
|
1
|
1
|
// @flow
|
2
|
2
|
|
3
|
3
|
import * as React from 'react';
|
4
|
|
-import {FlatList, Linking, Platform, Image} 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, 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 packageJson from '../../../package.json';
|
9
|
9
|
import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
|
10
|
|
-import APP_LOGO from '../../../assets/android.icon.png';
|
|
10
|
+import APP_LOGO from '../../../assets/android.icon.round.png';
|
11
|
11
|
import type {
|
12
|
12
|
CardTitleIconPropsType,
|
13
|
13
|
ListIconPropsType,
|
14
|
14
|
} from '../../constants/PaperStyles';
|
|
15
|
+import OptionsDialog from '../../components/Dialogs/OptionsDialog';
|
|
16
|
+import type {OptionsDialogButtonType} from '../../components/Dialogs/OptionsDialog';
|
15
|
17
|
|
16
|
18
|
type ListItemType = {
|
17
|
19
|
onPressCallback: () => void,
|
|
@@ -20,6 +22,15 @@ type ListItemType = {
|
20
|
22
|
showChevron: boolean,
|
21
|
23
|
};
|
22
|
24
|
|
|
25
|
+type MemberItemType = {
|
|
26
|
+ name: string,
|
|
27
|
+ message: string,
|
|
28
|
+ icon: string,
|
|
29
|
+ trollLink?: string,
|
|
30
|
+ linkedin?: string,
|
|
31
|
+ mail?: string,
|
|
32
|
+};
|
|
33
|
+
|
23
|
34
|
const links = {
|
24
|
35
|
appstore: 'https://apps.apple.com/us/app/campus-amicale-insat/id1477722148',
|
25
|
36
|
playstore:
|
|
@@ -30,28 +41,20 @@ const links = {
|
30
|
41
|
'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/Changelog.md',
|
31
|
42
|
license:
|
32
|
43
|
'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/LICENSE',
|
33
|
|
- authorMail:
|
34
|
|
- 'mailto:vergnet@etud.insa-toulouse.fr?' +
|
35
|
|
- 'subject=' +
|
36
|
|
- 'Application Amicale INSA Toulouse' +
|
37
|
|
- '&body=' +
|
38
|
|
- 'Coucou !\n\n',
|
39
|
|
- authorLinkedin: 'https://www.linkedin.com/in/arnaud-vergnet-434ba5179/',
|
40
|
|
- yohanMail:
|
41
|
|
- 'mailto:ysimard@etud.insa-toulouse.fr?' +
|
42
|
|
- 'subject=' +
|
43
|
|
- 'Application Amicale INSA Toulouse' +
|
44
|
|
- '&body=' +
|
45
|
|
- 'Coucou !\n\n',
|
46
|
|
- yohanLinkedin: 'https://www.linkedin.com/in/yohan-simard',
|
47
|
44
|
react: 'https://facebook.github.io/react-native/',
|
48
|
|
- meme: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
|
49
|
45
|
};
|
50
|
46
|
|
51
|
47
|
type PropsType = {
|
52
|
48
|
navigation: StackNavigationProp,
|
53
|
49
|
};
|
54
|
50
|
|
|
51
|
+type StateType = {
|
|
52
|
+ dialogVisible: boolean,
|
|
53
|
+ dialogTitle: string,
|
|
54
|
+ dialogMessage: string,
|
|
55
|
+ dialogButtons: Array<OptionsDialogButtonType>,
|
|
56
|
+};
|
|
57
|
+
|
55
|
58
|
/**
|
56
|
59
|
* Opens a link in the device's browser
|
57
|
60
|
* @param link The link to open
|
|
@@ -61,13 +64,75 @@ function openWebLink(link: string) {
|
61
|
64
|
}
|
62
|
65
|
|
63
|
66
|
/**
|
|
67
|
+ * Object containing data relative to major contributors
|
|
68
|
+ */
|
|
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
|
+};
|
|
95
|
+
|
|
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
|
+/**
|
64
|
128
|
* Class defining an about screen. This screen shows the user information about the app and it's author.
|
65
|
129
|
*/
|
66
|
|
-class AboutScreen extends React.Component<PropsType> {
|
|
130
|
+class AboutScreen extends React.Component<PropsType, StateType> {
|
|
131
|
+
|
67
|
132
|
/**
|
68
|
133
|
* Data to be displayed in the app card
|
69
|
134
|
*/
|
70
|
|
- appData = [
|
|
135
|
+ appData: Array<ListItemType> = [
|
71
|
136
|
{
|
72
|
137
|
onPressCallback: () => {
|
73
|
138
|
openWebLink(Platform.OS === 'ios' ? links.appstore : links.playstore);
|
|
@@ -115,60 +180,79 @@ class AboutScreen extends React.Component<PropsType> {
|
115
|
180
|
];
|
116
|
181
|
|
117
|
182
|
/**
|
118
|
|
- * Data to be displayed in the author card
|
|
183
|
+ * Data to be displayed in the team card
|
119
|
184
|
*/
|
120
|
|
- authorData = [
|
|
185
|
+ teamData: Array<ListItemType> = [
|
121
|
186
|
{
|
122
|
187
|
onPressCallback: () => {
|
123
|
|
- openWebLink(links.meme);
|
|
188
|
+ this.onContributorListItemPress(majorContributors.arnaud);
|
124
|
189
|
},
|
125
|
|
- icon: 'account-circle',
|
126
|
|
- text: 'Arnaud VERGNET',
|
|
190
|
+ icon: majorContributors.arnaud.icon,
|
|
191
|
+ text: majorContributors.arnaud.name,
|
127
|
192
|
showChevron: false,
|
128
|
193
|
},
|
129
|
194
|
{
|
130
|
195
|
onPressCallback: () => {
|
131
|
|
- openWebLink(links.authorMail);
|
|
196
|
+ this.onContributorListItemPress(majorContributors.yohan);
|
132
|
197
|
},
|
133
|
|
- icon: 'email',
|
134
|
|
- text: i18n.t('screens.about.authorMail'),
|
135
|
|
- showChevron: true,
|
|
198
|
+ icon: majorContributors.yohan.icon,
|
|
199
|
+ text: majorContributors.yohan.name,
|
|
200
|
+ showChevron: false,
|
136
|
201
|
},
|
137
|
202
|
{
|
138
|
203
|
onPressCallback: () => {
|
139
|
|
- openWebLink(links.authorLinkedin);
|
|
204
|
+ const {navigation} = this.props;
|
|
205
|
+ navigation.navigate('feedback');
|
140
|
206
|
},
|
141
|
|
- icon: 'linkedin',
|
142
|
|
- text: 'Linkedin',
|
|
207
|
+ icon: 'hand-pointing-right',
|
|
208
|
+ text: i18n.t('screens.about.user.you'),
|
143
|
209
|
showChevron: true,
|
144
|
210
|
},
|
145
|
211
|
];
|
146
|
212
|
|
147
|
213
|
/**
|
148
|
|
- * Data to be displayed in the additional developer card
|
|
214
|
+ * Data to be displayed in the thanks card
|
149
|
215
|
*/
|
150
|
|
- additionalDevData = [
|
|
216
|
+ thanksData: Array<ListItemType> = [
|
151
|
217
|
{
|
152
|
|
- onPressCallback: () => {},
|
153
|
|
- icon: 'account',
|
154
|
|
- text: 'Yohan SIMARD',
|
|
218
|
+ onPressCallback: () => {
|
|
219
|
+ this.onContributorListItemPress(helpfulUsers.beranger);
|
|
220
|
+ },
|
|
221
|
+ icon: helpfulUsers.beranger.icon,
|
|
222
|
+ text: helpfulUsers.beranger.name,
|
155
|
223
|
showChevron: false,
|
156
|
224
|
},
|
157
|
225
|
{
|
158
|
226
|
onPressCallback: () => {
|
159
|
|
- openWebLink(links.yohanMail);
|
|
227
|
+ this.onContributorListItemPress(helpfulUsers.celine);
|
160
|
228
|
},
|
161
|
|
- icon: 'email',
|
162
|
|
- text: i18n.t('screens.about.authorMail'),
|
163
|
|
- showChevron: true,
|
|
229
|
+ icon: helpfulUsers.celine.icon,
|
|
230
|
+ text: helpfulUsers.celine.name,
|
|
231
|
+ showChevron: false,
|
164
|
232
|
},
|
165
|
233
|
{
|
166
|
234
|
onPressCallback: () => {
|
167
|
|
- openWebLink(links.yohanLinkedin);
|
|
235
|
+ this.onContributorListItemPress(helpfulUsers.damien);
|
168
|
236
|
},
|
169
|
|
- icon: 'linkedin',
|
170
|
|
- text: 'Linkedin',
|
171
|
|
- showChevron: true,
|
|
237
|
+ icon: helpfulUsers.damien.icon,
|
|
238
|
+ text: helpfulUsers.damien.name,
|
|
239
|
+ showChevron: false,
|
|
240
|
+ },
|
|
241
|
+ {
|
|
242
|
+ onPressCallback: () => {
|
|
243
|
+ this.onContributorListItemPress(helpfulUsers.titouan);
|
|
244
|
+ },
|
|
245
|
+ icon: helpfulUsers.titouan.icon,
|
|
246
|
+ text: helpfulUsers.titouan.name,
|
|
247
|
+ showChevron: false,
|
|
248
|
+ },
|
|
249
|
+ {
|
|
250
|
+ onPressCallback: () => {
|
|
251
|
+ this.onContributorListItemPress(helpfulUsers.theo);
|
|
252
|
+ },
|
|
253
|
+ icon: helpfulUsers.theo.icon,
|
|
254
|
+ text: helpfulUsers.theo.name,
|
|
255
|
+ showChevron: false,
|
172
|
256
|
},
|
173
|
257
|
];
|
174
|
258
|
|
|
@@ -206,10 +290,71 @@ class AboutScreen extends React.Component<PropsType> {
|
206
|
290
|
id: 'team',
|
207
|
291
|
},
|
208
|
292
|
{
|
|
293
|
+ id: 'thanks',
|
|
294
|
+ },
|
|
295
|
+ {
|
209
|
296
|
id: 'techno',
|
210
|
297
|
},
|
211
|
298
|
];
|
212
|
299
|
|
|
300
|
+ constructor(props: PropsType) {
|
|
301
|
+ super(props);
|
|
302
|
+ this.state = {
|
|
303
|
+ dialogVisible: false,
|
|
304
|
+ dialogTitle: '',
|
|
305
|
+ dialogMessage: '',
|
|
306
|
+ dialogButtons: [],
|
|
307
|
+ };
|
|
308
|
+ }
|
|
309
|
+
|
|
310
|
+ /**
|
|
311
|
+ * Callback used when clicking a member in the list
|
|
312
|
+ * It opens a dialog to show detailed information this member
|
|
313
|
+ *
|
|
314
|
+ * @param user The member to show information for
|
|
315
|
+ */
|
|
316
|
+ onContributorListItemPress(user: MemberItemType) {
|
|
317
|
+ const dialogBtn = [
|
|
318
|
+ {
|
|
319
|
+ title: 'OK',
|
|
320
|
+ onPress: this.onDialogDismiss,
|
|
321
|
+ },
|
|
322
|
+ ];
|
|
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
|
+ });
|
|
332
|
+ }
|
|
333
|
+ if (mail) {
|
|
334
|
+ dialogBtn.push({
|
|
335
|
+ title: '',
|
|
336
|
+ icon: 'email-edit',
|
|
337
|
+ onPress: () => {
|
|
338
|
+ openWebLink(mail);
|
|
339
|
+ },
|
|
340
|
+ });
|
|
341
|
+ }
|
|
342
|
+ if (trollLink) {
|
|
343
|
+ dialogBtn.push({
|
|
344
|
+ title: 'SWAG',
|
|
345
|
+ onPress: () => {
|
|
346
|
+ openWebLink(trollLink);
|
|
347
|
+ },
|
|
348
|
+ });
|
|
349
|
+ }
|
|
350
|
+ this.setState({
|
|
351
|
+ dialogVisible: true,
|
|
352
|
+ dialogTitle: user.name,
|
|
353
|
+ dialogMessage: user.message,
|
|
354
|
+ dialogButtons: dialogBtn,
|
|
355
|
+ });
|
|
356
|
+ }
|
|
357
|
+
|
213
|
358
|
/**
|
214
|
359
|
* Gets the app card showing information and links about the app.
|
215
|
360
|
*
|
|
@@ -255,18 +400,34 @@ class AboutScreen extends React.Component<PropsType> {
|
255
|
400
|
)}
|
256
|
401
|
/>
|
257
|
402
|
<Card.Content>
|
258
|
|
- <Title>{i18n.t('screens.about.author')}</Title>
|
259
|
403
|
<FlatList
|
260
|
|
- data={this.authorData}
|
|
404
|
+ data={this.teamData}
|
261
|
405
|
keyExtractor={this.keyExtractor}
|
262
|
|
- listKey="1"
|
263
|
406
|
renderItem={this.getCardItem}
|
264
|
407
|
/>
|
265
|
|
- <Title>{i18n.t('screens.about.additionalDev')}</Title>
|
|
408
|
+ </Card.Content>
|
|
409
|
+ </Card>
|
|
410
|
+ );
|
|
411
|
+ }
|
|
412
|
+
|
|
413
|
+ /**
|
|
414
|
+ * Get the thank you card showing support information and links
|
|
415
|
+ *
|
|
416
|
+ * @return {*}
|
|
417
|
+ */
|
|
418
|
+ getThanksCard(): React.Node {
|
|
419
|
+ return (
|
|
420
|
+ <Card style={{marginBottom: 10}}>
|
|
421
|
+ <Card.Title
|
|
422
|
+ title={i18n.t('screens.about.thanks')}
|
|
423
|
+ left={(iconProps: CardTitleIconPropsType): React.Node => (
|
|
424
|
+ <Avatar.Icon size={iconProps.size} icon="hand-heart" />
|
|
425
|
+ )}
|
|
426
|
+ />
|
|
427
|
+ <Card.Content>
|
266
|
428
|
<FlatList
|
267
|
|
- data={this.additionalDevData}
|
|
429
|
+ data={this.thanksData}
|
268
|
430
|
keyExtractor={this.keyExtractor}
|
269
|
|
- listKey="2"
|
270
|
431
|
renderItem={this.getCardItem}
|
271
|
432
|
/>
|
272
|
433
|
</Card.Content>
|
|
@@ -282,8 +443,13 @@ class AboutScreen extends React.Component<PropsType> {
|
282
|
443
|
getTechnoCard(): React.Node {
|
283
|
444
|
return (
|
284
|
445
|
<Card style={{marginBottom: 10}}>
|
|
446
|
+ <Card.Title
|
|
447
|
+ title={i18n.t('screens.about.technologies')}
|
|
448
|
+ left={(iconProps: CardTitleIconPropsType): React.Node => (
|
|
449
|
+ <Avatar.Icon size={iconProps.size} icon="wrench" />
|
|
450
|
+ )}
|
|
451
|
+ />
|
285
|
452
|
<Card.Content>
|
286
|
|
- <Title>{i18n.t('screens.about.technologies')}</Title>
|
287
|
453
|
<FlatList
|
288
|
454
|
data={this.technoData}
|
289
|
455
|
keyExtractor={this.keyExtractor}
|
|
@@ -358,6 +524,8 @@ class AboutScreen extends React.Component<PropsType> {
|
358
|
524
|
return this.getAppCard();
|
359
|
525
|
case 'team':
|
360
|
526
|
return this.getTeamCard();
|
|
527
|
+ case 'thanks':
|
|
528
|
+ return this.getThanksCard();
|
361
|
529
|
case 'techno':
|
362
|
530
|
return this.getTechnoCard();
|
363
|
531
|
default:
|
|
@@ -365,6 +533,10 @@ class AboutScreen extends React.Component<PropsType> {
|
365
|
533
|
}
|
366
|
534
|
};
|
367
|
535
|
|
|
536
|
+ onDialogDismiss = () => {
|
|
537
|
+ this.setState({dialogVisible: false});
|
|
538
|
+ };
|
|
539
|
+
|
368
|
540
|
/**
|
369
|
541
|
* Extracts a key from the given item
|
370
|
542
|
*
|
|
@@ -374,12 +546,25 @@ class AboutScreen extends React.Component<PropsType> {
|
374
|
546
|
keyExtractor = (item: ListItemType): string => item.icon;
|
375
|
547
|
|
376
|
548
|
render(): React.Node {
|
|
549
|
+ const {state} = this;
|
377
|
550
|
return (
|
378
|
|
- <CollapsibleFlatList
|
379
|
|
- style={{padding: 5}}
|
380
|
|
- data={this.dataOrder}
|
381
|
|
- renderItem={this.getMainCard}
|
382
|
|
- />
|
|
551
|
+ <View
|
|
552
|
+ style={{
|
|
553
|
+ height: '100%',
|
|
554
|
+ }}>
|
|
555
|
+ <CollapsibleFlatList
|
|
556
|
+ style={{padding: 5}}
|
|
557
|
+ data={this.dataOrder}
|
|
558
|
+ renderItem={this.getMainCard}
|
|
559
|
+ />
|
|
560
|
+ <OptionsDialog
|
|
561
|
+ visible={state.dialogVisible}
|
|
562
|
+ title={state.dialogTitle}
|
|
563
|
+ message={state.dialogMessage}
|
|
564
|
+ buttons={state.dialogButtons}
|
|
565
|
+ onDismiss={this.onDialogDismiss}
|
|
566
|
+ />
|
|
567
|
+ </View>
|
383
|
568
|
);
|
384
|
569
|
}
|
385
|
570
|
}
|