From 9f4dcda7d92b20ba5dcbc7d3cfc540e4e4b819cd Mon Sep 17 00:00:00 2001 From: Arnaud Vergnet Date: Tue, 22 Sep 2020 22:29:39 +0200 Subject: [PATCH] Update proxiwash screens to use TypeScript --- src/components/Screens/WebSectionList.tsx | 1 + src/constants/ProxiwashConstants.ts | 19 +-- src/screens/Proxiwash/ProxiwashAboutScreen.js | 122 --------------- .../Proxiwash/ProxiwashAboutScreen.tsx | 117 +++++++++++++++ ...ProxiwashScreen.js => ProxiwashScreen.tsx} | 139 ++++++++---------- 5 files changed, 192 insertions(+), 206 deletions(-) delete mode 100644 src/screens/Proxiwash/ProxiwashAboutScreen.js create mode 100644 src/screens/Proxiwash/ProxiwashAboutScreen.tsx rename src/screens/Proxiwash/{ProxiwashScreen.js => ProxiwashScreen.tsx} (84%) diff --git a/src/components/Screens/WebSectionList.tsx b/src/components/Screens/WebSectionList.tsx index cee31c3..a080d1c 100644 --- a/src/components/Screens/WebSectionList.tsx +++ b/src/components/Screens/WebSectionList.tsx @@ -38,6 +38,7 @@ import CollapsibleSectionList from '../Collapsible/CollapsibleSectionList'; export type SectionListDataType = Array<{ title: string; + icon?: string; data: Array; keyExtractor?: (data: ItemT) => string; }>; diff --git a/src/constants/ProxiwashConstants.ts b/src/constants/ProxiwashConstants.ts index c7bda36..d08185c 100644 --- a/src/constants/ProxiwashConstants.ts +++ b/src/constants/ProxiwashConstants.ts @@ -17,16 +17,17 @@ * along with Campus INSAT. If not, see . */ +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', diff --git a/src/screens/Proxiwash/ProxiwashAboutScreen.js b/src/screens/Proxiwash/ProxiwashAboutScreen.js deleted file mode 100644 index ed247d0..0000000 --- a/src/screens/Proxiwash/ProxiwashAboutScreen.js +++ /dev/null @@ -1,122 +0,0 @@ -/* - * Copyright (c) 2019 - 2020 Arnaud Vergnet. - * - * This file is part of Campus INSAT. - * - * Campus INSAT is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * Campus INSAT is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with Campus INSAT. If not, see . - */ - -// @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 { - static getCardItem(item: LaundromatType): React.Node { - return ( - - ( - - )} - /> - - {i18n.t(item.description)} - {i18n.t('screens.proxiwash.tariffs')} - {i18n.t(item.tarif)} - {i18n.t('screens.proxiwash.paymentMethods')} - {i18n.t(item.paymentMethods)} - - - ); - } - - render(): React.Node { - return ( - - - - - - {ProxiwashAboutScreen.getCardItem(ProxiwashConstants.washinsa)} - - {ProxiwashAboutScreen.getCardItem(ProxiwashConstants.tripodeB)} - - - ( - - )} - /> - - {i18n.t('screens.proxiwash.procedure')} - {i18n.t('screens.proxiwash.dryerProcedure')} - {i18n.t('screens.proxiwash.tips')} - {i18n.t('screens.proxiwash.dryerTips')} - - - - - ( - - )} - /> - - {i18n.t('screens.proxiwash.procedure')} - {i18n.t('screens.proxiwash.washerProcedure')} - {i18n.t('screens.proxiwash.tips')} - {i18n.t('screens.proxiwash.washerTips')} - - - - ); - } -} diff --git a/src/screens/Proxiwash/ProxiwashAboutScreen.tsx b/src/screens/Proxiwash/ProxiwashAboutScreen.tsx new file mode 100644 index 0000000..32c95bf --- /dev/null +++ b/src/screens/Proxiwash/ProxiwashAboutScreen.tsx @@ -0,0 +1,117 @@ +/* + * 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 . + */ + +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 ( + + ( + + )} + /> + + {i18n.t(item.description)} + {i18n.t('screens.proxiwash.tariffs')} + {i18n.t(item.tarif)} + {i18n.t('screens.proxiwash.paymentMethods')} + {i18n.t(item.paymentMethods)} + + + ); +} + +/** + * Class defining the proxiwash about screen. + */ +export default function ProxiwashAboutScreen() { + return ( + + + + + + {getCardItem(ProxiwashConstants.washinsa)} + + {getCardItem(ProxiwashConstants.tripodeB)} + + + ( + + )} + /> + + {i18n.t('screens.proxiwash.procedure')} + {i18n.t('screens.proxiwash.dryerProcedure')} + {i18n.t('screens.proxiwash.tips')} + {i18n.t('screens.proxiwash.dryerTips')} + + + + + ( + + )} + /> + + {i18n.t('screens.proxiwash.procedure')} + {i18n.t('screens.proxiwash.washerProcedure')} + {i18n.t('screens.proxiwash.tips')} + {i18n.t('screens.proxiwash.washerTips')} + + + + ); +} diff --git a/src/screens/Proxiwash/ProxiwashScreen.js b/src/screens/Proxiwash/ProxiwashScreen.tsx similarity index 84% rename from src/screens/Proxiwash/ProxiwashScreen.js rename to src/screens/Proxiwash/ProxiwashScreen.tsx index 155c19d..bbbb679 100644 --- a/src/screens/Proxiwash/ProxiwashScreen.js +++ b/src/screens/Proxiwash/ProxiwashScreen.tsx @@ -17,8 +17,6 @@ * along with Campus INSAT. If not, see . */ -// @flow - import * as React from 'react'; import {Alert, View} from 'react-native'; import i18n from 'i18n-js'; @@ -29,14 +27,15 @@ import WebSectionList from '../../components/Screens/WebSectionList'; 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, @@ -47,31 +46,41 @@ import MascotPopup from '../../components/Mascot/MascotPopup'; 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; + theme: ReactNativePaper.Theme; }; type StateType = { - modalCurrentDisplayItem: React.Node, - machinesWatched: Array, - selectedWash: string, + modalCurrentDisplayItem: React.ReactNode; + machinesWatched: Array; + selectedWash: string; }; /** @@ -92,15 +101,17 @@ class ProxiwashScreen extends React.Component { modalRef: null | Modalize; fetchedData: { - dryers: Array, - washers: Array, + dryers: Array; + washers: Array; }; /** * 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( @@ -110,27 +121,6 @@ class ProxiwashScreen extends React.Component { 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', - ); } /** @@ -139,12 +129,12 @@ class ProxiwashScreen extends React.Component { componentDidMount() { const {navigation} = this.props; navigation.setOptions({ - headerRight: (): React.Node => ( + headerRight: () => ( navigation.navigate('settings')} + onPress={(): void => navigation.navigate('settings')} /> { ); if (selected !== state.selectedWash) { this.setState({ - selectedWash: selected + selectedWash: selected, }); } - } + }; /** * Callback used when pressing the about button. @@ -208,29 +198,27 @@ class ProxiwashScreen extends React.Component { * @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, @@ -247,7 +235,7 @@ class ProxiwashScreen extends React.Component { }}> ( + left={() => ( { {message} - {button.onPress !== undefined ? ( + {button.onPress ? (