Browse Source

Add Thaks card

docjyJ 3 years ago
parent
commit
2ed4fbd780
1 changed files with 165 additions and 8 deletions
  1. 165
    8
      src/screens/About/AboutScreen.js

+ 165
- 8
src/screens/About/AboutScreen.js View File

@@ -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
 }

Loading…
Cancel
Save