Update proxiwash screens to use TypeScript

src/components/Screens/WebSectionList.tsx

 
 export type SectionListDataType<ItemT> = Array<{
   title: string;
+  icon?: string;
   data: Array<ItemT>;
   keyExtractor?: (data: ItemT) => string;
 }>;

src/constants/ProxiwashConstants.ts

  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+export enum MachineStates {
+  AVAILABLE,
+  RUNNING,
+  RUNNING_NOT_STARTED,
+  FINISHED,
+  UNAVAILABLE,
+  ERROR,
+  UNKNOWN,
+}
+
 export default {
-  machineStates: {
-    AVAILABLE: 0,
-    RUNNING: 1,
-    RUNNING_NOT_STARTED: 2,
-    FINISHED: 3,
-    UNAVAILABLE: 4,
-    ERROR: 5,
-    UNKNOWN: 6,
-  },
   stateIcons: [
     'radiobox-blank',
     'progress-check',

src/screens/Proxiwash/ProxiwashAboutScreen.js

-/*
- * Copyright (c) 2019 - 2020 Arnaud Vergnet.
- *
- * This file is part of Campus INSAT.
- *
- * Campus INSAT is free software: you can redistribute it and/or modify
- *  it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * Campus INSAT is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-// @flow
-
-import * as React from 'react';
-import {Image, View} from 'react-native';
-import i18n from 'i18n-js';
-import {Card, Avatar, Paragraph, Title} from 'react-native-paper';
-import CollapsibleScrollView from '../../components/Collapsible/CollapsibleScrollView';
-import type {CardTitleIconPropsType} from '../../constants/PaperStyles';
-import ProxiwashConstants from '../../constants/ProxiwashConstants';
-
-const LOGO = 'https://etud.insa-toulouse.fr/~amicale_app/images/Proxiwash.png';
-
-export type LaundromatType = {
-  id: string,
-  title: string,
-  subtitle: string,
-  description: string,
-  tarif: string,
-  paymentMethods: string,
-  icon: string,
-  url: string,
-};
-
-/**
- * Class defining the proxiwash about screen.
- */
-export default class ProxiwashAboutScreen extends React.Component<null> {
-  static getCardItem(item: LaundromatType): React.Node {
-    return (
-      <Card style={{margin: 5}}>
-        <Card.Title
-          title={i18n.t(item.title)}
-          subtitle={i18n.t(item.subtitle)}
-          left={(iconProps: CardTitleIconPropsType): React.Node => (
-            <Avatar.Icon size={iconProps.size} icon={item.icon} />
-          )}
-        />
-        <Card.Content>
-          <Paragraph>{i18n.t(item.description)}</Paragraph>
-          <Title>{i18n.t('screens.proxiwash.tariffs')}</Title>
-          <Paragraph>{i18n.t(item.tarif)}</Paragraph>
-          <Title>{i18n.t('screens.proxiwash.paymentMethods')}</Title>
-          <Paragraph>{i18n.t(item.paymentMethods)}</Paragraph>
-        </Card.Content>
-      </Card>
-    );
-  }
-
-  render(): React.Node {
-    return (
-      <CollapsibleScrollView style={{padding: 5}} hasTab>
-        <View
-          style={{
-            width: '100%',
-            height: 100,
-            marginTop: 20,
-            marginBottom: 20,
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}>
-          <Image
-            source={{uri: LOGO}}
-            style={{height: '100%', width: '100%', resizeMode: 'contain'}}
-          />
-        </View>
-
-        {ProxiwashAboutScreen.getCardItem(ProxiwashConstants.washinsa)}
-
-        {ProxiwashAboutScreen.getCardItem(ProxiwashConstants.tripodeB)}
-
-        <Card style={{margin: 5}}>
-          <Card.Title
-            title={i18n.t('screens.proxiwash.dryer')}
-            left={(iconProps: CardTitleIconPropsType): React.Node => (
-              <Avatar.Icon size={iconProps.size} icon="tumble-dryer" />
-            )}
-          />
-          <Card.Content>
-            <Title>{i18n.t('screens.proxiwash.procedure')}</Title>
-            <Paragraph>{i18n.t('screens.proxiwash.dryerProcedure')}</Paragraph>
-            <Title>{i18n.t('screens.proxiwash.tips')}</Title>
-            <Paragraph>{i18n.t('screens.proxiwash.dryerTips')}</Paragraph>
-          </Card.Content>
-        </Card>
-
-        <Card style={{margin: 5}}>
-          <Card.Title
-            title={i18n.t('screens.proxiwash.washer')}
-            left={(iconProps: CardTitleIconPropsType): React.Node => (
-              <Avatar.Icon size={iconProps.size} icon="washing-machine" />
-            )}
-          />
-          <Card.Content>
-            <Title>{i18n.t('screens.proxiwash.procedure')}</Title>
-            <Paragraph>{i18n.t('screens.proxiwash.washerProcedure')}</Paragraph>
-            <Title>{i18n.t('screens.proxiwash.tips')}</Title>
-            <Paragraph>{i18n.t('screens.proxiwash.washerTips')}</Paragraph>
-          </Card.Content>
-        </Card>
-      </CollapsibleScrollView>
-    );
-  }
-}

src/screens/Proxiwash/ProxiwashAboutScreen.tsx

+/*
+ * Copyright (c) 2019 - 2020 Arnaud Vergnet.
+ *
+ * This file is part of Campus INSAT.
+ *
+ * Campus INSAT is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Campus INSAT is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import * as React from 'react';
+import {Image, View} from 'react-native';
+import i18n from 'i18n-js';
+import {Card, Avatar, Paragraph, Title} from 'react-native-paper';
+import CollapsibleScrollView from '../../components/Collapsible/CollapsibleScrollView';
+import ProxiwashConstants from '../../constants/ProxiwashConstants';
+
+const LOGO = 'https://etud.insa-toulouse.fr/~amicale_app/images/Proxiwash.png';
+
+export type LaundromatType = {
+  id: string;
+  title: string;
+  subtitle: string;
+  description: string;
+  tarif: string;
+  paymentMethods: string;
+  icon: string;
+  url: string;
+};
+
+function getCardItem(item: LaundromatType) {
+  return (
+    <Card style={{margin: 5}}>
+      <Card.Title
+        title={i18n.t(item.title)}
+        subtitle={i18n.t(item.subtitle)}
+        left={(iconProps) => (
+          <Avatar.Icon size={iconProps.size} icon={item.icon} />
+        )}
+      />
+      <Card.Content>
+        <Paragraph>{i18n.t(item.description)}</Paragraph>
+        <Title>{i18n.t('screens.proxiwash.tariffs')}</Title>
+        <Paragraph>{i18n.t(item.tarif)}</Paragraph>
+        <Title>{i18n.t('screens.proxiwash.paymentMethods')}</Title>
+        <Paragraph>{i18n.t(item.paymentMethods)}</Paragraph>
+      </Card.Content>
+    </Card>
+  );
+}
+
+/**
+ * Class defining the proxiwash about screen.
+ */
+export default function ProxiwashAboutScreen() {
+  return (
+    <CollapsibleScrollView style={{padding: 5}} hasTab>
+      <View
+        style={{
+          width: '100%',
+          height: 100,
+          marginTop: 20,
+          marginBottom: 20,
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}>
+        <Image
+          source={{uri: LOGO}}
+          style={{height: '100%', width: '100%', resizeMode: 'contain'}}
+        />
+      </View>
+
+      {getCardItem(ProxiwashConstants.washinsa)}
+
+      {getCardItem(ProxiwashConstants.tripodeB)}
+
+      <Card style={{margin: 5}}>
+        <Card.Title
+          title={i18n.t('screens.proxiwash.dryer')}
+          left={(iconProps) => (
+            <Avatar.Icon size={iconProps.size} icon="tumble-dryer" />
+          )}
+        />
+        <Card.Content>
+          <Title>{i18n.t('screens.proxiwash.procedure')}</Title>
+          <Paragraph>{i18n.t('screens.proxiwash.dryerProcedure')}</Paragraph>
+          <Title>{i18n.t('screens.proxiwash.tips')}</Title>
+          <Paragraph>{i18n.t('screens.proxiwash.dryerTips')}</Paragraph>
+        </Card.Content>
+      </Card>
+
+      <Card style={{margin: 5}}>
+        <Card.Title
+          title={i18n.t('screens.proxiwash.washer')}
+          left={(iconProps) => (
+            <Avatar.Icon size={iconProps.size} icon="washing-machine" />
+          )}
+        />
+        <Card.Content>
+          <Title>{i18n.t('screens.proxiwash.procedure')}</Title>
+          <Paragraph>{i18n.t('screens.proxiwash.washerProcedure')}</Paragraph>
+          <Title>{i18n.t('screens.proxiwash.tips')}</Title>
+          <Paragraph>{i18n.t('screens.proxiwash.washerTips')}</Paragraph>
+        </Card.Content>
+      </Card>
+    </CollapsibleScrollView>
+  );
+}

src/screens/Proxiwash/ProxiwashScreen.js → src/screens/Proxiwash/ProxiwashScreen.tsx

  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-// @flow
-
 import * as React from 'react';
 import {Alert, View} from 'react-native';
 import i18n from 'i18n-js';
 import * as Notifications from '../../utils/Notifications';
 import AsyncStorageManager from '../../managers/AsyncStorageManager';
 import ProxiwashListItem from '../../components/Lists/Proxiwash/ProxiwashListItem';
-import ProxiwashConstants from '../../constants/ProxiwashConstants';
+import ProxiwashConstants, {
+  MachineStates,
+} from '../../constants/ProxiwashConstants';
 import CustomModal from '../../components/Overrides/CustomModal';
 import AprilFoolsManager from '../../managers/AprilFoolsManager';
 import MaterialHeaderButtons, {
   Item,
 } from '../../components/Overrides/CustomHeaderButton';
 import ProxiwashSectionHeader from '../../components/Lists/Proxiwash/ProxiwashSectionHeader';
-import type {CustomThemeType} from '../../managers/ThemeManager';
 import {
   getCleanedMachineWatched,
   getMachineEndDate,
 import type {SectionListDataType} from '../../components/Screens/WebSectionList';
 import type {LaundromatType} from './ProxiwashAboutScreen';
 
-const modalStateStrings = {};
+const modalStateStrings: {[key in MachineStates]: string} = {
+  [MachineStates.AVAILABLE]: i18n.t('screens.proxiwash.modal.ready'),
+  [MachineStates.RUNNING]: i18n.t('screens.proxiwash.modal.running'),
+  [MachineStates.RUNNING_NOT_STARTED]: i18n.t(
+    'screens.proxiwash.modal.runningNotStarted',
+  ),
+  [MachineStates.FINISHED]: i18n.t('screens.proxiwash.modal.finished'),
+  [MachineStates.UNAVAILABLE]: i18n.t('screens.proxiwash.modal.broken'),
+  [MachineStates.ERROR]: i18n.t('screens.proxiwash.modal.error'),
+  [MachineStates.UNKNOWN]: i18n.t('screens.proxiwash.modal.unknown'),
+};
 
 const REFRESH_TIME = 1000 * 10; // Refresh every 10 seconds
 const LIST_ITEM_HEIGHT = 64;
 
 export type ProxiwashMachineType = {
-  number: string,
-  state: string,
-  maxWeight: number,
-  startTime: string,
-  endTime: string,
-  donePercent: string,
-  remainingTime: string,
-  program: string,
+  number: string;
+  state: MachineStates;
+  maxWeight: number;
+  startTime: string;
+  endTime: string;
+  donePercent: string;
+  remainingTime: string;
+  program: string;
 };
 
 type PropsType = {
-  navigation: StackNavigationProp,
-  theme: CustomThemeType,
+  navigation: StackNavigationProp<any>;
+  theme: ReactNativePaper.Theme;
 };
 
 type StateType = {
-  modalCurrentDisplayItem: React.Node,
-  machinesWatched: Array<ProxiwashMachineType>,
-  selectedWash: string,
+  modalCurrentDisplayItem: React.ReactNode;
+  machinesWatched: Array<ProxiwashMachineType>;
+  selectedWash: string;
 };
 
 /**
   modalRef: null | Modalize;
 
   fetchedData: {
-    dryers: Array<ProxiwashMachineType>,
-    washers: Array<ProxiwashMachineType>,
+    dryers: Array<ProxiwashMachineType>;
+    washers: Array<ProxiwashMachineType>;
   };
 
   /**
    * Creates machine state parameters using current theme and translations
    */
-  constructor() {
-    super();
+  constructor(props: PropsType) {
+    super(props);
+    this.modalRef = null;
+    this.fetchedData = {dryers: [], washers: []};
     this.state = {
       modalCurrentDisplayItem: null,
       machinesWatched: AsyncStorageManager.getObject(
         AsyncStorageManager.PREFERENCES.selectedWash.key,
       ),
     };
-    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',
-    );
   }
 
   /**
   componentDidMount() {
     const {navigation} = this.props;
     navigation.setOptions({
-      headerRight: (): React.Node => (
+      headerRight: () => (
         <MaterialHeaderButtons>
           <Item
             title="switch"
             iconName="swap-horizontal"
-            onPress={():void => navigation.navigate('settings')}
+            onPress={(): void => navigation.navigate('settings')}
           />
           <Item
             title="information"
     );
     if (selected !== state.selectedWash) {
       this.setState({
-        selectedWash: selected
+        selectedWash: selected,
       });
     }
-  }
+  };
 
   /**
    * Callback used when pressing the about button.
    * @param isDryer True if the given item is a dryer
    * @return {*}
    */
-  getModalContent(
-    title: string,
-    item: ProxiwashMachineType,
-    isDryer: boolean,
-  ): React.Node {
+  getModalContent(title: string, item: ProxiwashMachineType, isDryer: boolean) {
     const {props, state} = this;
-    let button = {
+    let button: {text: string; icon: string; onPress: () => void} = {
       text: i18n.t('screens.proxiwash.modal.ok'),
       icon: '',
-      onPress: undefined,
+      onPress: () => undefined,
     };
     let message = modalStateStrings[item.state];
-    const onPress = this.onSetupNotificationsPress.bind(this, item);
-    if (item.state === ProxiwashConstants.machineStates.RUNNING) {
+    const onPress = () => this.onSetupNotificationsPress(item);
+    if (item.state === MachineStates.RUNNING) {
       let remainingTime = parseInt(item.remainingTime, 10);
-      if (remainingTime < 0) remainingTime = 0;
+      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,
+        onPress: onPress,
       };
       message = i18n.t('screens.proxiwash.modal.running', {
         start: item.startTime,
         }}>
         <Card.Title
           title={title}
-          left={(): React.Node => (
+          left={() => (
             <Avatar.Icon
               icon={isDryer ? 'tumble-dryer' : 'washing-machine'}
               color={props.theme.colors.text}
           <Text>{message}</Text>
         </Card.Content>
 
-        {button.onPress !== undefined ? (
+        {button.onPress ? (
           <Card.Actions>
             <Button
               icon={button.icon}
    * @param section The section to render
    * @return {*}
    */
-  getRenderSectionHeader = ({
-    section,
-  }: {
-    section: {title: string},
-  }): React.Node => {
+  getRenderSectionHeader = ({section}: {section: {title: string}}) => {
     const isDryer = section.title === i18n.t('screens.proxiwash.dryers');
     const nbAvailable = this.getMachineAvailableNumber(isDryer);
     return (
     item,
     section,
   }: {
-    item: ProxiwashMachineType,
-    section: {title: string},
-  }): React.Node => {
+    item: ProxiwashMachineType;
+    section: {title: string};
+  }) => {
     const {machinesWatched} = this.state;
     const isDryer = section.title === i18n.t('screens.proxiwash.dryers');
     return (
    */
   getMachineAvailableNumber(isDryer: boolean): number {
     let data;
-    if (isDryer) data = this.fetchedData.dryers;
-    else data = this.fetchedData.washers;
+    if (isDryer) {
+      data = this.fetchedData.dryers;
+    } else {
+      data = this.fetchedData.washers;
+    }
     let count = 0;
     data.forEach((machine: ProxiwashMachineType) => {
-      if (machine.state === ProxiwashConstants.machineStates.AVAILABLE)
+      if (machine.state === MachineStates.AVAILABLE) {
         count += 1;
+      }
     });
     return count;
   }
    * @return {*}
    */
   createDataset = (fetchedData: {
-    dryers: Array<ProxiwashMachineType>,
-    washers: Array<ProxiwashMachineType>,
+    dryers: Array<ProxiwashMachineType>;
+    washers: Array<ProxiwashMachineType>;
   }): SectionListDataType<ProxiwashMachineType> => {
     const {state} = this;
     let data = fetchedData;
       if (
         machine.number === selectedMachine.number &&
         machine.endTime === selectedMachine.endTime
-      )
+      ) {
         newList.splice(index, 1);
+      }
     });
     this.saveNewWatchedList(newList);
   }
     );
   }
 
-  render(): React.Node {
+  render() {
     const {state} = this;
     const {navigation} = this.props;
     let data: LaundromatType;