|
@@ -1,10 +1,11 @@
|
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, ScrollView} 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, Text, Title, withTheme} from 'react-native-paper';
|
7
|
7
|
import {StackNavigationProp} from '@react-navigation/stack';
|
|
8
|
+import {Modalize} from "react-native-modalize";
|
8
|
9
|
import packageJson from '../../../package.json';
|
9
|
10
|
import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
|
10
|
11
|
import APP_LOGO from '../../../assets/android.icon.png';
|
|
@@ -12,6 +13,7 @@ import type {
|
12
|
13
|
CardTitleIconPropsType,
|
13
|
14
|
ListIconPropsType,
|
14
|
15
|
} from '../../constants/PaperStyles';
|
|
16
|
+import CustomModal from "../../components/Overrides/CustomModal";
|
15
|
17
|
|
16
|
18
|
type ListItemType = {
|
17
|
19
|
onPressCallback: () => void,
|
|
@@ -64,6 +66,8 @@ function openWebLink(link: string) {
|
64
|
66
|
* Class defining an about screen. This screen shows the user information about the app and it's author.
|
65
|
67
|
*/
|
66
|
68
|
class AboutScreen extends React.Component<PropsType> {
|
|
69
|
+ modalRef: Modalize | null;
|
|
70
|
+
|
67
|
71
|
/**
|
68
|
72
|
* Data to be displayed in the app card
|
69
|
73
|
*/
|
|
@@ -149,7 +153,11 @@ class AboutScreen extends React.Component<PropsType> {
|
149
|
153
|
*/
|
150
|
154
|
additionalDevData = [
|
151
|
155
|
{
|
152
|
|
- onPressCallback: () => {},
|
|
156
|
+ onPressCallback: () => {
|
|
157
|
+ this.onListItemPress(
|
|
158
|
+ 'Yohan Simard',
|
|
159
|
+ 'Correction de quelques bugs');
|
|
160
|
+ },
|
153
|
161
|
icon: 'account',
|
154
|
162
|
text: 'Yohan SIMARD',
|
155
|
163
|
showChevron: false,
|
|
@@ -173,6 +181,62 @@ class AboutScreen extends React.Component<PropsType> {
|
173
|
181
|
];
|
174
|
182
|
|
175
|
183
|
/**
|
|
184
|
+ * Data to be displayed in the thanks card
|
|
185
|
+ */
|
|
186
|
+ thanksData = [
|
|
187
|
+ {
|
|
188
|
+ 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.');
|
|
192
|
+ },
|
|
193
|
+ icon: 'account-circle',
|
|
194
|
+ text: 'Béranger Quintana Y Arciosana',
|
|
195
|
+ showChevron: false,
|
|
196
|
+ },
|
|
197
|
+ {
|
|
198
|
+ 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 🦊.');
|
|
202
|
+ },
|
|
203
|
+ icon: 'account-circle',
|
|
204
|
+ text: 'Céline Tassin',
|
|
205
|
+ showChevron: false,
|
|
206
|
+ },
|
|
207
|
+ {
|
|
208
|
+ 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.');
|
|
212
|
+ },
|
|
213
|
+ icon: 'account-circle',
|
|
214
|
+ text: 'Damien Molina',
|
|
215
|
+ showChevron: false,
|
|
216
|
+ },
|
|
217
|
+ {
|
|
218
|
+ 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.');
|
|
222
|
+ },
|
|
223
|
+ icon: 'account-circle',
|
|
224
|
+ text: 'Titouan Labourdette',
|
|
225
|
+ showChevron: false,
|
|
226
|
+ },
|
|
227
|
+ {
|
|
228
|
+ 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.');
|
|
232
|
+ },
|
|
233
|
+ icon: 'account-circle',
|
|
234
|
+ text: 'Titouan Labourdette',
|
|
235
|
+ showChevron: false,
|
|
236
|
+ },
|
|
237
|
+ ];
|
|
238
|
+
|
|
239
|
+ /**
|
176
|
240
|
* Data to be displayed in the technologies card
|
177
|
241
|
*/
|
178
|
242
|
technoData = [
|
|
@@ -206,10 +270,36 @@ class AboutScreen extends React.Component<PropsType> {
|
206
|
270
|
id: 'team',
|
207
|
271
|
},
|
208
|
272
|
{
|
|
273
|
+ id: 'thanks',
|
|
274
|
+ },
|
|
275
|
+ {
|
209
|
276
|
id: 'techno',
|
210
|
277
|
},
|
211
|
278
|
];
|
212
|
279
|
|
|
280
|
+ constructor() {
|
|
281
|
+ super();
|
|
282
|
+ this.state = {
|
|
283
|
+ modalCurrentDisplayItem: null,
|
|
284
|
+ };
|
|
285
|
+ }
|
|
286
|
+
|
|
287
|
+ /**
|
|
288
|
+ * Callback used when clicking an article in the list.
|
|
289
|
+ * It opens the modal to show detailed information about the article
|
|
290
|
+ *
|
|
291
|
+ * @param title TODO
|
|
292
|
+ * @param message TODO
|
|
293
|
+ */
|
|
294
|
+ onListItemPress(title: string, message : string) {
|
|
295
|
+ this.setState({
|
|
296
|
+ modalCurrentDisplayItem: AboutScreen.getModalItemContent(title, message),
|
|
297
|
+ });
|
|
298
|
+ if (this.modalRef) {
|
|
299
|
+ this.modalRef.open();
|
|
300
|
+ }
|
|
301
|
+ }
|
|
302
|
+
|
213
|
303
|
/**
|
214
|
304
|
* Gets the app card showing information and links about the app.
|
215
|
305
|
*
|
|
@@ -275,6 +365,30 @@ class AboutScreen extends React.Component<PropsType> {
|
275
|
365
|
}
|
276
|
366
|
|
277
|
367
|
/**
|
|
368
|
+ * Gets the thanks card showing information and links about the team TODO
|
|
369
|
+ *
|
|
370
|
+ * @return {*}
|
|
371
|
+ */
|
|
372
|
+ getThanksCard(): React.Node {
|
|
373
|
+ return (
|
|
374
|
+ <Card style={{marginBottom: 10}}>
|
|
375
|
+ <Card.Title
|
|
376
|
+ title={i18n.t('screens.about.thanks')}
|
|
377
|
+ left={(iconProps: CardTitleIconPropsType): React.Node => (
|
|
378
|
+ <Avatar.Icon size={iconProps.size} icon="hand-heart" />
|
|
379
|
+ )}
|
|
380
|
+ />
|
|
381
|
+ <FlatList
|
|
382
|
+ data={this.thanksData}
|
|
383
|
+ keyExtractor={this.keyExtractor}
|
|
384
|
+ listKey="1"
|
|
385
|
+ renderItem={this.getCardItem}
|
|
386
|
+ />
|
|
387
|
+ </Card>
|
|
388
|
+ );
|
|
389
|
+ }
|
|
390
|
+
|
|
391
|
+ /**
|
278
|
392
|
* Gets the techno card showing information and links about the technologies used in the app
|
279
|
393
|
*
|
280
|
394
|
* @return {*}
|
|
@@ -295,6 +409,29 @@ class AboutScreen extends React.Component<PropsType> {
|
295
|
409
|
}
|
296
|
410
|
|
297
|
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>
|
|
430
|
+ );
|
|
431
|
+ }
|
|
432
|
+
|
|
433
|
+
|
|
434
|
+ /**
|
298
|
435
|
* Gets a chevron icon
|
299
|
436
|
*
|
300
|
437
|
* @param props
|
|
@@ -358,6 +495,8 @@ class AboutScreen extends React.Component<PropsType> {
|
358
|
495
|
return this.getAppCard();
|
359
|
496
|
case 'team':
|
360
|
497
|
return this.getTeamCard();
|
|
498
|
+ case 'thanks':
|
|
499
|
+ return this.getThanksCard();
|
361
|
500
|
case 'techno':
|
362
|
501
|
return this.getTechnoCard();
|
363
|
502
|
default:
|
|
@@ -373,13 +512,31 @@ class AboutScreen extends React.Component<PropsType> {
|
373
|
512
|
*/
|
374
|
513
|
keyExtractor = (item: ListItemType): string => item.icon;
|
375
|
514
|
|
|
515
|
+ /**
|
|
516
|
+ * Callback used when receiving the modal ref
|
|
517
|
+ *
|
|
518
|
+ * @param ref
|
|
519
|
+ */
|
|
520
|
+ onModalRef = (ref: Modalize) => {
|
|
521
|
+ this.modalRef = ref;
|
|
522
|
+ };
|
|
523
|
+
|
376
|
524
|
render(): React.Node {
|
|
525
|
+ const {state} = this;
|
377
|
526
|
return (
|
378
|
|
- <CollapsibleFlatList
|
379
|
|
- style={{padding: 5}}
|
380
|
|
- data={this.dataOrder}
|
381
|
|
- renderItem={this.getMainCard}
|
382
|
|
- />
|
|
527
|
+ <View
|
|
528
|
+ style={{
|
|
529
|
+ height: '100%',
|
|
530
|
+ }}>
|
|
531
|
+ <CollapsibleFlatList
|
|
532
|
+ style={{padding: 5}}
|
|
533
|
+ data={this.dataOrder}
|
|
534
|
+ renderItem={this.getMainCard}
|
|
535
|
+ />
|
|
536
|
+ <CustomModal onRef={this.onModalRef}>
|
|
537
|
+ {state.modalCurrentDisplayItem}
|
|
538
|
+ </CustomModal>
|
|
539
|
+ </View>
|
383
|
540
|
);
|
384
|
541
|
}
|
385
|
542
|
}
|