Browse Source

Update about screens to use TypeScript

Arnaud Vergnet 3 years ago
parent
commit
f7e767748a

src/screens/About/AboutDependenciesScreen.js → src/screens/About/AboutDependenciesScreen.tsx View File

@@ -17,8 +17,6 @@
17 17
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
18 18
  */
19 19
 
20
-// @flow
21
-
22 20
 import * as React from 'react';
23 21
 import {List} from 'react-native-paper';
24 22
 import {View} from 'react-native-animatable';
@@ -26,8 +24,8 @@ import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatLis
26 24
 import packageJson from '../../../package.json';
27 25
 
28 26
 type ListItemType = {
29
-  name: string,
30
-  version: string,
27
+  name: string;
28
+  version: string;
31 29
 };
32 30
 
33 31
 /**
@@ -37,9 +35,9 @@ type ListItemType = {
37 35
  * @return {Array<ListItemType>}
38 36
  */
39 37
 function generateListFromObject(object: {
40
-  [key: string]: string,
38
+  [key: string]: string;
41 39
 }): Array<ListItemType> {
42
-  const list = [];
40
+  const list: Array<ListItemType> = [];
43 41
   const keys = Object.keys(object);
44 42
   keys.forEach((key: string) => {
45 43
     list.push({name: key, version: object[key]});
@@ -56,13 +54,13 @@ export default class AboutDependenciesScreen extends React.Component<null> {
56 54
   data: Array<ListItemType>;
57 55
 
58 56
   constructor() {
59
-    super();
57
+    super(null);
60 58
     this.data = generateListFromObject(packageJson.dependencies);
61 59
   }
62 60
 
63 61
   keyExtractor = (item: ListItemType): string => item.name;
64 62
 
65
-  getRenderItem = ({item}: {item: ListItemType}): React.Node => (
63
+  getRenderItem = ({item}: {item: ListItemType}) => (
66 64
     <List.Item
67 65
       title={item.name}
68 66
       description={item.version.replace('^', '').replace('~', '')}
@@ -71,15 +69,15 @@ export default class AboutDependenciesScreen extends React.Component<null> {
71 69
   );
72 70
 
73 71
   getItemLayout = (
74
-    data: ListItemType,
72
+    data: Array<ListItemType> | null | undefined,
75 73
     index: number,
76
-  ): {length: number, offset: number, index: number} => ({
74
+  ): {length: number; offset: number; index: number} => ({
77 75
     length: LIST_ITEM_HEIGHT,
78 76
     offset: LIST_ITEM_HEIGHT * index,
79 77
     index,
80 78
   });
81 79
 
82
-  render(): React.Node {
80
+  render() {
83 81
     return (
84 82
       <View>
85 83
         <CollapsibleFlatList

src/screens/About/AboutScreen.js → src/screens/About/AboutScreen.tsx View File

@@ -17,37 +17,32 @@
17 17
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
18 18
  */
19 19
 
20
-// @flow
21
-
22 20
 import * as React from 'react';
23 21
 import {FlatList, Linking, Platform, Image, View} from 'react-native';
24 22
 import i18n from 'i18n-js';
25
-import {Avatar, Card, List, withTheme} from 'react-native-paper';
23
+import {Avatar, Card, List} from 'react-native-paper';
26 24
 import {StackNavigationProp} from '@react-navigation/stack';
27 25
 import packageJson from '../../../package.json';
28 26
 import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
29
-import APP_LOGO from '../../../assets/android.icon.round.png';
30
-import type {
31
-  CardTitleIconPropsType,
32
-  ListIconPropsType,
33
-} from '../../constants/PaperStyles';
34 27
 import OptionsDialog from '../../components/Dialogs/OptionsDialog';
35 28
 import type {OptionsDialogButtonType} from '../../components/Dialogs/OptionsDialog';
36 29
 
30
+const APP_LOGO = require('../../../assets/android.icon.round.png');
31
+
37 32
 type ListItemType = {
38
-  onPressCallback: () => void,
39
-  icon: string,
40
-  text: string,
41
-  showChevron: boolean,
33
+  onPressCallback: () => void;
34
+  icon: string;
35
+  text: string;
36
+  showChevron: boolean;
42 37
 };
43 38
 
44 39
 type MemberItemType = {
45
-  name: string,
46
-  message: string,
47
-  icon: string,
48
-  trollLink?: string,
49
-  linkedin?: string,
50
-  mail?: string,
40
+  name: string;
41
+  message: string;
42
+  icon: string;
43
+  trollLink?: string;
44
+  linkedin?: string;
45
+  mail?: string;
51 46
 };
52 47
 
53 48
 const links = {
@@ -64,14 +59,14 @@ const links = {
64 59
 };
65 60
 
66 61
 type PropsType = {
67
-  navigation: StackNavigationProp,
62
+  navigation: StackNavigationProp<any>;
68 63
 };
69 64
 
70 65
 type StateType = {
71
-  dialogVisible: boolean,
72
-  dialogTitle: string,
73
-  dialogMessage: string,
74
-  dialogButtons: Array<OptionsDialogButtonType>,
66
+  dialogVisible: boolean;
67
+  dialogTitle: string;
68
+  dialogMessage: string;
69
+  dialogButtons: Array<OptionsDialogButtonType>;
75 70
 };
76 71
 
77 72
 /**
@@ -86,7 +81,6 @@ function openWebLink(link: string) {
86 81
  * Class defining an about screen. This screen shows the user information about the app and it's author.
87 82
  */
88 83
 class AboutScreen extends React.Component<PropsType, StateType> {
89
-
90 84
   /**
91 85
    * Object containing data relative to major contributors
92 86
    */
@@ -109,7 +103,8 @@ class AboutScreen extends React.Component<PropsType, StateType> {
109 103
       message: i18n.t('screens.about.user.yohan'),
110 104
       icon: 'xml',
111 105
       linkedin: 'https://www.linkedin.com/in/yohan-simard',
112
-      mail: 'mailto:ysimard@etud.insa-toulouse.fr?' +
106
+      mail:
107
+        'mailto:ysimard@etud.insa-toulouse.fr?' +
113 108
         'subject=' +
114 109
         'Application Amicale INSA Toulouse' +
115 110
         '&body=' +
@@ -333,7 +328,7 @@ class AboutScreen extends React.Component<PropsType, StateType> {
333 328
    * @param user The member to show information for
334 329
    */
335 330
   onContributorListItemPress(user: MemberItemType) {
336
-    const dialogBtn = [
331
+    const dialogBtn: Array<OptionsDialogButtonType> = [
337 332
       {
338 333
         title: 'OK',
339 334
         onPress: this.onDialogDismiss,
@@ -379,15 +374,14 @@ class AboutScreen extends React.Component<PropsType, StateType> {
379 374
    *
380 375
    * @return {*}
381 376
    */
382
-  getAppCard(): React.Node {
377
+  getAppCard() {
383 378
     return (
384 379
       <Card style={{marginBottom: 10}}>
385 380
         <Card.Title
386 381
           title="Campus"
387 382
           subtitle={packageJson.version}
388
-          left={(iconProps: CardTitleIconPropsType): React.Node => (
383
+          left={(iconProps) => (
389 384
             <Image
390
-              size={iconProps.size}
391 385
               source={APP_LOGO}
392 386
               style={{width: iconProps.size, height: iconProps.size}}
393 387
             />
@@ -409,12 +403,12 @@ class AboutScreen extends React.Component<PropsType, StateType> {
409 403
    *
410 404
    * @return {*}
411 405
    */
412
-  getTeamCard(): React.Node {
406
+  getTeamCard() {
413 407
     return (
414 408
       <Card style={{marginBottom: 10}}>
415 409
         <Card.Title
416 410
           title={i18n.t('screens.about.team')}
417
-          left={(iconProps: CardTitleIconPropsType): React.Node => (
411
+          left={(iconProps) => (
418 412
             <Avatar.Icon size={iconProps.size} icon="account-multiple" />
419 413
           )}
420 414
         />
@@ -434,12 +428,12 @@ class AboutScreen extends React.Component<PropsType, StateType> {
434 428
    *
435 429
    * @return {*}
436 430
    */
437
-  getThanksCard(): React.Node {
431
+  getThanksCard() {
438 432
     return (
439 433
       <Card style={{marginBottom: 10}}>
440 434
         <Card.Title
441 435
           title={i18n.t('screens.about.thanks')}
442
-          left={(iconProps: CardTitleIconPropsType): React.Node => (
436
+          left={(iconProps) => (
443 437
             <Avatar.Icon size={iconProps.size} icon="hand-heart" />
444 438
           )}
445 439
         />
@@ -459,12 +453,12 @@ class AboutScreen extends React.Component<PropsType, StateType> {
459 453
    *
460 454
    * @return {*}
461 455
    */
462
-  getTechnoCard(): React.Node {
456
+  getTechnoCard() {
463 457
     return (
464 458
       <Card style={{marginBottom: 10}}>
465 459
         <Card.Title
466 460
           title={i18n.t('screens.about.technologies')}
467
-          left={(iconProps: CardTitleIconPropsType): React.Node => (
461
+          left={(iconProps) => (
468 462
             <Avatar.Icon size={iconProps.size} icon="wrench" />
469 463
           )}
470 464
         />
@@ -485,7 +479,13 @@ class AboutScreen extends React.Component<PropsType, StateType> {
485 479
    * @param props
486 480
    * @return {*}
487 481
    */
488
-  static getChevronIcon(props: ListIconPropsType): React.Node {
482
+  static getChevronIcon(props: {
483
+    color: string;
484
+    style?: {
485
+      marginRight: number;
486
+      marginVertical?: number;
487
+    };
488
+  }) {
489 489
     return (
490 490
       <List.Icon color={props.color} style={props.style} icon="chevron-right" />
491 491
     );
@@ -498,7 +498,16 @@ class AboutScreen extends React.Component<PropsType, StateType> {
498 498
    * @param props
499 499
    * @return {*}
500 500
    */
501
-  static getItemIcon(item: ListItemType, props: ListIconPropsType): React.Node {
501
+  static getItemIcon(
502
+    item: ListItemType,
503
+    props: {
504
+      color: string;
505
+      style?: {
506
+        marginRight: number;
507
+        marginVertical?: number;
508
+      };
509
+    },
510
+  ) {
502 511
     return (
503 512
       <List.Icon color={props.color} style={props.style} icon={item.icon} />
504 513
     );
@@ -509,9 +518,14 @@ class AboutScreen extends React.Component<PropsType, StateType> {
509 518
    *
510 519
    * @returns {*}
511 520
    */
512
-  getCardItem = ({item}: {item: ListItemType}): React.Node => {
513
-    const getItemIcon = (props: ListIconPropsType): React.Node =>
514
-      AboutScreen.getItemIcon(item, props);
521
+  getCardItem = ({item}: {item: ListItemType}) => {
522
+    const getItemIcon = (props: {
523
+      color: string;
524
+      style?: {
525
+        marginRight: number;
526
+        marginVertical?: number;
527
+      };
528
+    }) => AboutScreen.getItemIcon(item, props);
515 529
     if (item.showChevron) {
516 530
       return (
517 531
         <List.Item
@@ -537,7 +551,7 @@ class AboutScreen extends React.Component<PropsType, StateType> {
537 551
    * @param item The item to show
538 552
    * @return {*}
539 553
    */
540
-  getMainCard = ({item}: {item: {id: string}}): React.Node => {
554
+  getMainCard = ({item}: {item: {id: string}}) => {
541 555
     switch (item.id) {
542 556
       case 'app':
543 557
         return this.getAppCard();
@@ -564,7 +578,7 @@ class AboutScreen extends React.Component<PropsType, StateType> {
564 578
    */
565 579
   keyExtractor = (item: ListItemType): string => item.icon;
566 580
 
567
-  render(): React.Node {
581
+  render() {
568 582
     const {state} = this;
569 583
     return (
570 584
       <View
@@ -588,4 +602,4 @@ class AboutScreen extends React.Component<PropsType, StateType> {
588 602
   }
589 603
 }
590 604
 
591
-export default withTheme(AboutScreen);
605
+export default AboutScreen;

src/screens/About/DebugScreen.js → src/screens/About/DebugScreen.tsx View File

@@ -17,8 +17,6 @@
17 17
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
18 18
  */
19 19
 
20
-// @flow
21
-
22 20
 import * as React from 'react';
23 21
 import {View} from 'react-native';
24 22
 import {
@@ -32,22 +30,21 @@ import {
32 30
 import {Modalize} from 'react-native-modalize';
33 31
 import CustomModal from '../../components/Overrides/CustomModal';
34 32
 import AsyncStorageManager from '../../managers/AsyncStorageManager';
35
-import type {CustomThemeType} from '../../managers/ThemeManager';
36 33
 import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
37 34
 
38 35
 type PreferenceItemType = {
39
-  key: string,
40
-  default: string,
41
-  current: string,
36
+  key: string;
37
+  default: string;
38
+  current: string;
42 39
 };
43 40
 
44 41
 type PropsType = {
45
-  theme: CustomThemeType,
42
+  theme: ReactNativePaper.Theme;
46 43
 };
47 44
 
48 45
 type StateType = {
49
-  modalCurrentDisplayItem: PreferenceItemType,
50
-  currentPreferences: Array<PreferenceItemType>,
46
+  modalCurrentDisplayItem: PreferenceItemType | null;
47
+  currentPreferences: Array<PreferenceItemType>;
51 48
 };
52 49
 
53 50
 /**
@@ -55,7 +52,7 @@ type StateType = {
55 52
  * This screen allows the user to get and modify information on the app/device.
56 53
  */
57 54
 class DebugScreen extends React.Component<PropsType, StateType> {
58
-  modalRef: Modalize;
55
+  modalRef: Modalize | null;
59 56
 
60 57
   modalInputValue: string;
61 58
 
@@ -66,16 +63,16 @@ class DebugScreen extends React.Component<PropsType, StateType> {
66 63
    */
67 64
   constructor(props: PropsType) {
68 65
     super(props);
66
+    this.modalRef = null;
69 67
     this.modalInputValue = '';
70 68
     const currentPreferences: Array<PreferenceItemType> = [];
71
-    // eslint-disable-next-line flowtype/no-weak-types
72 69
     Object.values(AsyncStorageManager.PREFERENCES).forEach((object: any) => {
73 70
       const newObject: PreferenceItemType = {...object};
74 71
       newObject.current = AsyncStorageManager.getString(newObject.key);
75 72
       currentPreferences.push(newObject);
76 73
     });
77 74
     this.state = {
78
-      modalCurrentDisplayItem: {},
75
+      modalCurrentDisplayItem: null,
79 76
       currentPreferences,
80 77
     };
81 78
   }
@@ -85,21 +82,27 @@ class DebugScreen extends React.Component<PropsType, StateType> {
85 82
    *
86 83
    * @return {*}
87 84
    */
88
-  getModalContent(): React.Node {
85
+  getModalContent() {
89 86
     const {props, state} = this;
87
+    let key = '';
88
+    let defaultValue = '';
89
+    let current = '';
90
+    if (state.modalCurrentDisplayItem) {
91
+      key = state.modalCurrentDisplayItem.key;
92
+      defaultValue = state.modalCurrentDisplayItem.default;
93
+      defaultValue = state.modalCurrentDisplayItem.default;
94
+      current = state.modalCurrentDisplayItem.current;
95
+    }
96
+
90 97
     return (
91 98
       <View
92 99
         style={{
93 100
           flex: 1,
94 101
           padding: 20,
95 102
         }}>
96
-        <Title>{state.modalCurrentDisplayItem.key}</Title>
97
-        <Subheading>
98
-          Default: {state.modalCurrentDisplayItem.default}
99
-        </Subheading>
100
-        <Subheading>
101
-          Current: {state.modalCurrentDisplayItem.current}
102
-        </Subheading>
103
+        <Title>{key}</Title>
104
+        <Subheading>Default: {defaultValue}</Subheading>
105
+        <Subheading>Current: {current}</Subheading>
103 106
         <TextInput
104 107
           label="New Value"
105 108
           onChangeText={(text: string) => {
@@ -116,10 +119,7 @@ class DebugScreen extends React.Component<PropsType, StateType> {
116 119
             dark
117 120
             color={props.theme.colors.success}
118 121
             onPress={() => {
119
-              this.saveNewPrefs(
120
-                state.modalCurrentDisplayItem.key,
121
-                this.modalInputValue,
122
-              );
122
+              this.saveNewPrefs(key, this.modalInputValue);
123 123
             }}>
124 124
             Save new value
125 125
           </Button>
@@ -128,10 +128,7 @@ class DebugScreen extends React.Component<PropsType, StateType> {
128 128
             dark
129 129
             color={props.theme.colors.danger}
130 130
             onPress={() => {
131
-              this.saveNewPrefs(
132
-                state.modalCurrentDisplayItem.key,
133
-                state.modalCurrentDisplayItem.default,
134
-              );
131
+              this.saveNewPrefs(key, defaultValue);
135 132
             }}>
136 133
             Reset to default
137 134
           </Button>
@@ -140,7 +137,7 @@ class DebugScreen extends React.Component<PropsType, StateType> {
140 137
     );
141 138
   }
142 139
 
143
-  getRenderItem = ({item}: {item: PreferenceItemType}): React.Node => {
140
+  getRenderItem = ({item}: {item: PreferenceItemType}) => {
144 141
     return (
145 142
       <List.Item
146 143
         title={item.key}
@@ -170,7 +167,9 @@ class DebugScreen extends React.Component<PropsType, StateType> {
170 167
     this.setState({
171 168
       modalCurrentDisplayItem: item,
172 169
     });
173
-    if (this.modalRef) this.modalRef.open();
170
+    if (this.modalRef) {
171
+      this.modalRef.open();
172
+    }
174 173
   }
175 174
 
176 175
   /**
@@ -199,24 +198,25 @@ class DebugScreen extends React.Component<PropsType, StateType> {
199 198
    */
200 199
   saveNewPrefs(key: string, value: string) {
201 200
     this.setState((prevState: StateType): {
202
-      currentPreferences: Array<PreferenceItemType>,
201
+      currentPreferences: Array<PreferenceItemType>;
203 202
     } => {
204 203
       const currentPreferences = [...prevState.currentPreferences];
205 204
       currentPreferences[this.findIndexOfKey(key)].current = value;
206 205
       return {currentPreferences};
207 206
     });
208 207
     AsyncStorageManager.set(key, value);
209
-    this.modalRef.close();
208
+    if (this.modalRef) {
209
+      this.modalRef.close();
210
+    }
210 211
   }
211 212
 
212
-  render(): React.Node {
213
+  render() {
213 214
     const {state} = this;
214 215
     return (
215 216
       <View>
216 217
         <CustomModal onRef={this.onModalRef}>
217 218
           {this.getModalContent()}
218 219
         </CustomModal>
219
-        {/* $FlowFixMe */}
220 220
         <CollapsibleFlatList
221 221
           data={state.currentPreferences}
222 222
           extraData={state.currentPreferences}

Loading…
Cancel
Save