Update clubs screens to use TypeScript

src/components/Lists/Clubs/ClubListItem.tsx

@@ -27,7 +27,7 @@ import type {
 
 type PropsType = {
   onPress: () => void;
-  categoryTranslator: (id: number) => ClubCategoryType;
+  categoryTranslator: (id: number) => ClubCategoryType | null;
   item: ClubType;
   height: number;
   theme: ReactNativePaper.Theme;
@@ -50,7 +50,8 @@ class ClubListItem extends React.Component<PropsType> {
     const final: Array<React.ReactNode> = [];
     categories.forEach((cat: number | null) => {
       if (cat != null) {
-        const category: ClubCategoryType = props.categoryTranslator(cat);
+        const category = props.categoryTranslator(cat);
+        if (category) {
           final.push(
             <Chip
               style={{marginRight: 5, marginBottom: 5}}
@@ -59,6 +60,7 @@ class ClubListItem extends React.Component<PropsType> {
             </Chip>,
           );
         }
+      }
     });
     return <View style={{flexDirection: 'row'}}>{final}</View>;
   }

src/screens/About/AboutDependenciesScreen.tsx

@@ -17,8 +17,6 @@
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-// @flow
-
 import * as React from 'react';
 import {List} from 'react-native-paper';
 import {View} from 'react-native-animatable';
@@ -26,8 +24,8 @@ import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatLis
 import packageJson from '../../../package.json';
 
 type ListItemType = {
-  name: string,
+  name: string;
-  version: string,
+  version: string;
 };
 
 /**
@@ -37,9 +35,9 @@ type ListItemType = {
  * @return {Array<ListItemType>}
  */
 function generateListFromObject(object: {
-  [key: string]: string,
+  [key: string]: string;
 }): Array<ListItemType> {
-  const list = [];
+  const list: Array<ListItemType> = [];
   const keys = Object.keys(object);
   keys.forEach((key: string) => {
     list.push({name: key, version: object[key]});
@@ -56,13 +54,13 @@ export default class AboutDependenciesScreen extends React.Component<null> {
   data: Array<ListItemType>;
 
   constructor() {
-    super();
+    super(null);
     this.data = generateListFromObject(packageJson.dependencies);
   }
 
   keyExtractor = (item: ListItemType): string => item.name;
 
-  getRenderItem = ({item}: {item: ListItemType}): React.Node => (
+  getRenderItem = ({item}: {item: ListItemType}) => (
     <List.Item
       title={item.name}
       description={item.version.replace('^', '').replace('~', '')}
@@ -71,15 +69,15 @@ export default class AboutDependenciesScreen extends React.Component<null> {
   );
 
   getItemLayout = (
-    data: ListItemType,
+    data: Array<ListItemType> | null | undefined,
     index: number,
-  ): {length: number, offset: number, index: number} => ({
+  ): {length: number; offset: number; index: number} => ({
     length: LIST_ITEM_HEIGHT,
     offset: LIST_ITEM_HEIGHT * index,
     index,
   });
 
-  render(): React.Node {
+  render() {
     return (
       <View>
         <CollapsibleFlatList

src/screens/About/AboutScreen.tsx

@@ -17,37 +17,32 @@
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-// @flow
-
 import * as React from 'react';
 import {FlatList, Linking, Platform, Image, View} from 'react-native';
 import i18n from 'i18n-js';
-import {Avatar, Card, List, withTheme} from 'react-native-paper';
+import {Avatar, Card, List} from 'react-native-paper';
 import {StackNavigationProp} from '@react-navigation/stack';
 import packageJson from '../../../package.json';
 import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
-import APP_LOGO from '../../../assets/android.icon.round.png';
-import type {
-  CardTitleIconPropsType,
-  ListIconPropsType,
-} from '../../constants/PaperStyles';
 import OptionsDialog from '../../components/Dialogs/OptionsDialog';
 import type {OptionsDialogButtonType} from '../../components/Dialogs/OptionsDialog';
 
+const APP_LOGO = require('../../../assets/android.icon.round.png');
+
 type ListItemType = {
-  onPressCallback: () => void,
+  onPressCallback: () => void;
-  icon: string,
+  icon: string;
-  text: string,
+  text: string;
-  showChevron: boolean,
+  showChevron: boolean;
 };
 
 type MemberItemType = {
-  name: string,
+  name: string;
-  message: string,
+  message: string;
-  icon: string,
+  icon: string;
-  trollLink?: string,
+  trollLink?: string;
-  linkedin?: string,
+  linkedin?: string;
-  mail?: string,
+  mail?: string;
 };
 
 const links = {
@@ -64,14 +59,14 @@ const links = {
 };
 
 type PropsType = {
-  navigation: StackNavigationProp,
+  navigation: StackNavigationProp<any>;
 };
 
 type StateType = {
-  dialogVisible: boolean,
+  dialogVisible: boolean;
-  dialogTitle: string,
+  dialogTitle: string;
-  dialogMessage: string,
+  dialogMessage: string;
-  dialogButtons: Array<OptionsDialogButtonType>,
+  dialogButtons: Array<OptionsDialogButtonType>;
 };
 
 /**
@@ -86,7 +81,6 @@ function openWebLink(link: string) {
  * Class defining an about screen. This screen shows the user information about the app and it's author.
  */
 class AboutScreen extends React.Component<PropsType, StateType> {
-
   /**
    * Object containing data relative to major contributors
    */
@@ -109,7 +103,8 @@ class AboutScreen extends React.Component<PropsType, StateType> {
       message: i18n.t('screens.about.user.yohan'),
       icon: 'xml',
       linkedin: 'https://www.linkedin.com/in/yohan-simard',
-      mail: 'mailto:ysimard@etud.insa-toulouse.fr?' +
+      mail:
+        'mailto:ysimard@etud.insa-toulouse.fr?' +
         'subject=' +
         'Application Amicale INSA Toulouse' +
         '&body=' +
@@ -333,7 +328,7 @@ class AboutScreen extends React.Component<PropsType, StateType> {
    * @param user The member to show information for
    */
   onContributorListItemPress(user: MemberItemType) {
-    const dialogBtn = [
+    const dialogBtn: Array<OptionsDialogButtonType> = [
       {
         title: 'OK',
         onPress: this.onDialogDismiss,
@@ -379,15 +374,14 @@ class AboutScreen extends React.Component<PropsType, StateType> {
    *
    * @return {*}
    */
-  getAppCard(): React.Node {
+  getAppCard() {
     return (
       <Card style={{marginBottom: 10}}>
         <Card.Title
           title="Campus"
           subtitle={packageJson.version}
-          left={(iconProps: CardTitleIconPropsType): React.Node => (
+          left={(iconProps) => (
             <Image
-              size={iconProps.size}
               source={APP_LOGO}
               style={{width: iconProps.size, height: iconProps.size}}
             />
@@ -409,12 +403,12 @@ class AboutScreen extends React.Component<PropsType, StateType> {
    *
    * @return {*}
    */
-  getTeamCard(): React.Node {
+  getTeamCard() {
     return (
       <Card style={{marginBottom: 10}}>
         <Card.Title
           title={i18n.t('screens.about.team')}
-          left={(iconProps: CardTitleIconPropsType): React.Node => (
+          left={(iconProps) => (
             <Avatar.Icon size={iconProps.size} icon="account-multiple" />
           )}
         />
@@ -434,12 +428,12 @@ class AboutScreen extends React.Component<PropsType, StateType> {
    *
    * @return {*}
    */
-  getThanksCard(): React.Node {
+  getThanksCard() {
     return (
       <Card style={{marginBottom: 10}}>
         <Card.Title
           title={i18n.t('screens.about.thanks')}
-          left={(iconProps: CardTitleIconPropsType): React.Node => (
+          left={(iconProps) => (
             <Avatar.Icon size={iconProps.size} icon="hand-heart" />
           )}
         />
@@ -459,12 +453,12 @@ class AboutScreen extends React.Component<PropsType, StateType> {
    *
    * @return {*}
    */
-  getTechnoCard(): React.Node {
+  getTechnoCard() {
     return (
       <Card style={{marginBottom: 10}}>
         <Card.Title
           title={i18n.t('screens.about.technologies')}
-          left={(iconProps: CardTitleIconPropsType): React.Node => (
+          left={(iconProps) => (
             <Avatar.Icon size={iconProps.size} icon="wrench" />
           )}
         />
@@ -485,7 +479,13 @@ class AboutScreen extends React.Component<PropsType, StateType> {
    * @param props
    * @return {*}
    */
-  static getChevronIcon(props: ListIconPropsType): React.Node {
+  static getChevronIcon(props: {
+    color: string;
+    style?: {
+      marginRight: number;
+      marginVertical?: number;
+    };
+  }) {
     return (
       <List.Icon color={props.color} style={props.style} icon="chevron-right" />
     );
@@ -498,7 +498,16 @@ class AboutScreen extends React.Component<PropsType, StateType> {
    * @param props
    * @return {*}
    */
-  static getItemIcon(item: ListItemType, props: ListIconPropsType): React.Node {
+  static getItemIcon(
+    item: ListItemType,
+    props: {
+      color: string;
+      style?: {
+        marginRight: number;
+        marginVertical?: number;
+      };
+    },
+  ) {
     return (
       <List.Icon color={props.color} style={props.style} icon={item.icon} />
     );
@@ -509,9 +518,14 @@ class AboutScreen extends React.Component<PropsType, StateType> {
    *
    * @returns {*}
    */
-  getCardItem = ({item}: {item: ListItemType}): React.Node => {
+  getCardItem = ({item}: {item: ListItemType}) => {
-    const getItemIcon = (props: ListIconPropsType): React.Node =>
+    const getItemIcon = (props: {
-      AboutScreen.getItemIcon(item, props);
+      color: string;
+      style?: {
+        marginRight: number;
+        marginVertical?: number;
+      };
+    }) => AboutScreen.getItemIcon(item, props);
     if (item.showChevron) {
       return (
         <List.Item
@@ -537,7 +551,7 @@ class AboutScreen extends React.Component<PropsType, StateType> {
    * @param item The item to show
    * @return {*}
    */
-  getMainCard = ({item}: {item: {id: string}}): React.Node => {
+  getMainCard = ({item}: {item: {id: string}}) => {
     switch (item.id) {
       case 'app':
         return this.getAppCard();
@@ -564,7 +578,7 @@ class AboutScreen extends React.Component<PropsType, StateType> {
    */
   keyExtractor = (item: ListItemType): string => item.icon;
 
-  render(): React.Node {
+  render() {
     const {state} = this;
     return (
       <View
@@ -588,4 +602,4 @@ class AboutScreen extends React.Component<PropsType, StateType> {
   }
 }
 
-export default withTheme(AboutScreen);
+export default AboutScreen;

src/screens/About/DebugScreen.tsx

@@ -17,8 +17,6 @@
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-// @flow
-
 import * as React from 'react';
 import {View} from 'react-native';
 import {
@@ -32,22 +30,21 @@ import {
 import {Modalize} from 'react-native-modalize';
 import CustomModal from '../../components/Overrides/CustomModal';
 import AsyncStorageManager from '../../managers/AsyncStorageManager';
-import type {CustomThemeType} from '../../managers/ThemeManager';
 import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
 
 type PreferenceItemType = {
-  key: string,
+  key: string;
-  default: string,
+  default: string;
-  current: string,
+  current: string;
 };
 
 type PropsType = {
-  theme: CustomThemeType,
+  theme: ReactNativePaper.Theme;
 };
 
 type StateType = {
-  modalCurrentDisplayItem: PreferenceItemType,
+  modalCurrentDisplayItem: PreferenceItemType | null;
-  currentPreferences: Array<PreferenceItemType>,
+  currentPreferences: Array<PreferenceItemType>;
 };
 
 /**
@@ -55,7 +52,7 @@ type StateType = {
  * This screen allows the user to get and modify information on the app/device.
  */
 class DebugScreen extends React.Component<PropsType, StateType> {
-  modalRef: Modalize;
+  modalRef: Modalize | null;
 
   modalInputValue: string;
 
@@ -66,16 +63,16 @@ class DebugScreen extends React.Component<PropsType, StateType> {
    */
   constructor(props: PropsType) {
     super(props);
+    this.modalRef = null;
     this.modalInputValue = '';
     const currentPreferences: Array<PreferenceItemType> = [];
-    // eslint-disable-next-line flowtype/no-weak-types
     Object.values(AsyncStorageManager.PREFERENCES).forEach((object: any) => {
       const newObject: PreferenceItemType = {...object};
       newObject.current = AsyncStorageManager.getString(newObject.key);
       currentPreferences.push(newObject);
     });
     this.state = {
-      modalCurrentDisplayItem: {},
+      modalCurrentDisplayItem: null,
       currentPreferences,
     };
   }
@@ -85,21 +82,27 @@ class DebugScreen extends React.Component<PropsType, StateType> {
    *
    * @return {*}
    */
-  getModalContent(): React.Node {
+  getModalContent() {
     const {props, state} = this;
+    let key = '';
+    let defaultValue = '';
+    let current = '';
+    if (state.modalCurrentDisplayItem) {
+      key = state.modalCurrentDisplayItem.key;
+      defaultValue = state.modalCurrentDisplayItem.default;
+      defaultValue = state.modalCurrentDisplayItem.default;
+      current = state.modalCurrentDisplayItem.current;
+    }
+
     return (
       <View
         style={{
           flex: 1,
           padding: 20,
         }}>
-        <Title>{state.modalCurrentDisplayItem.key}</Title>
+        <Title>{key}</Title>
-        <Subheading>
+        <Subheading>Default: {defaultValue}</Subheading>
-          Default: {state.modalCurrentDisplayItem.default}
+        <Subheading>Current: {current}</Subheading>
-        </Subheading>
-        <Subheading>
-          Current: {state.modalCurrentDisplayItem.current}
-        </Subheading>
         <TextInput
           label="New Value"
           onChangeText={(text: string) => {
@@ -116,10 +119,7 @@ class DebugScreen extends React.Component<PropsType, StateType> {
             dark
             color={props.theme.colors.success}
             onPress={() => {
-              this.saveNewPrefs(
+              this.saveNewPrefs(key, this.modalInputValue);
-                state.modalCurrentDisplayItem.key,
-                this.modalInputValue,
-              );
             }}>
             Save new value
           </Button>
@@ -128,10 +128,7 @@ class DebugScreen extends React.Component<PropsType, StateType> {
             dark
             color={props.theme.colors.danger}
             onPress={() => {
-              this.saveNewPrefs(
+              this.saveNewPrefs(key, defaultValue);
-                state.modalCurrentDisplayItem.key,
-                state.modalCurrentDisplayItem.default,
-              );
             }}>
             Reset to default
           </Button>
@@ -140,7 +137,7 @@ class DebugScreen extends React.Component<PropsType, StateType> {
     );
   }
 
-  getRenderItem = ({item}: {item: PreferenceItemType}): React.Node => {
+  getRenderItem = ({item}: {item: PreferenceItemType}) => {
     return (
       <List.Item
         title={item.key}
@@ -170,7 +167,9 @@ class DebugScreen extends React.Component<PropsType, StateType> {
     this.setState({
       modalCurrentDisplayItem: item,
     });
-    if (this.modalRef) this.modalRef.open();
+    if (this.modalRef) {
+      this.modalRef.open();
+    }
   }
 
   /**
@@ -199,24 +198,25 @@ class DebugScreen extends React.Component<PropsType, StateType> {
    */
   saveNewPrefs(key: string, value: string) {
     this.setState((prevState: StateType): {
-      currentPreferences: Array<PreferenceItemType>,
+      currentPreferences: Array<PreferenceItemType>;
     } => {
       const currentPreferences = [...prevState.currentPreferences];
       currentPreferences[this.findIndexOfKey(key)].current = value;
       return {currentPreferences};
     });
     AsyncStorageManager.set(key, value);
+    if (this.modalRef) {
       this.modalRef.close();
     }
+  }
 
-  render(): React.Node {
+  render() {
     const {state} = this;
     return (
       <View>
         <CustomModal onRef={this.onModalRef}>
           {this.getModalContent()}
         </CustomModal>
-        {/* $FlowFixMe */}
         <CollapsibleFlatList
           data={state.currentPreferences}
           extraData={state.currentPreferences}

src/screens/Amicale/Clubs/ClubAboutScreen.js

@@ -1,72 +0,0 @@
-/*
- * Copyright (c) 2019 - 2020 Arnaud Vergnet.
- *
- * This file is part of Campus INSAT.
- *
- * Campus INSAT is free software: you can redistribute it and/or modify
- *  it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * Campus INSAT is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-// @flow
-
-import * as React from 'react';
-import {Image, View} from 'react-native';
-import {Card, Avatar, Text, withTheme} from 'react-native-paper';
-import i18n from 'i18n-js';
-import Autolink from 'react-native-autolink';
-import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
-import AMICALE_ICON from '../../../../assets/amicale.png';
-import type {CardTitleIconPropsType} from '../../../constants/PaperStyles';
-
-const CONTACT_LINK = 'clubs@amicale-insat.fr';
-
-// eslint-disable-next-line react/prefer-stateless-function
-class ClubAboutScreen extends React.Component<null> {
-  render(): React.Node {
-    return (
-      <CollapsibleScrollView style={{padding: 5}}>
-        <View
-          style={{
-            width: '100%',
-            height: 100,
-            marginTop: 20,
-            marginBottom: 20,
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}>
-          <Image
-            source={AMICALE_ICON}
-            style={{flex: 1, resizeMode: 'contain'}}
-            resizeMode="contain"
-          />
-        </View>
-        <Text>{i18n.t('screens.clubs.about.text')}</Text>
-        <Card style={{margin: 5}}>
-          <Card.Title
-            title={i18n.t('screens.clubs.about.title')}
-            subtitle={i18n.t('screens.clubs.about.subtitle')}
-            left={(iconProps: CardTitleIconPropsType): React.Node => (
-              <Avatar.Icon size={iconProps.size} icon="information" />
-            )}
-          />
-          <Card.Content>
-            <Text>{i18n.t('screens.clubs.about.message')}</Text>
-            <Autolink text={CONTACT_LINK} component={Text} />
-          </Card.Content>
-        </Card>
-      </CollapsibleScrollView>
-    );
-  }
-}
-
-export default withTheme(ClubAboutScreen);

src/screens/Amicale/Clubs/ClubAboutScreen.tsx

@@ -0,0 +1,66 @@
+/*
+ * Copyright (c) 2019 - 2020 Arnaud Vergnet.
+ *
+ * This file is part of Campus INSAT.
+ *
+ * Campus INSAT is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Campus INSAT is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import * as React from 'react';
+import {Image, View} from 'react-native';
+import {Card, Avatar, Text} from 'react-native-paper';
+import i18n from 'i18n-js';
+import Autolink from 'react-native-autolink';
+import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
+const AMICALE_ICON = require('../../../../assets/amicale.png');
+
+const CONTACT_LINK = 'clubs@amicale-insat.fr';
+
+function ClubAboutScreen() {
+  return (
+    <CollapsibleScrollView style={{padding: 5}}>
+      <View
+        style={{
+          width: '100%',
+          height: 100,
+          marginTop: 20,
+          marginBottom: 20,
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}>
+        <Image
+          source={AMICALE_ICON}
+          style={{flex: 1, resizeMode: 'contain'}}
+          resizeMode="contain"
+        />
+      </View>
+      <Text>{i18n.t('screens.clubs.about.text')}</Text>
+      <Card style={{margin: 5}}>
+        <Card.Title
+          title={i18n.t('screens.clubs.about.title')}
+          subtitle={i18n.t('screens.clubs.about.subtitle')}
+          left={(iconProps) => (
+            <Avatar.Icon size={iconProps.size} icon="information" />
+          )}
+        />
+        <Card.Content>
+          <Text>{i18n.t('screens.clubs.about.message')}</Text>
+          <Autolink<typeof Text> text={CONTACT_LINK} component={Text} />
+        </Card.Content>
+      </Card>
+    </CollapsibleScrollView>
+  );
+}
+
+export default ClubAboutScreen;

src/screens/Amicale/Clubs/ClubDisplayScreen.tsx

@@ -17,8 +17,6 @@
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-// @flow
-
 import * as React from 'react';
 import {Linking, View} from 'react-native';
 import {
@@ -35,24 +33,20 @@ import AuthenticatedScreen from '../../../components/Amicale/AuthenticatedScreen
 import CustomHTML from '../../../components/Overrides/CustomHTML';
 import CustomTabBar from '../../../components/Tabbar/CustomTabBar';
 import type {ClubCategoryType, ClubType} from './ClubListScreen';
-import type {CustomThemeType} from '../../../managers/ThemeManager';
 import {ERROR_TYPE} from '../../../utils/WebData';
 import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
-import type {ApiGenericDataType} from '../../../utils/WebData';
-import type {CardTitleIconPropsType} from '../../../constants/PaperStyles';
 import ImageGalleryButton from '../../../components/Media/ImageGalleryButton';
 
 type PropsType = {
-  navigation: StackNavigationProp,
+  navigation: StackNavigationProp<any>;
   route: {
     params?: {
-      data?: ClubType,
+      data?: ClubType;
-      categories?: Array<ClubCategoryType>,
+      categories?: Array<ClubCategoryType>;
-      clubId?: number,
+      clubId?: number;
-    },
+    };
-    ...
+  };
-  },
+  theme: ReactNativePaper.Theme;
-  theme: CustomThemeType,
 };
 
 const AMICALE_MAIL = 'clubs@amicale-insat.fr';
@@ -73,21 +67,20 @@ class ClubDisplayScreen extends React.Component<PropsType> {
 
   constructor(props: PropsType) {
     super(props);
-    if (props.route.params != null) {
+    this.displayData = null;
+    this.categories = null;
+    this.clubId = props.route.params?.clubId ? props.route.params.clubId : 0;
+    this.shouldFetchData = true;
+
     if (
-        props.route.params.data != null &&
+      props.route.params &&
-        props.route.params.categories != null
+      props.route.params.data &&
+      props.route.params.categories
     ) {
       this.displayData = props.route.params.data;
       this.categories = props.route.params.categories;
       this.clubId = props.route.params.data.id;
       this.shouldFetchData = false;
-      } else if (props.route.params.clubId != null) {
-        this.displayData = null;
-        this.categories = null;
-        this.clubId = props.route.params.clubId;
-        this.shouldFetchData = true;
-      }
     }
   }
 
@@ -101,7 +94,9 @@ class ClubDisplayScreen extends React.Component<PropsType> {
     let categoryName = '';
     if (this.categories !== null) {
       this.categories.forEach((item: ClubCategoryType) => {
-        if (id === item.id) categoryName = item.name;
+        if (id === item.id) {
+          categoryName = item.name;
+        }
       });
     }
     return categoryName;
@@ -113,10 +108,12 @@ class ClubDisplayScreen extends React.Component<PropsType> {
    * @param categories The categories to display (max 2)
    * @returns {null|*}
    */
-  getCategoriesRender(categories: Array<number | null>): React.Node {
+  getCategoriesRender(categories: Array<number | null>) {
-    if (this.categories == null) return null;
+    if (this.categories == null) {
+      return null;
+    }
 
-    const final = [];
+    const final: Array<React.ReactNode> = [];
     categories.forEach((cat: number | null) => {
       if (cat != null) {
         final.push(
@@ -136,9 +133,9 @@ class ClubDisplayScreen extends React.Component<PropsType> {
    * @param email The club contact email
    * @returns {*}
    */
-  getManagersRender(managers: Array<string>, email: string | null): React.Node {
+  getManagersRender(managers: Array<string>, email: string | null) {
     const {props} = this;
-    const managersListView = [];
+    const managersListView: Array<React.ReactNode> = [];
     managers.forEach((item: string) => {
       managersListView.push(<Paragraph key={item}>{item}</Paragraph>);
     });
@@ -153,7 +150,7 @@ class ClubDisplayScreen extends React.Component<PropsType> {
               ? i18n.t('screens.clubs.managersSubtitle')
               : i18n.t('screens.clubs.managersUnavailable')
           }
-          left={(iconProps: CardTitleIconPropsType): React.Node => (
+          left={(iconProps) => (
             <Avatar.Icon
               size={iconProps.size}
               style={{backgroundColor: 'transparent'}}
@@ -181,10 +178,7 @@ class ClubDisplayScreen extends React.Component<PropsType> {
    * @param hasManagers True if the club has managers
    * @returns {*}
    */
-  static getEmailButton(
+  static getEmailButton(email: string | null, hasManagers: boolean) {
-    email: string | null,
-    hasManagers: boolean,
-  ): React.Node {
     const destinationEmail =
       email != null && hasManagers ? email : AMICALE_MAIL;
     const text =
@@ -206,20 +200,15 @@ class ClubDisplayScreen extends React.Component<PropsType> {
     );
   }
 
-  getScreen = (response: Array<ApiGenericDataType | null>): React.Node => {
+  getScreen = (response: Array<ClubType | null>) => {
-    const {navigation} = this.props;
+    let data: ClubType | null = response[0];
-    let data: ClubType | null = null;
-    if (response[0] != null) {
-      [data] = response;
-      this.updateHeaderTitle(data);
-    }
     if (data != null) {
+      this.updateHeaderTitle(data);
       return (
         <CollapsibleScrollView style={{paddingLeft: 5, paddingRight: 5}} hasTab>
           {this.getCategoriesRender(data.category)}
           {data.logo !== null ? (
             <ImageGalleryButton
-              navigation={navigation}
               images={[{url: data.logo}]}
               style={{
                 width: 300,
@@ -259,9 +248,9 @@ class ClubDisplayScreen extends React.Component<PropsType> {
     props.navigation.setOptions({title: data.name});
   }
 
-  render(): React.Node {
+  render() {
     const {props} = this;
-    if (this.shouldFetchData)
+    if (this.shouldFetchData) {
       return (
         <AuthenticatedScreen
           navigation={props.navigation}
@@ -283,6 +272,7 @@ class ClubDisplayScreen extends React.Component<PropsType> {
           ]}
         />
       );
+    }
     return this.getScreen([this.displayData]);
   }
 }

src/screens/Amicale/Clubs/ClubListScreen.tsx

@@ -17,8 +17,6 @@
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-// @flow
-
 import * as React from 'react';
 import {Platform} from 'react-native';
 import {Searchbar} from 'react-native-paper';
@@ -34,27 +32,27 @@ import MaterialHeaderButtons, {
 import CollapsibleFlatList from '../../../components/Collapsible/CollapsibleFlatList';
 
 export type ClubCategoryType = {
-  id: number,
+  id: number;
-  name: string,
+  name: string;
 };
 
 export type ClubType = {
-  id: number,
+  id: number;
-  name: string,
+  name: string;
-  description: string,
+  description: string;
-  logo: string,
+  logo: string;
-  email: string | null,
+  email: string | null;
-  category: Array<number | null>,
+  category: Array<number | null>;
-  responsibles: Array<string>,
+  responsibles: Array<string>;
 };
 
 type PropsType = {
-  navigation: StackNavigationProp,
+  navigation: StackNavigationProp<any>;
 };
 
 type StateType = {
-  currentlySelectedCategories: Array<number>,
+  currentlySelectedCategories: Array<number>;
-  currentSearchString: string,
+  currentSearchString: string;
 };
 
 const LIST_ITEM_HEIGHT = 96;
@@ -62,8 +60,9 @@ const LIST_ITEM_HEIGHT = 96;
 class ClubListScreen extends React.Component<PropsType, StateType> {
   categories: Array<ClubCategoryType>;
 
-  constructor() {
+  constructor(props: PropsType) {
-    super();
+    super(props);
+    this.categories = [];
     this.state = {
       currentlySelectedCategories: [],
       currentSearchString: '',
@@ -114,7 +113,7 @@ class ClubListScreen extends React.Component<PropsType, StateType> {
    *
    * @return {*}
    */
-  getSearchBar = (): React.Node => {
+  getSearchBar = () => {
     return (
       <Searchbar
         placeholder={i18n.t('screens.proximo.search')}
@@ -131,7 +130,7 @@ class ClubListScreen extends React.Component<PropsType, StateType> {
    * Gets the header button
    * @return {*}
    */
-  getHeaderButtons = (): React.Node => {
+  getHeaderButtons = () => {
     const onPress = () => {
       const {props} = this;
       props.navigation.navigate('club-about');
@@ -145,12 +144,12 @@ class ClubListScreen extends React.Component<PropsType, StateType> {
 
   getScreen = (
     data: Array<{
-      categories: Array<ClubCategoryType>,
+      categories: Array<ClubCategoryType>;
-      clubs: Array<ClubType>,
+      clubs: Array<ClubType>;
     } | null>,
-  ): React.Node => {
+  ) => {
-    let categoryList = [];
+    let categoryList: Array<ClubCategoryType> = [];
-    let clubList = [];
+    let clubList: Array<ClubType> = [];
     if (data[0] != null) {
       categoryList = data[0].categories;
       clubList = data[0].clubs;
@@ -174,7 +173,7 @@ class ClubListScreen extends React.Component<PropsType, StateType> {
    *
    * @returns {*}
    */
-  getListHeader(): React.Node {
+  getListHeader() {
     const {state} = this;
     return (
       <ClubListHeader
@@ -194,12 +193,14 @@ class ClubListScreen extends React.Component<PropsType, StateType> {
   getCategoryOfId = (id: number): ClubCategoryType | null => {
     let cat = null;
     this.categories.forEach((item: ClubCategoryType) => {
-      if (id === item.id) cat = item;
+      if (id === item.id) {
+        cat = item;
+      }
     });
     return cat;
   };
 
-  getRenderItem = ({item}: {item: ClubType}): React.Node => {
+  getRenderItem = ({item}: {item: ClubType}) => {
     const onPress = () => {
       this.onListItemPress(item);
     };
@@ -219,9 +220,9 @@ class ClubListScreen extends React.Component<PropsType, StateType> {
   keyExtractor = (item: ClubType): string => item.id.toString();
 
   itemLayout = (
-    data: {...},
+    data: Array<ClubType> | null | undefined,
     index: number,
-  ): {length: number, offset: number, index: number} => ({
+  ): {length: number; offset: number; index: number} => ({
     length: LIST_ITEM_HEIGHT,
     offset: LIST_ITEM_HEIGHT * index,
     index,
@@ -240,18 +241,24 @@ class ClubListScreen extends React.Component<PropsType, StateType> {
     const {state} = this;
     const newCategoriesState = [...state.currentlySelectedCategories];
     let newStrState = state.currentSearchString;
-    if (filterStr !== null) newStrState = filterStr;
+    if (filterStr !== null) {
+      newStrState = filterStr;
+    }
     if (categoryId !== null) {
       const index = newCategoriesState.indexOf(categoryId);
-      if (index === -1) newCategoriesState.push(categoryId);
+      if (index === -1) {
-      else newCategoriesState.splice(index, 1);
+        newCategoriesState.push(categoryId);
+      } else {
+        newCategoriesState.splice(index, 1);
       }
-    if (filterStr !== null || categoryId !== null)
+    }
+    if (filterStr !== null || categoryId !== null) {
       this.setState({
         currentSearchString: newStrState,
         currentlySelectedCategories: newCategoriesState,
       });
     }
+  }
 
   /**
    * Checks if the given item should be rendered according to current name and category filters
@@ -264,12 +271,13 @@ class ClubListScreen extends React.Component<PropsType, StateType> {
     let shouldRender =
       state.currentlySelectedCategories.length === 0 ||
       isItemInCategoryFilter(state.currentlySelectedCategories, item.category);
-    if (shouldRender)
+    if (shouldRender) {
       shouldRender = stringMatchQuery(item.name, state.currentSearchString);
+    }
     return shouldRender;
   }
 
-  render(): React.Node {
+  render() {
     const {props} = this;
     return (
       <AuthenticatedScreen