diff --git a/src/navigation/TabNavigator.js b/src/navigation/TabNavigator.js index 29ce6c7..640282b 100644 --- a/src/navigation/TabNavigator.js +++ b/src/navigation/TabNavigator.js @@ -29,7 +29,6 @@ import { getWebsiteStack, } from '../utils/CollapsibleUtils'; import Mascot, {MASCOT_STYLE} from '../components/Mascot/Mascot'; -import ProxiwashSettingsScreen from '../screens/Proxiwash/ProxiwashSettingsScreen'; const modalTransition = Platform.OS === 'ios' @@ -92,12 +91,6 @@ function ProxiwashStackComponent(): React.Node { ProxiwashAboutScreen, i18n.t('screens.proxiwash.title'), )} - {createScreenCollapsibleStack( - 'proxiwash-settings', - ProxiwashStack, - ProxiwashSettingsScreen, - i18n.t('screens.proxiwash.title'), - )} ); } diff --git a/src/screens/Other/Settings/SettingsScreen.js b/src/screens/Other/Settings/SettingsScreen.js index 9f687a0..efbbd05 100644 --- a/src/screens/Other/Settings/SettingsScreen.js +++ b/src/screens/Other/Settings/SettingsScreen.js @@ -3,7 +3,14 @@ import * as React from 'react'; import {View} from 'react-native'; import i18n from 'i18n-js'; -import {Card, List, Switch, ToggleButton, withTheme} from 'react-native-paper'; +import { + RadioButton, + Card, + List, + Switch, + ToggleButton, + withTheme, +} from 'react-native-paper'; import {Appearance} from 'react-native-appearance'; import {StackNavigationProp} from '@react-navigation/stack'; import type {CustomThemeType} from '../../../managers/ThemeManager'; @@ -12,6 +19,7 @@ import AsyncStorageManager from '../../../managers/AsyncStorageManager'; import CustomSlider from '../../../components/Overrides/CustomSlider'; import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView'; import type {ListIconPropsType} from '../../../constants/PaperStyles'; +import {PROXIWASH_DATA} from '../../Proxiwash/ProxiwashAboutScreen'; type PropsType = { navigation: StackNavigationProp, @@ -22,6 +30,7 @@ type StateType = { nightMode: boolean, nightModeFollowSystem: boolean, startScreenPickerSelected: string, + selectedWash: string, isDebugUnlocked: boolean, }; @@ -52,6 +61,9 @@ class SettingsScreen extends React.Component { startScreenPickerSelected: AsyncStorageManager.getString( AsyncStorageManager.PREFERENCES.defaultStartScreen.key, ), + selectedWash: AsyncStorageManager.getString( + AsyncStorageManager.PREFERENCES.selectedWash.key, + ), isDebugUnlocked: AsyncStorageManager.getBool( AsyncStorageManager.PREFERENCES.debugUnlocked.key, ), @@ -106,6 +118,29 @@ class SettingsScreen extends React.Component { ); } + /** + * Returns a radio picker allowing the user to select the proxiwash + * + * @returns {React.Node} + */ + getProxiwashChangePicker(): React.Node { + const {selectedWash} = this.state; + return ( + + + + + ); + } + /** * Returns a picker allowing the user to select the start screen * @@ -212,6 +247,21 @@ class SettingsScreen extends React.Component { ); } + /** + * Saves the value for the proxiwash selected wash + * + * @param value The value to store + */ + onSelectWashValueChange = (value: string) => { + if (value != null) { + this.setState({selectedWash: value}); + AsyncStorageManager.set( + AsyncStorageManager.PREFERENCES.selectedWash.key, + value, + ); + } + }; + /** * Unlocks debug mode and saves its state to user preferences */ @@ -288,6 +338,20 @@ class SettingsScreen extends React.Component { {this.getProxiwashNotifPicker()} + ( + + )} + /> + + {this.getProxiwashChangePicker()} + diff --git a/src/screens/Proxiwash/ProxiwashAboutScreen.js b/src/screens/Proxiwash/ProxiwashAboutScreen.js index 662b74c..6a3b7c5 100644 --- a/src/screens/Proxiwash/ProxiwashAboutScreen.js +++ b/src/screens/Proxiwash/ProxiwashAboutScreen.js @@ -9,11 +9,67 @@ import type {CardTitleIconPropsType} from '../../constants/PaperStyles'; const LOGO = 'https://etud.insa-toulouse.fr/~amicale_app/images/Proxiwash.png'; +export type LaverieType = { + id: string, + title: string, + subtitle: string, + description: string, + tarif: string, + paymentMethods: string, + icon: string, + url: string, +}; + +export const PROXIWASH_DATA = { + washinsa: { + id: 'washinsa', + title: i18n.t('screens.proxiwash.washinsa.title'), + subtitle: i18n.t('screens.proxiwash.washinsa.subtitle'), + description: i18n.t('screens.proxiwash.washinsa.description'), + tarif: i18n.t('screens.proxiwash.washinsa.tariff'), + paymentMethods: i18n.t('screens.proxiwash.washinsa.paymentMethods'), + icon: 'school-outline', + url: + 'https://etud.insa-toulouse.fr/~amicale_app/v2/washinsa/washinsa_data.json', + }, + tripodeB: { + id: 'tripodeB', + title: i18n.t('screens.proxiwash.tripodeB.title'), + subtitle: i18n.t('screens.proxiwash.tripodeB.subtitle'), + description: i18n.t('screens.proxiwash.tripodeB.description'), + tarif: i18n.t('screens.proxiwash.tripodeB.tariff'), + paymentMethods: i18n.t('screens.proxiwash.tripodeB.paymentMethods'), + icon: 'domain', + url: + 'https://etud.insa-toulouse.fr/~amicale_app/v2/washinsa/tripode_b_data.json', + }, +}; + /** * Class defining the proxiwash about screen. */ -// eslint-disable-next-line react/prefer-stateless-function export default class ProxiwashAboutScreen extends React.Component { + static getCardItem(item: LaverieType): React.Node { + return ( + + ( + + )} + /> + + {item.description} + {i18n.t('screens.proxiwash.tariffs')} + {item.tarif} + {i18n.t('screens.proxiwash.paymentMethods')} + {item.paymentMethods} + + + ); + } + render(): React.Node { return ( @@ -32,6 +88,10 @@ export default class ProxiwashAboutScreen extends React.Component { /> + {ProxiwashAboutScreen.getCardItem(PROXIWASH_DATA.washinsa)} + + {ProxiwashAboutScreen.getCardItem(PROXIWASH_DATA.tripodeB)} + { iconName="information" onPress={this.onAboutPress} /> - ), }); @@ -147,15 +142,6 @@ class ProxiwashScreen extends React.Component { navigation.navigate('proxiwash-about'); }; - /** - * Callback used when pressing the settings button. - * This will open the ProxiwashSettingsScreen. - */ - onSettingsPress = () => { - const {navigation} = this.props; - navigation.navigate('proxiwash-settings'); - }; - /** * Callback used when the user clicks on enable notifications for a machine * diff --git a/src/screens/Proxiwash/ProxiwashSettingsScreen.js b/src/screens/Proxiwash/ProxiwashSettingsScreen.js deleted file mode 100644 index 1f52b1f..0000000 --- a/src/screens/Proxiwash/ProxiwashSettingsScreen.js +++ /dev/null @@ -1,135 +0,0 @@ -// @flow - -import * as React from 'react'; -import { - Title, - Button, - Card, - Avatar, - withTheme, - Paragraph, -} from 'react-native-paper'; -import i18n from 'i18n-js'; -import CollapsibleScrollView from '../../components/Collapsible/CollapsibleScrollView'; -import type {CardTitleIconPropsType} from '../../constants/PaperStyles'; -import AsyncStorageManager from '../../managers/AsyncStorageManager'; -import ThemeManager from '../../managers/ThemeManager'; -import type {CustomThemeType} from '../../managers/ThemeManager'; - -export type LaverieType = { - id: string, - title: string, - subtitle: string, - description: string, - tarif: string, - paymentMethods: string, - icon: string, - url: string, -}; - -export const PROXIWASH_DATA = { - washinsa: { - id: 'washinsa', - title: i18n.t('screens.proxiwash.washinsa.title'), - subtitle: i18n.t('screens.proxiwash.washinsa.subtitle'), - description: i18n.t('screens.proxiwash.washinsa.description'), - tarif: i18n.t('screens.proxiwash.washinsa.tariff'), - paymentMethods: i18n.t('screens.proxiwash.washinsa.paymentMethods'), - icon: 'school-outline', - url: - 'https://etud.insa-toulouse.fr/~amicale_app/v2/washinsa/washinsa_data.json', - }, - tripodeB: { - id: 'tripodeB', - title: i18n.t('screens.proxiwash.tripodeB.title'), - subtitle: i18n.t('screens.proxiwash.tripodeB.subtitle'), - description: i18n.t('screens.proxiwash.tripodeB.description'), - tarif: i18n.t('screens.proxiwash.tripodeB.tariff'), - paymentMethods: i18n.t('screens.proxiwash.tripodeB.paymentMethods'), - icon: 'domain', - url: - 'https://etud.insa-toulouse.fr/~amicale_app/v2/washinsa/tripode_b_data.json', - }, -}; - -type StateType = { - selectedWash: string, - currentTheme: CustomThemeType, -}; - -/** - * Class defining the proxiwash settings screen. - */ -class ProxiwashSettingsScreen extends React.Component { - constructor() { - super(); - this.state = { - selectedWash: AsyncStorageManager.getString( - AsyncStorageManager.PREFERENCES.selectedWash.key, - ), - }; - } - - /** - * Saves the value for the proxiwash selected wash - * - * @param value The value to store - */ - onSelectWashValueChange = (value: string) => { - if (value != null) { - this.setState({selectedWash: value}); - AsyncStorageManager.set( - AsyncStorageManager.PREFERENCES.selectedWash.key, - value, - ); - } - }; - - getCardItem(item: LaverieType): React.Node { - const {selectedWash} = this.state; - const onSelectWashValueChange = (): void => - this.onSelectWashValueChange(item.id); - let cardStyle = { - margin: 5, - }; - if (selectedWash === item.id) { - cardStyle = { - margin: 5, - backgroundColor: ThemeManager.getCurrentTheme().colors - .proxiwashUnknownColor, - }; - } - return ( - - ( - - )} - /> - - {item.description} - {i18n.t('screens.proxiwash.tariffs')} - {item.tarif} - {i18n.t('screens.proxiwash.paymentMethods')} - {item.paymentMethods} - - - - - - ); - } - - render(): React.Node { - return ( - - {this.getCardItem(PROXIWASH_DATA.washinsa)} - {this.getCardItem(PROXIWASH_DATA.tripodeB)} - - ); - } -} - -export default withTheme(ProxiwashSettingsScreen);