From 4d0df7a5b7d7f8b33893b5a7a9f06d01bc86253d Mon Sep 17 00:00:00 2001 From: Arnaud Vergnet Date: Tue, 22 Sep 2020 21:58:09 +0200 Subject: [PATCH] Update misc screens to use TypeScript --- .../DashboardEditPreviewItem.tsx | 20 +- src/screens/Other/FeedbackScreen.js | 179 ------------------ src/screens/Other/FeedbackScreen.tsx | 169 +++++++++++++++++ ...dEditScreen.js => DashboardEditScreen.tsx} | 31 ++- .../{SettingsScreen.js => SettingsScreen.tsx} | 53 +++--- 5 files changed, 219 insertions(+), 233 deletions(-) delete mode 100644 src/screens/Other/FeedbackScreen.js create mode 100644 src/screens/Other/FeedbackScreen.tsx rename src/screens/Other/Settings/{DashboardEditScreen.js => DashboardEditScreen.tsx} (88%) rename src/screens/Other/Settings/{SettingsScreen.js => SettingsScreen.tsx} (91%) diff --git a/src/components/Lists/DashboardEdit/DashboardEditPreviewItem.tsx b/src/components/Lists/DashboardEdit/DashboardEditPreviewItem.tsx index e787e76..bab1bbf 100644 --- a/src/components/Lists/DashboardEdit/DashboardEditPreviewItem.tsx +++ b/src/components/Lists/DashboardEdit/DashboardEditPreviewItem.tsx @@ -22,7 +22,7 @@ import {TouchableRipple, useTheme} from 'react-native-paper'; import {Dimensions, Image, View} from 'react-native'; type PropsType = { - image: string; + image?: string | number; isActive: boolean; onPress: () => void; }; @@ -51,13 +51,17 @@ function DashboardEditPreviewItem(props: PropsType) { width: itemSize, height: itemSize, }}> - + {props.image ? ( + + ) : null} ); diff --git a/src/screens/Other/FeedbackScreen.js b/src/screens/Other/FeedbackScreen.js deleted file mode 100644 index e0e6875..0000000 --- a/src/screens/Other/FeedbackScreen.js +++ /dev/null @@ -1,179 +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 {Avatar, Button, Card, Paragraph, withTheme} from 'react-native-paper'; -import i18n from 'i18n-js'; -import {Linking, View} from 'react-native'; -import CollapsibleScrollView from '../../components/Collapsible/CollapsibleScrollView'; -import type {CardTitleIconPropsType} from '../../constants/PaperStyles'; - -const links = { - bugsGit: 'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/', - trello: 'https://trello.com/b/RMej49Uq/application-campus-insa', - facebook: 'https://www.facebook.com/campus.insat', - feedbackMail: `mailto:app@amicale-insat.fr?subject=[FEEDBACK] Application CAMPUS -&body=Coucou Arnaud j'ai du feedback\n\n\n\nBien cordialement.`, - feedbackDiscord: 'https://discord.gg/W8MeTec', -}; - -class FeedbackScreen extends React.Component { - /** - * Gets link buttons - * - * @returns {*} - */ - static getButtons(isFeedback: boolean): React.Node { - return ( - - {isFeedback ? ( - - - - - - ) : ( - - - - - )} - - ); - } - - render(): React.Node { - return ( - - - ( - - )} - /> - - - {i18n.t('screens.feedback.feedbackDescription')} - - - {FeedbackScreen.getButtons(true)} - ( - - )} - /> - - - {i18n.t('screens.feedback.contributeDescription')} - - - {FeedbackScreen.getButtons(false)} - - - ); - } -} - -export default withTheme(FeedbackScreen); diff --git a/src/screens/Other/FeedbackScreen.tsx b/src/screens/Other/FeedbackScreen.tsx new file mode 100644 index 0000000..39781a7 --- /dev/null +++ b/src/screens/Other/FeedbackScreen.tsx @@ -0,0 +1,169 @@ +/* + * 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 {Avatar, Button, Card, Paragraph, withTheme} from 'react-native-paper'; +import i18n from 'i18n-js'; +import {Linking, View} from 'react-native'; +import CollapsibleScrollView from '../../components/Collapsible/CollapsibleScrollView'; + +const links = { + bugsGit: 'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/', + trello: 'https://trello.com/b/RMej49Uq/application-campus-insa', + facebook: 'https://www.facebook.com/campus.insat', + feedbackMail: `mailto:app@amicale-insat.fr?subject=[FEEDBACK] Application CAMPUS +&body=Coucou Arnaud j'ai du feedback\n\n\n\nBien cordialement.`, + feedbackDiscord: 'https://discord.gg/W8MeTec', +}; + +function getButtons(isFeedback: boolean) { + return ( + + {isFeedback ? ( + + + + + + ) : ( + + + + + )} + + ); +} + +function FeedbackScreen() { + return ( + + + ( + + )} + /> + + + {i18n.t('screens.feedback.feedbackDescription')} + + + {getButtons(true)} + ( + + )} + /> + + + {i18n.t('screens.feedback.contributeDescription')} + + + {getButtons(false)} + + + ); +} + +export default withTheme(FeedbackScreen); diff --git a/src/screens/Other/Settings/DashboardEditScreen.js b/src/screens/Other/Settings/DashboardEditScreen.tsx similarity index 88% rename from src/screens/Other/Settings/DashboardEditScreen.js rename to src/screens/Other/Settings/DashboardEditScreen.tsx index 6592db1..c0c0310 100644 --- a/src/screens/Other/Settings/DashboardEditScreen.js +++ b/src/screens/Other/Settings/DashboardEditScreen.tsx @@ -17,11 +17,9 @@ * along with Campus INSAT. If not, see . */ -// @flow - import * as React from 'react'; import {StackNavigationProp} from '@react-navigation/stack'; -import {Button, Card, Paragraph, withTheme} from 'react-native-paper'; +import {Button, Card, Paragraph} from 'react-native-paper'; import {FlatList} from 'react-native'; import {View} from 'react-native-animatable'; import i18n from 'i18n-js'; @@ -30,20 +28,19 @@ import type { ServiceItemType, } from '../../../managers/ServicesManager'; import DashboardManager from '../../../managers/DashboardManager'; -import DashboardItem from '../../../components/Home/EventDashboardItem'; import DashboardEditAccordion from '../../../components/Lists/DashboardEdit/DashboardEditAccordion'; import DashboardEditPreviewItem from '../../../components/Lists/DashboardEdit/DashboardEditPreviewItem'; import AsyncStorageManager from '../../../managers/AsyncStorageManager'; import CollapsibleFlatList from '../../../components/Collapsible/CollapsibleFlatList'; type PropsType = { - navigation: StackNavigationProp, + navigation: StackNavigationProp; }; type StateType = { - currentDashboard: Array, - currentDashboardIdList: Array, - activeItem: number, + currentDashboard: Array; + currentDashboardIdList: Array; + activeItem: number; }; /** @@ -75,13 +72,13 @@ class DashboardEditScreen extends React.Component { item, index, }: { - item: DashboardItem, - index: number, - }): React.Node => { + item: ServiceItemType | null; + index: number; + }) => { const {activeItem} = this.state; return ( { this.setState({activeItem: index}); }} @@ -90,7 +87,7 @@ class DashboardEditScreen extends React.Component { ); }; - getDashboard(content: Array): React.Node { + getDashboard(content: Array) { return ( { ); } - getRenderItem = ({item}: {item: ServiceCategoryType}): React.Node => { + getRenderItem = ({item}: {item: ServiceCategoryType}) => { const {currentDashboardIdList} = this.state; return ( { ); }; - getListHeader(): React.Node { + getListHeader() { const {currentDashboard} = this.state; return ( @@ -170,7 +167,7 @@ class DashboardEditScreen extends React.Component { ); }; - render(): React.Node { + render() { return ( { } } -export default withTheme(DashboardEditScreen); +export default DashboardEditScreen; diff --git a/src/screens/Other/Settings/SettingsScreen.js b/src/screens/Other/Settings/SettingsScreen.tsx similarity index 91% rename from src/screens/Other/Settings/SettingsScreen.js rename to src/screens/Other/Settings/SettingsScreen.tsx index 2c7c39f..4dd4df9 100644 --- a/src/screens/Other/Settings/SettingsScreen.js +++ b/src/screens/Other/Settings/SettingsScreen.tsx @@ -17,8 +17,6 @@ * along with Campus INSAT. If not, see . */ -// @flow - import * as React from 'react'; import {View} from 'react-native'; import i18n from 'i18n-js'; @@ -32,24 +30,22 @@ import { } from 'react-native-paper'; import {Appearance} from 'react-native-appearance'; import {StackNavigationProp} from '@react-navigation/stack'; -import type {CustomThemeType} from '../../../managers/ThemeManager'; import ThemeManager from '../../../managers/ThemeManager'; import AsyncStorageManager from '../../../managers/AsyncStorageManager'; import CustomSlider from '../../../components/Overrides/CustomSlider'; import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView'; -import type {ListIconPropsType} from '../../../constants/PaperStyles'; type PropsType = { - navigation: StackNavigationProp, - theme: CustomThemeType, + navigation: StackNavigationProp; + theme: ReactNativePaper.Theme; }; type StateType = { - nightMode: boolean, - nightModeFollowSystem: boolean, - startScreenPickerSelected: string, - selectedWash: string, - isDebugUnlocked: boolean, + nightMode: boolean; + nightModeFollowSystem: boolean; + startScreenPickerSelected: string; + selectedWash: string; + isDebugUnlocked: boolean; }; /** @@ -61,14 +57,15 @@ class SettingsScreen extends React.Component { /** * Loads user preferences into state */ - constructor() { - super(); + constructor(props: PropsType) { + super(props); const notifReminder = AsyncStorageManager.getString( AsyncStorageManager.PREFERENCES.proxiwashNotifications.key, ); this.savedNotificationReminder = parseInt(notifReminder, 10); - if (Number.isNaN(this.savedNotificationReminder)) + if (Number.isNaN(this.savedNotificationReminder)) { this.savedNotificationReminder = 0; + } this.state = { nightMode: ThemeManager.getNightMode(), @@ -120,7 +117,7 @@ class SettingsScreen extends React.Component { * * @returns {React.Node} */ - getProxiwashNotifPicker(): React.Node { + getProxiwashNotifPicker() { const {theme} = this.props; return ( { * * @returns {React.Node} */ - getProxiwashChangePicker(): React.Node { + getProxiwashChangePicker() { const {selectedWash} = this.state; return ( { * * @returns {React.Node} */ - getStartScreenPicker(): React.Node { + getStartScreenPicker() { const {startScreenPickerSelected} = this.state; return ( { title: string, subtitle: string, state: boolean, - ): React.Node { + ) { return ( ( + left={(props) => ( )} - right={(): React.Node => ( - - )} + right={() => } /> ); } @@ -241,7 +236,7 @@ class SettingsScreen extends React.Component { title: string, subtitle: string, onLongPress?: () => void, - ): React.Node { + ) { const {navigation} = this.props; return ( { onPress={() => { navigation.navigate(route); }} - left={(props: ListIconPropsType): React.Node => ( + left={(props) => ( )} - right={(props: ListIconPropsType): React.Node => ( + right={(props) => ( { ); }; - render(): React.Node { + render() { const {nightModeFollowSystem, nightMode, isDebugUnlocked} = this.state; return ( @@ -322,7 +317,7 @@ class SettingsScreen extends React.Component { ( + left={(props) => ( { ( + left={(props) => ( { ( + left={(props) => (