Improve Proxiwash components to match linter

src/components/Lists/Proxiwash/ProxiwashListItem.js

@@ -1,188 +1,46 @@
-import * as React from 'react';
+// @flow
-import {Avatar, Caption, List, ProgressBar, Surface, Text, withTheme} from 'react-native-paper';
-import {StyleSheet, View} from "react-native";
-import ProxiwashConstants from "../../../constants/ProxiwashConstants";
-import i18n from "i18n-js";
-import AprilFoolsManager from "../../../managers/AprilFoolsManager";
-import * as Animatable from "react-native-animatable";
-import type {CustomTheme} from "../../../managers/ThemeManager";
-import type {Machine} from "../../../screens/Proxiwash/ProxiwashScreen";
 
-type Props = {
+import * as React from 'react';
-    item: Machine,
+import {
+  Avatar,
+  Caption,
+  List,
+  ProgressBar,
+  Surface,
+  Text,
+  withTheme,
+} from 'react-native-paper';
+import {StyleSheet, View} from 'react-native';
+import i18n from 'i18n-js';
+import * as Animatable from 'react-native-animatable';
+import ProxiwashConstants from '../../../constants/ProxiwashConstants';
+import AprilFoolsManager from '../../../managers/AprilFoolsManager';
+import type {CustomTheme} from '../../../managers/ThemeManager';
+import type {ProxiwashMachineType} from '../../../screens/Proxiwash/ProxiwashScreen';
+
+type PropsType = {
+  item: ProxiwashMachineType,
   theme: CustomTheme,
-    onPress: Function,
+  onPress: (
+    title: string,
+    item: ProxiwashMachineType,
+    isDryer: boolean,
+  ) => void,
   isWatched: boolean,
   isDryer: boolean,
   height: number,
-}
+};
 
 const AnimatedIcon = Animatable.createAnimatableComponent(Avatar.Icon);
 
-
-/**
- * Component used to display a proxiwash item, showing machine progression and state
- */
-class ProxiwashListItem extends React.Component<Props> {
-
-    stateColors: Object;
-    stateStrings: Object;
-
-    title: string;
-
-    constructor(props) {
-        super(props);
-        this.stateColors = {};
-        this.stateStrings = {};
-
-        this.updateStateStrings();
-
-        let displayNumber = props.item.number;
-        if (AprilFoolsManager.getInstance().isAprilFoolsEnabled())
-            displayNumber = AprilFoolsManager.getProxiwashMachineDisplayNumber(parseInt(props.item.number));
-
-        this.title = props.isDryer
-            ? i18n.t('screens.proxiwash.dryer')
-            : i18n.t('screens.proxiwash.washer');
-        this.title += ' n°' + displayNumber;
-    }
-
-    shouldComponentUpdate(nextProps: Props): boolean {
-        const props = this.props;
-        return (nextProps.theme.dark !== props.theme.dark)
-            || (nextProps.item.state !== props.item.state)
-            || (nextProps.item.donePercent !== props.item.donePercent)
-            || (nextProps.isWatched !== props.isWatched);
-    }
-
-    updateStateStrings() {
-        this.stateStrings[ProxiwashConstants.machineStates.AVAILABLE] = i18n.t('screens.proxiwash.states.ready');
-        this.stateStrings[ProxiwashConstants.machineStates.RUNNING] = i18n.t('screens.proxiwash.states.running');
-        this.stateStrings[ProxiwashConstants.machineStates.RUNNING_NOT_STARTED] = i18n.t('screens.proxiwash.states.runningNotStarted');
-        this.stateStrings[ProxiwashConstants.machineStates.FINISHED] = i18n.t('screens.proxiwash.states.finished');
-        this.stateStrings[ProxiwashConstants.machineStates.UNAVAILABLE] = i18n.t('screens.proxiwash.states.broken');
-        this.stateStrings[ProxiwashConstants.machineStates.ERROR] = i18n.t('screens.proxiwash.states.error');
-        this.stateStrings[ProxiwashConstants.machineStates.UNKNOWN] = i18n.t('screens.proxiwash.states.unknown');
-    }
-
-    updateStateColors() {
-        const colors = this.props.theme.colors;
-        this.stateColors[ProxiwashConstants.machineStates.AVAILABLE] = colors.proxiwashReadyColor;
-        this.stateColors[ProxiwashConstants.machineStates.RUNNING] = colors.proxiwashRunningColor;
-        this.stateColors[ProxiwashConstants.machineStates.RUNNING_NOT_STARTED] = colors.proxiwashRunningNotStartedColor;
-        this.stateColors[ProxiwashConstants.machineStates.FINISHED] = colors.proxiwashFinishedColor;
-        this.stateColors[ProxiwashConstants.machineStates.UNAVAILABLE] = colors.proxiwashBrokenColor;
-        this.stateColors[ProxiwashConstants.machineStates.ERROR] = colors.proxiwashErrorColor;
-        this.stateColors[ProxiwashConstants.machineStates.UNKNOWN] = colors.proxiwashUnknownColor;
-    }
-
-    onListItemPress = () => this.props.onPress(this.title, this.props.item, this.props.isDryer);
-
-    render() {
-        const props = this.props;
-        const colors = props.theme.colors;
-        const machineState = props.item.state;
-        const isRunning = machineState === ProxiwashConstants.machineStates.RUNNING;
-        const isReady = machineState === ProxiwashConstants.machineStates.AVAILABLE;
-        const description = isRunning ? props.item.startTime + '/' + props.item.endTime : '';
-        const stateIcon = ProxiwashConstants.stateIcons[machineState];
-        const stateString = this.stateStrings[machineState];
-        const progress = isRunning
-            ? props.item.donePercent !== ''
-                ? parseFloat(props.item.donePercent) / 100
-                : 0
-            : 1;
-
-        const icon = props.isWatched
-            ? <AnimatedIcon
-                icon={'bell-ring'}
-                animation={"rubberBand"}
-                useNativeDriver
-                size={50}
-                color={colors.primary}
-                style={styles.icon}
-            />
-            : <AnimatedIcon
-                icon={props.isDryer ? 'tumble-dryer' : 'washing-machine'}
-                animation={isRunning ? "pulse" : undefined}
-                iterationCount={"infinite"}
-                easing={"linear"}
-                duration={1000}
-                useNativeDriver
-                size={40}
-                color={colors.text}
-                style={styles.icon}
-            />;
-        this.updateStateColors();
-        return (
-            <Surface
-                style={{
-                    ...styles.container,
-                    height: props.height,
-                    borderRadius: 4,
-                }}
-            >
-                {
-                    !isReady
-                        ? <ProgressBar
-                            style={{
-                                ...styles.progressBar,
-                                height: props.height
-                            }}
-                            progress={progress}
-                            color={this.stateColors[machineState]}
-                        />
-                        : null
-                }
-                <List.Item
-                    title={this.title}
-                    description={description}
-                    style={{
-                        height: props.height,
-                        justifyContent: 'center',
-                    }}
-                    onPress={this.onListItemPress}
-                    left={() => icon}
-                    right={() => (
-                        <View style={{flexDirection: 'row',}}>
-                            <View style={{justifyContent: 'center',}}>
-                                <Text style={
-                                    machineState === ProxiwashConstants.machineStates.FINISHED ?
-                                        {fontWeight: 'bold',} : {}
-                                }
-                                >
-                                    {stateString}
-                                </Text>
-                                {
-                                    machineState === ProxiwashConstants.machineStates.RUNNING
-                                        ? <Caption>{props.item.remainingTime} min</Caption>
-                                        : null
-                                }
-
-                            </View>
-                            <View style={{justifyContent: 'center',}}>
-                                <Avatar.Icon
-                                    icon={stateIcon}
-                                    color={colors.text}
-                                    size={30}
-                                    style={styles.icon}
-                                />
-                            </View>
-                        </View>)}
-                />
-            </Surface>
-        );
-    }
-}
-
 const styles = StyleSheet.create({
   container: {
     margin: 5,
     justifyContent: 'center',
-        elevation: 1
+    elevation: 1,
   },
   icon: {
-        backgroundColor: 'transparent'
+    backgroundColor: 'transparent',
   },
   progressBar: {
     position: 'absolute',
@@ -191,4 +49,188 @@ const styles = StyleSheet.create({
   },
 });
 
+/**
+ * Component used to display a proxiwash item, showing machine progression and state
+ */
+class ProxiwashListItem extends React.Component<PropsType> {
+  stateColors: {[key: string]: string};
+
+  stateStrings: {[key: string]: string};
+
+  title: string;
+
+  constructor(props: PropsType) {
+    super(props);
+    this.stateColors = {};
+    this.stateStrings = {};
+
+    this.updateStateStrings();
+
+    let displayNumber = props.item.number;
+    if (AprilFoolsManager.getInstance().isAprilFoolsEnabled())
+      displayNumber = AprilFoolsManager.getProxiwashMachineDisplayNumber(
+        parseInt(props.item.number, 10),
+      );
+
+    this.title = props.isDryer
+      ? i18n.t('screens.proxiwash.dryer')
+      : i18n.t('screens.proxiwash.washer');
+    this.title += ` n°${displayNumber}`;
+  }
+
+  shouldComponentUpdate(nextProps: PropsType): boolean {
+    const {props} = this;
+    return (
+      nextProps.theme.dark !== props.theme.dark ||
+      nextProps.item.state !== props.item.state ||
+      nextProps.item.donePercent !== props.item.donePercent ||
+      nextProps.isWatched !== props.isWatched
+    );
+  }
+
+  onListItemPress = () => {
+    const {props} = this;
+    props.onPress(this.title, props.item, props.isDryer);
+  };
+
+  updateStateStrings() {
+    this.stateStrings[ProxiwashConstants.machineStates.AVAILABLE] = i18n.t(
+      'screens.proxiwash.states.ready',
+    );
+    this.stateStrings[ProxiwashConstants.machineStates.RUNNING] = i18n.t(
+      'screens.proxiwash.states.running',
+    );
+    this.stateStrings[
+      ProxiwashConstants.machineStates.RUNNING_NOT_STARTED
+    ] = i18n.t('screens.proxiwash.states.runningNotStarted');
+    this.stateStrings[ProxiwashConstants.machineStates.FINISHED] = i18n.t(
+      'screens.proxiwash.states.finished',
+    );
+    this.stateStrings[ProxiwashConstants.machineStates.UNAVAILABLE] = i18n.t(
+      'screens.proxiwash.states.broken',
+    );
+    this.stateStrings[ProxiwashConstants.machineStates.ERROR] = i18n.t(
+      'screens.proxiwash.states.error',
+    );
+    this.stateStrings[ProxiwashConstants.machineStates.UNKNOWN] = i18n.t(
+      'screens.proxiwash.states.unknown',
+    );
+  }
+
+  updateStateColors() {
+    const {props} = this;
+    const {colors} = props.theme;
+    this.stateColors[ProxiwashConstants.machineStates.AVAILABLE] =
+      colors.proxiwashReadyColor;
+    this.stateColors[ProxiwashConstants.machineStates.RUNNING] =
+      colors.proxiwashRunningColor;
+    this.stateColors[ProxiwashConstants.machineStates.RUNNING_NOT_STARTED] =
+      colors.proxiwashRunningNotStartedColor;
+    this.stateColors[ProxiwashConstants.machineStates.FINISHED] =
+      colors.proxiwashFinishedColor;
+    this.stateColors[ProxiwashConstants.machineStates.UNAVAILABLE] =
+      colors.proxiwashBrokenColor;
+    this.stateColors[ProxiwashConstants.machineStates.ERROR] =
+      colors.proxiwashErrorColor;
+    this.stateColors[ProxiwashConstants.machineStates.UNKNOWN] =
+      colors.proxiwashUnknownColor;
+  }
+
+  render(): React.Node {
+    const {props} = this;
+    const {colors} = props.theme;
+    const machineState = props.item.state;
+    const isRunning = machineState === ProxiwashConstants.machineStates.RUNNING;
+    const isReady = machineState === ProxiwashConstants.machineStates.AVAILABLE;
+    const description = isRunning
+      ? `${props.item.startTime}/${props.item.endTime}`
+      : '';
+    const stateIcon = ProxiwashConstants.stateIcons[machineState];
+    const stateString = this.stateStrings[machineState];
+    let progress;
+    if (isRunning && props.item.donePercent !== '')
+      progress = parseFloat(props.item.donePercent) / 100;
+    else if (isRunning) progress = 0;
+    else progress = 1;
+
+    const icon = props.isWatched ? (
+      <AnimatedIcon
+        icon="bell-ring"
+        animation="rubberBand"
+        useNativeDriver
+        size={50}
+        color={colors.primary}
+        style={styles.icon}
+      />
+    ) : (
+      <AnimatedIcon
+        icon={props.isDryer ? 'tumble-dryer' : 'washing-machine'}
+        animation={isRunning ? 'pulse' : undefined}
+        iterationCount="infinite"
+        easing="linear"
+        duration={1000}
+        useNativeDriver
+        size={40}
+        color={colors.text}
+        style={styles.icon}
+      />
+    );
+    this.updateStateColors();
+    return (
+      <Surface
+        style={{
+          ...styles.container,
+          height: props.height,
+          borderRadius: 4,
+        }}>
+        {!isReady ? (
+          <ProgressBar
+            style={{
+              ...styles.progressBar,
+              height: props.height,
+            }}
+            progress={progress}
+            color={this.stateColors[machineState]}
+          />
+        ) : null}
+        <List.Item
+          title={this.title}
+          description={description}
+          style={{
+            height: props.height,
+            justifyContent: 'center',
+          }}
+          onPress={this.onListItemPress}
+          left={(): React.Node => icon}
+          right={(): React.Node => (
+            <View style={{flexDirection: 'row'}}>
+              <View style={{justifyContent: 'center'}}>
+                <Text
+                  style={
+                    machineState === ProxiwashConstants.machineStates.FINISHED
+                      ? {fontWeight: 'bold'}
+                      : {}
+                  }>
+                  {stateString}
+                </Text>
+                {machineState === ProxiwashConstants.machineStates.RUNNING ? (
+                  <Caption>{props.item.remainingTime} min</Caption>
+                ) : null}
+              </View>
+              <View style={{justifyContent: 'center'}}>
+                <Avatar.Icon
+                  icon={stateIcon}
+                  color={colors.text}
+                  size={30}
+                  style={styles.icon}
+                />
+              </View>
+            </View>
+          )}
+        />
+      </Surface>
+    );
+  }
+}
+
 export default withTheme(ProxiwashListItem);

src/components/Lists/Proxiwash/ProxiwashSectionHeader.js

@@ -1,56 +1,17 @@
+// @flow
+
 import * as React from 'react';
 import {Avatar, Text, withTheme} from 'react-native-paper';
-import {StyleSheet, View} from "react-native";
+import {StyleSheet, View} from 'react-native';
-import i18n from "i18n-js";
+import i18n from 'i18n-js';
+import type {CustomTheme} from '../../../managers/ThemeManager';
 
-type Props = {
+type PropsType = {
+  theme: CustomTheme,
   title: string,
   isDryer: boolean,
   nbAvailable: number,
-}
+};
-
-/**
- * Component used to display a proxiwash item, showing machine progression and state
- */
-class ProxiwashListItem extends React.Component<Props> {
-
-    constructor(props) {
-        super(props);
-    }
-
-    shouldComponentUpdate(nextProps: Props) {
-        return (nextProps.theme.dark !== this.props.theme.dark)
-            || (nextProps.nbAvailable !== this.props.nbAvailable)
-    }
-
-    render() {
-        const props = this.props;
-        const subtitle = props.nbAvailable + ' ' + (
-            (props.nbAvailable <= 1)
-                ? i18n.t('screens.proxiwash.numAvailable')
-                : i18n.t('screens.proxiwash.numAvailablePlural'));
-        const iconColor = props.nbAvailable > 0
-        ? this.props.theme.colors.success
-        : this.props.theme.colors.primary;
-        return (
-            <View style={styles.container}>
-                <Avatar.Icon
-                    icon={props.isDryer ? 'tumble-dryer' : 'washing-machine'}
-                    color={iconColor}
-                    style={styles.icon}
-                />
-                <View style={{justifyContent: 'center'}}>
-                    <Text style={styles.text}>
-                        {props.title}
-                    </Text>
-                    <Text style={{color: this.props.theme.colors.subtitle}}>
-                        {subtitle}
-                    </Text>
-                </View>
-            </View>
-        );
-    }
-}
 
 const styles = StyleSheet.create({
   container: {
@@ -61,12 +22,51 @@ const styles = StyleSheet.create({
     marginTop: 20,
   },
   icon: {
-        backgroundColor: 'transparent'
+    backgroundColor: 'transparent',
   },
   text: {
     fontSize: 20,
     fontWeight: 'bold',
-    }
+  },
 });
 
+/**
+ * Component used to display a proxiwash item, showing machine progression and state
+ */
+class ProxiwashListItem extends React.Component<PropsType> {
+  shouldComponentUpdate(nextProps: PropsType): boolean {
+    const {props} = this;
+    return (
+      nextProps.theme.dark !== props.theme.dark ||
+      nextProps.nbAvailable !== props.nbAvailable
+    );
+  }
+
+  render(): React.Node {
+    const {props} = this;
+    const subtitle = `${props.nbAvailable} ${
+      props.nbAvailable <= 1
+        ? i18n.t('screens.proxiwash.numAvailable')
+        : i18n.t('screens.proxiwash.numAvailablePlural')
+    }`;
+    const iconColor =
+      props.nbAvailable > 0
+        ? props.theme.colors.success
+        : props.theme.colors.primary;
+    return (
+      <View style={styles.container}>
+        <Avatar.Icon
+          icon={props.isDryer ? 'tumble-dryer' : 'washing-machine'}
+          color={iconColor}
+          style={styles.icon}
+        />
+        <View style={{justifyContent: 'center'}}>
+          <Text style={styles.text}>{props.title}</Text>
+          <Text style={{color: props.theme.colors.subtitle}}>{subtitle}</Text>
+        </View>
+      </View>
+    );
+  }
+}
+
 export default withTheme(ProxiwashListItem);

src/screens/Proxiwash/ProxiwashAboutScreen.js

@@ -2,43 +2,48 @@
 
 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, Title} from 'react-native-paper';
-import CustomTabBar from "../../components/Tabbar/CustomTabBar";
+import CustomTabBar from '../../components/Tabbar/CustomTabBar';
-import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
+import CollapsibleScrollView from '../../components/Collapsible/CollapsibleScrollView';
 
-type Props = {};
+const LOGO = 'https://etud.insa-toulouse.fr/~amicale_app/images/Proxiwash.png';
-
-const LOGO = "https://etud.insa-toulouse.fr/~amicale_app/images/Proxiwash.png";
 
 /**
  * Class defining the proxiwash about screen.
  */
-export default class ProxiwashAboutScreen extends React.Component<Props> {
+// eslint-disable-next-line react/prefer-stateless-function
-
+export default class ProxiwashAboutScreen extends React.Component<null> {
-    render() {
+  render(): React.Node {
     return (
-            <CollapsibleScrollView
+      <CollapsibleScrollView style={{padding: 5}} hasTab>
-                style={{padding: 5}}
+        <View
-                hasTab={true}
+          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.proxiwash.description')}</Text>
         <Card style={{margin: 5}}>
           <Card.Title
             title={i18n.t('screens.proxiwash.dryer')}
-                        left={props => <List.Icon {...props} icon={'tumble-dryer'}/>}
+            left={({
+              size,
+              color,
+            }: {
+              size: number,
+              color: string,
+            }): React.Node => (
+              <List.Icon size={size} color={color} icon="tumble-dryer" />
+            )}
           />
           <Card.Content>
             <Title>{i18n.t('screens.proxiwash.procedure')}</Title>
@@ -51,7 +56,15 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
         <Card style={{margin: 5}}>
           <Card.Title
             title={i18n.t('screens.proxiwash.washer')}
-                        left={props => <List.Icon {...props} icon={'washing-machine'}/>}
+            left={({
+              size,
+              color,
+            }: {
+              size: number,
+              color: string,
+            }): React.Node => (
+              <List.Icon size={size} color={color} icon="washing-machine" />
+            )}
           />
           <Card.Content>
             <Title>{i18n.t('screens.proxiwash.procedure')}</Title>
@@ -64,20 +77,39 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
         <Card style={{margin: 5}}>
           <Card.Title
             title={i18n.t('screens.proxiwash.tariffs')}
-                        left={props => <List.Icon {...props} icon={'circle-multiple'}/>}
+            left={({
+              size,
+              color,
+            }: {
+              size: number,
+              color: string,
+            }): React.Node => (
+              <List.Icon size={size} color={color} icon="circle-multiple" />
+            )}
           />
           <Card.Content>
             <Paragraph>{i18n.t('screens.proxiwash.washersTariff')}</Paragraph>
             <Paragraph>{i18n.t('screens.proxiwash.dryersTariff')}</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.proxiwash.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.proxiwash.paymentMethodsDescription')}</Paragraph>
+            <Paragraph>
+              {i18n.t('screens.proxiwash.paymentMethodsDescription')}
+            </Paragraph>
           </Card.Content>
         </Card>
       </CollapsibleScrollView>

src/screens/Proxiwash/ProxiwashScreen.js

@@ -2,32 +2,40 @@
 
 import * as React from 'react';
 import {Alert, View} from 'react-native';
-import i18n from "i18n-js";
+import i18n from 'i18n-js';
-import WebSectionList from "../../components/Screens/WebSectionList";
-import * as Notifications from "../../utils/Notifications";
-import AsyncStorageManager from "../../managers/AsyncStorageManager";
 import {Avatar, Button, Card, Text, withTheme} from 'react-native-paper';
-import ProxiwashListItem from "../../components/Lists/Proxiwash/ProxiwashListItem";
+import {StackNavigationProp} from '@react-navigation/stack';
-import ProxiwashConstants from "../../constants/ProxiwashConstants";
+import {Modalize} from 'react-native-modalize';
-import CustomModal from "../../components/Overrides/CustomModal";
+import WebSectionList from '../../components/Screens/WebSectionList';
-import AprilFoolsManager from "../../managers/AprilFoolsManager";
+import * as Notifications from '../../utils/Notifications';
-import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHeaderButton";
+import AsyncStorageManager from '../../managers/AsyncStorageManager';
-import ProxiwashSectionHeader from "../../components/Lists/Proxiwash/ProxiwashSectionHeader";
+import ProxiwashListItem from '../../components/Lists/Proxiwash/ProxiwashListItem';
-import type {CustomTheme} from "../../managers/ThemeManager";
+import ProxiwashConstants from '../../constants/ProxiwashConstants';
-import {StackNavigationProp} from "@react-navigation/stack";
+import CustomModal from '../../components/Overrides/CustomModal';
-import {getCleanedMachineWatched, getMachineEndDate, isMachineWatched} from "../../utils/Proxiwash";
+import AprilFoolsManager from '../../managers/AprilFoolsManager';
-import {Modalize} from "react-native-modalize";
+import MaterialHeaderButtons, {
-import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
+  Item,
-import MascotPopup from "../../components/Mascot/MascotPopup";
+} from '../../components/Overrides/CustomHeaderButton';
+import ProxiwashSectionHeader from '../../components/Lists/Proxiwash/ProxiwashSectionHeader';
+import type {CustomTheme} from '../../managers/ThemeManager';
+import {
+  getCleanedMachineWatched,
+  getMachineEndDate,
+  isMachineWatched,
+} from '../../utils/Proxiwash';
+import {MASCOT_STYLE} from '../../components/Mascot/Mascot';
+import MascotPopup from '../../components/Mascot/MascotPopup';
+import type {SectionListDataType} from '../../components/Screens/WebSectionList';
 
-const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/v2/washinsa/washinsa_data.json";
+const DATA_URL =
+  'https://etud.insa-toulouse.fr/~amicale_app/v2/washinsa/washinsa_data.json';
 
-let modalStateStrings = {};
+const modalStateStrings = {};
 
 const REFRESH_TIME = 1000 * 10; // Refresh every 10 seconds
 const LIST_ITEM_HEIGHT = 64;
 
-export type Machine = {
+export type ProxiwashMachineType = {
   number: string,
   state: string,
   startTime: string,
@@ -35,62 +43,89 @@ export type Machine = {
   donePercent: string,
   remainingTime: string,
   program: string,
-}
-
-type Props = {
-    navigation: StackNavigationProp,
-    theme: CustomTheme,
-}
-
-type State = {
-    refreshing: boolean,
-    modalCurrentDisplayItem: React.Node,
-    machinesWatched: Array<Machine>,
 };
 
+type PropsType = {
+  navigation: StackNavigationProp,
+  theme: CustomTheme,
+};
+
+type StateType = {
+  modalCurrentDisplayItem: React.Node,
+  machinesWatched: Array<ProxiwashMachineType>,
+};
 
 /**
  * Class defining the app's proxiwash screen. This screen shows information about washing machines and
  * dryers, taken from a scrapper reading proxiwash website
  */
-class ProxiwashScreen extends React.Component<Props, State> {
+class ProxiwashScreen extends React.Component<PropsType, StateType> {
+  /**
+   * Shows a warning telling the user notifications are disabled for the app
+   */
+  static showNotificationsDisabledWarning() {
+    Alert.alert(
+      i18n.t('screens.proxiwash.modal.notificationErrorTitle'),
+      i18n.t('screens.proxiwash.modal.notificationErrorDescription'),
+    );
+  }
 
   modalRef: null | Modalize;
 
   fetchedData: {
-        dryers: Array<Machine>,
+    dryers: Array<ProxiwashMachineType>,
-        washers: Array<Machine>,
+    washers: Array<ProxiwashMachineType>,
-    };
-
-    state = {
-        refreshing: false,
-        modalCurrentDisplayItem: null,
-        machinesWatched: AsyncStorageManager.getObject(AsyncStorageManager.PREFERENCES.proxiwashWatchedMachines.key),
   };
 
   /**
    * Creates machine state parameters using current theme and translations
    */
-    constructor(props) {
+  constructor() {
-        super(props);
+    super();
-        modalStateStrings[ProxiwashConstants.machineStates.AVAILABLE] = i18n.t('screens.proxiwash.modal.ready');
+    this.state = {
-        modalStateStrings[ProxiwashConstants.machineStates.RUNNING] = i18n.t('screens.proxiwash.modal.running');
+      modalCurrentDisplayItem: null,
-        modalStateStrings[ProxiwashConstants.machineStates.RUNNING_NOT_STARTED] = i18n.t('screens.proxiwash.modal.runningNotStarted');
+      machinesWatched: AsyncStorageManager.getObject(
-        modalStateStrings[ProxiwashConstants.machineStates.FINISHED] = i18n.t('screens.proxiwash.modal.finished');
+        AsyncStorageManager.PREFERENCES.proxiwashWatchedMachines.key,
-        modalStateStrings[ProxiwashConstants.machineStates.UNAVAILABLE] = i18n.t('screens.proxiwash.modal.broken');
+      ),
-        modalStateStrings[ProxiwashConstants.machineStates.ERROR] = i18n.t('screens.proxiwash.modal.error');
+    };
-        modalStateStrings[ProxiwashConstants.machineStates.UNKNOWN] = i18n.t('screens.proxiwash.modal.unknown');
+    modalStateStrings[ProxiwashConstants.machineStates.AVAILABLE] = i18n.t(
+      'screens.proxiwash.modal.ready',
+    );
+    modalStateStrings[ProxiwashConstants.machineStates.RUNNING] = i18n.t(
+      'screens.proxiwash.modal.running',
+    );
+    modalStateStrings[
+      ProxiwashConstants.machineStates.RUNNING_NOT_STARTED
+    ] = i18n.t('screens.proxiwash.modal.runningNotStarted');
+    modalStateStrings[ProxiwashConstants.machineStates.FINISHED] = i18n.t(
+      'screens.proxiwash.modal.finished',
+    );
+    modalStateStrings[ProxiwashConstants.machineStates.UNAVAILABLE] = i18n.t(
+      'screens.proxiwash.modal.broken',
+    );
+    modalStateStrings[ProxiwashConstants.machineStates.ERROR] = i18n.t(
+      'screens.proxiwash.modal.error',
+    );
+    modalStateStrings[ProxiwashConstants.machineStates.UNKNOWN] = i18n.t(
+      'screens.proxiwash.modal.unknown',
+    );
   }
 
   /**
    * Setup notification channel for android and add listeners to detect notifications fired
    */
   componentDidMount() {
-        this.props.navigation.setOptions({
+    const {navigation} = this.props;
-            headerRight: () =>
+    navigation.setOptions({
+      headerRight: (): React.Node => (
         <MaterialHeaderButtons>
-                    <Item title="information" iconName="information" onPress={this.onAboutPress}/>
+          <Item
-                </MaterialHeaderButtons>,
+            title="information"
+            iconName="information"
+            onPress={this.onAboutPress}
+          />
+        </MaterialHeaderButtons>
+      ),
     });
   }
 
@@ -98,7 +133,158 @@ class ProxiwashScreen extends React.Component<Props, State> {
    * Callback used when pressing the about button.
    * This will open the ProxiwashAboutScreen.
    */
-    onAboutPress = () => this.props.navigation.navigate('proxiwash-about');
+  onAboutPress = () => {
+    const {navigation} = this.props;
+    navigation.navigate('proxiwash-about');
+  };
+
+  /**
+   * Callback used when the user clicks on enable notifications for a machine
+   *
+   * @param machine The machine to set notifications for
+   */
+  onSetupNotificationsPress(machine: ProxiwashMachineType) {
+    if (this.modalRef) {
+      this.modalRef.close();
+    }
+    this.setupNotifications(machine);
+  }
+
+  /**
+   * Callback used when receiving modal ref
+   *
+   * @param ref
+   */
+  onModalRef = (ref: Modalize) => {
+    this.modalRef = ref;
+  };
+
+  /**
+   * Generates the modal content.
+   * This shows information for the given machine.
+   *
+   * @param title The title to use
+   * @param item The item to display information for in the modal
+   * @param isDryer True if the given item is a dryer
+   * @return {*}
+   */
+  getModalContent(
+    title: string,
+    item: ProxiwashMachineType,
+    isDryer: boolean,
+  ): React.Node {
+    const {props, state} = this;
+    let button = {
+      text: i18n.t('screens.proxiwash.modal.ok'),
+      icon: '',
+      onPress: undefined,
+    };
+    let message = modalStateStrings[item.state];
+    const onPress = this.onSetupNotificationsPress.bind(this, item);
+    if (item.state === ProxiwashConstants.machineStates.RUNNING) {
+      let remainingTime = parseInt(item.remainingTime, 10);
+      if (remainingTime < 0) remainingTime = 0;
+
+      button = {
+        text: isMachineWatched(item, state.machinesWatched)
+          ? i18n.t('screens.proxiwash.modal.disableNotifications')
+          : i18n.t('screens.proxiwash.modal.enableNotifications'),
+        icon: '',
+        onPress,
+      };
+      message = i18n.t('screens.proxiwash.modal.running', {
+        start: item.startTime,
+        end: item.endTime,
+        remaining: remainingTime,
+        program: item.program,
+      });
+    } else if (item.state === ProxiwashConstants.machineStates.AVAILABLE) {
+      if (isDryer) message += `\n${i18n.t('screens.proxiwash.dryersTariff')}`;
+      else message += `\n${i18n.t('screens.proxiwash.washersTariff')}`;
+    }
+    return (
+      <View
+        style={{
+          flex: 1,
+          padding: 20,
+        }}>
+        <Card.Title
+          title={title}
+          left={(): React.Node => (
+            <Avatar.Icon
+              icon={isDryer ? 'tumble-dryer' : 'washing-machine'}
+              color={props.theme.colors.text}
+              style={{backgroundColor: 'transparent'}}
+            />
+          )}
+        />
+        <Card.Content>
+          <Text>{message}</Text>
+        </Card.Content>
+
+        {button.onPress !== undefined ? (
+          <Card.Actions>
+            <Button
+              icon={button.icon}
+              mode="contained"
+              onPress={button.onPress}
+              style={{marginLeft: 'auto', marginRight: 'auto'}}>
+              {button.text}
+            </Button>
+          </Card.Actions>
+        ) : null}
+      </View>
+    );
+  }
+
+  /**
+   * Gets the section render item
+   *
+   * @param section The section to render
+   * @return {*}
+   */
+  getRenderSectionHeader = ({
+    section,
+  }: {
+    section: {title: string},
+  }): React.Node => {
+    const isDryer = section.title === i18n.t('screens.proxiwash.dryers');
+    const nbAvailable = this.getMachineAvailableNumber(isDryer);
+    return (
+      <ProxiwashSectionHeader
+        title={section.title}
+        nbAvailable={nbAvailable}
+        isDryer={isDryer}
+      />
+    );
+  };
+
+  /**
+   * Gets the list item to be rendered
+   *
+   * @param item The object containing the item's FetchedData
+   * @param section The object describing the current SectionList section
+   * @returns {React.Node}
+   */
+  getRenderItem = ({
+    item,
+    section,
+  }: {
+    item: ProxiwashMachineType,
+    section: {title: string},
+  }): React.Node => {
+    const {machinesWatched} = this.state;
+    const isDryer = section.title === i18n.t('screens.proxiwash.dryers');
+    return (
+      <ProxiwashListItem
+        item={item}
+        onPress={this.showModal}
+        isWatched={isMachineWatched(item, machinesWatched)}
+        isDryer={isDryer}
+        height={LIST_ITEM_HEIGHT}
+      />
+    );
+  };
 
   /**
    * Extracts the key for the given item
@@ -106,7 +292,7 @@ class ProxiwashScreen extends React.Component<Props, State> {
    * @param item The item to extract the key from
    * @return {*} The extracted key
    */
-    getKeyExtractor = (item: Machine) => item.number;
+  getKeyExtractor = (item: ProxiwashMachineType): string => item.number;
 
   /**
    * Setups notifications for the machine with the given ID.
@@ -115,72 +301,58 @@ class ProxiwashScreen extends React.Component<Props, State> {
    *
    * @param machine The machine to watch
    */
-    setupNotifications(machine: Machine) {
+  setupNotifications(machine: ProxiwashMachineType) {
-        if (!isMachineWatched(machine, this.state.machinesWatched)) {
+    const {machinesWatched} = this.state;
-            Notifications.setupMachineNotification(machine.number, true, getMachineEndDate(machine))
+    if (!isMachineWatched(machine, machinesWatched)) {
+      Notifications.setupMachineNotification(
+        machine.number,
+        true,
+        getMachineEndDate(machine),
+      )
         .then(() => {
           this.saveNotificationToState(machine);
         })
         .catch(() => {
-                    this.showNotificationsDisabledWarning();
+          ProxiwashScreen.showNotificationsDisabledWarning();
         });
     } else {
-            Notifications.setupMachineNotification(machine.number, false, null)
+      Notifications.setupMachineNotification(machine.number, false, null).then(
-                .then(() => {
+        () => {
           this.removeNotificationFromState(machine);
-                });
+        },
-        }
-    }
-
-    /**
-     * Shows a warning telling the user notifications are disabled for the app
-     */
-    showNotificationsDisabledWarning() {
-        Alert.alert(
-            i18n.t("screens.proxiwash.modal.notificationErrorTitle"),
-            i18n.t("screens.proxiwash.modal.notificationErrorDescription"),
       );
     }
+  }
 
   /**
-     * Adds the given notifications associated to a machine ID to the watchlist, and saves the array to the preferences
+   * Gets the number of machines available
    *
-     * @param machine
+   * @param isDryer True if we are only checking for dryer, false for washers
+   * @return {number} The number of machines available
    */
-    saveNotificationToState(machine: Machine) {
+  getMachineAvailableNumber(isDryer: boolean): number {
-        let data = this.state.machinesWatched;
+    let data;
-        data.push(machine);
+    if (isDryer) data = this.fetchedData.dryers;
-        this.saveNewWatchedList(data);
+    else data = this.fetchedData.washers;
+    let count = 0;
+    data.forEach((machine: ProxiwashMachineType) => {
+      if (machine.state === ProxiwashConstants.machineStates.AVAILABLE)
+        count += 1;
+    });
+    return count;
   }
 
   /**
-     * Removes the given index from the watchlist array and saves it to preferences
+   * Creates the dataset to be used by the FlatList
-     *
-     * @param machine
-     */
-    removeNotificationFromState(machine: Machine) {
-        let data = this.state.machinesWatched;
-        for (let i = 0; i < data.length; i++) {
-            if (data[i].number === machine.number && data[i].endTime === machine.endTime) {
-                data.splice(i, 1);
-                break;
-            }
-        }
-        this.saveNewWatchedList(data);
-    }
-
-    saveNewWatchedList(list: Array<Machine>) {
-        this.setState({machinesWatched: list});
-        AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.proxiwashWatchedMachines.key, list);
-    }
-
-    /**
-     * Creates the dataset to be used by the flatlist
    *
    * @param fetchedData
    * @return {*}
    */
-    createDataset = (fetchedData: Object) => {
+  createDataset = (fetchedData: {
+    dryers: Array<ProxiwashMachineType>,
+    washers: Array<ProxiwashMachineType>,
+  }): SectionListDataType<ProxiwashMachineType> => {
+    const {state} = this;
     let data = fetchedData;
     if (AprilFoolsManager.getInstance().isAprilFoolsEnabled()) {
       data = JSON.parse(JSON.stringify(fetchedData)); // Deep copy
@@ -188,20 +360,22 @@ class ProxiwashScreen extends React.Component<Props, State> {
       AprilFoolsManager.getNewProxiwashWasherOrderedList(data.washers);
     }
     this.fetchedData = data;
-        this.state.machinesWatched =
+    this.state.machinesWatched = getCleanedMachineWatched(
-            getCleanedMachineWatched(this.state.machinesWatched, [...data.dryers, ...data.washers]);
+      state.machinesWatched,
+      [...data.dryers, ...data.washers],
+    );
     return [
       {
         title: i18n.t('screens.proxiwash.dryers'),
         icon: 'tumble-dryer',
         data: data.dryers === undefined ? [] : data.dryers,
-                keyExtractor: this.getKeyExtractor
+        keyExtractor: this.getKeyExtractor,
       },
       {
         title: i18n.t('screens.proxiwash.washers'),
         icon: 'washing-machine',
         data: data.washers === undefined ? [] : data.washers,
-                keyExtractor: this.getKeyExtractor
+        keyExtractor: this.getKeyExtractor,
       },
     ];
   };
@@ -213,9 +387,9 @@ class ProxiwashScreen extends React.Component<Props, State> {
    * @param item The item to display information for in the modal
    * @param isDryer True if the given item is a dryer
    */
-    showModal = (title: string, item: Object, isDryer: boolean) => {
+  showModal = (title: string, item: ProxiwashMachineType, isDryer: boolean) => {
     this.setState({
-            modalCurrentDisplayItem: this.getModalContent(title, item, isDryer)
+      modalCurrentDisplayItem: this.getModalContent(title, item, isDryer),
     });
     if (this.modalRef) {
       this.modalRef.open();
@@ -223,196 +397,81 @@ class ProxiwashScreen extends React.Component<Props, State> {
   };
 
   /**
-     * Callback used when the user clicks on enable notifications for a machine
+   * Adds the given notifications associated to a machine ID to the watchlist, and saves the array to the preferences
    *
-     * @param machine The machine to set notifications for
+   * @param machine
    */
-    onSetupNotificationsPress(machine: Machine) {
+  saveNotificationToState(machine: ProxiwashMachineType) {
-        if (this.modalRef) {
+    const {machinesWatched} = this.state;
-            this.modalRef.close();
+    const data = machinesWatched;
-        }
+    data.push(machine);
-        this.setupNotifications(machine);
+    this.saveNewWatchedList(data);
   }
 
   /**
-     * Generates the modal content.
+   * Removes the given index from the watchlist array and saves it to preferences
-     * This shows information for the given machine.
    *
-     * @param title The title to use
+   * @param selectedMachine
-     * @param item The item to display information for in the modal
-     * @param isDryer True if the given item is a dryer
-     * @return {*}
    */
-    getModalContent(title: string, item: Machine, isDryer: boolean) {
+  removeNotificationFromState(selectedMachine: ProxiwashMachineType) {
-        let button = {
+    const {machinesWatched} = this.state;
-            text: i18n.t("screens.proxiwash.modal.ok"),
+    const newList = [...machinesWatched];
-            icon: '',
+    machinesWatched.forEach((machine: ProxiwashMachineType, index: number) => {
-            onPress: undefined
+      if (
-        };
+        machine.number === selectedMachine.number &&
-        let message = modalStateStrings[item.state];
+        machine.endTime === selectedMachine.endTime
-        const onPress = this.onSetupNotificationsPress.bind(this, item);
+      )
-        if (item.state === ProxiwashConstants.machineStates.RUNNING) {
+        newList.splice(index, 1);
-            let remainingTime = parseInt(item.remainingTime)
-            if (remainingTime < 0)
-                remainingTime = 0;
-
-            button =
-                {
-                    text: isMachineWatched(item, this.state.machinesWatched) ?
-                        i18n.t("screens.proxiwash.modal.disableNotifications") :
-                        i18n.t("screens.proxiwash.modal.enableNotifications"),
-                    icon: '',
-                    onPress: onPress
-                }
-            ;
-            message = i18n.t('screens.proxiwash.modal.running',
-                {
-                    start: item.startTime,
-                    end: item.endTime,
-                    remaining: remainingTime,
-                    program: item.program
     });
-        } else if (item.state === ProxiwashConstants.machineStates.AVAILABLE) {
+    this.saveNewWatchedList(newList);
-            if (isDryer)
-                message += '\n' + i18n.t('screens.proxiwash.dryersTariff');
-            else
-                message += '\n' + i18n.t('screens.proxiwash.washersTariff');
   }
-        return (
-            <View style={{
-                flex: 1,
-                padding: 20
-            }}>
-                <Card.Title
-                    title={title}
-                    left={() => <Avatar.Icon
-                        icon={isDryer ? 'tumble-dryer' : 'washing-machine'}
-                        color={this.props.theme.colors.text}
-                        style={{backgroundColor: 'transparent'}}/>}
 
-                />
+  saveNewWatchedList(list: Array<ProxiwashMachineType>) {
-                <Card.Content>
+    this.setState({machinesWatched: list});
-                    <Text>{message}</Text>
+    AsyncStorageManager.set(
-                </Card.Content>
+      AsyncStorageManager.PREFERENCES.proxiwashWatchedMachines.key,
-
+      list,
-                {button.onPress !== undefined ?
-                    <Card.Actions>
-                        <Button
-                            icon={button.icon}
-                            mode="contained"
-                            onPress={button.onPress}
-                            style={{marginLeft: 'auto', marginRight: 'auto'}}
-                        >
-                            {button.text}
-                        </Button>
-                    </Card.Actions> : null}
-            </View>
     );
   }
 
-    /**
+  render(): React.Node {
-     * Callback used when receiving modal ref
+    const {state} = this;
-     *
+    const {navigation} = this.props;
-     * @param ref
-     */
-    onModalRef = (ref: Object) => {
-        this.modalRef = ref;
-    };
-
-    /**
-     * Gets the number of machines available
-     *
-     * @param isDryer True if we are only checking for dryer, false for washers
-     * @return {number} The number of machines available
-     */
-    getMachineAvailableNumber(isDryer: boolean) {
-        let data;
-        if (isDryer)
-            data = this.fetchedData.dryers;
-        else
-            data = this.fetchedData.washers;
-        let count = 0;
-        for (let i = 0; i < data.length; i++) {
-            if (data[i].state === ProxiwashConstants.machineStates.AVAILABLE)
-                count += 1;
-        }
-        return count;
-    }
-
-    /**
-     * Gets the section render item
-     *
-     * @param section The section to render
-     * @return {*}
-     */
-    getRenderSectionHeader = ({section}: Object) => {
-        const isDryer = section.title === i18n.t('screens.proxiwash.dryers');
-        const nbAvailable = this.getMachineAvailableNumber(isDryer);
-        return (
-            <ProxiwashSectionHeader
-                title={section.title}
-                nbAvailable={nbAvailable}
-                isDryer={isDryer}/>
-        );
-    };
-
-    /**
-     * Gets the list item to be rendered
-     *
-     * @param item The object containing the item's FetchedData
-     * @param section The object describing the current SectionList section
-     * @returns {React.Node}
-     */
-    getRenderItem = ({item, section}: Object) => {
-        const isDryer = section.title === i18n.t('screens.proxiwash.dryers');
-        return (
-            <ProxiwashListItem
-                item={item}
-                onPress={this.showModal}
-                isWatched={isMachineWatched(item, this.state.machinesWatched)}
-                isDryer={isDryer}
-                height={LIST_ITEM_HEIGHT}
-            />
-        );
-    };
-
-    render() {
-        const nav = this.props.navigation;
     return (
+      <View style={{flex: 1}}>
         <View
-                style={{flex: 1}}
+          style={{
-            >
+            position: 'absolute',
-                <View style={{
+            width: '100%',
-                    position: "absolute",
+            height: '100%',
-                    width: "100%",
-                    height: "100%",
           }}>
           <WebSectionList
             createDataset={this.createDataset}
-                        navigation={nav}
+            navigation={navigation}
             fetchUrl={DATA_URL}
             renderItem={this.getRenderItem}
             renderSectionHeader={this.getRenderSectionHeader}
             autoRefreshTime={REFRESH_TIME}
-                        refreshOnFocus={true}
+            refreshOnFocus
-                        updateData={this.state.machinesWatched.length}/>
+            updateData={state.machinesWatched.length}
+          />
         </View>
         <MascotPopup
           prefKey={AsyncStorageManager.PREFERENCES.proxiwashShowBanner.key}
-                    title={i18n.t("screens.proxiwash.mascotDialog.title")}
+          title={i18n.t('screens.proxiwash.mascotDialog.title')}
-                    message={i18n.t("screens.proxiwash.mascotDialog.message")}
+          message={i18n.t('screens.proxiwash.mascotDialog.message')}
-                    icon={"information"}
+          icon="information"
           buttons={{
             action: null,
             cancel: {
-                            message: i18n.t("screens.proxiwash.mascotDialog.ok"),
+              message: i18n.t('screens.proxiwash.mascotDialog.ok'),
-                            icon: "check",
+              icon: 'check',
-                        }
+            },
           }}
           emotion={MASCOT_STYLE.NORMAL}
         />
         <CustomModal onRef={this.onModalRef}>
-                    {this.state.modalCurrentDisplayItem}
+          {state.modalCurrentDisplayItem}
         </CustomModal>
       </View>
     );

src/utils/Proxiwash.js

@@ -1,6 +1,6 @@
 // @flow
 
-import type {Machine} from "../screens/Proxiwash/ProxiwashScreen";
+import type {ProxiwashMachineType} from '../screens/Proxiwash/ProxiwashScreen';
 
 /**
  * Gets the machine end Date object.
@@ -11,21 +11,18 @@ import type {Machine} from "../screens/Proxiwash/ProxiwashScreen";
  * @param machine The machine to get the date from
  * @returns {Date} The date object representing the end time.
  */
-export function getMachineEndDate(machine: Machine): Date | null {
+export function getMachineEndDate(machine: ProxiwashMachineType): Date | null {
-    const array = machine.endTime.split(":");
+  const array = machine.endTime.split(':');
   let endDate = new Date(Date.now());
-    endDate.setHours(parseInt(array[0]), parseInt(array[1]));
+  endDate.setHours(parseInt(array[0], 10), parseInt(array[1], 10));
 
-    let limit = new Date(Date.now());
+  const limit = new Date(Date.now());
   if (endDate < limit) {
     if (limit.getHours() > 12) {
       limit.setHours(limit.getHours() - 12);
-            if (endDate < limit)
+      if (endDate < limit) endDate.setDate(endDate.getDate() + 1);
-                endDate.setDate(endDate.getDate() + 1);
+      else endDate = null;
-            else
+    } else endDate = null;
-                endDate = null;
-        } else
-            endDate = null;
   }
 
   return endDate;
@@ -35,17 +32,21 @@ export function getMachineEndDate(machine: Machine): Date | null {
  * Checks whether the machine of the given ID has scheduled notifications
  *
  * @param machine The machine to check
- * @param machineList The machine list
+ * @param machinesWatched The machine list
  * @returns {boolean}
  */
-export function isMachineWatched(machine: Machine, machineList: Array<Machine>) {
+export function isMachineWatched(
+  machine: ProxiwashMachineType,
+  machinesWatched: Array<ProxiwashMachineType>,
+): boolean {
   let watched = false;
-    for (let i = 0; i < machineList.length; i++) {
+  machinesWatched.forEach((watchedMachine: ProxiwashMachineType) => {
-        if (machineList[i].number === machine.number && machineList[i].endTime === machine.endTime) {
+    if (
+      watchedMachine.number === machine.number &&
+      watchedMachine.endTime === machine.endTime
+    )
       watched = true;
-            break;
+  });
-        }
-    }
   return watched;
 }
 
@@ -54,14 +55,17 @@ export function isMachineWatched(machine: Machine, machineList: Array<Machine>)
  *
  * @param id The machine's ID
  * @param allMachines The machine list
- * @returns {null|Machine} The machine or null if not found
+ * @returns {null|ProxiwashMachineType} The machine or null if not found
  */
-export function getMachineOfId(id: string, allMachines: Array<Machine>) {
+export function getMachineOfId(
-    for (let i = 0; i < allMachines.length; i++) {
+  id: string,
-        if (allMachines[i].number === id)
+  allMachines: Array<ProxiwashMachineType>,
-            return allMachines[i];
+): ProxiwashMachineType | null {
-    }
+  let machineFound = null;
-    return null;
+  allMachines.forEach((machine: ProxiwashMachineType) => {
+    if (machine.number === id) machineFound = machine;
+  });
+  return machineFound;
 }
 
 /**
@@ -71,17 +75,22 @@ export function getMachineOfId(id: string, allMachines: Array<Machine>) {
  *
  * @param machineWatchedList The current machine watch list
  * @param allMachines The current full machine list
- * @returns {Array<Machine>}
+ * @returns {Array<ProxiwashMachineType>}
  */
-export function getCleanedMachineWatched(machineWatchedList: Array<Machine>, allMachines: Array<Machine>) {
+export function getCleanedMachineWatched(
-    let newList = [];
+  machineWatchedList: Array<ProxiwashMachineType>,
-    for (let i = 0; i < machineWatchedList.length; i++) {
+  allMachines: Array<ProxiwashMachineType>,
-        let machine = getMachineOfId(machineWatchedList[i].number, allMachines);
+): Array<ProxiwashMachineType> {
-        if (machine !== null
+  const newList = [];
-            && machineWatchedList[i].number === machine.number
+  machineWatchedList.forEach((watchedMachine: ProxiwashMachineType) => {
-            && machineWatchedList[i].endTime === machine.endTime) {
+    const machine = getMachineOfId(watchedMachine.number, allMachines);
+    if (
+      machine != null &&
+      watchedMachine.number === machine.number &&
+      watchedMachine.endTime === machine.endTime
+    ) {
       newList.push(machine);
     }
-    }
+  });
   return newList;
 }