Improve Amicale screen components to match linter

src/screens/Amicale/AmicaleContactScreen.js

@@ -4,121 +4,141 @@ import * as React from 'react';
 import {FlatList, Image, Linking, View} from 'react-native';
 import {Card, List, Text, withTheme} from 'react-native-paper';
 import i18n from 'i18n-js';
-import type {MaterialCommunityIconsGlyphs} from "react-native-vector-icons/MaterialCommunityIcons";
+import type {MaterialCommunityIconsGlyphs} from 'react-native-vector-icons/MaterialCommunityIcons';
-import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
+import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
+import AMICALE_LOGO from '../../../assets/amicale.png';
 
-type Props = {
+type DatasetItemType = {
-};
-
-type DatasetItem = {
   name: string,
   email: string,
   icon: MaterialCommunityIconsGlyphs,
-}
+};
 
 /**
  * Class defining a planning event information page.
  */
-class AmicaleContactScreen extends React.Component<Props> {
+class AmicaleContactScreen extends React.Component<null> {
-
   // Dataset containing information about contacts
-    CONTACT_DATASET: Array<DatasetItem>;
+  CONTACT_DATASET: Array<DatasetItemType>;
 
-    constructor(props: Props) {
+  constructor() {
-        super(props);
+    super();
     this.CONTACT_DATASET = [
       {
-                name: i18n.t("screens.amicaleAbout.roles.interSchools"),
+        name: i18n.t('screens.amicaleAbout.roles.interSchools'),
-                email: "inter.ecoles@amicale-insat.fr",
+        email: 'inter.ecoles@amicale-insat.fr',
-                icon: "share-variant"
+        icon: 'share-variant',
       },
       {
-                name: i18n.t("screens.amicaleAbout.roles.culture"),
+        name: i18n.t('screens.amicaleAbout.roles.culture'),
-                email: "culture@amicale-insat.fr",
+        email: 'culture@amicale-insat.fr',
-                icon: "book"
+        icon: 'book',
       },
       {
-                name: i18n.t("screens.amicaleAbout.roles.animation"),
+        name: i18n.t('screens.amicaleAbout.roles.animation'),
-                email: "animation@amicale-insat.fr",
+        email: 'animation@amicale-insat.fr',
-                icon: "emoticon"
+        icon: 'emoticon',
       },
       {
-                name: i18n.t("screens.amicaleAbout.roles.clubs"),
+        name: i18n.t('screens.amicaleAbout.roles.clubs'),
-                email: "clubs@amicale-insat.fr",
+        email: 'clubs@amicale-insat.fr',
-                icon: "account-group"
+        icon: 'account-group',
       },
       {
-                name: i18n.t("screens.amicaleAbout.roles.event"),
+        name: i18n.t('screens.amicaleAbout.roles.event'),
-                email: "evenements@amicale-insat.fr",
+        email: 'evenements@amicale-insat.fr',
-                icon: "calendar-range"
+        icon: 'calendar-range',
       },
       {
-                name: i18n.t("screens.amicaleAbout.roles.tech"),
+        name: i18n.t('screens.amicaleAbout.roles.tech'),
-                email: "technique@amicale-insat.fr",
+        email: 'technique@amicale-insat.fr',
-                icon: "cog"
+        icon: 'cog',
       },
       {
-                name: i18n.t("screens.amicaleAbout.roles.communication"),
+        name: i18n.t('screens.amicaleAbout.roles.communication'),
-                email: "amicale@amicale-insat.fr",
+        email: 'amicale@amicale-insat.fr',
-                icon: "comment-account"
+        icon: 'comment-account',
       },
       {
-                name: i18n.t("screens.amicaleAbout.roles.intraSchools"),
+        name: i18n.t('screens.amicaleAbout.roles.intraSchools'),
-                email: "intra.ecoles@amicale-insat.fr",
+        email: 'intra.ecoles@amicale-insat.fr',
-                icon: "school"
+        icon: 'school',
       },
       {
-                name: i18n.t("screens.amicaleAbout.roles.publicRelations"),
+        name: i18n.t('screens.amicaleAbout.roles.publicRelations'),
-                email: "rp@amicale-insat.fr",
+        email: 'rp@amicale-insat.fr',
-                icon: "account-tie"
+        icon: 'account-tie',
       },
     ];
   }
 
-    keyExtractor = (item: DatasetItem) => item.email;
+  keyExtractor = (item: DatasetItemType): string => item.email;
 
-    getChevronIcon = (props) => <List.Icon {...props} icon={'chevron-right'}/>;
+  getChevronIcon = ({
+    size,
+    color,
+  }: {
+    size: number,
+    color: string,
+  }): React.Node => (
+    <List.Icon size={size} color={color} icon="chevron-right" />
+  );
 
-    renderItem = ({item}: { item: DatasetItem }) => {
+  getRenderItem = ({item}: {item: DatasetItemType}): React.Node => {
-        const onPress = () => Linking.openURL('mailto:' + item.email);
+    const onPress = () => {
-        return <List.Item
+      Linking.openURL(`mailto:${item.email}`);
+    };
+    return (
+      <List.Item
         title={item.name}
         description={item.email}
-            left={(props) => <List.Icon {...props} icon={item.icon}/>}
+        left={({size, color}: {size: number, color: string}): React.Node => (
+          <List.Icon size={size} color={color} icon={item.icon} />
+        )}
         right={this.getChevronIcon}
         onPress={onPress}
       />
+    );
   };
 
-    getScreen = () => {
+  getScreen = (): React.Node => {
     return (
       <View>
-                <View style={{
+        <View
+          style={{
             width: '100%',
             height: 100,
             marginTop: 20,
             marginBottom: 20,
             justifyContent: 'center',
-                    alignItems: 'center'
+            alignItems: 'center',
           }}>
           <Image
-                        source={require('../../../assets/amicale.png')}
+            source={AMICALE_LOGO}
-                        style={{flex: 1, resizeMode: "contain"}}
+            style={{flex: 1, resizeMode: 'contain'}}
-                        resizeMode="contain"/>
+            resizeMode="contain"
+          />
         </View>
         <Card style={{margin: 5}}>
           <Card.Title
-                        title={i18n.t("screens.amicaleAbout.title")}
+            title={i18n.t('screens.amicaleAbout.title')}
-                        subtitle={i18n.t("screens.amicaleAbout.subtitle")}
+            subtitle={i18n.t('screens.amicaleAbout.subtitle')}
-                        left={props => <List.Icon {...props} icon={'information'}/>}
+            left={({
+              size,
+              color,
+            }: {
+              size: number,
+              color: string,
+            }): React.Node => (
+              <List.Icon size={size} color={color} icon="information" />
+            )}
           />
           <Card.Content>
-                        <Text>{i18n.t("screens.amicaleAbout.message")}</Text>
+            <Text>{i18n.t('screens.amicaleAbout.message')}</Text>
-                        {/*$FlowFixMe*/}
             <FlatList
               data={this.CONTACT_DATASET}
               keyExtractor={this.keyExtractor}
-                            renderItem={this.renderItem}
+              renderItem={this.getRenderItem}
             />
           </Card.Content>
         </Card>
@@ -126,12 +146,12 @@ class AmicaleContactScreen extends React.Component<Props> {
     );
   };
 
-    render() {
+  render(): React.Node {
     return (
       <CollapsibleFlatList
-                data={[{key: "1"}]}
+        data={[{key: '1'}]}
         renderItem={this.getScreen}
-                hasTab={true}
+        hasTab
       />
     );
   }

src/screens/Amicale/Clubs/ClubDisplayScreen.js

@@ -17,7 +17,7 @@ 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 {CustomTheme} from '../../../managers/ThemeManager';
+import type {CustomThemeType} from '../../../managers/ThemeManager';
 import {ERROR_TYPE} from '../../../utils/WebData';
 import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
 import type {ApiGenericDataType} from '../../../utils/WebData';
@@ -32,7 +32,7 @@ type PropsType = {
     },
     ...
   },
-  theme: CustomTheme,
+  theme: CustomThemeType,
 };
 
 const AMICALE_MAIL = 'clubs@amicale-insat.fr';

src/screens/Amicale/Equipment/EquipmentConfirmScreen.js

@@ -11,7 +11,7 @@ import {
 } from 'react-native-paper';
 import {View} from 'react-native';
 import i18n from 'i18n-js';
-import type {CustomTheme} from '../../../managers/ThemeManager';
+import type {CustomThemeType} from '../../../managers/ThemeManager';
 import type {DeviceType} from './EquipmentListScreen';
 import {getRelativeDateString} from '../../../utils/EquipmentBooking';
 import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
@@ -23,7 +23,7 @@ type PropsType = {
       dates: [string, string],
     },
   },
-  theme: CustomTheme,
+  theme: CustomThemeType,
 };
 
 class EquipmentConfirmScreen extends React.Component<PropsType> {

src/screens/Amicale/Equipment/EquipmentRentScreen.js

@@ -15,7 +15,7 @@ import * as Animatable from 'react-native-animatable';
 import i18n from 'i18n-js';
 import {CalendarList} from 'react-native-calendars';
 import type {DeviceType} from './EquipmentListScreen';
-import type {CustomTheme} from '../../../managers/ThemeManager';
+import type {CustomThemeType} from '../../../managers/ThemeManager';
 import LoadingConfirmDialog from '../../../components/Dialogs/LoadingConfirmDialog';
 import ErrorDialog from '../../../components/Dialogs/ErrorDialog';
 import {
@@ -36,7 +36,7 @@ type PropsType = {
       item?: DeviceType,
     },
   },
-  theme: CustomTheme,
+  theme: CustomThemeType,
 };
 
 export type MarkedDatesObjectType = {

src/screens/Amicale/LoginScreen.js

@@ -1,27 +1,33 @@
 // @flow
 
 import * as React from 'react';
-import {Image, KeyboardAvoidingView, StyleSheet, View} from "react-native";
+import {Image, KeyboardAvoidingView, StyleSheet, View} from 'react-native';
-import {Button, Card, HelperText, TextInput, withTheme} from 'react-native-paper';
+import {
-import ConnectionManager from "../../managers/ConnectionManager";
+  Button,
+  Card,
+  HelperText,
+  TextInput,
+  withTheme,
+} from 'react-native-paper';
 import i18n from 'i18n-js';
-import ErrorDialog from "../../components/Dialogs/ErrorDialog";
+import {StackNavigationProp} from '@react-navigation/stack';
-import type {CustomTheme} from "../../managers/ThemeManager";
+import LinearGradient from 'react-native-linear-gradient';
-import AsyncStorageManager from "../../managers/AsyncStorageManager";
+import ConnectionManager from '../../managers/ConnectionManager';
-import {StackNavigationProp} from "@react-navigation/stack";
+import ErrorDialog from '../../components/Dialogs/ErrorDialog';
-import AvailableWebsites from "../../constants/AvailableWebsites";
+import type {CustomThemeType} from '../../managers/ThemeManager';
-import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
+import AsyncStorageManager from '../../managers/AsyncStorageManager';
-import MascotPopup from "../../components/Mascot/MascotPopup";
+import AvailableWebsites from '../../constants/AvailableWebsites';
-import LinearGradient from "react-native-linear-gradient";
+import {MASCOT_STYLE} from '../../components/Mascot/Mascot';
-import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
+import MascotPopup from '../../components/Mascot/MascotPopup';
+import CollapsibleScrollView from '../../components/Collapsible/CollapsibleScrollView';
 
-type Props = {
+type PropsType = {
   navigation: StackNavigationProp,
   route: {params: {nextScreen: string}},
-    theme: CustomTheme
+  theme: CustomThemeType,
-}
+};
 
-type State = {
+type StateType = {
   email: string,
   password: string,
   isEmailValidated: boolean,
@@ -30,17 +36,53 @@ type State = {
   dialogVisible: boolean,
   dialogError: number,
   mascotDialogVisible: boolean,
-}
+};
 
 const ICON_AMICALE = require('../../../assets/amicale.png');
 
-const RESET_PASSWORD_PATH = "https://www.amicale-insat.fr/password/reset";
+const RESET_PASSWORD_PATH = 'https://www.amicale-insat.fr/password/reset';
 
 const emailRegex = /^.+@.+\..+$/;
 
-class LoginScreen extends React.Component<Props, State> {
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  card: {
+    marginTop: 'auto',
+    marginBottom: 'auto',
+  },
+  header: {
+    fontSize: 36,
+    marginBottom: 48,
+  },
+  textInput: {},
+  btnContainer: {
+    marginTop: 5,
+    marginBottom: 10,
+  },
+});
 
-    state = {
+class LoginScreen extends React.Component<PropsType, StateType> {
+  onEmailChange: (value: string) => void;
+
+  onPasswordChange: (value: string) => void;
+
+  passwordInputRef: {current: null | TextInput};
+
+  nextScreen: string | null;
+
+  constructor(props: PropsType) {
+    super(props);
+    this.passwordInputRef = React.createRef();
+    this.onEmailChange = (value: string) => {
+      this.onInputChange(true, value);
+    };
+    this.onPasswordChange = (value: string) => {
+      this.onInputChange(false, value);
+    };
+    props.navigation.addListener('focus', this.onScreenFocus);
+    this.state = {
       email: '',
       password: '',
       isEmailValidated: false,
@@ -48,139 +90,27 @@ class LoginScreen extends React.Component<Props, State> {
       loading: false,
       dialogVisible: false,
       dialogError: 0,
-        mascotDialogVisible: AsyncStorageManager.getBool(AsyncStorageManager.PREFERENCES.loginShowBanner.key),
+      mascotDialogVisible: AsyncStorageManager.getBool(
+        AsyncStorageManager.PREFERENCES.loginShowBanner.key,
+      ),
     };
-
-    onEmailChange: (value: string) => null;
-    onPasswordChange: (value: string) => null;
-    passwordInputRef: { current: null | TextInput };
-
-    nextScreen: string | null;
-
-    constructor(props) {
-        super(props);
-        this.passwordInputRef = React.createRef();
-        this.onEmailChange = this.onInputChange.bind(this, true);
-        this.onPasswordChange = this.onInputChange.bind(this, false);
-        this.props.navigation.addListener('focus', this.onScreenFocus);
   }
 
   onScreenFocus = () => {
     this.handleNavigationParams();
   };
 
-    /**
-     * Saves the screen to navigate to after a successful login if one was provided in navigation parameters
-     */
-    handleNavigationParams() {
-        if (this.props.route.params != null) {
-            if (this.props.route.params.nextScreen != null)
-                this.nextScreen = this.props.route.params.nextScreen;
-            else
-                this.nextScreen = null;
-        }
-    }
-
-    hideMascotDialog = () => {
-        AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.loginShowBanner.key, false);
-        this.setState({mascotDialogVisible: false})
-    };
-
-    showMascotDialog = () => {
-        this.setState({mascotDialogVisible: true})
-    };
-
-    /**
-     * Shows an error dialog with the corresponding login error
-     *
-     * @param error The error given by the login request
-     */
-    showErrorDialog = (error: number) =>
-        this.setState({
-            dialogVisible: true,
-            dialogError: error,
-        });
-
-    hideErrorDialog = () => this.setState({dialogVisible: false});
-
-    /**
-     * Navigates to the screen specified in navigation parameters or simply go back tha stack.
-     * Saves in user preferences to not show the login banner again.
-     */
-    handleSuccess = () => {
-        // Do not show the home login banner again
-        AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.homeShowBanner.key, false);
-        if (this.nextScreen == null)
-            this.props.navigation.goBack();
-        else
-            this.props.navigation.replace(this.nextScreen);
-    };
-
   /**
    * Navigates to the Amicale website screen with the reset password link as navigation parameters
    */
-    onResetPasswordClick = () => this.props.navigation.navigate("website", {
+  onResetPasswordClick = () => {
+    const {navigation} = this.props;
+    navigation.navigate('website', {
       host: AvailableWebsites.websites.AMICALE,
       path: RESET_PASSWORD_PATH,
-        title: i18n.t('screens.websites.amicale')
+      title: i18n.t('screens.websites.amicale'),
     });
-
+  };
-    /**
-     * The user has unfocused the input, his email is ready to be validated
-     */
-    validateEmail = () => this.setState({isEmailValidated: true});
-
-    /**
-     * Checks if the entered email is valid (matches the regex)
-     *
-     * @returns {boolean}
-     */
-    isEmailValid() {
-        return emailRegex.test(this.state.email);
-    }
-
-    /**
-     * Checks if we should tell the user his email is invalid.
-     * We should only show this if his email is invalid and has been checked when un-focusing the input
-     *
-     * @returns {boolean|boolean}
-     */
-    shouldShowEmailError() {
-        return this.state.isEmailValidated && !this.isEmailValid();
-    }
-
-    /**
-     * The user has unfocused the input, his password is ready to be validated
-     */
-    validatePassword = () => this.setState({isPasswordValidated: true});
-
-    /**
-     * Checks if the user has entered a password
-     *
-     * @returns {boolean}
-     */
-    isPasswordValid() {
-        return this.state.password !== '';
-    }
-
-    /**
-     * Checks if we should tell the user his password is invalid.
-     * We should only show this if his password is invalid and has been checked when un-focusing the input
-     *
-     * @returns {boolean|boolean}
-     */
-    shouldShowPasswordError() {
-        return this.state.isPasswordValidated && !this.isPasswordValid();
-    }
-
-    /**
-     * If the email and password are valid, and we are not loading a request, then the login button can be enabled
-     *
-     * @returns {boolean}
-     */
-    shouldEnableLogin() {
-        return this.isEmailValid() && this.isPasswordValid() && !this.state.loading;
-    }
 
   /**
    * Called when the user input changes in the email or password field.
@@ -211,7 +141,7 @@ class LoginScreen extends React.Component<Props, State> {
   onEmailSubmit = () => {
     if (this.passwordInputRef.current != null)
       this.passwordInputRef.current.focus();
-    }
+  };
 
   /**
    * Called when the user clicks on login or finishes to type his password.
@@ -221,9 +151,11 @@ class LoginScreen extends React.Component<Props, State> {
    *
    */
   onSubmit = () => {
+    const {email, password} = this.state;
     if (this.shouldEnableLogin()) {
       this.setState({loading: true});
-            ConnectionManager.getInstance().connect(this.state.email, this.state.password)
+      ConnectionManager.getInstance()
+        .connect(email, password)
         .then(this.handleSuccess)
         .catch(this.showErrorDialog)
         .finally(() => {
@@ -237,53 +169,48 @@ class LoginScreen extends React.Component<Props, State> {
    *
    * @returns {*}
    */
-    getFormInput() {
+  getFormInput(): React.Node {
+    const {email, password} = this.state;
     return (
       <View>
         <TextInput
-                    label={i18n.t("screens.login.email")}
+          label={i18n.t('screens.login.email')}
-                    mode='outlined'
+          mode="outlined"
-                    value={this.state.email}
+          value={email}
           onChangeText={this.onEmailChange}
           onBlur={this.validateEmail}
           onSubmitEditing={this.onEmailSubmit}
           error={this.shouldShowEmailError()}
-                    textContentType={'emailAddress'}
+          textContentType="emailAddress"
-                    autoCapitalize={'none'}
+          autoCapitalize="none"
-                    autoCompleteType={'email'}
+          autoCompleteType="email"
           autoCorrect={false}
-                    keyboardType={'email-address'}
+          keyboardType="email-address"
-                    returnKeyType={'next'}
+          returnKeyType="next"
           secureTextEntry={false}
         />
-                <HelperText
+        <HelperText type="error" visible={this.shouldShowEmailError()}>
-                    type="error"
+          {i18n.t('screens.login.emailError')}
-                    visible={this.shouldShowEmailError()}
-                >
-                    {i18n.t("screens.login.emailError")}
         </HelperText>
         <TextInput
           ref={this.passwordInputRef}
-                    label={i18n.t("screens.login.password")}
+          label={i18n.t('screens.login.password')}
-                    mode='outlined'
+          mode="outlined"
-                    value={this.state.password}
+          value={password}
           onChangeText={this.onPasswordChange}
           onBlur={this.validatePassword}
           onSubmitEditing={this.onSubmit}
           error={this.shouldShowPasswordError()}
-                    textContentType={'password'}
+          textContentType="password"
-                    autoCapitalize={'none'}
+          autoCapitalize="none"
-                    autoCompleteType={'password'}
+          autoCompleteType="password"
           autoCorrect={false}
-                    keyboardType={'default'}
+          keyboardType="default"
-                    returnKeyType={'done'}
+          returnKeyType="done"
-                    secureTextEntry={true}
+          secureTextEntry
         />
-                <HelperText
+        <HelperText type="error" visible={this.shouldShowPasswordError()}>
-                    type="error"
+          {i18n.t('screens.login.passwordError')}
-                    visible={this.shouldShowPasswordError()}
-                >
-                    {i18n.t("screens.login.passwordError")}
         </HelperText>
       </View>
     );
@@ -293,43 +220,45 @@ class LoginScreen extends React.Component<Props, State> {
    * Gets the card containing the input form
    * @returns {*}
    */
-    getMainCard() {
+  getMainCard(): React.Node {
+    const {props, state} = this;
     return (
       <View style={styles.card}>
         <Card.Title
-                    title={i18n.t("screens.login.title")}
+          title={i18n.t('screens.login.title')}
-                    titleStyle={{color: "#fff"}}
+          titleStyle={{color: '#fff'}}
-                    subtitle={i18n.t("screens.login.subtitle")}
+          subtitle={i18n.t('screens.login.subtitle')}
-                    subtitleStyle={{color: "#fff"}}
+          subtitleStyle={{color: '#fff'}}
-                    left={(props) => <Image
+          left={({size}: {size: number}): React.Node => (
-                        {...props}
+            <Image
               source={ICON_AMICALE}
               style={{
-                            width: props.size,
+                width: size,
-                            height: props.size,
+                height: size,
-                        }}/>}
+              }}
+            />
+          )}
         />
         <Card.Content>
           {this.getFormInput()}
-                    <Card.Actions style={{flexWrap: "wrap"}}>
+          <Card.Actions style={{flexWrap: 'wrap'}}>
             <Button
               icon="lock-question"
               mode="contained"
               onPress={this.onResetPasswordClick}
-                            color={this.props.theme.colors.warning}
+              color={props.theme.colors.warning}
               style={{marginRight: 'auto', marginBottom: 20}}>
-                            {i18n.t("screens.login.resetPassword")}
+              {i18n.t('screens.login.resetPassword')}
             </Button>
             <Button
               icon="send"
               mode="contained"
               disabled={!this.shouldEnableLogin()}
-                            loading={this.state.loading}
+              loading={state.loading}
               onPress={this.onSubmit}
               style={{marginLeft: 'auto'}}>
-                            {i18n.t("screens.login.title")}
+              {i18n.t('screens.login.title')}
             </Button>
-
           </Card.Actions>
           <Card.Actions>
             <Button
@@ -340,7 +269,7 @@ class LoginScreen extends React.Component<Props, State> {
                 marginLeft: 'auto',
                 marginRight: 'auto',
               }}>
-                            {i18n.t("screens.login.mascotDialog.title")}
+              {i18n.t('screens.login.mascotDialog.title')}
             </Button>
           </Card.Actions>
         </Card.Content>
@@ -348,45 +277,164 @@ class LoginScreen extends React.Component<Props, State> {
     );
   }
 
-    render() {
+  /**
+   * The user has unfocused the input, his email is ready to be validated
+   */
+  validateEmail = () => {
+    this.setState({isEmailValidated: true});
+  };
+
+  /**
+   * The user has unfocused the input, his password is ready to be validated
+   */
+  validatePassword = () => {
+    this.setState({isPasswordValidated: true});
+  };
+
+  hideMascotDialog = () => {
+    AsyncStorageManager.set(
+      AsyncStorageManager.PREFERENCES.loginShowBanner.key,
+      false,
+    );
+    this.setState({mascotDialogVisible: false});
+  };
+
+  showMascotDialog = () => {
+    this.setState({mascotDialogVisible: true});
+  };
+
+  /**
+   * Shows an error dialog with the corresponding login error
+   *
+   * @param error The error given by the login request
+   */
+  showErrorDialog = (error: number) => {
+    this.setState({
+      dialogVisible: true,
+      dialogError: error,
+    });
+  };
+
+  hideErrorDialog = () => {
+    this.setState({dialogVisible: false});
+  };
+
+  /**
+   * Navigates to the screen specified in navigation parameters or simply go back tha stack.
+   * Saves in user preferences to not show the login banner again.
+   */
+  handleSuccess = () => {
+    const {navigation} = this.props;
+    // Do not show the home login banner again
+    AsyncStorageManager.set(
+      AsyncStorageManager.PREFERENCES.homeShowBanner.key,
+      false,
+    );
+    if (this.nextScreen == null) navigation.goBack();
+    else navigation.replace(this.nextScreen);
+  };
+
+  /**
+   * Saves the screen to navigate to after a successful login if one was provided in navigation parameters
+   */
+  handleNavigationParams() {
+    const {route} = this.props;
+    if (route.params != null) {
+      if (route.params.nextScreen != null)
+        this.nextScreen = route.params.nextScreen;
+      else this.nextScreen = null;
+    }
+  }
+
+  /**
+   * Checks if the entered email is valid (matches the regex)
+   *
+   * @returns {boolean}
+   */
+  isEmailValid(): boolean {
+    const {email} = this.state;
+    return emailRegex.test(email);
+  }
+
+  /**
+   * Checks if we should tell the user his email is invalid.
+   * We should only show this if his email is invalid and has been checked when un-focusing the input
+   *
+   * @returns {boolean|boolean}
+   */
+  shouldShowEmailError(): boolean {
+    const {isEmailValidated} = this.state;
+    return isEmailValidated && !this.isEmailValid();
+  }
+
+  /**
+   * Checks if the user has entered a password
+   *
+   * @returns {boolean}
+   */
+  isPasswordValid(): boolean {
+    const {password} = this.state;
+    return password !== '';
+  }
+
+  /**
+   * Checks if we should tell the user his password is invalid.
+   * We should only show this if his password is invalid and has been checked when un-focusing the input
+   *
+   * @returns {boolean|boolean}
+   */
+  shouldShowPasswordError(): boolean {
+    const {isPasswordValidated} = this.state;
+    return isPasswordValidated && !this.isPasswordValid();
+  }
+
+  /**
+   * If the email and password are valid, and we are not loading a request, then the login button can be enabled
+   *
+   * @returns {boolean}
+   */
+  shouldEnableLogin(): boolean {
+    const {loading} = this.state;
+    return this.isEmailValid() && this.isPasswordValid() && !loading;
+  }
+
+  render(): React.Node {
+    const {mascotDialogVisible, dialogVisible, dialogError} = this.state;
     return (
       <LinearGradient
         style={{
-                    height: "100%"
+          height: '100%',
         }}
         colors={['#9e0d18', '#530209']}
         start={{x: 0, y: 0.1}}
         end={{x: 0.1, y: 1}}>
         <KeyboardAvoidingView
-                    behavior={"height"}
+          behavior="height"
           contentContainerStyle={styles.container}
           style={styles.container}
           enabled
-                    keyboardVerticalOffset={100}
+          keyboardVerticalOffset={100}>
-                >
           <CollapsibleScrollView>
-                        <View style={{height: "100%"}}>
+            <View style={{height: '100%'}}>{this.getMainCard()}</View>
-                            {this.getMainCard()}
-                        </View>
             <MascotPopup
-                            visible={this.state.mascotDialogVisible}
+              visible={mascotDialogVisible}
-                            title={i18n.t("screens.login.mascotDialog.title")}
+              title={i18n.t('screens.login.mascotDialog.title')}
-                            message={i18n.t("screens.login.mascotDialog.message")}
+              message={i18n.t('screens.login.mascotDialog.message')}
-                            icon={"help"}
+              icon="help"
               buttons={{
                 action: null,
                 cancel: {
-                                    message: i18n.t("screens.login.mascotDialog.button"),
+                  message: i18n.t('screens.login.mascotDialog.button'),
-                                    icon: "check",
+                  icon: 'check',
                   onPress: this.hideMascotDialog,
-                                }
+                },
               }}
               emotion={MASCOT_STYLE.NORMAL}
             />
             <ErrorDialog
-                            visible={this.state.dialogVisible}
+              visible={dialogVisible}
               onDismiss={this.hideErrorDialog}
-                            errorCode={this.state.dialogError}
+              errorCode={dialogError}
             />
           </CollapsibleScrollView>
         </KeyboardAvoidingView>
@@ -395,23 +443,4 @@ class LoginScreen extends React.Component<Props, State> {
   }
 }
 
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    card: {
-        marginTop: 'auto',
-        marginBottom: 'auto',
-    },
-    header: {
-        fontSize: 36,
-        marginBottom: 48
-    },
-    textInput: {},
-    btnContainer: {
-        marginTop: 5,
-        marginBottom: 10,
-    }
-});
-
 export default withTheme(LoginScreen);

src/screens/Amicale/ProfileScreen.js

@@ -1,31 +1,47 @@
 // @flow
 
 import * as React from 'react';
-import {FlatList, StyleSheet, View} from "react-native";
+import {FlatList, StyleSheet, View} from 'react-native';
-import {Avatar, Button, Card, Divider, List, Paragraph, withTheme} from 'react-native-paper';
+import {
-import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
+  Avatar,
+  Button,
+  Card,
+  Divider,
+  List,
+  Paragraph,
+  withTheme,
+} from 'react-native-paper';
 import i18n from 'i18n-js';
-import LogoutDialog from "../../components/Amicale/LogoutDialog";
+import {StackNavigationProp} from '@react-navigation/stack';
-import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHeaderButton";
+import AuthenticatedScreen from '../../components/Amicale/AuthenticatedScreen';
-import type {cardList} from "../../components/Lists/CardList/CardList";
+import LogoutDialog from '../../components/Amicale/LogoutDialog';
-import CardList from "../../components/Lists/CardList/CardList";
+import MaterialHeaderButtons, {
-import {StackNavigationProp} from "@react-navigation/stack";
+  Item,
-import type {CustomTheme} from "../../managers/ThemeManager";
+} from '../../components/Overrides/CustomHeaderButton';
-import AvailableWebsites from "../../constants/AvailableWebsites";
+import CardList from '../../components/Lists/CardList/CardList';
-import Mascot, {MASCOT_STYLE} from "../../components/Mascot/Mascot";
+import type {CustomThemeType} from '../../managers/ThemeManager';
-import ServicesManager, {SERVICES_KEY} from "../../managers/ServicesManager";
+import AvailableWebsites from '../../constants/AvailableWebsites';
-import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
+import Mascot, {MASCOT_STYLE} from '../../components/Mascot/Mascot';
+import ServicesManager, {SERVICES_KEY} from '../../managers/ServicesManager';
+import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatList';
+import type {ServiceItemType} from '../../managers/ServicesManager';
 
-type Props = {
+type PropsType = {
   navigation: StackNavigationProp,
-    theme: CustomTheme,
+  theme: CustomThemeType,
-}
+};
 
-type State = {
+type StateType = {
   dialogVisible: boolean,
-}
+};
 
-type ProfileData = {
+type ClubType = {
+  id: number,
+  name: string,
+  is_manager: boolean,
+};
+
+type ProfileDataType = {
   first_name: string,
   last_name: string,
   email: string,
@@ -34,55 +50,59 @@ type ProfileData = {
   branch: string,
   link: string,
   validity: boolean,
-    clubs: Array<Club>,
+  clubs: Array<ClubType>,
-}
-type Club = {
-    id: number,
-    name: string,
-    is_manager: boolean,
-}
-
-class ProfileScreen extends React.Component<Props, State> {
-
-    state = {
-        dialogVisible: false,
 };
 
-    data: ProfileData;
+const styles = StyleSheet.create({
+  card: {
+    margin: 10,
+  },
+  icon: {
+    backgroundColor: 'transparent',
+  },
+  editButton: {
+    marginLeft: 'auto',
+  },
+});
+
+class ProfileScreen extends React.Component<PropsType, StateType> {
+  data: ProfileDataType;
 
   flatListData: Array<{id: string}>;
-    amicaleDataset: cardList;
 
-    constructor(props: Props) {
+  amicaleDataset: Array<ServiceItemType>;
+
+  constructor(props: PropsType) {
     super(props);
-        this.flatListData = [
+    this.flatListData = [{id: '0'}, {id: '1'}, {id: '2'}, {id: '3'}];
-            {id: '0'},
-            {id: '1'},
-            {id: '2'},
-            {id: '3'},
-        ]
     const services = new ServicesManager(props.navigation);
     this.amicaleDataset = services.getAmicaleServices([SERVICES_KEY.PROFILE]);
+    this.state = {
+      dialogVisible: false,
+    };
   }
 
   componentDidMount() {
-        this.props.navigation.setOptions({
+    const {navigation} = this.props;
+    navigation.setOptions({
       headerRight: this.getHeaderButton,
     });
   }
 
-    showDisconnectDialog = () => this.setState({dialogVisible: true});
-
-    hideDisconnectDialog = () => this.setState({dialogVisible: false});
-
   /**
    * Gets the logout header button
    *
    * @returns {*}
    */
-    getHeaderButton = () => <MaterialHeaderButtons>
+  getHeaderButton = (): React.Node => (
-        <Item title="logout" iconName="logout" onPress={this.showDisconnectDialog}/>
+    <MaterialHeaderButtons>
-    </MaterialHeaderButtons>;
+      <Item
+        title="logout"
+        iconName="logout"
+        onPress={this.showDisconnectDialog}
+      />
+    </MaterialHeaderButtons>
+  );
 
   /**
    * Gets the main screen component with the fetched data
@@ -90,10 +110,12 @@ class ProfileScreen extends React.Component<Props, State> {
    * @param data The data fetched from the server
    * @returns {*}
    */
-    getScreen = (data: Array<{ [key: string]: any } | null>) => {
+  getScreen = (data: Array<ProfileDataType | null>): React.Node => {
-        if (data[0] != null) {
+    const {dialogVisible} = this.state;
-            this.data = data[0];
+    const {navigation} = this.props;
-        }
+    // eslint-disable-next-line prefer-destructuring
+    if (data[0] != null) this.data = data[0];
+
     return (
       <View style={{flex: 1}}>
         <CollapsibleFlatList
@@ -101,15 +123,15 @@ class ProfileScreen extends React.Component<Props, State> {
           data={this.flatListData}
         />
         <LogoutDialog
-                    {...this.props}
+          navigation={navigation}
-                    visible={this.state.dialogVisible}
+          visible={dialogVisible}
           onDismiss={this.hideDisconnectDialog}
         />
       </View>
-        )
+    );
   };
 
-    getRenderItem = ({item}: { item: { id: string } }) => {
+  getRenderItem = ({item}: {item: {id: string}}): React.Node => {
     switch (item.id) {
       case '0':
         return this.getWelcomeCard();
@@ -127,13 +149,8 @@ class ProfileScreen extends React.Component<Props, State> {
    *
    * @returns {*}
    */
-    getServicesList() {
+  getServicesList(): React.Node {
-        return (
+    return <CardList dataset={this.amicaleDataset} isHorizontal />;
-            <CardList
-                dataset={this.amicaleDataset}
-                isHorizontal={true}
-            />
-        );
   }
 
   /**
@@ -141,42 +158,44 @@ class ProfileScreen extends React.Component<Props, State> {
    *
    * @returns {*}
    */
-    getWelcomeCard() {
+  getWelcomeCard(): React.Node {
+    const {navigation} = this.props;
     return (
       <Card style={styles.card}>
         <Card.Title
-                    title={i18n.t("screens.profile.welcomeTitle", {name: this.data.first_name})}
+          title={i18n.t('screens.profile.welcomeTitle', {
-                    left={() =>
+            name: this.data.first_name,
+          })}
+          left={(): React.Node => (
             <Mascot
               style={{
-                                width: 60
+                width: 60,
               }}
               emotion={MASCOT_STYLE.COOL}
-                            animated={true}
+              animated
               entryAnimation={{
-                                animation: "bounceIn",
+                animation: 'bounceIn',
-                                duration: 1000
+                duration: 1000,
               }}
-                        />}
+            />
+          )}
           titleStyle={{marginLeft: 10}}
         />
         <Card.Content>
           <Divider />
-                    <Paragraph>
+          <Paragraph>{i18n.t('screens.profile.welcomeDescription')}</Paragraph>
-                        {i18n.t("screens.profile.welcomeDescription")}
-                    </Paragraph>
           {this.getServicesList()}
-                    <Paragraph>
+          <Paragraph>{i18n.t('screens.profile.welcomeFeedback')}</Paragraph>
-                        {i18n.t("screens.profile.welcomeFeedback")}
-                    </Paragraph>
           <Divider />
           <Card.Actions>
             <Button
               icon="bug"
               mode="contained"
-                            onPress={() => this.props.navigation.navigate('feedback')}
+              onPress={() => {
+                navigation.navigate('feedback');
+              }}
               style={styles.editButton}>
-                            {i18n.t("screens.feedback.homeButtonTitle")}
+              {i18n.t('screens.feedback.homeButtonTitle')}
             </Button>
           </Card.Actions>
         </Card.Content>
@@ -184,16 +203,6 @@ class ProfileScreen extends React.Component<Props, State> {
     );
   }
 
-    /**
-     * Checks if the given field is available
-     *
-     * @param field The field to check
-     * @return {boolean}
-     */
-    isFieldAvailable(field: ?string) {
-        return field !== null;
-    }
-
   /**
    * Gets the given field value.
    * If the field does not have a value, returns a placeholder text
@@ -201,10 +210,8 @@ class ProfileScreen extends React.Component<Props, State> {
    * @param field The field to get the value from
    * @return {*}
    */
-    getFieldValue(field: ?string) {
+  static getFieldValue(field: ?string): string {
-        return this.isFieldAvailable(field)
+    return field != null ? field : i18n.t('screens.profile.noData');
-            ? field
-            : i18n.t("screens.profile.noData");
   }
 
   /**
@@ -214,18 +221,21 @@ class ProfileScreen extends React.Component<Props, State> {
    * @param icon The icon to use
    * @return {*}
    */
-    getPersonalListItem(field: ?string, icon: string) {
+  getPersonalListItem(field: ?string, icon: string): React.Node {
-        let title = this.isFieldAvailable(field) ? this.getFieldValue(field) : ':(';
+    const {theme} = this.props;
-        let subtitle = this.isFieldAvailable(field) ? '' : this.getFieldValue(field);
+    const title = field != null ? ProfileScreen.getFieldValue(field) : ':(';
+    const subtitle = field != null ? '' : ProfileScreen.getFieldValue(field);
     return (
       <List.Item
         title={title}
         description={subtitle}
-                left={props => <List.Icon
+        left={({size}: {size: number}): React.Node => (
-                    {...props}
+          <List.Icon
+            size={size}
             icon={icon}
-                    color={this.isFieldAvailable(field) ? undefined : this.props.theme.colors.textDisabled}
+            color={field != null ? null : theme.colors.textDisabled}
-                />}
+          />
+        )}
       />
     );
   }
@@ -235,40 +245,47 @@ class ProfileScreen extends React.Component<Props, State> {
    *
    * @return {*}
    */
-    getPersonalCard() {
+  getPersonalCard(): React.Node {
+    const {theme, navigation} = this.props;
     return (
       <Card style={styles.card}>
         <Card.Title
-                    title={this.data.first_name + ' ' + this.data.last_name}
+          title={`${this.data.first_name} ${this.data.last_name}`}
           subtitle={this.data.email}
-                    left={(props) => <Avatar.Icon
+          left={({size}: {size: number}): React.Node => (
-                        {...props}
+            <Avatar.Icon
+              size={size}
               icon="account"
-                        color={this.props.theme.colors.primary}
+              color={theme.colors.primary}
               style={styles.icon}
-                    />}
+            />
+          )}
         />
         <Card.Content>
           <Divider />
           <List.Section>
-                        <List.Subheader>{i18n.t("screens.profile.personalInformation")}</List.Subheader>
+            <List.Subheader>
-                        {this.getPersonalListItem(this.data.birthday, "cake-variant")}
+              {i18n.t('screens.profile.personalInformation')}
-                        {this.getPersonalListItem(this.data.phone, "phone")}
+            </List.Subheader>
-                        {this.getPersonalListItem(this.data.email, "email")}
+            {this.getPersonalListItem(this.data.birthday, 'cake-variant')}
-                        {this.getPersonalListItem(this.data.branch, "school")}
+            {this.getPersonalListItem(this.data.phone, 'phone')}
+            {this.getPersonalListItem(this.data.email, 'email')}
+            {this.getPersonalListItem(this.data.branch, 'school')}
           </List.Section>
           <Divider />
           <Card.Actions>
             <Button
               icon="account-edit"
               mode="contained"
-                            onPress={() => this.props.navigation.navigate("website", {
+              onPress={() => {
+                navigation.navigate('website', {
                   host: AvailableWebsites.websites.AMICALE,
                   path: this.data.link,
-                                title: i18n.t('screens.websites.amicale')
+                  title: i18n.t('screens.websites.amicale'),
-                            })}
+                });
+              }}
               style={styles.editButton}>
-                            {i18n.t("screens.profile.editInformation")}
+              {i18n.t('screens.profile.editInformation')}
             </Button>
           </Card.Actions>
         </Card.Content>
@@ -281,18 +298,21 @@ class ProfileScreen extends React.Component<Props, State> {
    *
    * @return {*}
    */
-    getClubCard() {
+  getClubCard(): React.Node {
+    const {theme} = this.props;
     return (
       <Card style={styles.card}>
         <Card.Title
-                    title={i18n.t("screens.profile.clubs")}
+          title={i18n.t('screens.profile.clubs')}
-                    subtitle={i18n.t("screens.profile.clubsSubtitle")}
+          subtitle={i18n.t('screens.profile.clubsSubtitle')}
-                    left={(props) => <Avatar.Icon
+          left={({size}: {size: number}): React.Node => (
-                        {...props}
+            <Avatar.Icon
+              size={size}
               icon="account-group"
-                        color={this.props.theme.colors.primary}
+              color={theme.colors.primary}
               style={styles.icon}
-                    />}
+            />
+          )}
         />
         <Card.Content>
           <Divider />
@@ -307,18 +327,21 @@ class ProfileScreen extends React.Component<Props, State> {
    *
    * @return {*}
    */
-    getMembershipCar() {
+  getMembershipCar(): React.Node {
+    const {theme} = this.props;
     return (
       <Card style={styles.card}>
         <Card.Title
-                    title={i18n.t("screens.profile.membership")}
+          title={i18n.t('screens.profile.membership')}
-                    subtitle={i18n.t("screens.profile.membershipSubtitle")}
+          subtitle={i18n.t('screens.profile.membershipSubtitle')}
-                    left={(props) => <Avatar.Icon
+          left={({size}: {size: number}): React.Node => (
-                        {...props}
+            <Avatar.Icon
+              size={size}
               icon="credit-card"
-                        color={this.props.theme.colors.primary}
+              color={theme.colors.primary}
               style={styles.icon}
-                    />}
+            />
+          )}
         />
         <Card.Content>
           <List.Section>
@@ -334,81 +357,106 @@ class ProfileScreen extends React.Component<Props, State> {
    *
    * @return {*}
    */
-    getMembershipItem(state: boolean) {
+  getMembershipItem(state: boolean): React.Node {
+    const {theme} = this.props;
     return (
       <List.Item
-                title={state ? i18n.t("screens.profile.membershipPayed") : i18n.t("screens.profile.membershipNotPayed")}
+        title={
-                left={props => <List.Icon
+          state
-                    {...props}
+            ? i18n.t('screens.profile.membershipPayed')
-                    color={state ? this.props.theme.colors.success : this.props.theme.colors.danger}
+            : i18n.t('screens.profile.membershipNotPayed')
+        }
+        left={({size}: {size: number}): React.Node => (
+          <List.Icon
+            size={size}
+            color={state ? theme.colors.success : theme.colors.danger}
             icon={state ? 'check' : 'close'}
-                />}
+          />
+        )}
       />
     );
   }
 
-    /**
-     * Opens the club details screen for the club of given ID
-     * @param id The club's id to open
-     */
-    openClubDetailsScreen(id: number) {
-        this.props.navigation.navigate("club-information", {clubId: id});
-    }
-
   /**
    * Gets a list item for the club list
    *
    * @param item The club to render
    * @return {*}
    */
-    clubListItem = ({item}: { item: Club }) => {
+  getClubListItem = ({item}: {item: ClubType}): React.Node => {
-        const onPress = () => this.openClubDetailsScreen(item.id);
+    const {theme} = this.props;
-        let description = i18n.t("screens.profile.isMember");
+    const onPress = () => {
-        let icon = (props) => <List.Icon {...props} icon="chevron-right"/>;
+      this.openClubDetailsScreen(item.id);
+    };
+    let description = i18n.t('screens.profile.isMember');
+    let icon = ({size, color}: {size: number, color: string}): React.Node => (
+      <List.Icon size={size} color={color} icon="chevron-right" />
+    );
     if (item.is_manager) {
-            description = i18n.t("screens.profile.isManager");
+      description = i18n.t('screens.profile.isManager');
-            icon = (props) => <List.Icon {...props} icon="star" color={this.props.theme.colors.primary}/>;
+      icon = ({size}: {size: number}): React.Node => (
+        <List.Icon size={size} icon="star" color={theme.colors.primary} />
+      );
     }
-        return <List.Item
+    return (
+      <List.Item
         title={item.name}
         description={description}
         left={icon}
         onPress={onPress}
-        />;
+      />
+    );
   };
 
-    clubKeyExtractor = (item: Club) => item.name;
-
-    sortClubList = (a: Club, b: Club) => a.is_manager ? -1 : 1;
-
   /**
    * Renders the list of clubs the user is part of
    *
    * @param list The club list
    * @return {*}
    */
-    getClubList(list: Array<Club>) {
+  getClubList(list: Array<ClubType>): React.Node {
     list.sort(this.sortClubList);
     return (
-            //$FlowFixMe
       <FlatList
-                renderItem={this.clubListItem}
+        renderItem={this.getClubListItem}
         keyExtractor={this.clubKeyExtractor}
         data={list}
       />
     );
   }
 
-    render() {
+  clubKeyExtractor = (item: ClubType): string => item.name;
+
+  sortClubList = (a: ClubType): number => (a.is_manager ? -1 : 1);
+
+  showDisconnectDialog = () => {
+    this.setState({dialogVisible: true});
+  };
+
+  hideDisconnectDialog = () => {
+    this.setState({dialogVisible: false});
+  };
+
+  /**
+   * Opens the club details screen for the club of given ID
+   * @param id The club's id to open
+   */
+  openClubDetailsScreen(id: number) {
+    const {navigation} = this.props;
+    navigation.navigate('club-information', {clubId: id});
+  }
+
+  render(): React.Node {
+    const {navigation} = this.props;
     return (
       <AuthenticatedScreen
-                {...this.props}
+        navigation={navigation}
         requests={[
           {
             link: 'user/profile',
             params: {},
             mandatory: true,
-                    }
+          },
         ]}
         renderFunction={this.getScreen}
       />
@@ -416,17 +464,4 @@ class ProfileScreen extends React.Component<Props, State> {
   }
 }
 
-const styles = StyleSheet.create({
-    card: {
-        margin: 10,
-    },
-    icon: {
-        backgroundColor: 'transparent'
-    },
-    editButton: {
-        marginLeft: 'auto'
-    }
-
-});
-
 export default withTheme(ProfileScreen);