Improve Proximo components to match linter

src/components/Lists/DashboardEdit/DashboardEditAccordion.js

@@ -2,66 +2,83 @@
 
 import * as React from 'react';
 import {withTheme} from 'react-native-paper';
-import {FlatList, Image, View} from "react-native";
+import {FlatList, Image, View} from 'react-native';
-import DashboardEditItem from "./DashboardEditItem";
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import AnimatedAccordion from "../../Animations/AnimatedAccordion";
+import DashboardEditItem from './DashboardEditItem';
-import type {ServiceCategory, ServiceItem} from "../../../managers/ServicesManager";
+import AnimatedAccordion from '../../Animations/AnimatedAccordion';
-import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
+import type {
-import type {CustomTheme} from "../../../managers/ThemeManager";
+  ServiceCategoryType,
+  ServiceItemType,
+} from '../../../managers/ServicesManager';
+import type {CustomTheme} from '../../../managers/ThemeManager';
 
-type Props = {
+type PropsType = {
-    item: ServiceCategory,
+  item: ServiceCategoryType,
   activeDashboard: Array<string>,
-    onPress: (service: ServiceItem) => void,
+  onPress: (service: ServiceItemType) => void,
   theme: CustomTheme,
-}
+};
 
 const LIST_ITEM_HEIGHT = 64;
 
-class DashboardEditAccordion extends React.Component<Props> {
+class DashboardEditAccordion extends React.Component<PropsType> {
-
+  getRenderItem = ({item}: {item: ServiceItemType}): React.Node => {
-    renderItem = ({item}: { item: ServiceItem }) => {
+    const {props} = this;
     return (
       <DashboardEditItem
         height={LIST_ITEM_HEIGHT}
         item={item}
-                isActive={this.props.activeDashboard.includes(item.key)}
+        isActive={props.activeDashboard.includes(item.key)}
-                onPress={() => this.props.onPress(item)}/>
+        onPress={() => {
+          props.onPress(item);
+        }}
+      />
     );
-    }
+  };
 
-    itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
+  getItemLayout = (
+    data: ?Array<ServiceItemType>,
+    index: number,
+  ): {length: number, offset: number, index: number} => ({
+    length: LIST_ITEM_HEIGHT,
+    offset: LIST_ITEM_HEIGHT * index,
+    index,
+  });
 
-    render() {
+  render(): React.Node {
-        const item = this.props.item;
+    const {props} = this;
+    const {item} = props;
     return (
       <View>
         <AnimatedAccordion
           title={item.title}
-                    left={props => typeof item.image === "number"
+          left={(): React.Node =>
-                        ? <Image
+            typeof item.image === 'number' ? (
-                            {...props}
+              <Image
                 source={item.image}
                 style={{
                   width: 40,
-                                height: 40
+                  height: 40,
                 }}
               />
-                        : <MaterialCommunityIcons
+            ) : (
-                            //$FlowFixMe
+              <MaterialCommunityIcons
+                // $FlowFixMe
                 name={item.image}
-                            color={this.props.theme.colors.primary}
+                color={props.theme.colors.primary}
-                            size={40}/>}
+                size={40}
-                >
+              />
-                    {/*$FlowFixMe*/}
+            )
+          }>
+          {/* $FlowFixMe */}
           <FlatList
             data={item.content}
-                        extraData={this.props.activeDashboard.toString()}
+            extraData={props.activeDashboard.toString()}
-                        renderItem={this.renderItem}
+            renderItem={this.getRenderItem}
             listKey={item.key}
             // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
-                        getItemLayout={this.itemLayout}
+            getItemLayout={this.getItemLayout}
-                        removeClippedSubviews={true}
+            removeClippedSubviews
           />
         </AnimatedAccordion>
       </View>
@@ -69,4 +86,4 @@ class DashboardEditAccordion extends React.Component<Props> {
   }
 }
 
-export default withTheme(DashboardEditAccordion)
+export default withTheme(DashboardEditAccordion);

src/components/Lists/DashboardEdit/DashboardEditItem.js

@@ -1,51 +1,57 @@
 // @flow
 
 import * as React from 'react';
-import {Image} from "react-native";
+import {Image} from 'react-native';
 import {List, withTheme} from 'react-native-paper';
-import type {CustomTheme} from "../../../managers/ThemeManager";
+import type {CustomTheme} from '../../../managers/ThemeManager';
-import type {ServiceItem} from "../../../managers/ServicesManager";
+import type {ServiceItemType} from '../../../managers/ServicesManager';
 
-type Props = {
+type PropsType = {
-    item: ServiceItem,
+  item: ServiceItemType,
   isActive: boolean,
   height: number,
   onPress: () => void,
   theme: CustomTheme,
-}
+};
 
-class DashboardEditItem extends React.Component<Props> {
+class DashboardEditItem extends React.Component<PropsType> {
-
+  shouldComponentUpdate(nextProps: PropsType): boolean {
-    shouldComponentUpdate(nextProps: Props) {
+    const {isActive} = this.props;
-        return (nextProps.isActive !== this.props.isActive);
+    return nextProps.isActive !== isActive;
   }
 
-    render() {
+  render(): React.Node {
+    const {props} = this;
     return (
       <List.Item
-                title={this.props.item.title}
+        title={props.item.title}
-                description={this.props.item.subtitle}
+        description={props.item.subtitle}
-                onPress={this.props.isActive ? null : this.props.onPress}
+        onPress={props.isActive ? null : props.onPress}
-                left={props =>
+        left={(): React.Node => (
           <Image
-                        {...props}
+            source={{uri: props.item.image}}
-                        source={{uri: this.props.item.image}}
             style={{
               width: 40,
-                            height: 40
+              height: 40,
             }}
-                    />}
+          />
-                right={props => this.props.isActive
+        )}
-                    ? <List.Icon
+        right={({size}: {size: number}): React.Node =>
-                        {...props}
+          props.isActive ? (
-                        icon={"check"}
+            <List.Icon
-                        color={this.props.theme.colors.success}
+              size={size}
-                    /> : null}
+              icon="check"
+              color={props.theme.colors.success}
+            />
+          ) : null
+        }
         style={{
-                    height: this.props.height,
+          height: props.height,
           justifyContent: 'center',
           paddingLeft: 30,
-                    backgroundColor: this.props.isActive ? this.props.theme.colors.proxiwashFinishedColor : "transparent"
+          backgroundColor: props.isActive
+            ? props.theme.colors.proxiwashFinishedColor
+            : 'transparent',
         }}
       />
     );

src/components/Lists/DashboardEdit/DashboardEditPreviewItem.js

@@ -2,10 +2,10 @@
 
 import * as React from 'react';
 import {TouchableRipple, withTheme} from 'react-native-paper';
-import {Dimensions, Image, View} from "react-native";
+import {Dimensions, Image, View} from 'react-native';
-import type {CustomTheme} from "../../../managers/ThemeManager";
+import type {CustomTheme} from '../../../managers/ThemeManager';
 
-type Props = {
+type PropsType = {
   image: string,
   isActive: boolean,
   onPress: () => void,
@@ -15,44 +15,44 @@ type Props = {
 /**
  * Component used to render a small dashboard item
  */
-class DashboardEditPreviewItem extends React.Component<Props> {
+class DashboardEditPreviewItem extends React.Component<PropsType> {
-
   itemSize: number;
 
-    constructor(props: Props) {
+  constructor(props: PropsType) {
     super(props);
     this.itemSize = Dimensions.get('window').width / 8;
   }
 
-    render() {
+  render(): React.Node {
-        const props = this.props;
+    const {props} = this;
     return (
       <TouchableRipple
-                onPress={this.props.onPress}
+        onPress={props.onPress}
-                borderless={true}
+        borderless
         style={{
           marginLeft: 5,
           marginRight: 5,
-                    backgroundColor: this.props.isActive ? this.props.theme.colors.textDisabled : "transparent",
+          backgroundColor: props.isActive
-                    borderRadius: 5
+            ? props.theme.colors.textDisabled
-                }}
+            : 'transparent',
-            >
+          borderRadius: 5,
-                <View style={{
+        }}>
+        <View
+          style={{
             width: this.itemSize,
             height: this.itemSize,
           }}>
           <Image
             source={{uri: props.image}}
             style={{
-                            width: "100%",
+              width: '100%',
-                            height: "100%",
+              height: '100%',
             }}
           />
         </View>
       </TouchableRipple>
     );
   }
-
 }
 
-export default withTheme(DashboardEditPreviewItem)
+export default withTheme(DashboardEditPreviewItem);

src/components/Lists/Equipment/EquipmentListItem.js

@@ -2,46 +2,48 @@
 
 import * as React from 'react';
 import {Avatar, List, withTheme} from 'react-native-paper';
-import type {CustomTheme} from "../../../managers/ThemeManager";
+import i18n from 'i18n-js';
-import type {Device} from "../../../screens/Amicale/Equipment/EquipmentListScreen";
+import {StackNavigationProp} from '@react-navigation/stack';
-import i18n from "i18n-js";
+import type {CustomTheme} from '../../../managers/ThemeManager';
+import type {DeviceType} from '../../../screens/Amicale/Equipment/EquipmentListScreen';
 import {
   getFirstEquipmentAvailability,
   getRelativeDateString,
-    isEquipmentAvailable
+  isEquipmentAvailable,
-} from "../../../utils/EquipmentBooking";
+} from '../../../utils/EquipmentBooking';
-import {StackNavigationProp} from "@react-navigation/stack";
 
-type Props = {
+type PropsType = {
   navigation: StackNavigationProp,
   userDeviceRentDates: [string, string],
-    item: Device,
+  item: DeviceType,
   height: number,
   theme: CustomTheme,
-}
+};
 
-class EquipmentListItem extends React.Component<Props> {
+class EquipmentListItem extends React.Component<PropsType> {
-
+  shouldComponentUpdate(nextProps: PropsType): boolean {
-    shouldComponentUpdate(nextProps: Props): boolean {
+    const {userDeviceRentDates} = this.props;
-        return nextProps.userDeviceRentDates !== this.props.userDeviceRentDates;
+    return nextProps.userDeviceRentDates !== userDeviceRentDates;
   }
 
-    render() {
+  render(): React.Node {
-        const colors = this.props.theme.colors;
+    const {item, userDeviceRentDates, navigation, height, theme} = this.props;
-        const item = this.props.item;
-        const userDeviceRentDates = this.props.userDeviceRentDates;
     const isRented = userDeviceRentDates != null;
     const isAvailable = isEquipmentAvailable(item);
     const firstAvailability = getFirstEquipmentAvailability(item);
 
     let onPress;
     if (isRented)
-            onPress = () => this.props.navigation.navigate("equipment-confirm", {
+      onPress = () => {
-                item: item,
+        navigation.navigate('equipment-confirm', {
-                dates: userDeviceRentDates
+          item,
+          dates: userDeviceRentDates,
         });
+      };
     else
-            onPress = () => this.props.navigation.navigate("equipment-rent", {item: item});
+      onPress = () => {
+        navigation.navigate('equipment-rent', {item});
+      };
 
     let description;
     if (isRented) {
@@ -50,58 +52,57 @@ class EquipmentListItem extends React.Component<Props> {
       if (start.getTime() !== end.getTime())
         description = i18n.t('screens.equipment.bookingPeriod', {
           begin: getRelativeDateString(start),
-                    end: getRelativeDateString(end)
+          end: getRelativeDateString(end),
         });
       else
         description = i18n.t('screens.equipment.bookingDay', {
-                    date: getRelativeDateString(start)
+          date: getRelativeDateString(start),
         });
     } else if (isAvailable)
       description = i18n.t('screens.equipment.bail', {cost: item.caution});
     else
-            description = i18n.t('screens.equipment.available', {date: getRelativeDateString(firstAvailability)});
+      description = i18n.t('screens.equipment.available', {
+        date: getRelativeDateString(firstAvailability),
+      });
 
     let icon;
-        if (isRented)
+    if (isRented) icon = 'bookmark-check';
-            icon = "bookmark-check";
+    else if (isAvailable) icon = 'check-circle-outline';
-        else if (isAvailable)
+    else icon = 'update';
-            icon = "check-circle-outline";
-        else
-            icon = "update";
 
     let color;
-        if (isRented)
+    if (isRented) color = theme.colors.warning;
-            color = colors.warning;
+    else if (isAvailable) color = theme.colors.success;
-        else if (isAvailable)
+    else color = theme.colors.primary;
-            color = colors.success;
-        else
-            color = colors.primary;
 
     return (
       <List.Item
         title={item.name}
         description={description}
         onPress={onPress}
-                left={(props) => <Avatar.Icon
+        left={({size}: {size: number}): React.Node => (
-                    {...props}
+          <Avatar.Icon
+            size={size}
             style={{
               backgroundColor: 'transparent',
             }}
             icon={icon}
             color={color}
-                />}
+          />
-                right={(props) => <Avatar.Icon
+        )}
-                    {...props}
+        right={(): React.Node => (
+          <Avatar.Icon
             style={{
               marginTop: 'auto',
               marginBottom: 'auto',
               backgroundColor: 'transparent',
             }}
             size={48}
-                    icon={"chevron-right"}
+            icon="chevron-right"
-                />}
+          />
+        )}
         style={{
-                    height: this.props.height,
+          height,
           justifyContent: 'center',
         }}
       />

src/components/Lists/PlanexGroups/GroupListAccordion.js

@@ -2,91 +2,110 @@
 
 import * as React from 'react';
 import {List, withTheme} from 'react-native-paper';
-import {FlatList, View} from "react-native";
+import {FlatList, View} from 'react-native';
-import {stringMatchQuery} from "../../../utils/Search";
+import {stringMatchQuery} from '../../../utils/Search';
-import GroupListItem from "./GroupListItem";
+import GroupListItem from './GroupListItem';
-import AnimatedAccordion from "../../Animations/AnimatedAccordion";
+import AnimatedAccordion from '../../Animations/AnimatedAccordion';
-import type {group, groupCategory} from "../../../screens/Planex/GroupSelectionScreen";
+import type {
-import type {CustomTheme} from "../../../managers/ThemeManager";
+  PlanexGroupType,
+  PlanexGroupCategoryType,
+} from '../../../screens/Planex/GroupSelectionScreen';
+import type {CustomTheme} from '../../../managers/ThemeManager';
 
-type Props = {
+type PropsType = {
-    item: groupCategory,
+  item: PlanexGroupCategoryType,
-    onGroupPress: (group) => void,
+  onGroupPress: (PlanexGroupType) => void,
-    onFavoritePress: (group) => void,
+  onFavoritePress: (PlanexGroupType) => void,
   currentSearchString: string,
   favoriteNumber: number,
   height: number,
   theme: CustomTheme,
-}
+};
 
 const LIST_ITEM_HEIGHT = 64;
 
-class GroupListAccordion extends React.Component<Props> {
+class GroupListAccordion extends React.Component<PropsType> {
-
+  shouldComponentUpdate(nextProps: PropsType): boolean {
-    shouldComponentUpdate(nextProps: Props) {
+    const {props} = this;
-        return (nextProps.currentSearchString !== this.props.currentSearchString)
+    return (
-            || (nextProps.favoriteNumber !== this.props.favoriteNumber)
+      nextProps.currentSearchString !== props.currentSearchString ||
-            || (nextProps.item.content.length !== this.props.item.content.length);
+      nextProps.favoriteNumber !== props.favoriteNumber ||
+      nextProps.item.content.length !== props.item.content.length
+    );
   }
 
-    keyExtractor = (item: group) => item.id.toString();
+  getRenderItem = ({item}: {item: PlanexGroupType}): React.Node => {
-
+    const {props} = this;
-    renderItem = ({item}: { item: group }) => {
+    const onPress = () => {
-        const onPress = () => this.props.onGroupPress(item);
+      props.onGroupPress(item);
-        const onStarPress = () => this.props.onFavoritePress(item);
+    };
+    const onStarPress = () => {
+      props.onFavoritePress(item);
+    };
     return (
       <GroupListItem
         height={LIST_ITEM_HEIGHT}
         item={item}
         onPress={onPress}
-                onStarPress={onStarPress}/>
+        onStarPress={onStarPress}
+      />
     );
-    }
+  };
 
-    getData() {
+  getData(): Array<PlanexGroupType> {
-        const originalData = this.props.item.content;
+    const {props} = this;
-        let displayData = [];
+    const originalData = props.item.content;
-        for (let i = 0; i < originalData.length; i++) {
+    const displayData = [];
-            if (stringMatchQuery(originalData[i].name, this.props.currentSearchString))
+    originalData.forEach((data: PlanexGroupType) => {
-                displayData.push(originalData[i]);
+      if (stringMatchQuery(data.name, props.currentSearchString))
-        }
+        displayData.push(data);
+    });
     return displayData;
   }
 
-    itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
+  itemLayout = (
+    data: ?Array<PlanexGroupType>,
+    index: number,
+  ): {length: number, offset: number, index: number} => ({
+    length: LIST_ITEM_HEIGHT,
+    offset: LIST_ITEM_HEIGHT * index,
+    index,
+  });
 
+  keyExtractor = (item: PlanexGroupType): string => item.id.toString();
 
-    render() {
+  render(): React.Node {
-        const item = this.props.item;
+    const {props} = this;
+    const {item} = this.props;
     return (
       <View>
         <AnimatedAccordion
           title={item.name}
           style={{
-                        height: this.props.height,
+            height: props.height,
             justifyContent: 'center',
           }}
-                    left={props =>
+          left={({size}: {size: number}): React.Node =>
-                        item.id === 0
+            item.id === 0 ? (
-                            ? <List.Icon
+              <List.Icon
-                                {...props}
+                size={size}
-                                icon={"star"}
+                icon="star"
-                                color={this.props.theme.colors.tetrisScore}
+                color={props.theme.colors.tetrisScore}
               />
-                            : null}
+            ) : null
-                    unmountWhenCollapsed={true}// Only render list if expanded for increased performance
+          }
-                    opened={this.props.item.id === 0 || this.props.currentSearchString.length > 0}
+          unmountWhenCollapsed // Only render list if expanded for increased performance
-                >
+          opened={props.item.id === 0 || props.currentSearchString.length > 0}>
-                    {/*$FlowFixMe*/}
+          {/* $FlowFixMe */}
           <FlatList
             data={this.getData()}
-                        extraData={this.props.currentSearchString}
+            extraData={props.currentSearchString}
-                        renderItem={this.renderItem}
+            renderItem={this.getRenderItem}
             keyExtractor={this.keyExtractor}
             listKey={item.id.toString()}
             // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
             getItemLayout={this.itemLayout}
-                        removeClippedSubviews={true}
+            removeClippedSubviews
           />
         </AnimatedAccordion>
       </View>
@@ -94,4 +113,4 @@ class GroupListAccordion extends React.Component<Props> {
   }
 }
 
-export default withTheme(GroupListAccordion)
+export default withTheme(GroupListAccordion);

src/components/Lists/PlanexGroups/GroupListItem.js

@@ -2,60 +2,62 @@
 
 import * as React from 'react';
 import {IconButton, List, withTheme} from 'react-native-paper';
-import type {CustomTheme} from "../../../managers/ThemeManager";
+import type {CustomTheme} from '../../../managers/ThemeManager';
-import type {group} from "../../../screens/Planex/GroupSelectionScreen";
+import type {PlanexGroupType} from '../../../screens/Planex/GroupSelectionScreen';
 
-type Props = {
+type PropsType = {
   theme: CustomTheme,
   onPress: () => void,
   onStarPress: () => void,
-    item: group,
+  item: PlanexGroupType,
   height: number,
-}
+};
 
-type State = {
+type StateType = {
   isFav: boolean,
-}
+};
 
-class GroupListItem extends React.Component<Props, State> {
+class GroupListItem extends React.Component<PropsType, StateType> {
-
+  constructor(props: PropsType) {
-    constructor(props) {
     super(props);
     this.state = {
-            isFav: (props.item.isFav !== undefined && props.item.isFav),
+      isFav: props.item.isFav !== undefined && props.item.isFav,
-        }
+    };
   }
 
-    shouldComponentUpdate(prevProps: Props, prevState: State) {
+  shouldComponentUpdate(prevProps: PropsType, prevState: StateType): boolean {
-        return (prevState.isFav !== this.state.isFav);
+    const {isFav} = this.state;
+    return prevState.isFav !== isFav;
   }
 
   onStarPress = () => {
-        this.setState({isFav: !this.state.isFav});
+    const {props} = this;
-        this.props.onStarPress();
+    this.setState((prevState: StateType): StateType => ({
-    }
+      isFav: !prevState.isFav,
+    }));
+    props.onStarPress();
+  };
 
-    render() {
+  render(): React.Node {
-        const colors = this.props.theme.colors;
+    const {props, state} = this;
+    const {colors} = props.theme;
     return (
       <List.Item
-                title={this.props.item.name}
+        title={props.item.name}
-                onPress={this.props.onPress}
+        onPress={props.onPress}
-                left={props =>
+        left={({size}: {size: number}): React.Node => (
-                    <List.Icon
+          <List.Icon size={size} icon="chevron-right" />
-                        {...props}
+        )}
-                        icon={"chevron-right"}/>}
+        right={({size, color}: {size: number, color: string}): React.Node => (
-                right={props =>
           <IconButton
-                        {...props}
+            size={size}
-                        icon={"star"}
+            icon="star"
             onPress={this.onStarPress}
-                        color={this.state.isFav
+            color={state.isFav ? colors.tetrisScore : color}
-                            ? colors.tetrisScore
+          />
-                            : props.color}
+        )}
-                    />}
         style={{
-                    height: this.props.height,
+          height: props.height,
           justifyContent: 'center',
         }}
       />

src/components/Lists/Proximo/ProximoListItem.js

@@ -2,43 +2,43 @@
 
 import * as React from 'react';
 import {Avatar, List, Text, withTheme} from 'react-native-paper';
-import i18n from "i18n-js";
+import i18n from 'i18n-js';
+import type {ProximoArticleType} from '../../../screens/Services/Proximo/ProximoMainScreen';
 
-type Props = {
+type PropsType = {
-    onPress: Function,
+  onPress: () => void,
   color: string,
-    item: Object,
+  item: ProximoArticleType,
   height: number,
-}
+};
 
-class ProximoListItem extends React.Component<Props> {
+class ProximoListItem extends React.Component<PropsType> {
-
+  shouldComponentUpdate(): boolean {
-    colors: Object;
-
-    constructor(props) {
-        super(props);
-        this.colors = props.theme.colors;
-    }
-
-    shouldComponentUpdate() {
     return false;
   }
 
-    render() {
+  render(): React.Node {
+    const {props} = this;
     return (
       <List.Item
-                title={this.props.item.name}
+        title={props.item.name}
-                description={this.props.item.quantity + ' ' + i18n.t('screens.proximo.inStock')}
+        description={`${props.item.quantity} ${i18n.t(
-                descriptionStyle={{color: this.props.color}}
+          'screens.proximo.inStock',
-                onPress={this.props.onPress}
+        )}`}
-                left={() => <Avatar.Image style={{backgroundColor: 'transparent'}} size={64}
+        descriptionStyle={{color: props.color}}
-                                          source={{uri: this.props.item.image}}/>}
+        onPress={props.onPress}
-                right={() =>
+        left={(): React.Node => (
-                    <Text style={{fontWeight: "bold"}}>
+          <Avatar.Image
-                        {this.props.item.price}€
+            style={{backgroundColor: 'transparent'}}
-                    </Text>}
+            size={64}
+            source={{uri: props.item.image}}
+          />
+        )}
+        right={(): React.Node => (
+          <Text style={{fontWeight: 'bold'}}>{props.item.price}€</Text>
+        )}
         style={{
-                    height: this.props.height,
+          height: props.height,
           justifyContent: 'center',
         }}
       />

src/components/Screens/WebSectionList.js

@@ -1,44 +1,55 @@
 // @flow
 
 import * as React from 'react';
-import {ERROR_TYPE, readData} from "../../utils/WebData";
+import i18n from 'i18n-js';
-import i18n from "i18n-js";
 import {Snackbar} from 'react-native-paper';
-import {RefreshControl, View} from "react-native";
+import {RefreshControl, View} from 'react-native';
-import ErrorView from "./ErrorView";
-import BasicLoadingScreen from "./BasicLoadingScreen";
-import {withCollapsible} from "../../utils/withCollapsible";
 import * as Animatable from 'react-native-animatable';
-import CustomTabBar from "../Tabbar/CustomTabBar";
+import {Collapsible} from 'react-navigation-collapsible';
-import {Collapsible} from "react-navigation-collapsible";
+import {StackNavigationProp} from '@react-navigation/stack';
-import {StackNavigationProp} from "@react-navigation/stack";
+import ErrorView from './ErrorView';
-import CollapsibleSectionList from "../Collapsible/CollapsibleSectionList";
+import BasicLoadingScreen from './BasicLoadingScreen';
+import {withCollapsible} from '../../utils/withCollapsible';
+import CustomTabBar from '../Tabbar/CustomTabBar';
+import {ERROR_TYPE, readData} from '../../utils/WebData';
+import CollapsibleSectionList from '../Collapsible/CollapsibleSectionList';
+import type {ApiGenericDataType} from '../../utils/WebData';
 
-type Props = {
+export type SectionListDataType<T> = Array<{
+  title: string,
+  data: Array<T>,
+  keyExtractor?: (T) => string,
+}>;
+
+type PropsType<T> = {
   navigation: StackNavigationProp,
   fetchUrl: string,
   autoRefreshTime: number,
   refreshOnFocus: boolean,
-    renderItem: (data: { [key: string]: any }) => React.Node,
+  renderItem: (data: {item: T}) => React.Node,
-    createDataset: (data: { [key: string]: any } | null, isLoading?: boolean) => Array<Object>,
+  createDataset: (
+    data: ApiGenericDataType | null,
+    isLoading?: boolean,
+  ) => SectionListDataType<T>,
   onScroll: (event: SyntheticEvent<EventTarget>) => void,
   collapsibleStack: Collapsible,
 
-    showError: boolean,
+  showError?: boolean,
-    itemHeight?: number,
+  itemHeight?: number | null,
   updateData?: number,
-    renderListHeaderComponent?: (data: { [key: string]: any } | null) => React.Node,
+  renderListHeaderComponent?: (data: ApiGenericDataType | null) => React.Node,
-    renderSectionHeader?: (data: { section: { [key: string]: any } }, isLoading?: boolean) => React.Node,
+  renderSectionHeader?: (
+    data: {section: {title: string}},
+    isLoading?: boolean,
+  ) => React.Node,
   stickyHeader?: boolean,
-}
-
-type State = {
-    refreshing: boolean,
-    firstLoading: boolean,
-    fetchedData: { [key: string]: any } | null,
-    snackbarVisible: boolean
 };
 
+type StateType = {
+  refreshing: boolean,
+  fetchedData: ApiGenericDataType | null,
+  snackbarVisible: boolean,
+};
 
 const MIN_REFRESH_TIME = 5 * 1000;
 
@@ -48,31 +59,37 @@ const MIN_REFRESH_TIME = 5 * 1000;
  * This is a pure component, meaning it will only update if a shallow comparison of state and props is different.
  * To force the component to update, change the value of updateData.
  */
-class WebSectionList extends React.PureComponent<Props, State> {
+class WebSectionList<T> extends React.PureComponent<PropsType<T>, StateType> {
-
   static defaultProps = {
-        stickyHeader: false,
-        updateData: 0,
     showError: true,
+    itemHeight: null,
+    updateData: 0,
+    renderListHeaderComponent: (): React.Node => null,
+    renderSectionHeader: (): React.Node => null,
+    stickyHeader: false,
   };
 
   refreshInterval: IntervalID;
+
   lastRefresh: Date | null;
 
-    state = {
+  constructor() {
+    super();
+    this.state = {
       refreshing: false,
-        firstLoading: true,
       fetchedData: null,
-        snackbarVisible: false
+      snackbarVisible: false,
     };
+  }
 
   /**
    * Registers react navigation events on first screen load.
    * Allows to detect when the screen is focused
    */
   componentDidMount() {
-        this.props.navigation.addListener('focus', this.onScreenFocus);
+    const {navigation} = this.props;
-        this.props.navigation.addListener('blur', this.onScreenBlur);
+    navigation.addListener('focus', this.onScreenFocus);
+    navigation.addListener('blur', this.onScreenBlur);
     this.lastRefresh = null;
     this.onRefresh();
   }
@@ -81,19 +98,18 @@ class WebSectionList extends React.PureComponent<Props, State> {
    * Refreshes data when focusing the screen and setup a refresh interval if asked to
    */
   onScreenFocus = () => {
-        if (this.props.refreshOnFocus && this.lastRefresh)
+    const {props} = this;
-            this.onRefresh();
+    if (props.refreshOnFocus && this.lastRefresh) this.onRefresh();
-        if (this.props.autoRefreshTime > 0)
+    if (props.autoRefreshTime > 0)
-            this.refreshInterval = setInterval(this.onRefresh, this.props.autoRefreshTime)
+      this.refreshInterval = setInterval(this.onRefresh, props.autoRefreshTime);
-    }
+  };
 
   /**
    * Removes any interval on un-focus
    */
   onScreenBlur = () => {
     clearInterval(this.refreshInterval);
-    }
+  };
-
 
   /**
    * Callback used when fetch is successful.
@@ -101,11 +117,10 @@ class WebSectionList extends React.PureComponent<Props, State> {
    *
    * @param fetchedData The newly fetched data
    */
-    onFetchSuccess = (fetchedData: { [key: string]: any }) => {
+  onFetchSuccess = (fetchedData: ApiGenericDataType) => {
     this.setState({
-            fetchedData: fetchedData,
+      fetchedData,
       refreshing: false,
-            firstLoading: false
     });
     this.lastRefresh = new Date();
   };
@@ -118,7 +133,6 @@ class WebSectionList extends React.PureComponent<Props, State> {
     this.setState({
       fetchedData: null,
       refreshing: false,
-            firstLoading: false
     });
     this.showSnackBar();
   };
@@ -127,128 +141,130 @@ class WebSectionList extends React.PureComponent<Props, State> {
    * Refreshes data and shows an animations while doing it
    */
   onRefresh = () => {
+    const {fetchUrl} = this.props;
     let canRefresh;
     if (this.lastRefresh != null) {
       const last = this.lastRefresh;
-            canRefresh = (new Date().getTime() - last.getTime()) > MIN_REFRESH_TIME;
+      canRefresh = new Date().getTime() - last.getTime() > MIN_REFRESH_TIME;
-        } else
+    } else canRefresh = true;
-            canRefresh = true;
     if (canRefresh) {
       this.setState({refreshing: true});
-            readData(this.props.fetchUrl)
+      readData(fetchUrl).then(this.onFetchSuccess).catch(this.onFetchError);
-                .then(this.onFetchSuccess)
-                .catch(this.onFetchError);
     }
   };
 
   /**
    * Shows the error popup
    */
-    showSnackBar = () => this.setState({snackbarVisible: true});
+  showSnackBar = () => {
+    this.setState({snackbarVisible: true});
+  };
 
   /**
    * Hides the error popup
    */
-    hideSnackBar = () => this.setState({snackbarVisible: false});
+  hideSnackBar = () => {
-
+    this.setState({snackbarVisible: false});
-    itemLayout = (data: { [key: string]: any }, index: number) => {
-        const height = this.props.itemHeight;
-        if (height == null)
-            return undefined;
-        return {
-            length: height,
-            offset: height * index,
-            index
-        }
   };
 
-    renderSectionHeader = (data: { section: { [key: string]: any } }) => {
+  getItemLayout = (
-        if (this.props.renderSectionHeader != null) {
+    data: T,
-            return (
-                <Animatable.View
-                    animation={"fadeInUp"}
-                    duration={500}
-                    useNativeDriver
-                >
-                    {this.props.renderSectionHeader(data, this.state.refreshing)}
-                </Animatable.View>
-            );
-        } else
-            return null;
-    }
-
-    renderItem = (data: {
-        item: { [key: string]: any },
     index: number,
-        section: { [key: string]: any },
+  ): {length: number, offset: number, index: number} | null => {
-        separators: { [key: string]: any },
+    const {itemHeight} = this.props;
-    }) => {
+    if (itemHeight == null) return null;
+    return {
+      length: itemHeight,
+      offset: itemHeight * index,
+      index,
+    };
+  };
+
+  getRenderSectionHeader = (data: {section: {title: string}}): React.Node => {
+    const {renderSectionHeader} = this.props;
+    const {refreshing} = this.state;
+    if (renderSectionHeader != null) {
       return (
-            <Animatable.View
+        <Animatable.View animation="fadeInUp" duration={500} useNativeDriver>
-                animation={"fadeInUp"}
+          {renderSectionHeader(data, refreshing)}
-                duration={500}
-                useNativeDriver
-            >
-                {this.props.renderItem(data)}
         </Animatable.View>
       );
     }
+    return null;
+  };
+
+  getRenderItem = (data: {item: T}): React.Node => {
+    const {renderItem} = this.props;
+    return (
+      <Animatable.View animation="fadeInUp" duration={500} useNativeDriver>
+        {renderItem(data)}
+      </Animatable.View>
+    );
+  };
 
   onScroll = (event: SyntheticEvent<EventTarget>) => {
-        if (this.props.onScroll)
+    const {onScroll} = this.props;
-            this.props.onScroll(event);
+    if (onScroll != null) onScroll(event);
-    }
+  };
 
-    render() {
+  render(): React.Node {
+    const {props, state} = this;
     let dataset = [];
-        if (this.state.fetchedData != null || (this.state.fetchedData == null && !this.props.showError)) {
+    if (
-            dataset = this.props.createDataset(this.state.fetchedData, this.state.refreshing);
+      state.fetchedData != null ||
-        }
+      (state.fetchedData == null && !props.showError)
-        const {containerPaddingTop} = this.props.collapsibleStack;
+    )
+      dataset = props.createDataset(state.fetchedData, state.refreshing);
+
+    const {containerPaddingTop} = props.collapsibleStack;
     return (
       <View>
         <CollapsibleSectionList
           sections={dataset}
-                    extraData={this.props.updateData}
+          extraData={props.updateData}
           refreshControl={
             <RefreshControl
               progressViewOffset={containerPaddingTop}
-                            refreshing={this.state.refreshing}
+              refreshing={state.refreshing}
               onRefresh={this.onRefresh}
             />
           }
-                    renderSectionHeader={this.renderSectionHeader}
+          renderSectionHeader={this.getRenderSectionHeader}
-                    renderItem={this.renderItem}
+          renderItem={this.getRenderItem}
-                    stickySectionHeadersEnabled={this.props.stickyHeader}
+          stickySectionHeadersEnabled={props.stickyHeader}
           style={{minHeight: '100%'}}
-                    ListHeaderComponent={this.props.renderListHeaderComponent != null
+          ListHeaderComponent={
-                        ? this.props.renderListHeaderComponent(this.state.fetchedData)
+            props.renderListHeaderComponent != null
-                        : null}
+              ? props.renderListHeaderComponent(state.fetchedData)
-                    ListEmptyComponent={this.state.refreshing
+              : null
-                        ? <BasicLoadingScreen/>
-                        : <ErrorView
-                            {...this.props}
-                            errorCode={ERROR_TYPE.CONNECTION_ERROR}
-                            onRefresh={this.onRefresh}/>
           }
-                    getItemLayout={this.props.itemHeight != null ? this.itemLayout : undefined}
+          ListEmptyComponent={
+            state.refreshing ? (
+              <BasicLoadingScreen />
+            ) : (
+              <ErrorView
+                navigation={props.navigation}
+                errorCode={ERROR_TYPE.CONNECTION_ERROR}
+                onRefresh={this.onRefresh}
+              />
+            )
+          }
+          getItemLayout={props.itemHeight != null ? this.getItemLayout : null}
           onScroll={this.onScroll}
-                    hasTab={true}
+          hasTab
         />
         <Snackbar
-                    visible={this.state.snackbarVisible}
+          visible={state.snackbarVisible}
           onDismiss={this.hideSnackBar}
           action={{
             label: 'OK',
-                        onPress: () => {
+            onPress: () => {},
-                        },
           }}
           duration={4000}
           style={{
-                        bottom: CustomTabBar.TAB_BAR_HEIGHT
+            bottom: CustomTabBar.TAB_BAR_HEIGHT,
-                    }}
+          }}>
-                >
+          {i18n.t('general.listUpdateFail')}
-                    {i18n.t("general.listUpdateFail")}
         </Snackbar>
       </View>
     );

src/screens/Amicale/Equipment/EquipmentConfirmScreen.js

@@ -1,68 +1,79 @@
 // @flow
 
 import * as React from 'react';
-import {Button, Caption, Card, Headline, Paragraph, withTheme} from 'react-native-paper';
+import {
-import {StackNavigationProp} from "@react-navigation/stack";
+  Button,
-import type {CustomTheme} from "../../../managers/ThemeManager";
+  Caption,
-import type {Device} from "./EquipmentListScreen";
+  Card,
-import {View} from "react-native";
+  Headline,
-import i18n from "i18n-js";
+  Paragraph,
-import {getRelativeDateString} from "../../../utils/EquipmentBooking";
+  withTheme,
-import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
+} from 'react-native-paper';
+import {View} from 'react-native';
+import i18n from 'i18n-js';
+import type {CustomTheme} from '../../../managers/ThemeManager';
+import type {DeviceType} from './EquipmentListScreen';
+import {getRelativeDateString} from '../../../utils/EquipmentBooking';
+import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
 
-type Props = {
+type PropsType = {
-    navigation: StackNavigationProp,
   route: {
     params?: {
-            item?: Device,
+      item?: DeviceType,
-            dates: [string, string]
+      dates: [string, string],
     },
   },
   theme: CustomTheme,
-}
+};
 
+class EquipmentConfirmScreen extends React.Component<PropsType> {
+  item: DeviceType | null;
 
-class EquipmentConfirmScreen extends React.Component<Props> {
-
-    item: Device | null;
   dates: [string, string] | null;
 
-    constructor(props: Props) {
+  constructor(props: PropsType) {
     super(props);
-        if (this.props.route.params != null) {
+    if (props.route.params != null) {
-            if (this.props.route.params.item != null)
+      if (props.route.params.item != null) this.item = props.route.params.item;
-                this.item = this.props.route.params.item;
+      else this.item = null;
-            else
+      if (props.route.params.dates != null)
-                this.item = null;
+        this.dates = props.route.params.dates;
-            if (this.props.route.params.dates != null)
+      else this.dates = null;
-                this.dates = this.props.route.params.dates;
-            else
-                this.dates = null;
     }
   }
 
-    render() {
+  render(): React.Node {
-        const item = this.item;
+    const {item, dates, props} = this;
-        const dates = this.dates;
     if (item != null && dates != null) {
       const start = new Date(dates[0]);
       const end = new Date(dates[1]);
+      let buttonText;
+      if (start == null) buttonText = i18n.t('screens.equipment.booking');
+      else if (end != null && start.getTime() !== end.getTime())
+        buttonText = i18n.t('screens.equipment.bookingPeriod', {
+          begin: getRelativeDateString(start),
+          end: getRelativeDateString(end),
+        });
+      else
+        buttonText = i18n.t('screens.equipment.bookingDay', {
+          date: getRelativeDateString(start),
+        });
       return (
         <CollapsibleScrollView>
           <Card style={{margin: 5}}>
             <Card.Content>
               <View style={{flex: 1}}>
-                                <View style={{
+                <View
-                                    marginLeft: "auto",
+                  style={{
-                                    marginRight: "auto",
+                    marginLeft: 'auto',
-                                    flexDirection: "row",
+                    marginRight: 'auto',
-                                    flexWrap: "wrap",
+                    flexDirection: 'row',
+                    flexWrap: 'wrap',
                   }}>
-                                    <Headline style={{textAlign: "center"}}>
+                  <Headline style={{textAlign: 'center'}}>{item.name}</Headline>
-                                        {item.name}
+                  <Caption
-                                    </Headline>
+                    style={{
-                                    <Caption style={{
+                      textAlign: 'center',
-                                        textAlign: "center",
                       lineHeight: 35,
                       marginLeft: 10,
                     }}>
@@ -71,35 +82,21 @@ class EquipmentConfirmScreen extends React.Component<Props> {
                 </View>
               </View>
               <Button
-                                icon={"check-circle-outline"}
+                icon="check-circle-outline"
-                                color={this.props.theme.colors.success}
+                color={props.theme.colors.success}
-                                mode="text"
+                mode="text">
-                            >
+                {buttonText}
-                                {
-                                    start == null
-                                        ? i18n.t('screens.equipment.booking')
-                                        : end != null && start.getTime() !== end.getTime()
-                                        ? i18n.t('screens.equipment.bookingPeriod', {
-                                            begin: getRelativeDateString(start),
-                                            end: getRelativeDateString(end)
-                                        })
-                                        : i18n.t('screens.equipment.bookingDay', {
-                                            date: getRelativeDateString(start)
-                                        })
-                                }
               </Button>
-                            <Paragraph style={{textAlign: "center"}}>
+              <Paragraph style={{textAlign: 'center'}}>
-                                {i18n.t("screens.equipment.bookingConfirmedMessage")}
+                {i18n.t('screens.equipment.bookingConfirmedMessage')}
               </Paragraph>
             </Card.Content>
           </Card>
         </CollapsibleScrollView>
       );
-        } else
-            return null;
-
     }
-
+    return null;
+  }
 }
 
 export default withTheme(EquipmentConfirmScreen);

src/screens/Amicale/Equipment/EquipmentListScreen.js

@@ -1,61 +1,62 @@
 // @flow
 
 import * as React from 'react';
-import {View} from "react-native";
+import {View} from 'react-native';
 import {Button, withTheme} from 'react-native-paper';
-import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
+import {StackNavigationProp} from '@react-navigation/stack';
-import {StackNavigationProp} from "@react-navigation/stack";
+import i18n from 'i18n-js';
-import type {CustomTheme} from "../../../managers/ThemeManager";
+import AuthenticatedScreen from '../../../components/Amicale/AuthenticatedScreen';
-import i18n from "i18n-js";
+import type {ClubType} from '../Clubs/ClubListScreen';
-import type {club} from "../Clubs/ClubListScreen";
+import EquipmentListItem from '../../../components/Lists/Equipment/EquipmentListItem';
-import EquipmentListItem from "../../../components/Lists/Equipment/EquipmentListItem";
+import MascotPopup from '../../../components/Mascot/MascotPopup';
-import MascotPopup from "../../../components/Mascot/MascotPopup";
+import {MASCOT_STYLE} from '../../../components/Mascot/Mascot';
-import {MASCOT_STYLE} from "../../../components/Mascot/Mascot";
+import AsyncStorageManager from '../../../managers/AsyncStorageManager';
-import AsyncStorageManager from "../../../managers/AsyncStorageManager";
+import CollapsibleFlatList from '../../../components/Collapsible/CollapsibleFlatList';
-import CollapsibleFlatList from "../../../components/Collapsible/CollapsibleFlatList";
+import type {ApiGenericDataType} from '../../../utils/WebData';
 
-type Props = {
+type PropsType = {
   navigation: StackNavigationProp,
-    theme: CustomTheme,
+};
-}
 
-type State = {
+type StateType = {
   mascotDialogVisible: boolean,
-}
+};
 
-export type Device = {
+export type DeviceType = {
   id: number,
   name: string,
   caution: number,
-    booked_at: Array<{ begin: string, end: string }>,
+  booked_at: Array<{begin: string, end: string}>,
 };
 
-export type RentedDevice = {
+export type RentedDeviceType = {
   device_id: number,
   device_name: string,
   begin: string,
   end: string,
-}
+};
 
 const LIST_ITEM_HEIGHT = 64;
 
-class EquipmentListScreen extends React.Component<Props, State> {
+class EquipmentListScreen extends React.Component<PropsType, StateType> {
+  data: Array<DeviceType>;
 
-    state = {
+  userRents: Array<RentedDeviceType>;
-        mascotDialogVisible: AsyncStorageManager.getBool(AsyncStorageManager.PREFERENCES.equipmentShowBanner.key),
-    }
 
-    data: Array<Device>;
+  authRef: {current: null | AuthenticatedScreen};
-    userRents: Array<RentedDevice>;
 
-    authRef: { current: null | AuthenticatedScreen };
   canRefresh: boolean;
 
-    constructor(props: Props) {
+  constructor(props: PropsType) {
     super(props);
+    this.state = {
+      mascotDialogVisible: AsyncStorageManager.getBool(
+        AsyncStorageManager.PREFERENCES.equipmentShowBanner.key,
+      ),
+    };
     this.canRefresh = false;
     this.authRef = React.createRef();
-        this.props.navigation.addListener('focus', this.onScreenFocus);
+    props.navigation.addListener('focus', this.onScreenFocus);
   }
 
   onScreenFocus = () => {
@@ -64,25 +65,25 @@ class EquipmentListScreen extends React.Component<Props, State> {
     this.canRefresh = true;
   };
 
-    getRenderItem = ({item}: { item: Device }) => {
+  getRenderItem = ({item}: {item: DeviceType}): React.Node => {
+    const {navigation} = this.props;
     return (
       <EquipmentListItem
-                navigation={this.props.navigation}
+        navigation={navigation}
         item={item}
         userDeviceRentDates={this.getUserDeviceRentDates(item)}
-                height={LIST_ITEM_HEIGHT}/>
+        height={LIST_ITEM_HEIGHT}
+      />
     );
   };
 
-    getUserDeviceRentDates(item: Device) {
+  getUserDeviceRentDates(item: DeviceType): [number, number] | null {
     let dates = null;
-        for (let i = 0; i < this.userRents.length; i++) {
+    this.userRents.forEach((device: RentedDeviceType) => {
-            let device = this.userRents[i];
       if (item.id === device.device_id) {
         dates = [device.begin, device.end];
-                break;
-            }
       }
+    });
     return dates;
   }
 
@@ -91,28 +92,29 @@ class EquipmentListScreen extends React.Component<Props, State> {
    *
    * @returns {*}
    */
-    getListHeader() {
+  getListHeader(): React.Node {
     return (
-            <View style={{
+      <View
-                width: "100%",
+        style={{
+          width: '100%',
           marginTop: 10,
           marginBottom: 10,
         }}>
         <Button
-                    mode={"contained"}
+          mode="contained"
-                    icon={"help-circle"}
+          icon="help-circle"
           onPress={this.showMascotDialog}
           style={{
-                        marginRight: "auto",
+            marginRight: 'auto',
-                        marginLeft: "auto",
+            marginLeft: 'auto',
           }}>
-                    {i18n.t("screens.equipment.mascotDialog.title")}
+          {i18n.t('screens.equipment.mascotDialog.title')}
         </Button>
       </View>
     );
   }
 
-    keyExtractor = (item: club) => item.id.toString();
+  keyExtractor = (item: ClubType): string => item.id.toString();
 
   /**
    * Gets the main screen component with the fetched data
@@ -120,16 +122,14 @@ class EquipmentListScreen extends React.Component<Props, State> {
    * @param data The data fetched from the server
    * @returns {*}
    */
-    getScreen = (data: Array<{ [key: string]: any } | null>) => {
+  getScreen = (data: Array<ApiGenericDataType | null>): React.Node => {
     if (data[0] != null) {
       const fetchedData = data[0];
-            if (fetchedData != null)
+      if (fetchedData != null) this.data = fetchedData.devices;
-                this.data = fetchedData["devices"];
     }
     if (data[1] != null) {
       const fetchedData = data[1];
-            if (fetchedData != null)
+      if (fetchedData != null) this.userRents = fetchedData.locations;
-                this.userRents = fetchedData["locations"];
     }
     return (
       <CollapsibleFlatList
@@ -138,23 +138,27 @@ class EquipmentListScreen extends React.Component<Props, State> {
         ListHeaderComponent={this.getListHeader()}
         data={this.data}
       />
-        )
+    );
   };
 
   showMascotDialog = () => {
-        this.setState({mascotDialogVisible: true})
+    this.setState({mascotDialogVisible: true});
   };
 
   hideMascotDialog = () => {
-        AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.equipmentShowBanner.key, false);
+    AsyncStorageManager.set(
-        this.setState({mascotDialogVisible: false})
+      AsyncStorageManager.PREFERENCES.equipmentShowBanner.key,
+      false,
+    );
+    this.setState({mascotDialogVisible: false});
   };
 
-    render() {
+  render(): React.Node {
+    const {props, state} = this;
     return (
       <View style={{flex: 1}}>
         <AuthenticatedScreen
-                    {...this.props}
+          navigation={props.navigation}
           ref={this.authRef}
           requests={[
             {
@@ -166,22 +170,22 @@ class EquipmentListScreen extends React.Component<Props, State> {
               link: 'location/my',
               params: {},
               mandatory: false,
-                        }
+            },
           ]}
           renderFunction={this.getScreen}
         />
         <MascotPopup
-                    visible={this.state.mascotDialogVisible}
+          visible={state.mascotDialogVisible}
-                    title={i18n.t("screens.equipment.mascotDialog.title")}
+          title={i18n.t('screens.equipment.mascotDialog.title')}
-                    message={i18n.t("screens.equipment.mascotDialog.message")}
+          message={i18n.t('screens.equipment.mascotDialog.message')}
-                    icon={"vote"}
+          icon="vote"
           buttons={{
             action: null,
             cancel: {
-                            message: i18n.t("screens.equipment.mascotDialog.button"),
+              message: i18n.t('screens.equipment.mascotDialog.button'),
-                            icon: "check",
+              icon: 'check',
               onPress: this.hideMascotDialog,
-                        }
+            },
           }}
           emotion={MASCOT_STYLE.WINK}
         />

src/screens/Amicale/Equipment/EquipmentRentScreen.js

@@ -1,111 +1,118 @@
 // @flow
 
 import * as React from 'react';
-import {Button, Caption, Card, Headline, Subheading, withTheme} from 'react-native-paper';
+import {
-import {StackNavigationProp} from "@react-navigation/stack";
+  Button,
-import type {CustomTheme} from "../../../managers/ThemeManager";
+  Caption,
-import type {Device} from "./EquipmentListScreen";
+  Card,
-import {BackHandler, View} from "react-native";
+  Headline,
-import * as Animatable from "react-native-animatable";
+  Subheading,
-import i18n from "i18n-js";
+  withTheme,
-import {CalendarList} from "react-native-calendars";
+} from 'react-native-paper';
-import LoadingConfirmDialog from "../../../components/Dialogs/LoadingConfirmDialog";
+import {StackNavigationProp} from '@react-navigation/stack';
-import ErrorDialog from "../../../components/Dialogs/ErrorDialog";
+import {BackHandler, View} from 'react-native';
+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 LoadingConfirmDialog from '../../../components/Dialogs/LoadingConfirmDialog';
+import ErrorDialog from '../../../components/Dialogs/ErrorDialog';
 import {
   generateMarkedDates,
   getFirstEquipmentAvailability,
   getISODate,
   getRelativeDateString,
   getValidRange,
-    isEquipmentAvailable
+  isEquipmentAvailable,
-} from "../../../utils/EquipmentBooking";
+} from '../../../utils/EquipmentBooking';
-import ConnectionManager from "../../../managers/ConnectionManager";
+import ConnectionManager from '../../../managers/ConnectionManager';
-import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
+import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
 
-type Props = {
+type PropsType = {
   navigation: StackNavigationProp,
   route: {
     params?: {
-            item?: Device,
+      item?: DeviceType,
     },
   },
   theme: CustomTheme,
-}
+};
 
-type State = {
+export type MarkedDatesObjectType = {
+  [key: string]: {startingDay: boolean, endingDay: boolean, color: string},
+};
+
+type StateType = {
   dialogVisible: boolean,
   errorDialogVisible: boolean,
-    markedDates: { [key: string]: { startingDay: boolean, endingDay: boolean, color: string } },
+  markedDates: MarkedDatesObjectType,
   currentError: number,
-}
+};
 
-class EquipmentRentScreen extends React.Component<Props, State> {
+class EquipmentRentScreen extends React.Component<PropsType, StateType> {
+  item: DeviceType | null;
 
-    state = {
+  bookedDates: Array<string>;
+
+  bookRef: {current: null | Animatable.View};
+
+  canBookEquipment: boolean;
+
+  lockedDates: {
+    [key: string]: {startingDay: boolean, endingDay: boolean, color: string},
+  };
+
+  constructor(props: PropsType) {
+    super(props);
+    this.state = {
       dialogVisible: false,
       errorDialogVisible: false,
       markedDates: {},
       currentError: 0,
-    }
+    };
-
-    item: Device | null;
-    bookedDates: Array<string>;
-
-    bookRef: { current: null | Animatable.View }
-    canBookEquipment: boolean;
-
-    lockedDates: { [key: string]: { startingDay: boolean, endingDay: boolean, color: string } }
-
-    constructor(props: Props) {
-        super(props);
     this.resetSelection();
     this.bookRef = React.createRef();
     this.canBookEquipment = false;
     this.bookedDates = [];
-        if (this.props.route.params != null) {
+    if (props.route.params != null) {
-            if (this.props.route.params.item != null)
+      if (props.route.params.item != null) this.item = props.route.params.item;
-                this.item = this.props.route.params.item;
+      else this.item = null;
-            else
-                this.item = null;
     }
-        const item = this.item;
+    const {item} = this;
     if (item != null) {
       this.lockedDates = {};
-            for (let i = 0; i < item.booked_at.length; i++) {
+      item.booked_at.forEach((date: {begin: string, end: string}) => {
-                const range = getValidRange(new Date(item.booked_at[i].begin), new Date(item.booked_at[i].end), null);
+        const range = getValidRange(
+          new Date(date.begin),
+          new Date(date.end),
+          null,
+        );
         this.lockedDates = {
           ...this.lockedDates,
-                    ...generateMarkedDates(
+          ...generateMarkedDates(false, props.theme, range),
-                        false,
-                        this.props.theme,
-                        range
-                    )
         };
+      });
     }
   }
 
-    }
-
   /**
    * Captures focus and blur events to hook on android back button
    */
   componentDidMount() {
-        this.props.navigation.addListener(
+    const {navigation} = this.props;
-            'focus',
+    navigation.addListener('focus', () => {
-            () =>
       BackHandler.addEventListener(
         'hardwareBackPress',
-                    this.onBackButtonPressAndroid
+        this.onBackButtonPressAndroid,
-                )
       );
-        this.props.navigation.addListener(
+    });
-            'blur',
+    navigation.addListener('blur', () => {
-            () =>
       BackHandler.removeEventListener(
         'hardwareBackPress',
-                    this.onBackButtonPressAndroid
+        this.onBackButtonPressAndroid,
-                )
       );
+    });
   }
 
   /**
@@ -113,26 +120,88 @@ class EquipmentRentScreen extends React.Component<Props, State> {
    *
    * @return {boolean}
    */
-    onBackButtonPressAndroid = () => {
+  onBackButtonPressAndroid = (): boolean => {
     if (this.bookedDates.length > 0) {
       this.resetSelection();
       this.updateMarkedSelection();
       return true;
-        } else
+    }
     return false;
   };
 
+  onDialogDismiss = () => {
+    this.setState({dialogVisible: false});
+  };
+
+  onErrorDialogDismiss = () => {
+    this.setState({errorDialogVisible: false});
+  };
+
+  /**
+   * Sends the selected data to the server and waits for a response.
+   * If the request is a success, navigate to the recap screen.
+   * If it is an error, display the error to the user.
+   *
+   * @returns {Promise<void>}
+   */
+  onDialogAccept = (): Promise<void> => {
+    return new Promise((resolve: () => void) => {
+      const {item, props} = this;
+      const start = this.getBookStartDate();
+      const end = this.getBookEndDate();
+      if (item != null && start != null && end != null) {
+        ConnectionManager.getInstance()
+          .authenticatedRequest('location/booking', {
+            device: item.id,
+            begin: getISODate(start),
+            end: getISODate(end),
+          })
+          .then(() => {
+            this.onDialogDismiss();
+            props.navigation.replace('equipment-confirm', {
+              item: this.item,
+              dates: [getISODate(start), getISODate(end)],
+            });
+            resolve();
+          })
+          .catch((error: number) => {
+            this.onDialogDismiss();
+            this.showErrorDialog(error);
+            resolve();
+          });
+      } else {
+        this.onDialogDismiss();
+        resolve();
+      }
+    });
+  };
+
+  getBookStartDate(): Date | null {
+    return this.bookedDates.length > 0 ? new Date(this.bookedDates[0]) : null;
+  }
+
+  getBookEndDate(): Date | null {
+    const {length} = this.bookedDates;
+    return length > 0 ? new Date(this.bookedDates[length - 1]) : null;
+  }
+
   /**
    * Selects a new date on the calendar.
    * If both start and end dates are already selected, unselect all.
    *
    * @param day The day selected
    */
-    selectNewDate = (day: { dateString: string, day: number, month: number, timestamp: number, year: number }) => {
+  selectNewDate = (day: {
+    dateString: string,
+    day: number,
+    month: number,
+    timestamp: number,
+    year: number,
+  }) => {
     const selected = new Date(day.dateString);
     const start = this.getBookStartDate();
 
-        if (!(this.lockedDates.hasOwnProperty(day.dateString))) {
+    if (!this.lockedDates[day.dateString] != null) {
       if (start === null) {
         this.updateSelectionRange(selected, selected);
         this.enableBooking();
@@ -141,39 +210,21 @@ class EquipmentRentScreen extends React.Component<Props, State> {
       } else if (this.bookedDates.length === 1) {
         this.updateSelectionRange(start, selected);
         this.enableBooking();
-            } else
+      } else this.resetSelection();
-                this.resetSelection();
       this.updateMarkedSelection();
     }
-    }
+  };
 
-    updateSelectionRange(start: Date, end: Date) {
+  showErrorDialog = (error: number) => {
-        this.bookedDates = getValidRange(start, end, this.item);
-    }
-
-    updateMarkedSelection() {
     this.setState({
-            markedDates: generateMarkedDates(
+      errorDialogVisible: true,
-                true,
+      currentError: error,
-                this.props.theme,
-                this.bookedDates
-            ),
     });
-    }
+  };
 
-    enableBooking() {
+  showDialog = () => {
-        if (!this.canBookEquipment) {
+    this.setState({dialogVisible: true});
-            this.showBookButton();
+  };
-            this.canBookEquipment = true;
-        }
-    }
-
-    resetSelection() {
-        if (this.canBookEquipment)
-            this.hideBookButton();
-        this.canBookEquipment = false;
-        this.bookedDates = [];
-    }
 
   /**
    * Shows the book button by plying a fade animation
@@ -193,84 +244,45 @@ class EquipmentRentScreen extends React.Component<Props, State> {
     }
   }
 
-    showDialog = () => {
+  enableBooking() {
-        this.setState({dialogVisible: true});
+    if (!this.canBookEquipment) {
+      this.showBookButton();
+      this.canBookEquipment = true;
+    }
   }
 
-    showErrorDialog = (error: number) => {
+  resetSelection() {
+    if (this.canBookEquipment) this.hideBookButton();
+    this.canBookEquipment = false;
+    this.bookedDates = [];
+  }
+
+  updateSelectionRange(start: Date, end: Date) {
+    this.bookedDates = getValidRange(start, end, this.item);
+  }
+
+  updateMarkedSelection() {
+    const {theme} = this.props;
     this.setState({
-            errorDialogVisible: true,
+      markedDates: generateMarkedDates(true, theme, this.bookedDates),
-            currentError: error,
     });
   }
 
-    onDialogDismiss = () => {
+  render(): React.Node {
-        this.setState({dialogVisible: false});
+    const {item, props, state} = this;
-    }
-
-    onErrorDialogDismiss = () => {
-        this.setState({errorDialogVisible: false});
-    }
-
-    /**
-     * Sends the selected data to the server and waits for a response.
-     * If the request is a success, navigate to the recap screen.
-     * If it is an error, display the error to the user.
-     *
-     * @returns {Promise<R>}
-     */
-    onDialogAccept = () => {
-        return new Promise((resolve) => {
-            const item = this.item;
     const start = this.getBookStartDate();
     const end = this.getBookEndDate();
-            if (item != null && start != null && end != null) {
+    let subHeadingText;
-                console.log({
+    if (start == null) subHeadingText = i18n.t('screens.equipment.booking');
-                    "device": item.id,
+    else if (end != null && start.getTime() !== end.getTime())
-                    "begin": getISODate(start),
+      subHeadingText = i18n.t('screens.equipment.bookingPeriod', {
-                    "end": getISODate(end),
+        begin: getRelativeDateString(start),
-                })
+        end: getRelativeDateString(end),
-                ConnectionManager.getInstance().authenticatedRequest(
-                    "location/booking",
-                    {
-                        "device": item.id,
-                        "begin": getISODate(start),
-                        "end": getISODate(end),
-                    })
-                    .then(() => {
-                        this.onDialogDismiss();
-                        this.props.navigation.replace("equipment-confirm", {
-                            item: this.item,
-                            dates: [getISODate(start), getISODate(end)]
       });
-                        resolve();
+    else
-                    })
+      i18n.t('screens.equipment.bookingDay', {
-                    .catch((error: number) => {
+        date: getRelativeDateString(start),
-                        this.onDialogDismiss();
-                        this.showErrorDialog(error);
-                        resolve();
       });
-            } else {
-                this.onDialogDismiss();
-                resolve();
-            }
-        });
-    }
-
-    getBookStartDate() {
-        return this.bookedDates.length > 0 ? new Date(this.bookedDates[0]) : null;
-    }
-
-    getBookEndDate() {
-        const length = this.bookedDates.length;
-        return length > 0 ? new Date(this.bookedDates[length - 1]) : null;
-    }
-
-    render() {
-        const item = this.item;
-        const start = this.getBookStartDate();
-        const end = this.getBookEndDate();
-
     if (item != null) {
       const isAvailable = isEquipmentAvailable(item);
       const firstAvailability = getFirstEquipmentAvailability(item);
@@ -280,17 +292,19 @@ class EquipmentRentScreen extends React.Component<Props, State> {
             <Card style={{margin: 5}}>
               <Card.Content>
                 <View style={{flex: 1}}>
-                                    <View style={{
+                  <View
-                                        marginLeft: "auto",
+                    style={{
-                                        marginRight: "auto",
+                      marginLeft: 'auto',
-                                        flexDirection: "row",
+                      marginRight: 'auto',
-                                        flexWrap: "wrap",
+                      flexDirection: 'row',
+                      flexWrap: 'wrap',
                     }}>
-                                        <Headline style={{textAlign: "center"}}>
+                    <Headline style={{textAlign: 'center'}}>
                       {item.name}
                     </Headline>
-                                        <Caption style={{
+                    <Caption
-                                            textAlign: "center",
+                      style={{
+                        textAlign: 'center',
                         lineHeight: 35,
                         marginLeft: 10,
                       }}>
@@ -300,30 +314,24 @@ class EquipmentRentScreen extends React.Component<Props, State> {
                 </View>
 
                 <Button
-                                    icon={isAvailable ? "check-circle-outline" : "update"}
+                  icon={isAvailable ? 'check-circle-outline' : 'update'}
-                                    color={isAvailable ? this.props.theme.colors.success : this.props.theme.colors.primary}
+                  color={
-                                    mode="text"
+                    isAvailable
-                                >
+                      ? props.theme.colors.success
-                                    {i18n.t('screens.equipment.available', {date: getRelativeDateString(firstAvailability)})}
+                      : props.theme.colors.primary
-                                </Button>
-                                <Subheading style={{
-                                    textAlign: "center",
-                                    marginBottom: 10,
-                                    minHeight: 50
-                                }}>
-                                    {
-                                        start == null
-                                            ? i18n.t('screens.equipment.booking')
-                                            : end != null && start.getTime() !== end.getTime()
-                                            ? i18n.t('screens.equipment.bookingPeriod', {
-                                                begin: getRelativeDateString(start),
-                                                end: getRelativeDateString(end)
-                                            })
-                                            : i18n.t('screens.equipment.bookingDay', {
-                                                date: getRelativeDateString(start)
-                                            })
                   }
-
+                  mode="text">
+                  {i18n.t('screens.equipment.available', {
+                    date: getRelativeDateString(firstAvailability),
+                  })}
+                </Button>
+                <Subheading
+                  style={{
+                    textAlign: 'center',
+                    marginBottom: 10,
+                    minHeight: 50,
+                  }}>
+                  {subHeadingText}
                 </Subheading>
               </Card.Content>
             </Card>
@@ -335,35 +343,34 @@ class EquipmentRentScreen extends React.Component<Props, State> {
               // Max amount of months allowed to scroll to the future. Default = 50
               futureScrollRange={3}
               // Enable horizontal scrolling, default = false
-                            horizontal={true}
+              horizontal
               // Enable paging on horizontal, default = false
-                            pagingEnabled={true}
+              pagingEnabled
               // Handler which gets executed on day press. Default = undefined
               onDayPress={this.selectNewDate}
               // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
               firstDay={1}
               // Disable all touch events for disabled days. can be override with disableTouchEvent in markedDates
-                            disableAllTouchEventsForDisabledDays={true}
+              disableAllTouchEventsForDisabledDays
               // Hide month navigation arrows.
               hideArrows={false}
               // Date marking style [simple/period/multi-dot/custom]. Default = 'simple'
-                            markingType={'period'}
+              markingType="period"
-                            markedDates={{...this.lockedDates, ...this.state.markedDates}}
+              markedDates={{...this.lockedDates, ...state.markedDates}}
-
               theme={{
-                                backgroundColor: this.props.theme.colors.agendaBackgroundColor,
+                backgroundColor: props.theme.colors.agendaBackgroundColor,
-                                calendarBackground: this.props.theme.colors.background,
+                calendarBackground: props.theme.colors.background,
-                                textSectionTitleColor: this.props.theme.colors.agendaDayTextColor,
+                textSectionTitleColor: props.theme.colors.agendaDayTextColor,
-                                selectedDayBackgroundColor: this.props.theme.colors.primary,
+                selectedDayBackgroundColor: props.theme.colors.primary,
                 selectedDayTextColor: '#ffffff',
-                                todayTextColor: this.props.theme.colors.text,
+                todayTextColor: props.theme.colors.text,
-                                dayTextColor: this.props.theme.colors.text,
+                dayTextColor: props.theme.colors.text,
-                                textDisabledColor: this.props.theme.colors.agendaDayTextColor,
+                textDisabledColor: props.theme.colors.agendaDayTextColor,
-                                dotColor: this.props.theme.colors.primary,
+                dotColor: props.theme.colors.primary,
                 selectedDotColor: '#ffffff',
-                                arrowColor: this.props.theme.colors.primary,
+                arrowColor: props.theme.colors.primary,
-                                monthTextColor: this.props.theme.colors.text,
+                monthTextColor: props.theme.colors.text,
-                                indicatorColor: this.props.theme.colors.primary,
+                indicatorColor: props.theme.colors.primary,
                 textDayFontFamily: 'monospace',
                 textMonthFontFamily: 'monospace',
                 textDayHeaderFontFamily: 'monospace',
@@ -379,15 +386,14 @@ class EquipmentRentScreen extends React.Component<Props, State> {
                     height: 34,
                     width: 34,
                     alignItems: 'center',
-
+                  },
-                                    }
+                },
-                                }
               }}
               style={{marginBottom: 50}}
             />
           </CollapsibleScrollView>
           <LoadingConfirmDialog
-                        visible={this.state.dialogVisible}
+            visible={state.dialogVisible}
             onDismiss={this.onDialogDismiss}
             onAccept={this.onDialogAccept}
             title={i18n.t('screens.equipment.dialogTitle')}
@@ -396,46 +402,40 @@ class EquipmentRentScreen extends React.Component<Props, State> {
           />
 
           <ErrorDialog
-                        visible={this.state.errorDialogVisible}
+            visible={state.errorDialogVisible}
             onDismiss={this.onErrorDialogDismiss}
-                        errorCode={this.state.currentError}
+            errorCode={state.currentError}
           />
           <Animatable.View
             ref={this.bookRef}
             style={{
-                            position: "absolute",
+              position: 'absolute',
               bottom: 0,
               left: 0,
-                            width: "100%",
+              width: '100%',
               flex: 1,
-                            transform: [
+              transform: [{translateY: 100}],
-                                {translateY: 100},
-                            ]
             }}>
             <Button
               icon="bookmark-check"
               mode="contained"
               onPress={this.showDialog}
               style={{
-                                width: "80%",
+                width: '80%',
                 flex: 1,
-                                marginLeft: "auto",
+                marginLeft: 'auto',
-                                marginRight: "auto",
+                marginRight: 'auto',
                 marginBottom: 20,
-                                borderRadius: 10
+                borderRadius: 10,
-                            }}
+              }}>
-                        >
               {i18n.t('screens.equipment.bookButton')}
             </Button>
           </Animatable.View>
-
         </View>
-
+      );
-            )
+    }
-        } else
+    return null;
-            return <View/>;
   }
-
 }
 
 export default withTheme(EquipmentRentScreen);

src/screens/Other/Settings/DashboardEditScreen.js

@@ -1,27 +1,28 @@
 // @flow
 
 import * as React from 'react';
-import {StackNavigationProp} from "@react-navigation/stack";
+import {StackNavigationProp} from '@react-navigation/stack';
-import type {CustomTheme} from "../../../managers/ThemeManager";
+import {Button, Card, Paragraph, withTheme} from 'react-native-paper';
-import {Button, Card, Paragraph, withTheme} from "react-native-paper";
+import {FlatList} from 'react-native';
-import type {ServiceCategory, ServiceItem} from "../../../managers/ServicesManager";
+import {View} from 'react-native-animatable';
-import DashboardManager from "../../../managers/DashboardManager";
+import i18n from 'i18n-js';
-import DashboardItem from "../../../components/Home/EventDashboardItem";
+import type {
-import {FlatList} from "react-native";
+  ServiceCategoryType,
-import {View} from "react-native-animatable";
+  ServiceItemType,
-import DashboardEditAccordion from "../../../components/Lists/DashboardEdit/DashboardEditAccordion";
+} from '../../../managers/ServicesManager';
-import DashboardEditPreviewItem from "../../../components/Lists/DashboardEdit/DashboardEditPreviewItem";
+import DashboardManager from '../../../managers/DashboardManager';
-import AsyncStorageManager from "../../../managers/AsyncStorageManager";
+import DashboardItem from '../../../components/Home/EventDashboardItem';
-import i18n from "i18n-js";
+import DashboardEditAccordion from '../../../components/Lists/DashboardEdit/DashboardEditAccordion';
-import CollapsibleFlatList from "../../../components/Collapsible/CollapsibleFlatList";
+import DashboardEditPreviewItem from '../../../components/Lists/DashboardEdit/DashboardEditPreviewItem';
+import AsyncStorageManager from '../../../managers/AsyncStorageManager';
+import CollapsibleFlatList from '../../../components/Collapsible/CollapsibleFlatList';
 
-type Props = {
+type PropsType = {
   navigation: StackNavigationProp,
-    theme: CustomTheme,
 };
 
-type State = {
+type StateType = {
-    currentDashboard: Array<ServiceItem>,
+  currentDashboard: Array<ServiceItemType | null>,
   currentDashboardIdList: Array<string>,
   activeItem: number,
 };
@@ -29,120 +30,137 @@ type State = {
 /**
  * Class defining the Settings screen. This screen shows controls to modify app preferences.
  */
-class DashboardEditScreen extends React.Component<Props, State> {
+class DashboardEditScreen extends React.Component<PropsType, StateType> {
+  content: Array<ServiceCategoryType>;
+
+  initialDashboard: Array<ServiceItemType | null>;
 
-    content: Array<ServiceCategory>;
-    initialDashboard: Array<ServiceItem>;
   initialDashboardIdList: Array<string>;
 
-    constructor(props: Props) {
+  constructor(props: PropsType) {
     super(props);
-        let dashboardManager = new DashboardManager(this.props.navigation);
+    const dashboardManager = new DashboardManager(props.navigation);
-        this.initialDashboardIdList = AsyncStorageManager.getObject(AsyncStorageManager.PREFERENCES.dashboardItems.key);
+    this.initialDashboardIdList = AsyncStorageManager.getObject(
+      AsyncStorageManager.PREFERENCES.dashboardItems.key,
+    );
     this.initialDashboard = dashboardManager.getCurrentDashboard();
     this.state = {
       currentDashboard: [...this.initialDashboard],
       currentDashboardIdList: [...this.initialDashboardIdList],
       activeItem: 0,
-        }
+    };
     this.content = dashboardManager.getCategories();
   }
 
-    dashboardRowRenderItem = ({item, index}: { item: DashboardItem, index: number }) => {
+  getDashboardRowRenderItem = ({
+    item,
+    index,
+  }: {
+    item: DashboardItem,
+    index: number,
+  }): React.Node => {
+    const {activeItem} = this.state;
     return (
       <DashboardEditPreviewItem
         image={item.image}
-                onPress={() => this.setState({activeItem: index})}
+        onPress={() => {
-                isActive={this.state.activeItem === index}
+          this.setState({activeItem: index});
+        }}
+        isActive={activeItem === index}
       />
     );
   };
 
-    getDashboard(content: Array<DashboardItem>) {
+  getDashboard(content: Array<DashboardItem>): React.Node {
     return (
       <FlatList
         data={content}
         extraData={this.state}
-                renderItem={this.dashboardRowRenderItem}
+        renderItem={this.getDashboardRowRenderItem}
-                horizontal={true}
+        horizontal
         contentContainerStyle={{
           marginLeft: 'auto',
           marginRight: 'auto',
           marginTop: 5,
         }}
-            />);
+      />
+    );
   }
 
-    renderItem = ({item}: { item: ServiceCategory }) => {
+  getRenderItem = ({item}: {item: ServiceCategoryType}): React.Node => {
+    const {currentDashboardIdList} = this.state;
     return (
       <DashboardEditAccordion
         item={item}
         onPress={this.updateDashboard}
-                activeDashboard={this.state.currentDashboardIdList}
+        activeDashboard={currentDashboardIdList}
       />
     );
   };
 
-    updateDashboard = (service: ServiceItem) => {
+  getListHeader(): React.Node {
-        let currentDashboard = this.state.currentDashboard;
+    const {currentDashboard} = this.state;
-        let currentDashboardIdList = this.state.currentDashboardIdList;
-        currentDashboard[this.state.activeItem] = service;
-        currentDashboardIdList[this.state.activeItem] = service.key;
-        this.setState({
-            currentDashboard: currentDashboard,
-            currentDashboardIdList: currentDashboardIdList,
-        });
-        AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.dashboardItems.key, currentDashboardIdList);
-    }
-
-    undoDashboard = () => {
-        this.setState({
-            currentDashboard: [...this.initialDashboard],
-            currentDashboardIdList: [...this.initialDashboardIdList]
-        });
-        AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.dashboardItems.key, this.initialDashboardIdList);
-    }
-
-    getListHeader() {
     return (
       <Card style={{margin: 5}}>
         <Card.Content>
           <View style={{padding: 5}}>
             <Button
-                            mode={"contained"}
+              mode="contained"
               onPress={this.undoDashboard}
               style={{
-                                marginLeft: "auto",
+                marginLeft: 'auto',
-                                marginRight: "auto",
+                marginRight: 'auto',
                 marginBottom: 10,
-                            }}
+              }}>
-                        >
+              {i18n.t('screens.settings.dashboardEdit.undo')}
-                            {i18n.t("screens.settings.dashboardEdit.undo")}
             </Button>
             <View style={{height: 50}}>
-                            {this.getDashboard(this.state.currentDashboard)}
+              {this.getDashboard(currentDashboard)}
             </View>
           </View>
-                    <Paragraph style={{textAlign: "center"}}>
+          <Paragraph style={{textAlign: 'center'}}>
-                        {i18n.t("screens.settings.dashboardEdit.message")}
+            {i18n.t('screens.settings.dashboardEdit.message')}
           </Paragraph>
         </Card.Content>
       </Card>
     );
   }
 
+  updateDashboard = (service: ServiceItemType) => {
+    const {currentDashboard, currentDashboardIdList, activeItem} = this.state;
+    currentDashboard[activeItem] = service;
+    currentDashboardIdList[activeItem] = service.key;
+    this.setState({
+      currentDashboard,
+      currentDashboardIdList,
+    });
+    AsyncStorageManager.set(
+      AsyncStorageManager.PREFERENCES.dashboardItems.key,
+      currentDashboardIdList,
+    );
+  };
 
-    render() {
+  undoDashboard = () => {
+    this.setState({
+      currentDashboard: [...this.initialDashboard],
+      currentDashboardIdList: [...this.initialDashboardIdList],
+    });
+    AsyncStorageManager.set(
+      AsyncStorageManager.PREFERENCES.dashboardItems.key,
+      this.initialDashboardIdList,
+    );
+  };
+
+  render(): React.Node {
     return (
       <CollapsibleFlatList
         data={this.content}
-                renderItem={this.renderItem}
+        renderItem={this.getRenderItem}
         ListHeaderComponent={this.getListHeader()}
         style={{}}
       />
     );
   }
-
 }
 
 export default withTheme(DashboardEditScreen);

src/screens/Planex/GroupSelectionScreen.js

@@ -1,43 +1,44 @@
 // @flow
 
 import * as React from 'react';
-import {Platform} from "react-native";
+import {Platform} from 'react-native';
-import i18n from "i18n-js";
+import i18n from 'i18n-js';
-import {Searchbar} from "react-native-paper";
+import {Searchbar} from 'react-native-paper';
-import {stringMatchQuery} from "../../utils/Search";
+import {StackNavigationProp} from '@react-navigation/stack';
-import WebSectionList from "../../components/Screens/WebSectionList";
+import {stringMatchQuery} from '../../utils/Search';
-import GroupListAccordion from "../../components/Lists/PlanexGroups/GroupListAccordion";
+import WebSectionList from '../../components/Screens/WebSectionList';
-import AsyncStorageManager from "../../managers/AsyncStorageManager";
+import GroupListAccordion from '../../components/Lists/PlanexGroups/GroupListAccordion';
-import {StackNavigationProp} from "@react-navigation/stack";
+import AsyncStorageManager from '../../managers/AsyncStorageManager';
 
 const LIST_ITEM_HEIGHT = 70;
 
-export type group = {
+export type PlanexGroupType = {
   name: string,
   id: number,
   isFav: boolean,
 };
 
-export type groupCategory = {
+export type PlanexGroupCategoryType = {
   name: string,
   id: number,
-    content: Array<group>,
+  content: Array<PlanexGroupType>,
 };
 
-type Props = {
+type PropsType = {
   navigation: StackNavigationProp,
-}
-
-type State = {
-    currentSearchString: string,
-    favoriteGroups: Array<group>,
 };
 
-function sortName(a: group | groupCategory, b: group | groupCategory) {
+type StateType = {
-    if (a.name.toLowerCase() < b.name.toLowerCase())
+  currentSearchString: string,
-        return -1;
+  favoriteGroups: Array<PlanexGroupType>,
-    if (a.name.toLowerCase() > b.name.toLowerCase())
+};
-        return 1;
+
+function sortName(
+  a: PlanexGroupType | PlanexGroupCategoryType,
+  b: PlanexGroupType | PlanexGroupCategoryType,
+): number {
+  if (a.name.toLowerCase() < b.name.toLowerCase()) return -1;
+  if (a.name.toLowerCase() > b.name.toLowerCase()) return 1;
   return 0;
 }
 
@@ -47,99 +48,18 @@ const REPLACE_REGEX = /_/g;
 /**
  * Class defining planex group selection screen.
  */
-class GroupSelectionScreen extends React.Component<Props, State> {
+class GroupSelectionScreen extends React.Component<PropsType, StateType> {
-
-    constructor(props: Props) {
-        super(props);
-        this.state = {
-            currentSearchString: '',
-            favoriteGroups: AsyncStorageManager.getObject(AsyncStorageManager.PREFERENCES.planexFavoriteGroups.key),
-        };
-    }
-
-    /**
-     * Creates the header content
-     */
-    componentDidMount() {
-        this.props.navigation.setOptions({
-            headerTitle: this.getSearchBar,
-            headerBackTitleVisible: false,
-            headerTitleContainerStyle: Platform.OS === 'ios' ?
-                {marginHorizontal: 0, width: '70%'} :
-                {marginHorizontal: 0, right: 50, left: 50},
-        });
-    }
-
-    /**
-     * Gets the header search bar
-     *
-     * @return {*}
-     */
-    getSearchBar = () => {
-        return (
-            <Searchbar
-                placeholder={i18n.t('screens.proximo.search')}
-                onChangeText={this.onSearchStringChange}
-            />
-        );
-    };
-
-    /**
-     * Callback used when the search changes
-     *
-     * @param str The new search string
-     */
-    onSearchStringChange = (str: string) => {
-        this.setState({currentSearchString: str})
-    };
-
-    /**
-     * Callback used when clicking an article in the list.
-     * It opens the modal to show detailed information about the article
-     *
-     * @param item The article pressed
-     */
-    onListItemPress = (item: group) => {
-        this.props.navigation.navigate("planex", {
-            screen: "index",
-            params: {group: item}
-        });
-    };
-
-    /**
-     * Callback used when the user clicks on the favorite button
-     *
-     * @param item The item to add/remove from favorites
-     */
-    onListFavoritePress = (item: group) => {
-        this.updateGroupFavorites(item);
-    };
-
-    /**
-     * Checks if the given group is in the favorites list
-     *
-     * @param group The group to check
-     * @returns {boolean}
-     */
-    isGroupInFavorites(group: group) {
-        let isFav = false;
-        for (let i = 0; i < this.state.favoriteGroups.length; i++) {
-            if (group.id === this.state.favoriteGroups[i].id) {
-                isFav = true;
-                break;
-            }
-        }
-        return isFav;
-    }
-
   /**
    * Removes the given group from the given array
    *
    * @param favorites The array containing favorites groups
    * @param group The group to remove from the array
    */
-    removeGroupFromFavorites(favorites: Array<group>, group: group) {
+  static removeGroupFromFavorites(
-        for (let i = 0; i < favorites.length; i++) {
+    favorites: Array<PlanexGroupType>,
+    group: PlanexGroupType,
+  ) {
+    for (let i = 0; i < favorites.length; i += 1) {
       if (group.id === favorites[i].id) {
         favorites.splice(i, 1);
         break;
@@ -153,95 +73,91 @@ class GroupSelectionScreen extends React.Component<Props, State> {
    * @param favorites The array containing favorites groups
    * @param group The group to add to the array
    */
-    addGroupToFavorites(favorites: Array<group>, group: group) {
+  static addGroupToFavorites(
-        group.isFav = true;
+    favorites: Array<PlanexGroupType>,
-        favorites.push(group);
+    group: PlanexGroupType,
+  ) {
+    const favGroup = {...group};
+    favGroup.isFav = true;
+    favorites.push(favGroup);
     favorites.sort(sortName);
   }
 
-    /**
+  constructor(props: PropsType) {
-     * Adds or removes the given group to the favorites list, depending on whether it is already in it or not.
+    super(props);
-     * Favorites are then saved in user preferences
+    this.state = {
-     *
+      currentSearchString: '',
-     * @param group The group to add/remove to favorites
+      favoriteGroups: AsyncStorageManager.getObject(
-     */
+        AsyncStorageManager.PREFERENCES.planexFavoriteGroups.key,
-    updateGroupFavorites(group: group) {
+      ),
-        let newFavorites = [...this.state.favoriteGroups]
+    };
-        if (this.isGroupInFavorites(group))
-            this.removeGroupFromFavorites(newFavorites, group);
-        else
-            this.addGroupToFavorites(newFavorites, group);
-        this.setState({favoriteGroups: newFavorites})
-        AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.planexFavoriteGroups.key, newFavorites);
   }
 
   /**
-     * Checks whether to display the given group category, depending on user search query
+   * Creates the header content
-     *
-     * @param item The group category
-     * @returns {boolean}
    */
-    shouldDisplayAccordion(item: groupCategory) {
+  componentDidMount() {
-        let shouldDisplay = false;
+    const [navigation] = this.props;
-        for (let i = 0; i < item.content.length; i++) {
+    navigation.setOptions({
-            if (stringMatchQuery(item.content[i].name, this.state.currentSearchString)) {
+      headerTitle: this.getSearchBar,
-                shouldDisplay = true;
+      headerBackTitleVisible: false,
-                break;
+      headerTitleContainerStyle:
-            }
+        Platform.OS === 'ios'
-        }
+          ? {marginHorizontal: 0, width: '70%'}
-        return shouldDisplay;
+          : {marginHorizontal: 0, right: 50, left: 50},
+    });
   }
 
+  /**
+   * Gets the header search bar
+   *
+   * @return {*}
+   */
+  getSearchBar = (): React.Node => {
+    return (
+      <Searchbar
+        placeholder={i18n.t('screens.proximo.search')}
+        onChangeText={this.onSearchStringChange}
+      />
+    );
+  };
+
   /**
    * Gets a render item for the given article
    *
    * @param item The article to render
    * @return {*}
    */
-    renderItem = ({item}: { item: groupCategory }) => {
+  getRenderItem = ({item}: {item: PlanexGroupCategoryType}): React.Node => {
+    const {currentSearchString, favoriteGroups} = this.state;
     if (this.shouldDisplayAccordion(item)) {
       return (
         <GroupListAccordion
           item={item}
           onGroupPress={this.onListItemPress}
           onFavoritePress={this.onListFavoritePress}
-                    currentSearchString={this.state.currentSearchString}
+          currentSearchString={currentSearchString}
-                    favoriteNumber={this.state.favoriteGroups.length}
+          favoriteNumber={favoriteGroups.length}
           height={LIST_ITEM_HEIGHT}
         />
       );
-        } else
+    }
     return null;
   };
 
-    /**
-     * Generates the dataset to be used in the FlatList.
-     * This improves formatting of group names, sorts alphabetically the categories, and adds favorites at the top.
-     *
-     * @param fetchedData The raw data fetched from the server
-     * @returns {[]}
-     */
-    generateData(fetchedData: { [key: string]: groupCategory }) {
-        let data = [];
-        for (let key in fetchedData) {
-            this.formatGroups(fetchedData[key]);
-            data.push(fetchedData[key]);
-        }
-        data.sort(sortName);
-        data.unshift({name: i18n.t("screens.planex.favorites"), id: 0, content: this.state.favoriteGroups});
-        return data;
-    }
-
   /**
    * Replaces underscore by spaces and sets the favorite state of every group in the given category
    *
-     * @param item The category containing groups to format
+   * @param groups The groups to format
+   * @return {Array<PlanexGroupType>}
    */
-    formatGroups(item: groupCategory) {
+  getFormattedGroups(groups: Array<PlanexGroupType>): Array<PlanexGroupType> {
-        for (let i = 0; i < item.content.length; i++) {
+    return groups.map((group: PlanexGroupType): PlanexGroupType => {
-            item.content[i].name = item.content[i].name.replace(REPLACE_REGEX, " ")
+      const newGroup = {...group};
-            item.content[i].isFav = this.isGroupInFavorites(item.content[i]);
+      newGroup.name = group.name.replace(REPLACE_REGEX, ' ');
-        }
+      newGroup.isFav = this.isGroupInFavorites(group);
+      return newGroup;
+    });
   }
 
   /**
@@ -250,25 +166,141 @@ class GroupSelectionScreen extends React.Component<Props, State> {
    * @param fetchedData
    * @return {*}
    * */
-    createDataset = (fetchedData: { [key: string]: groupCategory }) => {
+  createDataset = (fetchedData: {
+    [key: string]: PlanexGroupCategoryType,
+  }): Array<{title: string, data: Array<PlanexGroupCategoryType>}> => {
     return [
       {
         title: '',
-                data: this.generateData(fetchedData)
+        data: this.generateData(fetchedData),
-            }
+      },
     ];
+  };
+
+  /**
+   * Callback used when the search changes
+   *
+   * @param str The new search string
+   */
+  onSearchStringChange = (str: string) => {
+    this.setState({currentSearchString: str});
+  };
+
+  /**
+   * Callback used when clicking an article in the list.
+   * It opens the modal to show detailed information about the article
+   *
+   * @param item The article pressed
+   */
+  onListItemPress = (item: PlanexGroupType) => {
+    const {navigation} = this.props;
+    navigation.navigate('planex', {
+      screen: 'index',
+      params: {group: item},
+    });
+  };
+
+  /**
+   * Callback used when the user clicks on the favorite button
+   *
+   * @param item The item to add/remove from favorites
+   */
+  onListFavoritePress = (item: PlanexGroupType) => {
+    this.updateGroupFavorites(item);
+  };
+
+  /**
+   * Checks if the given group is in the favorites list
+   *
+   * @param group The group to check
+   * @returns {boolean}
+   */
+  isGroupInFavorites(group: PlanexGroupType): boolean {
+    let isFav = false;
+    const {favoriteGroups} = this.state;
+    favoriteGroups.forEach((favGroup: PlanexGroupType) => {
+      if (group.id === favGroup.id) isFav = true;
+    });
+    return isFav;
   }
 
-    render() {
+  /**
+   * Adds or removes the given group to the favorites list, depending on whether it is already in it or not.
+   * Favorites are then saved in user preferences
+   *
+   * @param group The group to add/remove to favorites
+   */
+  updateGroupFavorites(group: PlanexGroupType) {
+    const {favoriteGroups} = this.state;
+    const newFavorites = [...favoriteGroups];
+    if (this.isGroupInFavorites(group))
+      GroupSelectionScreen.removeGroupFromFavorites(newFavorites, group);
+    else GroupSelectionScreen.addGroupToFavorites(newFavorites, group);
+    this.setState({favoriteGroups: newFavorites});
+    AsyncStorageManager.set(
+      AsyncStorageManager.PREFERENCES.planexFavoriteGroups.key,
+      newFavorites,
+    );
+  }
+
+  /**
+   * Checks whether to display the given group category, depending on user search query
+   *
+   * @param item The group category
+   * @returns {boolean}
+   */
+  shouldDisplayAccordion(item: PlanexGroupCategoryType): boolean {
+    const {currentSearchString} = this.state;
+    let shouldDisplay = false;
+    for (let i = 0; i < item.content.length; i += 1) {
+      if (stringMatchQuery(item.content[i].name, currentSearchString)) {
+        shouldDisplay = true;
+        break;
+      }
+    }
+    return shouldDisplay;
+  }
+
+  /**
+   * Generates the dataset to be used in the FlatList.
+   * This improves formatting of group names, sorts alphabetically the categories, and adds favorites at the top.
+   *
+   * @param fetchedData The raw data fetched from the server
+   * @returns {[]}
+   */
+  generateData(fetchedData: {
+    [key: string]: PlanexGroupCategoryType,
+  }): Array<PlanexGroupCategoryType> {
+    const {favoriteGroups} = this.state;
+    const data = [];
+    // eslint-disable-next-line flowtype/no-weak-types
+    (Object.values(fetchedData): Array<any>).forEach(
+      (category: PlanexGroupCategoryType) => {
+        const newCat = {...category};
+        newCat.content = this.getFormattedGroups(category.content);
+        data.push(newCat);
+      },
+    );
+    data.sort(sortName);
+    data.unshift({
+      name: i18n.t('screens.planex.favorites'),
+      id: 0,
+      content: favoriteGroups,
+    });
+    return data;
+  }
+
+  render(): React.Node {
+    const {props, state} = this;
     return (
       <WebSectionList
-                {...this.props}
+        navigation={props.navigation}
         createDataset={this.createDataset}
         autoRefreshTime={0}
         refreshOnFocus={false}
         fetchUrl={GROUPS_URL}
-                renderItem={this.renderItem}
+        renderItem={this.getRenderItem}
-                updateData={this.state.currentSearchString + this.state.favoriteGroups.length}
+        updateData={state.currentSearchString + state.favoriteGroups.length}
         itemHeight={LIST_ITEM_HEIGHT}
       />
     );

src/screens/Planex/PlanexScreen.js

@@ -1,37 +1,36 @@
 // @flow
 
 import * as React from 'react';
-import type {CustomTheme} from "../../managers/ThemeManager";
+import {withTheme} from 'react-native-paper';
-import ThemeManager from "../../managers/ThemeManager";
+import i18n from 'i18n-js';
-import WebViewScreen from "../../components/Screens/WebViewScreen";
+import {View} from 'react-native';
-import {withTheme} from "react-native-paper";
+import {CommonActions} from '@react-navigation/native';
-import i18n from "i18n-js";
+import {StackNavigationProp} from '@react-navigation/stack';
-import {View} from "react-native";
+import type {CustomTheme} from '../../managers/ThemeManager';
-import AsyncStorageManager from "../../managers/AsyncStorageManager";
+import ThemeManager from '../../managers/ThemeManager';
-import AlertDialog from "../../components/Dialogs/AlertDialog";
+import WebViewScreen from '../../components/Screens/WebViewScreen';
-import {dateToString, getTimeOnlyString} from "../../utils/Planning";
+import AsyncStorageManager from '../../managers/AsyncStorageManager';
-import DateManager from "../../managers/DateManager";
+import AlertDialog from '../../components/Dialogs/AlertDialog';
-import AnimatedBottomBar from "../../components/Animations/AnimatedBottomBar";
+import {dateToString, getTimeOnlyString} from '../../utils/Planning';
-import {CommonActions} from "@react-navigation/native";
+import DateManager from '../../managers/DateManager';
-import ErrorView from "../../components/Screens/ErrorView";
+import AnimatedBottomBar from '../../components/Animations/AnimatedBottomBar';
-import {StackNavigationProp} from "@react-navigation/stack";
+import ErrorView from '../../components/Screens/ErrorView';
-import type {group} from "./GroupSelectionScreen";
+import type {PlanexGroupType} from './GroupSelectionScreen';
-import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
+import {MASCOT_STYLE} from '../../components/Mascot/Mascot';
-import MascotPopup from "../../components/Mascot/MascotPopup";
+import MascotPopup from '../../components/Mascot/MascotPopup';
 
-type Props = {
+type PropsType = {
   navigation: StackNavigationProp,
-    route: { params: { group: group } },
+  route: {params: {group: PlanexGroupType}},
   theme: CustomTheme,
-}
+};
 
-type State = {
+type StateType = {
   dialogVisible: boolean,
   dialogTitle: string,
   dialogMessage: string,
-    currentGroup: group,
+  currentGroup: PlanexGroupType,
-}
+};
-
 
 const PLANEX_URL = 'http://planex.insa-toulouse.fr/';
 
@@ -69,21 +68,21 @@ const OBSERVE_MUTATIONS_INJECTED =
   'function removeAlpha(node) {\n' +
   '    let bg = node.css("background-color");\n' +
   '    if (bg.match("^rgba")) {\n' +
-    '        let a = bg.slice(5).split(\',\');\n' +
+  "        let a = bg.slice(5).split(',');\n" +
   '        // Fix for tooltips with broken background\n' +
   '        if (parseInt(a[0]) === parseInt(a[1]) && parseInt(a[1]) === parseInt(a[2]) && parseInt(a[2]) === 0) {\n' +
-    '            a[0] = a[1] = a[2] = \'255\';\n' +
+  "            a[0] = a[1] = a[2] = '255';\n" +
   '        }\n' +
-    '        let newBg =\'rgb(\' + a[0] + \',\' + a[1] + \',\' + a[2] + \')\';\n' +
+  "        let newBg ='rgb(' + a[0] + ',' + a[1] + ',' + a[2] + ')';\n" +
   '        node.css("background-color", newBg);\n' +
   '    }\n' +
   '}\n' +
   '// Observe for planning DOM changes\n' +
   'let observer = new MutationObserver(function(mutations) {\n' +
   '    for (let i = 0; i < mutations.length; i++) {\n' +
-    '        if (mutations[i][\'addedNodes\'].length > 0 &&\n' +
+  "        if (mutations[i]['addedNodes'].length > 0 &&\n" +
   '            ($(mutations[i][\'addedNodes\'][0]).hasClass("fc-event") || $(mutations[i][\'addedNodes\'][0]).hasClass("tooltiptopicevent")))\n' +
-    '            removeAlpha($(mutations[i][\'addedNodes\'][0]))\n' +
+  "            removeAlpha($(mutations[i]['addedNodes'][0]))\n" +
   '    }\n' +
   '});\n' +
   '// observer.observe(document.querySelector(".fc-body"), {attributes: false, childList: true, characterData: false, subtree:true});\n' +
@@ -108,44 +107,48 @@ calendar.option({
   }
 });`;
 
-const CUSTOM_CSS = "body>.container{padding-top:20px; padding-bottom: 50px}header,#entite,#groupe_visibility,#calendar .fc-left,#calendar .fc-right{display:none}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-time{font-size:.5rem}#calendar .fc-month-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-month-view .fc-content-skeleton .fc-time{font-size:.7rem}.fc-axis{font-size:.8rem;width:15px!important}.fc-day-header{font-size:.8rem}.fc-unthemed td.fc-today{background:#be1522; opacity:0.4}";
+const CUSTOM_CSS =
-const CUSTOM_CSS_DARK = "body{background-color:#121212}.fc-unthemed .fc-content,.fc-unthemed .fc-divider,.fc-unthemed .fc-list-heading td,.fc-unthemed .fc-list-view,.fc-unthemed .fc-popover,.fc-unthemed .fc-row,.fc-unthemed tbody,.fc-unthemed td,.fc-unthemed th,.fc-unthemed thead{border-color:#222}.fc-toolbar .fc-center>*,h2,table{color:#fff}.fc-event-container{color:#121212}.fc-event-container .fc-bg{opacity:0.2;background-color:#000}.fc-unthemed td.fc-today{background:#be1522; opacity:0.4}";
+  'body>.container{padding-top:20px; padding-bottom: 50px}header,#entite,#groupe_visibility,#calendar .fc-left,#calendar .fc-right{display:none}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-time{font-size:.5rem}#calendar .fc-month-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-month-view .fc-content-skeleton .fc-time{font-size:.7rem}.fc-axis{font-size:.8rem;width:15px!important}.fc-day-header{font-size:.8rem}.fc-unthemed td.fc-today{background:#be1522; opacity:0.4}';
+const CUSTOM_CSS_DARK =
+  'body{background-color:#121212}.fc-unthemed .fc-content,.fc-unthemed .fc-divider,.fc-unthemed .fc-list-heading td,.fc-unthemed .fc-list-view,.fc-unthemed .fc-popover,.fc-unthemed .fc-row,.fc-unthemed tbody,.fc-unthemed td,.fc-unthemed th,.fc-unthemed thead{border-color:#222}.fc-toolbar .fc-center>*,h2,table{color:#fff}.fc-event-container{color:#121212}.fc-event-container .fc-bg{opacity:0.2;background-color:#000}.fc-unthemed td.fc-today{background:#be1522; opacity:0.4}';
 
 const INJECT_STYLE = `
-$('head').append('<style>` + CUSTOM_CSS + `</style>');
+$('head').append('<style>${CUSTOM_CSS}</style>');
 `;
 
 /**
  * Class defining the app's Planex screen.
  * This screen uses a webview to render the page
  */
-class PlanexScreen extends React.Component<Props, State> {
+class PlanexScreen extends React.Component<PropsType, StateType> {
+  webScreenRef: {current: null | WebViewScreen};
 
-    webScreenRef: { current: null | WebViewScreen };
+  barRef: {current: null | AnimatedBottomBar};
-    barRef: { current: null | AnimatedBottomBar };
 
   customInjectedJS: string;
 
   /**
    * Defines custom injected JavaScript to improve the page display on mobile
    */
-    constructor(props) {
+  constructor(props: PropsType) {
     super(props);
     this.webScreenRef = React.createRef();
     this.barRef = React.createRef();
 
-        let currentGroup = AsyncStorageManager.getString(AsyncStorageManager.PREFERENCES.planexCurrentGroup.key);
+    let currentGroup = AsyncStorageManager.getString(
+      AsyncStorageManager.PREFERENCES.planexCurrentGroup.key,
+    );
     if (currentGroup === '')
-            currentGroup = {name: "SELECT GROUP", id: -1, isFav: false};
+      currentGroup = {name: 'SELECT GROUP', id: -1, isFav: false};
     else {
       currentGroup = JSON.parse(currentGroup);
-            props.navigation.setOptions({title: currentGroup.name})
+      props.navigation.setOptions({title: currentGroup.name});
     }
     this.state = {
       dialogVisible: false,
-            dialogTitle: "",
+      dialogTitle: '',
-            dialogMessage: "",
+      dialogMessage: '',
-            currentGroup: currentGroup,
+      currentGroup,
     };
     this.generateInjectedJS(currentGroup.id);
   }
@@ -154,62 +157,8 @@ class PlanexScreen extends React.Component<Props, State> {
    * Register for events and show the banner after 2 seconds
    */
   componentDidMount() {
-        this.props.navigation.addListener('focus', this.onScreenFocus);
+    const {navigation} = this.props;
-    }
+    navigation.addListener('focus', this.onScreenFocus);
-
-    /**
-     * Callback used when the user clicks on the navigate to settings button.
-     * This will hide the banner and open the SettingsScreen
-     */
-    onGoToSettings = () => this.props.navigation.navigate('settings');
-
-    onScreenFocus = () => {
-        this.handleNavigationParams();
-    };
-
-    /**
-     * If navigations parameters contain a group, set it as selected
-     */
-    handleNavigationParams = () => {
-        if (this.props.route.params != null) {
-            if (this.props.route.params.group !== undefined && this.props.route.params.group !== null) {
-                // reset params to prevent infinite loop
-                this.selectNewGroup(this.props.route.params.group);
-                this.props.navigation.dispatch(CommonActions.setParams({group: null}));
-            }
-        }
-    };
-
-    /**
-     * Sends the webpage a message with the new group to select and save it to preferences
-     *
-     * @param group The group object selected
-     */
-    selectNewGroup(group: group) {
-        this.sendMessage('setGroup', group.id);
-        this.setState({currentGroup: group});
-        AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.planexCurrentGroup.key, group);
-        this.props.navigation.setOptions({title: group.name});
-        this.generateInjectedJS(group.id);
-    }
-
-    /**
-     * Generates custom JavaScript to be injected into the webpage
-     *
-     * @param groupID The current group selected
-     */
-    generateInjectedJS(groupID: number) {
-        this.customInjectedJS = "$(document).ready(function() {"
-            + OBSERVE_MUTATIONS_INJECTED
-            + FULL_CALENDAR_SETTINGS
-            + "displayAde(" + groupID + ");" // Reset Ade
-            + (DateManager.isWeekend(new Date()) ? "calendar.next()" : "")
-            + INJECT_STYLE;
-
-        if (ThemeManager.getNightMode())
-            this.customInjectedJS += "$('head').append('<style>" + CUSTOM_CSS_DARK + "</style>');";
-
-        this.customInjectedJS += 'removeAlpha();});true;'; // Prevents crash on ios
   }
 
   /**
@@ -218,12 +167,57 @@ class PlanexScreen extends React.Component<Props, State> {
    * @param nextProps
    * @returns {boolean}
    */
-    shouldComponentUpdate(nextProps: Props): boolean {
+  shouldComponentUpdate(nextProps: PropsType): boolean {
-        if (nextProps.theme.dark !== this.props.theme.dark)
+    const {props, state} = this;
-            this.generateInjectedJS(this.state.currentGroup.id);
+    if (nextProps.theme.dark !== props.theme.dark)
+      this.generateInjectedJS(state.currentGroup.id);
     return true;
   }
 
+  /**
+   * Gets the Webview, with an error view on top if no group is selected.
+   *
+   * @returns {*}
+   */
+  getWebView(): React.Node {
+    const {props, state} = this;
+    const showWebview = state.currentGroup.id !== -1;
+
+    return (
+      <View style={{height: '100%'}}>
+        {!showWebview ? (
+          <ErrorView
+            navigation={props.navigation}
+            icon="account-clock"
+            message={i18n.t('screens.planex.noGroupSelected')}
+            showRetryButton={false}
+          />
+        ) : null}
+        <WebViewScreen
+          ref={this.webScreenRef}
+          navigation={props.navigation}
+          url={PLANEX_URL}
+          customJS={this.customInjectedJS}
+          onMessage={this.onMessage}
+          onScroll={this.onScroll}
+          showAdvancedControls={false}
+        />
+      </View>
+    );
+  }
+
+  /**
+   * Callback used when the user clicks on the navigate to settings button.
+   * This will hide the banner and open the SettingsScreen
+   */
+  onGoToSettings = () => {
+    const {navigation} = this.props;
+    navigation.navigate('settings');
+  };
+
+  onScreenFocus = () => {
+    this.handleNavigationParams();
+  };
 
   /**
    * Sends a FullCalendar action to the web page inside the webview.
@@ -232,14 +226,12 @@ class PlanexScreen extends React.Component<Props, State> {
    * Or "setGroup" with the group id as data to set the selected group
    * @param data Data to pass to the action
    */
-    sendMessage = (action: string, data: any) => {
+  sendMessage = (action: string, data: string) => {
     let command;
-        if (action === "setGroup")
+    if (action === 'setGroup') command = `displayAde(${data})`;
-            command = "displayAde(" + data + ")";
+    else command = `$('#calendar').fullCalendar('${action}', '${data}')`;
-        else
-            command = "$('#calendar').fullCalendar('" + action + "', '" + data + "')";
     if (this.webScreenRef.current != null)
-            this.webScreenRef.current.injectJavaScript(command + ';true;'); // Injected javascript must end with true
+      this.webScreenRef.current.injectJavaScript(`${command};true;`); // Injected javascript must end with true
   };
 
   /**
@@ -247,17 +239,22 @@ class PlanexScreen extends React.Component<Props, State> {
    *
    * @param event
    */
-    onMessage = (event: { nativeEvent: { data: string } }) => {
+  onMessage = (event: {nativeEvent: {data: string}}) => {
-        const data: { start: string, end: string, title: string, color: string } = JSON.parse(event.nativeEvent.data);
+    const data: {
+      start: string,
+      end: string,
+      title: string,
+      color: string,
+    } = JSON.parse(event.nativeEvent.data);
     const startDate = dateToString(new Date(data.start), true);
     const endDate = dateToString(new Date(data.end), true);
     const startString = getTimeOnlyString(startDate);
     const endString = getTimeOnlyString(endDate);
 
-        let msg = DateManager.getInstance().getTranslatedDate(startDate) + "\n";
+    let msg = `${DateManager.getInstance().getTranslatedDate(startDate)}\n`;
     if (startString != null && endString != null)
-            msg += startString + ' - ' + endString;
+      msg += `${startString} - ${endString}`;
-        this.showDialog(data.title, msg)
+    this.showDialog(data.title, msg);
   };
 
   /**
@@ -289,87 +286,111 @@ class PlanexScreen extends React.Component<Props, State> {
    * @param event
    */
   onScroll = (event: SyntheticEvent<EventTarget>) => {
-        if (this.barRef.current != null)
+    if (this.barRef.current != null) this.barRef.current.onScroll(event);
-            this.barRef.current.onScroll(event);
   };
 
   /**
-     * Gets the Webview, with an error view on top if no group is selected.
+   * If navigations parameters contain a group, set it as selected
-     *
-     * @returns {*}
    */
-    getWebView() {
+  handleNavigationParams = () => {
-        const showWebview = this.state.currentGroup.id !== -1;
+    const {props} = this;
+    if (props.route.params != null) {
+      if (
+        props.route.params.group !== undefined &&
+        props.route.params.group !== null
+      ) {
+        // reset params to prevent infinite loop
+        this.selectNewGroup(props.route.params.group);
+        props.navigation.dispatch(CommonActions.setParams({group: null}));
+      }
+    }
+  };
 
-        return (
+  /**
-            <View style={{height: '100%'}}>
+   * Sends the webpage a message with the new group to select and save it to preferences
-                {!showWebview
+   *
-                    ? <ErrorView
+   * @param group The group object selected
-                        {...this.props}
+   */
-                        icon={'account-clock'}
+  selectNewGroup(group: PlanexGroupType) {
-                        message={i18n.t("screens.planex.noGroupSelected")}
+    const {navigation} = this.props;
-                        showRetryButton={false}
+    this.sendMessage('setGroup', group.id.toString());
-                    />
+    this.setState({currentGroup: group});
-                    : null}
+    AsyncStorageManager.set(
-                <WebViewScreen
+      AsyncStorageManager.PREFERENCES.planexCurrentGroup.key,
-                    ref={this.webScreenRef}
+      group,
-                    navigation={this.props.navigation}
-                    url={PLANEX_URL}
-                    customJS={this.customInjectedJS}
-                    onMessage={this.onMessage}
-                    onScroll={this.onScroll}
-                    showAdvancedControls={false}
-                />
-            </View>
     );
+    navigation.setOptions({title: group.name});
+    this.generateInjectedJS(group.id);
   }
 
-    render() {
+  /**
+   * Generates custom JavaScript to be injected into the webpage
+   *
+   * @param groupID The current group selected
+   */
+  generateInjectedJS(groupID: number) {
+    this.customInjectedJS = `$(document).ready(function() {${OBSERVE_MUTATIONS_INJECTED}${FULL_CALENDAR_SETTINGS}displayAde(${groupID});${
+      // Reset Ade
+      DateManager.isWeekend(new Date()) ? 'calendar.next()' : ''
+    }${INJECT_STYLE}`;
+
+    if (ThemeManager.getNightMode())
+      this.customInjectedJS += `$('head').append('<style>${CUSTOM_CSS_DARK}</style>');`;
+
+    this.customInjectedJS += 'removeAlpha();});true;'; // Prevents crash on ios
+  }
+
+  render(): React.Node {
+    const {props, state} = this;
     return (
+      <View style={{flex: 1}}>
+        {/* Allow to draw webview bellow banner */}
         <View
-                style={{flex: 1}}
+          style={{
-            >
-                {/*Allow to draw webview bellow banner*/}
-                <View style={{
             position: 'absolute',
             height: '100%',
             width: '100%',
           }}>
-                    {this.props.theme.dark // Force component theme update by recreating it on theme change
+          {props.theme.dark ? ( // Force component theme update by recreating it on theme change
-                        ? this.getWebView()
+            this.getWebView()
-                        : <View style={{height: '100%'}}>{this.getWebView()}</View>}
+          ) : (
+            <View style={{height: '100%'}}>{this.getWebView()}</View>
+          )}
         </View>
-                {AsyncStorageManager.getString(AsyncStorageManager.PREFERENCES.defaultStartScreen.key)
+        {AsyncStorageManager.getString(
-                    .toLowerCase() !== 'planex'
+          AsyncStorageManager.PREFERENCES.defaultStartScreen.key,
-                    ? <MascotPopup
+        ).toLowerCase() !== 'planex' ? (
+          <MascotPopup
             prefKey={AsyncStorageManager.PREFERENCES.planexShowBanner.key}
-                    title={i18n.t("screens.planex.mascotDialog.title")}
+            title={i18n.t('screens.planex.mascotDialog.title')}
-                    message={i18n.t("screens.planex.mascotDialog.message")}
+            message={i18n.t('screens.planex.mascotDialog.message')}
-                    icon={"emoticon-kiss"}
+            icon="emoticon-kiss"
             buttons={{
               action: {
-                            message: i18n.t("screens.planex.mascotDialog.ok"),
+                message: i18n.t('screens.planex.mascotDialog.ok'),
-                            icon: "cog",
+                icon: 'cog',
                 onPress: this.onGoToSettings,
               },
               cancel: {
-                            message: i18n.t("screens.planex.mascotDialog.cancel"),
+                message: i18n.t('screens.planex.mascotDialog.cancel'),
-                            icon: "close",
+                icon: 'close',
-                            color: this.props.theme.colors.warning,
+                color: props.theme.colors.warning,
-                        }
+              },
             }}
             emotion={MASCOT_STYLE.INTELLO}
-                /> : null }
+          />
+        ) : null}
         <AlertDialog
-                    visible={this.state.dialogVisible}
+          visible={state.dialogVisible}
           onDismiss={this.hideDialog}
-                    title={this.state.dialogTitle}
+          title={state.dialogTitle}
-                    message={this.state.dialogMessage}/>
+          message={state.dialogMessage}
+        />
         <AnimatedBottomBar
-                    {...this.props}
+          navigation={props.navigation}
           ref={this.barRef}
           onPress={this.sendMessage}
-                    seekAttention={this.state.currentGroup.id === -1}
+          seekAttention={state.currentGroup.id === -1}
         />
       </View>
     );

src/screens/Services/Proximo/ProximoAboutScreen.js

@@ -2,55 +2,71 @@
 
 import * as React from 'react';
 import {Image, View} from 'react-native';
-import i18n from "i18n-js";
+import i18n from 'i18n-js';
 import {Card, List, Paragraph, Text} from 'react-native-paper';
-import CustomTabBar from "../../../components/Tabbar/CustomTabBar";
+import CustomTabBar from '../../../components/Tabbar/CustomTabBar';
-import {StackNavigationProp} from "@react-navigation/stack";
+import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
-import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
 
-type Props = {
+const LOGO = 'https://etud.insa-toulouse.fr/~amicale_app/images/Proximo.png';
-    navigation: StackNavigationProp,
-};
-
-const LOGO = "https://etud.insa-toulouse.fr/~amicale_app/images/Proximo.png";
 
 /**
  * Class defining the proximo about screen.
  */
-export default class ProximoAboutScreen extends React.Component<Props> {
+// eslint-disable-next-line react/prefer-stateless-function
-
+export default class ProximoAboutScreen extends React.Component<null> {
-    render() {
+  render(): React.Node {
     return (
       <CollapsibleScrollView style={{padding: 5}}>
-                <View style={{
+        <View
+          style={{
             width: '100%',
             height: 100,
             marginTop: 20,
             marginBottom: 20,
             justifyContent: 'center',
-                    alignItems: 'center'
+            alignItems: 'center',
           }}>
           <Image
             source={{uri: LOGO}}
-                        style={{height: '100%', width: '100%', resizeMode: "contain"}}/>
+            style={{height: '100%', width: '100%', resizeMode: 'contain'}}
+          />
         </View>
         <Text>{i18n.t('screens.proximo.description')}</Text>
         <Card style={{margin: 5}}>
           <Card.Title
             title={i18n.t('screens.proximo.openingHours')}
-                        left={props => <List.Icon {...props} icon={'clock-outline'}/>}
+            left={({
+              size,
+              color,
+            }: {
+              size: number,
+              color: string,
+            }): React.Node => (
+              <List.Icon size={size} color={color} icon="clock-outline" />
+            )}
           />
           <Card.Content>
             <Paragraph>18h30 - 19h30</Paragraph>
           </Card.Content>
         </Card>
-                <Card style={{margin: 5, marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
+        <Card
+          style={{margin: 5, marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
           <Card.Title
             title={i18n.t('screens.proximo.paymentMethods')}
-                        left={props => <List.Icon {...props} icon={'cash'}/>}
+            left={({
+              size,
+              color,
+            }: {
+              size: number,
+              color: string,
+            }): React.Node => (
+              <List.Icon size={size} color={color} icon="cash" />
+            )}
           />
           <Card.Content>
-                        <Paragraph>{i18n.t('screens.proximo.paymentMethodsDescription')}</Paragraph>
+            <Paragraph>
+              {i18n.t('screens.proximo.paymentMethodsDescription')}
+            </Paragraph>
           </Card.Content>
         </Card>
       </CollapsibleScrollView>

src/screens/Services/Proximo/ProximoListScreen.js

@@ -1,68 +1,84 @@
 // @flow
 
 import * as React from 'react';
-import {Image, Platform, ScrollView, View} from "react-native";
+import {Image, Platform, ScrollView, View} from 'react-native';
-import i18n from "i18n-js";
+import i18n from 'i18n-js';
-import CustomModal from "../../../components/Overrides/CustomModal";
+import {
-import {RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper";
+  RadioButton,
-import {stringMatchQuery} from "../../../utils/Search";
+  Searchbar,
-import ProximoListItem from "../../../components/Lists/Proximo/ProximoListItem";
+  Subheading,
-import MaterialHeaderButtons, {Item} from "../../../components/Overrides/CustomHeaderButton";
+  Text,
-import {StackNavigationProp} from "@react-navigation/stack";
+  Title,
-import type {CustomTheme} from "../../../managers/ThemeManager";
+  withTheme,
-import CollapsibleFlatList from "../../../components/Collapsible/CollapsibleFlatList";
+} from 'react-native-paper';
+import {StackNavigationProp} from '@react-navigation/stack';
+import {Modalize} from 'react-native-modalize';
+import CustomModal from '../../../components/Overrides/CustomModal';
+import {stringMatchQuery} from '../../../utils/Search';
+import ProximoListItem from '../../../components/Lists/Proximo/ProximoListItem';
+import MaterialHeaderButtons, {
+  Item,
+} from '../../../components/Overrides/CustomHeaderButton';
+import type {CustomTheme} from '../../../managers/ThemeManager';
+import CollapsibleFlatList from '../../../components/Collapsible/CollapsibleFlatList';
+import type {ProximoArticleType} from './ProximoMainScreen';
 
-function sortPrice(a, b) {
+function sortPrice(a: ProximoArticleType, b: ProximoArticleType): number {
-    return a.price - b.price;
+  return parseInt(a.price, 10) - parseInt(b.price, 10);
 }
 
-function sortPriceReverse(a, b) {
+function sortPriceReverse(
-    return b.price - a.price;
+  a: ProximoArticleType,
+  b: ProximoArticleType,
+): number {
+  return parseInt(b.price, 10) - parseInt(a.price, 10);
 }
 
-function sortName(a, b) {
+function sortName(a: ProximoArticleType, b: ProximoArticleType): number {
-    if (a.name.toLowerCase() < b.name.toLowerCase())
+  if (a.name.toLowerCase() < b.name.toLowerCase()) return -1;
-        return -1;
+  if (a.name.toLowerCase() > b.name.toLowerCase()) return 1;
-    if (a.name.toLowerCase() > b.name.toLowerCase())
-        return 1;
   return 0;
 }
 
-function sortNameReverse(a, b) {
+function sortNameReverse(a: ProximoArticleType, b: ProximoArticleType): number {
-    if (a.name.toLowerCase() < b.name.toLowerCase())
+  if (a.name.toLowerCase() < b.name.toLowerCase()) return 1;
-        return 1;
+  if (a.name.toLowerCase() > b.name.toLowerCase()) return -1;
-    if (a.name.toLowerCase() > b.name.toLowerCase())
-        return -1;
   return 0;
 }
 
 const LIST_ITEM_HEIGHT = 84;
 
-type Props = {
+type PropsType = {
   navigation: StackNavigationProp,
-    route: { params: { data: { data: Object }, shouldFocusSearchBar: boolean } },
+  route: {
+    params: {
+      data: {data: Array<ProximoArticleType>},
+      shouldFocusSearchBar: boolean,
+    },
+  },
   theme: CustomTheme,
-}
+};
 
-type State = {
+type StateType = {
   currentSortMode: number,
   modalCurrentDisplayItem: React.Node,
   currentSearchString: string,
 };
 
 /**
- * Class defining proximo's article list of a certain category.
+ * Class defining Proximo article list of a certain category.
  */
-class ProximoListScreen extends React.Component<Props, State> {
+class ProximoListScreen extends React.Component<PropsType, StateType> {
+  modalRef: Modalize | null;
+
+  listData: Array<ProximoArticleType>;
 
-    modalRef: Object;
-    listData: Array<Object>;
   shouldFocusSearchBar: boolean;
 
-    constructor(props) {
+  constructor(props: PropsType) {
     super(props);
-        this.listData = this.props.route.params['data']['data'].sort(sortName);
+    this.listData = props.route.params.data.data.sort(sortName);
-        this.shouldFocusSearchBar = this.props.route.params['shouldFocusSearchBar'];
+    this.shouldFocusSearchBar = props.route.params.shouldFocusSearchBar;
     this.state = {
       currentSearchString: '',
       currentSortMode: 3,
@@ -70,69 +86,71 @@ class ProximoListScreen extends React.Component<Props, State> {
     };
   }
 
-
   /**
    * Creates the header content
    */
   componentDidMount() {
-        this.props.navigation.setOptions({
+    const {navigation} = this.props;
+    navigation.setOptions({
       headerRight: this.getSortMenuButton,
       headerTitle: this.getSearchBar,
       headerBackTitleVisible: false,
-            headerTitleContainerStyle: Platform.OS === 'ios' ?
+      headerTitleContainerStyle:
-                {marginHorizontal: 0, width: '70%'} :
+        Platform.OS === 'ios'
-                {marginHorizontal: 0, right: 50, left: 50},
+          ? {marginHorizontal: 0, width: '70%'}
+          : {marginHorizontal: 0, right: 50, left: 50},
     });
   }
 
-    /**
-     * Gets the header search bar
-     *
-     * @return {*}
-     */
-    getSearchBar = () => {
-        return (
-            <Searchbar
-                placeholder={i18n.t('screens.proximo.search')}
-                onChangeText={this.onSearchStringChange}
-            />
-        );
-    };
-
-    /**
-     * Gets the sort menu header button
-     *
-     * @return {*}
-     */
-    getSortMenuButton = () => {
-        return <MaterialHeaderButtons>
-            <Item title="main" iconName="sort" onPress={this.onSortMenuPress}/>
-        </MaterialHeaderButtons>;
-    };
-
   /**
    * Callback used when clicking on the sort menu button.
    * It will open the modal to show a sort selection
    */
   onSortMenuPress = () => {
     this.setState({
-            modalCurrentDisplayItem: this.getModalSortMenu()
+      modalCurrentDisplayItem: this.getModalSortMenu(),
     });
     if (this.modalRef) {
       this.modalRef.open();
     }
   };
 
+  /**
+   * Callback used when the search changes
+   *
+   * @param str The new search string
+   */
+  onSearchStringChange = (str: string) => {
+    this.setState({currentSearchString: str});
+  };
+
+  /**
+   * Callback used when clicking an article in the list.
+   * It opens the modal to show detailed information about the article
+   *
+   * @param item The article pressed
+   */
+  onListItemPress(item: ProximoArticleType) {
+    this.setState({
+      modalCurrentDisplayItem: this.getModalItemContent(item),
+    });
+    if (this.modalRef) {
+      this.modalRef.open();
+    }
+  }
+
   /**
    * Sets the current sort mode.
    *
    * @param mode The number representing the mode
    */
-    setSortMode(mode: number) {
+  setSortMode(mode: string) {
+    const {currentSortMode} = this.state;
+    const currentMode = parseInt(mode, 10);
     this.setState({
-            currentSortMode: mode,
+      currentSortMode: currentMode,
     });
-        switch (mode) {
+    switch (currentMode) {
       case 1:
         this.listData.sort(sortPrice);
         break;
@@ -145,10 +163,11 @@ class ProximoListScreen extends React.Component<Props, State> {
       case 4:
         this.listData.sort(sortNameReverse);
         break;
+      default:
+        this.listData.sort(sortName);
+        break;
     }
-        if (this.modalRef && mode !== this.state.currentSortMode) {
+    if (this.modalRef && currentMode !== currentSortMode) this.modalRef.close();
-            this.modalRef.close();
-        }
   }
 
   /**
@@ -157,24 +176,40 @@ class ProximoListScreen extends React.Component<Props, State> {
    * @param availableStock The quantity available
    * @return
    */
-    getStockColor(availableStock: number) {
+  getStockColor(availableStock: number): string {
+    const {theme} = this.props;
     let color: string;
-        if (availableStock > 3)
+    if (availableStock > 3) color = theme.colors.success;
-            color = this.props.theme.colors.success;
+    else if (availableStock > 0) color = theme.colors.warning;
-        else if (availableStock > 0)
+    else color = theme.colors.danger;
-            color = this.props.theme.colors.warning;
-        else
-            color = this.props.theme.colors.danger;
     return color;
   }
 
   /**
-     * Callback used when the search changes
+   * Gets the sort menu header button
    *
-     * @param str The new search string
+   * @return {*}
    */
-    onSearchStringChange = (str: string) => {
+  getSortMenuButton = (): React.Node => {
-        this.setState({currentSearchString: str})
+    return (
+      <MaterialHeaderButtons>
+        <Item title="main" iconName="sort" onPress={this.onSortMenuPress} />
+      </MaterialHeaderButtons>
+    );
+  };
+
+  /**
+   * Gets the header search bar
+   *
+   * @return {*}
+   */
+  getSearchBar = (): React.Node => {
+    return (
+      <Searchbar
+        placeholder={i18n.t('screens.proximo.search')}
+        onChangeText={this.onSearchStringChange}
+      />
+    );
   };
 
   /**
@@ -183,30 +218,41 @@ class ProximoListScreen extends React.Component<Props, State> {
    * @param item The article to display
    * @return {*}
    */
-    getModalItemContent(item: Object) {
+  getModalItemContent(item: ProximoArticleType): React.Node {
     return (
-            <View style={{
+      <View
+        style={{
           flex: 1,
-                padding: 20
+          padding: 20,
         }}>
         <Title>{item.name}</Title>
-                <View style={{
+        <View
+          style={{
             flexDirection: 'row',
             width: '100%',
             marginTop: 10,
           }}>
-                    <Subheading style={{
+          <Subheading
-                        color: this.getStockColor(parseInt(item.quantity)),
+            style={{
+              color: this.getStockColor(parseInt(item.quantity, 10)),
             }}>
-                        {item.quantity + ' ' + i18n.t('screens.proximo.inStock')}
+            {`${item.quantity} ${i18n.t('screens.proximo.inStock')}`}
           </Subheading>
           <Subheading style={{marginLeft: 'auto'}}>{item.price}€</Subheading>
         </View>
 
         <ScrollView>
-                    <View style={{width: '100%', height: 150, marginTop: 20, marginBottom: 20}}>
+          <View
-                        <Image style={{flex: 1, resizeMode: "contain"}}
+            style={{
-                               source={{uri: item.image}}/>
+              width: '100%',
+              height: 150,
+              marginTop: 20,
+              marginBottom: 20,
+            }}>
+            <Image
+              style={{flex: 1, resizeMode: 'contain'}}
+              source={{uri: item.image}}
+            />
           </View>
           <Text>{item.description}</Text>
         </ScrollView>
@@ -219,51 +265,56 @@ class ProximoListScreen extends React.Component<Props, State> {
    *
    * @return {*}
    */
-    getModalSortMenu() {
+  getModalSortMenu(): React.Node {
+    const {currentSortMode} = this.state;
     return (
-            <View style={{
+      <View
+        style={{
           flex: 1,
-                padding: 20
+          padding: 20,
         }}>
-                <Title style={{marginBottom: 10}}>{i18n.t('screens.proximo.sortOrder')}</Title>
+        <Title style={{marginBottom: 10}}>
+          {i18n.t('screens.proximo.sortOrder')}
+        </Title>
         <RadioButton.Group
-                    onValueChange={value => this.setSortMode(value)}
+          onValueChange={(value: string) => {
-                    value={this.state.currentSortMode}
+            this.setSortMode(value);
-                >
+          }}
-                    <RadioButton.Item label={i18n.t('screens.proximo.sortPrice')} value={1}/>
+          value={currentSortMode}>
-                    <RadioButton.Item label={i18n.t('screens.proximo.sortPriceReverse')} value={2}/>
+          <RadioButton.Item
-                    <RadioButton.Item label={i18n.t('screens.proximo.sortName')} value={3}/>
+            label={i18n.t('screens.proximo.sortPrice')}
-                    <RadioButton.Item label={i18n.t('screens.proximo.sortNameReverse')} value={4}/>
+            value={1}
+          />
+          <RadioButton.Item
+            label={i18n.t('screens.proximo.sortPriceReverse')}
+            value={2}
+          />
+          <RadioButton.Item
+            label={i18n.t('screens.proximo.sortName')}
+            value={3}
+          />
+          <RadioButton.Item
+            label={i18n.t('screens.proximo.sortNameReverse')}
+            value={4}
+          />
         </RadioButton.Group>
       </View>
     );
   }
 
-    /**
-     * Callback used when clicking an article in the list.
-     * It opens the modal to show detailed information about the article
-     *
-     * @param item The article pressed
-     */
-    onListItemPress(item: Object) {
-        this.setState({
-            modalCurrentDisplayItem: this.getModalItemContent(item)
-        });
-        if (this.modalRef) {
-            this.modalRef.open();
-        }
-    }
-
   /**
    * Gets a render item for the given article
    *
    * @param item The article to render
    * @return {*}
    */
-    renderItem = ({item}: Object) => {
+  getRenderItem = ({item}: {item: ProximoArticleType}): React.Node => {
-        if (stringMatchQuery(item.name, this.state.currentSearchString)) {
+    const {currentSearchString} = this.state;
-            const onPress = this.onListItemPress.bind(this, item);
+    if (stringMatchQuery(item.name, currentSearchString)) {
-            const color = this.getStockColor(parseInt(item.quantity));
+      const onPress = () => {
+        this.onListItemPress(item);
+      };
+      const color = this.getStockColor(parseInt(item.quantity, 10));
       return (
         <ProximoListItem
           item={item}
@@ -272,7 +323,7 @@ class ProximoListScreen extends React.Component<Props, State> {
           height={LIST_ITEM_HEIGHT}
         />
       );
-        } else
+    }
     return null;
   };
 
@@ -280,38 +331,45 @@ class ProximoListScreen extends React.Component<Props, State> {
    * Extracts a key for the given article
    *
    * @param item The article to extract the key from
-     * @return {*} The extracted key
+   * @return {string} The extracted key
    */
-    keyExtractor(item: Object) {
+  keyExtractor = (item: ProximoArticleType): string => item.name + item.code;
-        return item.name + item.code;
-    }
 
   /**
    * Callback used when receiving the modal ref
    *
    * @param ref
    */
-    onModalRef = (ref: Object) => {
+  onModalRef = (ref: Modalize) => {
     this.modalRef = ref;
   };
 
-    itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
+  itemLayout = (
+    data: ProximoArticleType,
+    index: number,
+  ): {length: number, offset: number, index: number} => ({
+    length: LIST_ITEM_HEIGHT,
+    offset: LIST_ITEM_HEIGHT * index,
+    index,
+  });
 
-    render() {
+  render(): React.Node {
+    const {state} = this;
     return (
-            <View style={{
+      <View
-                height: '100%'
+        style={{
+          height: '100%',
         }}>
         <CustomModal onRef={this.onModalRef}>
-                    {this.state.modalCurrentDisplayItem}
+          {state.modalCurrentDisplayItem}
         </CustomModal>
         <CollapsibleFlatList
           data={this.listData}
-                    extraData={this.state.currentSearchString + this.state.currentSortMode}
+          extraData={state.currentSearchString + state.currentSortMode}
           keyExtractor={this.keyExtractor}
-                    renderItem={this.renderItem}
+          renderItem={this.getRenderItem}
           // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
-                    removeClippedSubviews={true}
+          removeClippedSubviews
           getItemLayout={this.itemLayout}
           initialNumToRender={10}
         />

src/screens/Services/Proximo/ProximoMainScreen.js

@@ -1,168 +1,81 @@
 // @flow
 
 import * as React from 'react';
-import {View} from 'react-native'
+import i18n from 'i18n-js';
-import i18n from "i18n-js";
-import WebSectionList from "../../../components/Screens/WebSectionList";
 import {List, withTheme} from 'react-native-paper';
-import MaterialHeaderButtons, {Item} from "../../../components/Overrides/CustomHeaderButton";
+import {StackNavigationProp} from '@react-navigation/stack';
-import {StackNavigationProp} from "@react-navigation/stack";
+import WebSectionList from '../../../components/Screens/WebSectionList';
-import type {CustomTheme} from "../../../managers/ThemeManager";
+import MaterialHeaderButtons, {
+  Item,
+} from '../../../components/Overrides/CustomHeaderButton';
+import type {CustomTheme} from '../../../managers/ThemeManager';
+import type {SectionListDataType} from '../../../components/Screens/WebSectionList';
 
-const DATA_URL = "https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json";
+const DATA_URL = 'https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json';
 const LIST_ITEM_HEIGHT = 84;
 
-type Props = {
+export type ProximoCategoryType = {
+  name: string,
+  icon: string,
+  id: string,
+};
+
+export type ProximoArticleType = {
+  name: string,
+  description: string,
+  quantity: string,
+  price: string,
+  code: string,
+  id: string,
+  type: Array<string>,
+  image: string,
+};
+
+export type ProximoMainListItemType = {
+  type: ProximoCategoryType,
+  data: Array<ProximoArticleType>,
+};
+
+export type ProximoDataType = {
+  types: Array<ProximoCategoryType>,
+  articles: Array<ProximoArticleType>,
+};
+
+type PropsType = {
   navigation: StackNavigationProp,
   theme: CustomTheme,
-}
+};
-
-type State = {
-    fetchedData: Object,
-}
 
 /**
  * Class defining the main proximo screen.
  * This screen shows the different categories of articles offered by proximo.
  */
-class ProximoMainScreen extends React.Component<Props, State> {
+class ProximoMainScreen extends React.Component<PropsType> {
-
-    articles: Object;
-
   /**
    * Function used to sort items in the list.
-     * Makes the All category stick to the top and sorts the others by name ascending
+   * Makes the All category sticks to the top and sorts the others by name ascending
    *
    * @param a
    * @param b
    * @return {number}
    */
-    static sortFinalData(a: Object, b: Object) {
+  static sortFinalData(
-        let str1 = a.type.name.toLowerCase();
+    a: ProximoMainListItemType,
-        let str2 = b.type.name.toLowerCase();
+    b: ProximoMainListItemType,
+  ): number {
+    const str1 = a.type.name.toLowerCase();
+    const str2 = b.type.name.toLowerCase();
 
     // Make 'All' category with id -1 stick to the top
-        if (a.type.id === -1)
+    if (a.type.id === -1) return -1;
-            return -1;
+    if (b.type.id === -1) return 1;
-        if (b.type.id === -1)
-            return 1;
 
     // Sort others by name ascending
-        if (str1 < str2)
+    if (str1 < str2) return -1;
-            return -1;
+    if (str1 > str2) return 1;
-        if (str1 > str2)
-            return 1;
     return 0;
   }
 
-    /**
-     * Creates header button
-     */
-    componentDidMount() {
-        const rightButton = this.getHeaderButtons.bind(this);
-        this.props.navigation.setOptions({
-            headerRight: rightButton,
-        });
-    }
-
-    /**
-     * Callback used when the search button is pressed.
-     * This will open a new ProximoListScreen with all items displayed
-     */
-    onPressSearchBtn = () => {
-        let searchScreenData = {
-            shouldFocusSearchBar: true,
-            data: {
-                type: {
-                    id: "0",
-                    name: i18n.t('screens.proximo.all'),
-                    icon: 'star'
-                },
-                data: this.articles !== undefined ?
-                    this.getAvailableArticles(this.articles, undefined) : []
-            },
-        };
-        this.props.navigation.navigate('proximo-list', searchScreenData);
-    };
-
-    /**
-     * Callback used when the about button is pressed.
-     * This will open the ProximoAboutScreen
-     */
-    onPressAboutBtn = () => {
-        this.props.navigation.navigate('proximo-about');
-    }
-
-    /**
-     * Gets the header buttons
-     * @return {*}
-     */
-    getHeaderButtons() {
-        return <MaterialHeaderButtons>
-            <Item title="magnify" iconName="magnify" onPress={this.onPressSearchBtn}/>
-            <Item title="information" iconName="information" onPress={this.onPressAboutBtn}/>
-        </MaterialHeaderButtons>;
-    }
-
-    /**
-     * Extracts a key for the given category
-     *
-     * @param item The category to extract the key from
-     * @return {*} The extracted key
-     */
-    getKeyExtractor(item: Object) {
-        return item !== undefined ? item.type['id'] : undefined;
-    }
-
-    /**
-     * Creates the dataset to be used in the FlatList
-     *
-     * @param fetchedData
-     * @return {*}
-     * */
-    createDataset = (fetchedData: Object) => {
-        return [
-            {
-                title: '',
-                data: this.generateData(fetchedData),
-                keyExtractor: this.getKeyExtractor
-            }
-        ];
-    }
-
-    /**
-     * Generate the data using types and FetchedData.
-     * This will group items under the same type.
-     *
-     * @param fetchedData The array of articles represented by objects
-     * @returns {Array} The formatted dataset
-     */
-    generateData(fetchedData: Object) {
-        let finalData = [];
-        this.articles = undefined;
-        if (fetchedData.types !== undefined && fetchedData.articles !== undefined) {
-            let types = fetchedData.types;
-            this.articles = fetchedData.articles;
-            finalData.push({
-                type: {
-                    id: -1,
-                    name: i18n.t('screens.proximo.all'),
-                    icon: 'star'
-                },
-                data: this.getAvailableArticles(this.articles, undefined)
-            });
-            for (let i = 0; i < types.length; i++) {
-                finalData.push({
-                    type: types[i],
-                    data: this.getAvailableArticles(this.articles, types[i])
-                });
-
-            }
-        }
-        finalData.sort(ProximoMainScreen.sortFinalData);
-        return finalData;
-    }
-
   /**
    * Get an array of available articles (in stock) of the given type
    *
@@ -170,62 +83,205 @@ class ProximoMainScreen extends React.Component<Props, State> {
    * @param type The type of articles to find (undefined for any type)
    * @return {Array} The array of available articles
    */
-    getAvailableArticles(articles: Array<Object>, type: ?Object) {
+  static getAvailableArticles(
-        let availableArticles = [];
+    articles: Array<ProximoArticleType> | null,
-        for (let k = 0; k < articles.length; k++) {
+    type: ?ProximoCategoryType,
-            if ((type !== undefined && type !== null && articles[k]['type'].includes(type['id'])
+  ): Array<ProximoArticleType> {
-                || type === undefined)
+    const availableArticles = [];
-                && parseInt(articles[k]['quantity']) > 0) {
+    if (articles != null) {
-                availableArticles.push(articles[k]);
+      articles.forEach((article: ProximoArticleType) => {
-            }
+        if (
+          ((type != null && article.type.includes(type.id)) || type == null) &&
+          parseInt(article.quantity, 10) > 0
+        )
+          availableArticles.push(article);
+      });
     }
     return availableArticles;
   }
 
+  articles: Array<ProximoArticleType> | null;
+
+  /**
+   * Creates header button
+   */
+  componentDidMount() {
+    const {navigation} = this.props;
+    navigation.setOptions({
+      headerRight: (): React.Node => this.getHeaderButtons(),
+    });
+  }
+
+  /**
+   * Callback used when the search button is pressed.
+   * This will open a new ProximoListScreen with all items displayed
+   */
+  onPressSearchBtn = () => {
+    const {navigation} = this.props;
+    const searchScreenData = {
+      shouldFocusSearchBar: true,
+      data: {
+        type: {
+          id: '0',
+          name: i18n.t('screens.proximo.all'),
+          icon: 'star',
+        },
+        data:
+          this.articles != null
+            ? ProximoMainScreen.getAvailableArticles(this.articles)
+            : [],
+      },
+    };
+    navigation.navigate('proximo-list', searchScreenData);
+  };
+
+  /**
+   * Callback used when the about button is pressed.
+   * This will open the ProximoAboutScreen
+   */
+  onPressAboutBtn = () => {
+    const {navigation} = this.props;
+    navigation.navigate('proximo-about');
+  };
+
+  /**
+   * Gets the header buttons
+   * @return {*}
+   */
+  getHeaderButtons(): React.Node {
+    return (
+      <MaterialHeaderButtons>
+        <Item
+          title="magnify"
+          iconName="magnify"
+          onPress={this.onPressSearchBtn}
+        />
+        <Item
+          title="information"
+          iconName="information"
+          onPress={this.onPressAboutBtn}
+        />
+      </MaterialHeaderButtons>
+    );
+  }
+
+  /**
+   * Extracts a key for the given category
+   *
+   * @param item The category to extract the key from
+   * @return {*} The extracted key
+   */
+  getKeyExtractor = (item: ProximoMainListItemType): string => item.type.id;
+
   /**
    * Gets the given category render item
    *
    * @param item The category to render
    * @return {*}
    */
-    getRenderItem = ({item}: Object) => {
+  getRenderItem = ({item}: {item: ProximoMainListItemType}): React.Node => {
-        let dataToSend = {
+    const {navigation, theme} = this.props;
+    const dataToSend = {
       shouldFocusSearchBar: false,
       data: item,
     };
-        const subtitle = item.data.length + " " + (item.data.length > 1 ? i18n.t('screens.proximo.articles') : i18n.t('screens.proximo.article'));
+    const subtitle = `${item.data.length} ${
-        const onPress = this.props.navigation.navigate.bind(this, 'proximo-list', dataToSend);
+      item.data.length > 1
+        ? i18n.t('screens.proximo.articles')
+        : i18n.t('screens.proximo.article')
+    }`;
+    const onPress = () => {
+      navigation.navigate('proximo-list', dataToSend);
+    };
     if (item.data.length > 0) {
       return (
         <List.Item
           title={item.type.name}
           description={subtitle}
           onPress={onPress}
-                    left={props => <List.Icon
+          left={({size}: {size: number}): React.Node => (
-                        {...props}
+            <List.Icon
+              size={size}
               icon={item.type.icon}
-                        color={this.props.theme.colors.primary}/>}
+              color={theme.colors.primary}
-                    right={props => <List.Icon {...props} icon={'chevron-right'}/>}
+            />
+          )}
+          right={({size, color}: {size: number, color: string}): React.Node => (
+            <List.Icon size={size} color={color} icon="chevron-right" />
+          )}
           style={{
             height: LIST_ITEM_HEIGHT,
             justifyContent: 'center',
           }}
         />
       );
-        } else
+    }
-            return <View/>;
+    return null;
+  };
+
+  /**
+   * Creates the dataset to be used in the FlatList
+   *
+   * @param fetchedData
+   * @return {*}
+   * */
+  createDataset = (
+    fetchedData: ProximoDataType | null,
+  ): SectionListDataType<ProximoMainListItemType> => {
+    return [
+      {
+        title: '',
+        data: this.generateData(fetchedData),
+        keyExtractor: this.getKeyExtractor,
+      },
+    ];
+  };
+
+  /**
+   * Generate the data using types and FetchedData.
+   * This will group items under the same type.
+   *
+   * @param fetchedData The array of articles represented by objects
+   * @returns {Array} The formatted dataset
+   */
+  generateData(
+    fetchedData: ProximoDataType | null,
+  ): Array<ProximoMainListItemType> {
+    const finalData: Array<ProximoMainListItemType> = [];
+    this.articles = null;
+    if (fetchedData != null) {
+      const {types} = fetchedData;
+      this.articles = fetchedData.articles;
+      finalData.push({
+        type: {
+          id: '-1',
+          name: i18n.t('screens.proximo.all'),
+          icon: 'star',
+        },
+        data: ProximoMainScreen.getAvailableArticles(this.articles),
+      });
+      types.forEach((type: ProximoCategoryType) => {
+        finalData.push({
+          type,
+          data: ProximoMainScreen.getAvailableArticles(this.articles, type),
+        });
+      });
+    }
+    finalData.sort(ProximoMainScreen.sortFinalData);
+    return finalData;
   }
 
-    render() {
+  render(): React.Node {
-        const nav = this.props.navigation;
+    const {navigation} = this.props;
     return (
       <WebSectionList
         createDataset={this.createDataset}
-                navigation={nav}
+        navigation={navigation}
         autoRefreshTime={0}
         refreshOnFocus={false}
         fetchUrl={DATA_URL}
-                renderItem={this.getRenderItem}/>
+        renderItem={this.getRenderItem}
+      />
     );
   }
 }

src/utils/EquipmentBooking.js

@@ -1,17 +1,18 @@
 // @flow
 
-import type {Device} from "../screens/Amicale/Equipment/EquipmentListScreen";
+import i18n from 'i18n-js';
-import i18n from "i18n-js";
+import type {DeviceType} from '../screens/Amicale/Equipment/EquipmentListScreen';
-import DateManager from "../managers/DateManager";
+import DateManager from '../managers/DateManager';
-import type {CustomTheme} from "../managers/ThemeManager";
+import type {CustomTheme} from '../managers/ThemeManager';
+import type {MarkedDatesObjectType} from '../screens/Amicale/Equipment/EquipmentRentScreen';
 
 /**
  * Gets the current day at midnight
  *
  * @returns {Date}
  */
-export function getCurrentDay() {
+export function getCurrentDay(): Date {
-    let today = new Date(Date.now());
+  const today = new Date(Date.now());
   today.setUTCHours(0, 0, 0, 0);
   return today;
 }
@@ -22,8 +23,8 @@ export function getCurrentDay() {
  * @param date The date to recover the ISO format from
  * @returns {*}
  */
-export function getISODate(date: Date) {
+export function getISODate(date: Date): string {
-    return date.toISOString().split("T")[0];
+  return date.toISOString().split('T')[0];
 }
 
 /**
@@ -32,17 +33,15 @@ export function getISODate(date: Date) {
  * @param item
  * @returns {boolean}
  */
-export function isEquipmentAvailable(item: Device) {
+export function isEquipmentAvailable(item: DeviceType): boolean {
   let isAvailable = true;
   const today = getCurrentDay();
   const dates = item.booked_at;
-    for (let i = 0; i < dates.length; i++) {
+  dates.forEach((date: {begin: string, end: string}) => {
-        const start = new Date(dates[i].begin);
+    const start = new Date(date.begin);
-        const end = new Date(dates[i].end);
+    const end = new Date(date.end);
-        isAvailable = today < start || today > end;
+    if (!(today < start || today > end)) isAvailable = false;
-        if (!isAvailable)
+  });
-            break;
-    }
   return isAvailable;
 }
 
@@ -52,16 +51,15 @@ export function isEquipmentAvailable(item: Device) {
  * @param item
  * @returns {Date}
  */
-export function getFirstEquipmentAvailability(item: Device) {
+export function getFirstEquipmentAvailability(item: DeviceType): Date {
   let firstAvailability = getCurrentDay();
   const dates = item.booked_at;
-    for (let i = 0; i < dates.length; i++) {
+  dates.forEach((date: {begin: string, end: string}) => {
-        const start = new Date(dates[i].begin);
+    const start = new Date(date.begin);
-        let end = new Date(dates[i].end);
+    const end = new Date(date.end);
     end.setDate(end.getDate() + 1);
-        if (firstAvailability >= start)
+    if (firstAvailability >= start) firstAvailability = end;
-            firstAvailability = end;
+  });
-    }
   return firstAvailability;
 }
 
@@ -70,7 +68,7 @@ export function getFirstEquipmentAvailability(item: Device) {
  *
  * @param date The date to translate
  */
-export function getRelativeDateString(date: Date) {
+export function getRelativeDateString(date: Date): string {
   const today = getCurrentDay();
   const yearDelta = date.getUTCFullYear() - today.getUTCFullYear();
   const monthDelta = date.getUTCMonth() - today.getUTCMonth();
@@ -80,7 +78,7 @@ export function getRelativeDateString(date: Date) {
     translatedString = i18n.t('screens.equipment.otherYear', {
       date: date.getDate(),
       month: DateManager.getInstance().getMonthsOfYear()[date.getMonth()],
-            year: date.getFullYear()
+      year: date.getFullYear(),
     });
   else if (monthDelta > 0)
     translatedString = i18n.t('screens.equipment.otherMonth', {
@@ -111,13 +109,17 @@ export function getRelativeDateString(date: Date) {
  * @param item Item containing booked dates to look for
  * @returns {[string]}
  */
-export function getValidRange(start: Date, end: Date, item: Device | null) {
+export function getValidRange(
-    let direction = start <= end ? 1 : -1;
+  start: Date,
+  end: Date,
+  item: DeviceType | null,
+): Array<string> {
+  const direction = start <= end ? 1 : -1;
   let limit = new Date(end);
   limit.setDate(limit.getDate() + direction); // Limit is excluded, but we want to include range end
   if (item != null) {
     if (direction === 1) {
-            for (let i = 0; i < item.booked_at.length; i++) {
+      for (let i = 0; i < item.booked_at.length; i += 1) {
         const bookLimit = new Date(item.booked_at[i].begin);
         if (start < bookLimit && limit > bookLimit) {
           limit = bookLimit;
@@ -125,7 +127,7 @@ export function getValidRange(start: Date, end: Date, item: Device | null) {
         }
       }
     } else {
-            for (let i = item.booked_at.length - 1; i >= 0; i--) {
+      for (let i = item.booked_at.length - 1; i >= 0; i -= 1) {
         const bookLimit = new Date(item.booked_at[i].end);
         if (start > bookLimit && limit < bookLimit) {
           limit = bookLimit;
@@ -135,14 +137,14 @@ export function getValidRange(start: Date, end: Date, item: Device | null) {
     }
   }
 
-
+  const validRange = [];
-    let validRange = [];
+  const date = new Date(start);
-    let date = new Date(start);
+  while (
-    while ((direction === 1 && date < limit) || (direction === -1 && date > limit)) {
+    (direction === 1 && date < limit) ||
-        if (direction === 1)
+    (direction === -1 && date > limit)
-            validRange.push(getISODate(date));
+  ) {
-        else
+    if (direction === 1) validRange.push(getISODate(date));
-            validRange.unshift(getISODate(date));
+    else validRange.unshift(getISODate(date));
     date.setDate(date.getDate() + direction);
   }
   return validRange;
@@ -157,19 +159,23 @@ export function getValidRange(start: Date, end: Date, item: Device | null) {
  * @param range The range to mark dates for
  * @returns {{}}
  */
-export function generateMarkedDates(isSelection: boolean, theme: CustomTheme, range: Array<string>) {
+export function generateMarkedDates(
-    let markedDates = {}
+  isSelection: boolean,
-    for (let i = 0; i < range.length; i++) {
+  theme: CustomTheme,
+  range: Array<string>,
+): MarkedDatesObjectType {
+  const markedDates = {};
+  for (let i = 0; i < range.length; i += 1) {
     const isStart = i === 0;
     const isEnd = i === range.length - 1;
+    let color;
+    if (isSelection && (isStart || isEnd)) color = theme.colors.primary;
+    else if (isSelection) color = theme.colors.danger;
+    else color = theme.colors.textDisabled;
     markedDates[range[i]] = {
       startingDay: isStart,
       endingDay: isEnd,
-            color: isSelection
+      color,
-                ? isStart || isEnd
-                    ? theme.colors.primary
-                    : theme.colors.danger
-                : theme.colors.textDisabled
     };
   }
   return markedDates;