From 38afbf02a383c152cd51e176ba38d8bf2b6e4584 Mon Sep 17 00:00:00 2001 From: Arnaud Vergnet Date: Tue, 22 Sep 2020 22:40:38 +0200 Subject: [PATCH] Update services screens to use TypeScript --- .../{SelfMenuScreen.js => SelfMenuScreen.tsx} | 37 ++++++------- .../{ServicesScreen.js => ServicesScreen.tsx} | 26 ++++----- ...ionScreen.js => ServicesSectionScreen.tsx} | 53 +++++++------------ .../{WebsiteScreen.js => WebsiteScreen.tsx} | 45 +++++++++------- 4 files changed, 71 insertions(+), 90 deletions(-) rename src/screens/Services/{SelfMenuScreen.js => SelfMenuScreen.tsx} (88%) rename src/screens/Services/{ServicesScreen.js => ServicesScreen.tsx} (87%) rename src/screens/Services/{ServicesSectionScreen.js => ServicesSectionScreen.tsx} (54%) rename src/screens/Services/{WebsiteScreen.js => WebsiteScreen.tsx} (65%) diff --git a/src/screens/Services/SelfMenuScreen.js b/src/screens/Services/SelfMenuScreen.tsx similarity index 88% rename from src/screens/Services/SelfMenuScreen.js rename to src/screens/Services/SelfMenuScreen.tsx index 15d7662..f84e9e8 100644 --- a/src/screens/Services/SelfMenuScreen.js +++ b/src/screens/Services/SelfMenuScreen.tsx @@ -17,8 +17,6 @@ * along with Campus INSAT. If not, see . */ -// @flow - import * as React from 'react'; import {View} from 'react-native'; import {Card, Text, withTheme} from 'react-native-paper'; @@ -26,32 +24,31 @@ import {StackNavigationProp} from '@react-navigation/stack'; import i18n from 'i18n-js'; import DateManager from '../../managers/DateManager'; import WebSectionList from '../../components/Screens/WebSectionList'; -import type {CustomThemeType} from '../../managers/ThemeManager'; import type {SectionListDataType} from '../../components/Screens/WebSectionList'; const DATA_URL = 'https://etud.insa-toulouse.fr/~amicale_app/menu/menu_data.json'; type PropsType = { - navigation: StackNavigationProp, - theme: CustomThemeType, + navigation: StackNavigationProp; + theme: ReactNativePaper.Theme; }; export type RuFoodCategoryType = { - name: string, - dishes: Array<{name: string}>, + name: string; + dishes: Array<{name: string}>; }; type RuMealType = { - name: string, - foodcategory: Array, + name: string; + foodcategory: Array; }; type RawRuMenuType = { - restaurant_id: number, - id: number, - date: string, - meal: Array, + restaurant_id: number; + id: number; + date: string; + meal: Array; }; /** @@ -77,7 +74,7 @@ class SelfMenuScreen extends React.Component { createDataset = ( fetchedData: Array, ): SectionListDataType => { - let result = []; + let result: SectionListDataType = []; if (fetchedData == null || fetchedData.length === 0) { result = [ { @@ -104,11 +101,7 @@ class SelfMenuScreen extends React.Component { * @param section The section to render the header from * @return {*} */ - getRenderSectionHeader = ({ - section, - }: { - section: {title: string}, - }): React.Node => { + getRenderSectionHeader = ({section}: {section: {title: string}}) => { return ( { * @param item The item to render * @return {*} */ - getRenderItem = ({item}: {item: RuFoodCategoryType}): React.Node => { + getRenderItem = ({item}: {item: RuFoodCategoryType}) => { const {theme} = this.props; return ( { }} /> - {item.dishes.map((object: {name: string}): React.Node => + {item.dishes.map((object: {name: string}) => object.name !== '' ? ( { */ getKeyExtractor = (item: RuFoodCategoryType): string => item.name; - render(): React.Node { + render() { const {navigation} = this.props; return ( . */ -// @flow - import * as React from 'react'; import {Image, View} from 'react-native'; import { @@ -32,7 +30,6 @@ import { import i18n from 'i18n-js'; import {StackNavigationProp} from '@react-navigation/stack'; import CardList from '../../components/Lists/CardList/CardList'; -import type {CustomThemeType} from '../../managers/ThemeManager'; import MaterialHeaderButtons, { Item, } from '../../components/Overrides/CustomHeaderButton'; @@ -46,8 +43,8 @@ import CollapsibleFlatList from '../../components/Collapsible/CollapsibleFlatLis import type {ServiceCategoryType} from '../../managers/ServicesManager'; type PropsType = { - navigation: StackNavigationProp, - theme: CustomThemeType, + navigation: StackNavigationProp; + theme: ReactNativePaper.Theme; }; class ServicesScreen extends React.Component { @@ -68,7 +65,7 @@ class ServicesScreen extends React.Component { }); } - getAboutButton = (): React.Node => ( + getAboutButton = () => ( { * @param source The source image to display. Can be a string for icons or a number for local images * @returns {*} */ - getListTitleImage(source: string | number): React.Node { + getListTitleImage(source: string | number) { const {props} = this; - if (typeof source === 'number') + if (typeof source === 'number') { return ( { }} /> ); + } return ( { * @param item * @returns {*} */ - getRenderItem = ({item}: {item: ServiceCategoryType}): React.Node => { + getRenderItem = ({item}: {item: ServiceCategoryType}) => { const {props} = this; return ( { this.getListTitleImage(item.image)} - right={(): React.Node => } + left={() => this.getListTitleImage(item.image)} + right={() => } /> @@ -147,14 +144,14 @@ class ServicesScreen extends React.Component { keyExtractor = (item: ServiceCategoryType): string => item.title; - render(): React.Node { + render() { return ( } + ItemSeparatorComponent={() => } hasTab /> { message={i18n.t('screens.services.mascotDialog.message')} icon="cloud-question" buttons={{ - action: null, cancel: { message: i18n.t('screens.services.mascotDialog.button'), icon: 'check', diff --git a/src/screens/Services/ServicesSectionScreen.js b/src/screens/Services/ServicesSectionScreen.tsx similarity index 54% rename from src/screens/Services/ServicesSectionScreen.js rename to src/screens/Services/ServicesSectionScreen.tsx index b9fdaaa..a652518 100644 --- a/src/screens/Services/ServicesSectionScreen.js +++ b/src/screens/Services/ServicesSectionScreen.tsx @@ -17,28 +17,25 @@ * along with Campus INSAT. If not, see . */ -// @flow - import * as React from 'react'; import {Collapsible} from 'react-navigation-collapsible'; import {CommonActions} from '@react-navigation/native'; import {StackNavigationProp} from '@react-navigation/stack'; import CardList from '../../components/Lists/CardList/CardList'; -import CustomTabBar from '../../components/Tabbar/CustomTabBar'; -import withCollapsible from '../../utils/withCollapsible'; import type {ServiceCategoryType} from '../../managers/ServicesManager'; type PropsType = { - navigation: StackNavigationProp, - route: {params: {data: ServiceCategoryType | null}}, - collapsibleStack: Collapsible, + navigation: StackNavigationProp; + route: {params: {data: ServiceCategoryType | null}}; + collapsibleStack: Collapsible; }; class ServicesSectionScreen extends React.Component { - finalDataset: ServiceCategoryType; + finalDataset: null | ServiceCategoryType; constructor(props: PropsType) { super(props); + this.finalDataset = null; this.handleNavigationParams(); } @@ -47,38 +44,24 @@ class ServicesSectionScreen extends React.Component { */ handleNavigationParams() { const {props} = this; - if (props.route.params != null) { - if (props.route.params.data != null) { - this.finalDataset = props.route.params.data; - // reset params to prevent infinite loop - props.navigation.dispatch(CommonActions.setParams({data: null})); - props.navigation.setOptions({ - headerTitle: this.finalDataset.title, - }); - } + if (props.route.params.data) { + this.finalDataset = props.route.params.data; + // reset params to prevent infinite loop + props.navigation.dispatch(CommonActions.setParams({data: null})); + props.navigation.setOptions({ + headerTitle: this.finalDataset.title, + }); } } - render(): React.Node { - const {props} = this; - const { - containerPaddingTop, - scrollIndicatorInsetTop, - onScroll, - } = props.collapsibleStack; + render() { + if (!this.finalDataset) { + return null; + } return ( - + ); } } -export default withCollapsible(ServicesSectionScreen); +export default ServicesSectionScreen; diff --git a/src/screens/Services/WebsiteScreen.js b/src/screens/Services/WebsiteScreen.tsx similarity index 65% rename from src/screens/Services/WebsiteScreen.js rename to src/screens/Services/WebsiteScreen.tsx index d34d2c7..f7bcfb8 100644 --- a/src/screens/Services/WebsiteScreen.js +++ b/src/screens/Services/WebsiteScreen.tsx @@ -17,8 +17,6 @@ * along with Campus INSAT. If not, see . */ -// @flow - import * as React from 'react'; import {StackNavigationProp} from '@react-navigation/stack'; import WebViewScreen from '../../components/Screens/WebViewScreen'; @@ -26,21 +24,24 @@ import AvailableWebsites from '../../constants/AvailableWebsites'; import BasicLoadingScreen from '../../components/Screens/BasicLoadingScreen'; type PropsType = { - navigation: StackNavigationProp, - route: {params: {host: string, path: string | null, title: string}}, + navigation: StackNavigationProp; + route: {params: {host: string; path: string | null; title: string}}; }; -const ENABLE_MOBILE_STRING = ``; +const ENABLE_MOBILE_STRING = + ''; -const AVAILABLE_ROOMS_STYLE = ``; -const BIB_STYLE = ``; +const AVAILABLE_ROOMS_STYLE = + ''; +const BIB_STYLE = + ''; const BIB_BACK_BUTTON = - `
` + + "`; + "" + + '' + + '
'; class WebsiteScreen extends React.Component { fullUrl: string; @@ -53,6 +54,8 @@ class WebsiteScreen extends React.Component { constructor(props: PropsType) { super(props); + this.fullUrl = ''; + this.host = ''; props.navigation.addListener('focus', this.onScreenFocus); this.injectedJS = {}; this.customPaddingFunctions = {}; @@ -63,7 +66,7 @@ class WebsiteScreen extends React.Component { this.injectedJS[AvailableWebsites.websites.BIB] = `document.querySelector('head').innerHTML += '${ENABLE_MOBILE_STRING}';` + `document.querySelector('head').innerHTML += '${BIB_STYLE}';` + - `if ($(".hero-unit-form").length > 0 && $("#customBackButton").length === 0)` + + 'if ($(".hero-unit-form").length > 0 && $("#customBackButton").length === 0)' + `$(".hero-unit-form").append("${BIB_BACK_BUTTON}");true;`; this.customPaddingFunctions[AvailableWebsites.websites.BLUEMIND] = ( @@ -72,7 +75,7 @@ class WebsiteScreen extends React.Component { return ( `$('head').append('${ENABLE_MOBILE_STRING}');` + `$('.minwidth').css('top', ${padding}` + - `$('#mailview-bottom').css('min-height', 500);` + "$('#mailview-bottom').css('min-height', 500);" ); }; this.customPaddingFunctions[AvailableWebsites.websites.WIKETUD] = ( @@ -103,20 +106,26 @@ class WebsiteScreen extends React.Component { if (this.host != null && path != null) { path = path.replace(this.host, ''); this.fullUrl = this.host + path; - } else this.fullUrl = this.host; + } else { + this.fullUrl = this.host; + } - if (title != null) navigation.setOptions({title}); + if (title != null) { + navigation.setOptions({title}); + } } } - render(): React.Node { + render() { const {navigation} = this.props; let injectedJavascript = ''; let customPadding = null; - if (this.host != null && this.injectedJS[this.host] != null) + if (this.host != null && this.injectedJS[this.host] != null) { injectedJavascript = this.injectedJS[this.host]; - if (this.host != null && this.customPaddingFunctions[this.host] != null) + } + if (this.host != null && this.customPaddingFunctions[this.host] != null) { customPadding = this.customPaddingFunctions[this.host]; + } if (this.fullUrl != null) { return (