From 742cb1802daad8df26d5b349141f4f2984b53771 Mon Sep 17 00:00:00 2001 From: Arnaud Vergnet Date: Tue, 22 Sep 2020 22:04:39 +0200 Subject: [PATCH] Update Planex screens to use TypeScript --- ...tionScreen.js => GroupSelectionScreen.tsx} | 65 ++++++++-------- .../{PlanexScreen.js => PlanexScreen.tsx} | 74 +++++++++++-------- 2 files changed, 77 insertions(+), 62 deletions(-) rename src/screens/Planex/{GroupSelectionScreen.js => GroupSelectionScreen.tsx} (87%) rename src/screens/Planex/{PlanexScreen.js => PlanexScreen.tsx} (90%) diff --git a/src/screens/Planex/GroupSelectionScreen.js b/src/screens/Planex/GroupSelectionScreen.tsx similarity index 87% rename from src/screens/Planex/GroupSelectionScreen.js rename to src/screens/Planex/GroupSelectionScreen.tsx index 09544fe..e0c36ba 100644 --- a/src/screens/Planex/GroupSelectionScreen.js +++ b/src/screens/Planex/GroupSelectionScreen.tsx @@ -17,8 +17,6 @@ * along with Campus INSAT. If not, see . */ -// @flow - import * as React from 'react'; import {Platform} from 'react-native'; import i18n from 'i18n-js'; @@ -32,31 +30,35 @@ import AsyncStorageManager from '../../managers/AsyncStorageManager'; const LIST_ITEM_HEIGHT = 70; export type PlanexGroupType = { - name: string, - id: number, + name: string; + id: number; }; export type PlanexGroupCategoryType = { - name: string, - id: number, - content: Array, + name: string; + id: number; + content: Array; }; type PropsType = { - navigation: StackNavigationProp, + navigation: StackNavigationProp; }; type StateType = { - currentSearchString: string, - favoriteGroups: Array, + currentSearchString: string; + favoriteGroups: Array; }; function sortName( a: PlanexGroupType | PlanexGroupCategoryType, b: PlanexGroupType | PlanexGroupCategoryType, ): number { - if (a.name.toLowerCase() < b.name.toLowerCase()) return -1; - if (a.name.toLowerCase() > b.name.toLowerCase()) return 1; + if (a.name.toLowerCase() < b.name.toLowerCase()) { + return -1; + } + if (a.name.toLowerCase() > b.name.toLowerCase()) { + return 1; + } return 0; } @@ -96,8 +98,9 @@ class GroupSelectionScreen extends React.Component { * * @return {*} */ - getSearchBar = (): React.Node => { + getSearchBar = () => { return ( + // @ts-ignore { * @param item The article to render * @return {*} */ - getRenderItem = ({item}: {item: PlanexGroupCategoryType}): React.Node => { + getRenderItem = ({item}: {item: PlanexGroupCategoryType}) => { const {currentSearchString, favoriteGroups} = this.state; if ( this.shouldDisplayAccordion(item) || @@ -138,8 +141,8 @@ class GroupSelectionScreen extends React.Component { * @return {*} * */ createDataset = (fetchedData: { - [key: string]: PlanexGroupCategoryType, - }): Array<{title: string, data: Array}> => { + [key: string]: PlanexGroupCategoryType; + }): Array<{title: string; data: Array}> => { return [ { title: '', @@ -190,7 +193,9 @@ class GroupSelectionScreen extends React.Component { let isFav = false; const {favoriteGroups} = this.state; favoriteGroups.forEach((favGroup: PlanexGroupType) => { - if (group.id === favGroup.id) isFav = true; + if (group.id === favGroup.id) { + isFav = true; + } }); return isFav; } @@ -202,8 +207,11 @@ class GroupSelectionScreen extends React.Component { * @param group The group to add/remove to favorites */ updateGroupFavorites(group: PlanexGroupType) { - if (this.isGroupInFavorites(group)) this.removeGroupFromFavorites(group); - else this.addGroupToFavorites(group); + if (this.isGroupInFavorites(group)) { + this.removeGroupFromFavorites(group); + } else { + this.addGroupToFavorites(group); + } } /** @@ -232,16 +240,13 @@ class GroupSelectionScreen extends React.Component { * @returns {[]} */ generateData(fetchedData: { - [key: string]: PlanexGroupCategoryType, + [key: string]: PlanexGroupCategoryType; }): Array { const {favoriteGroups} = this.state; - const data = []; - // eslint-disable-next-line flowtype/no-weak-types - (Object.values(fetchedData): Array).forEach( - (category: PlanexGroupCategoryType) => { - data.push(category); - }, - ); + const data: Array = []; + Object.values(fetchedData).forEach((category: PlanexGroupCategoryType) => { + data.push(category); + }); data.sort(sortName); data.unshift({ name: i18n.t('screens.planex.favorites'), @@ -258,7 +263,7 @@ class GroupSelectionScreen extends React.Component { */ removeGroupFromFavorites(group: PlanexGroupType) { this.setState((prevState: StateType): { - favoriteGroups: Array, + favoriteGroups: Array; } => { const {favoriteGroups} = prevState; for (let i = 0; i < favoriteGroups.length; i += 1) { @@ -282,7 +287,7 @@ class GroupSelectionScreen extends React.Component { */ addGroupToFavorites(group: PlanexGroupType) { this.setState((prevState: StateType): { - favoriteGroups: Array, + favoriteGroups: Array; } => { const {favoriteGroups} = prevState; favoriteGroups.push(group); @@ -295,7 +300,7 @@ class GroupSelectionScreen extends React.Component { }); } - render(): React.Node { + render() { const {props, state} = this; return ( ; + route: {params: {group: PlanexGroupType}}; + theme: ReactNativePaper.Theme; }; type StateType = { - dialogVisible: boolean, - dialogTitle: string | React.Node, - dialogMessage: string, - currentGroup: PlanexGroupType, + dialogVisible: boolean; + dialogTitle: string | React.ReactNode; + dialogMessage: string; + currentGroup: PlanexGroupType; }; const PLANEX_URL = 'http://planex.insa-toulouse.fr/'; @@ -154,14 +153,15 @@ class PlanexScreen extends React.Component { super(props); this.webScreenRef = React.createRef(); this.barRef = React.createRef(); - - let currentGroup = AsyncStorageManager.getString( + this.customInjectedJS = ''; + let currentGroupString = AsyncStorageManager.getString( AsyncStorageManager.PREFERENCES.planexCurrentGroup.key, ); - if (currentGroup === '') - currentGroup = {name: 'SELECT GROUP', id: -1, isFav: false}; - else { - currentGroup = JSON.parse(currentGroup); + let currentGroup: PlanexGroupType; + if (currentGroupString === '') { + currentGroup = {name: 'SELECT GROUP', id: -1}; + } else { + currentGroup = JSON.parse(currentGroupString); props.navigation.setOptions({title: currentGroup.name}); } this.state = { @@ -189,8 +189,9 @@ class PlanexScreen extends React.Component { */ shouldComponentUpdate(nextProps: PropsType): boolean { const {props, state} = this; - if (nextProps.theme.dark !== props.theme.dark) + if (nextProps.theme.dark !== props.theme.dark) { this.generateInjectedJS(state.currentGroup.id); + } return true; } @@ -199,7 +200,7 @@ class PlanexScreen extends React.Component { * * @returns {*} */ - getWebView(): React.Node { + getWebView() { const {props, state} = this; const showWebview = state.currentGroup.id !== -1; @@ -246,12 +247,16 @@ class PlanexScreen extends React.Component { * Or "setGroup" with the group id as data to set the selected group * @param data Data to pass to the action */ - sendMessage = (action: string, data: string) => { + sendMessage = (action: string, data?: string) => { let command; - if (action === 'setGroup') command = `displayAde(${data})`; - else command = `$('#calendar').fullCalendar('${action}', '${data}')`; - if (this.webScreenRef.current != null) - this.webScreenRef.current.injectJavaScript(`${command};true;`); // Injected javascript must end with true + if (action === 'setGroup') { + command = `displayAde(${data})`; + } else { + command = `$('#calendar').fullCalendar('${action}', '${data}')`; + } + if (this.webScreenRef.current != null) { + this.webScreenRef.current.injectJavaScript(`${command};true;`); + } // Injected javascript must end with true }; /** @@ -261,10 +266,10 @@ class PlanexScreen extends React.Component { */ onMessage = (event: {nativeEvent: {data: string}}) => { const data: { - start: string, - end: string, - title: string, - color: string, + start: string; + end: string; + title: string; + color: string; } = JSON.parse(event.nativeEvent.data); const startDate = dateToString(new Date(data.start), true); const endDate = dateToString(new Date(data.end), true); @@ -272,8 +277,9 @@ class PlanexScreen extends React.Component { const endString = getTimeOnlyString(endDate); let msg = `${DateManager.getInstance().getTranslatedDate(startDate)}\n`; - if (startString != null && endString != null) + if (startString != null && endString != null) { msg += `${startString} - ${endString}`; + } this.showDialog(data.title, msg); }; @@ -286,7 +292,8 @@ class PlanexScreen extends React.Component { showDialog = (title: string, message: string) => { this.setState({ dialogVisible: true, - dialogTitle: , + // @ts-ignore + dialogTitle: , dialogMessage: message, }); }; @@ -305,8 +312,10 @@ class PlanexScreen extends React.Component { * * @param event */ - onScroll = (event: SyntheticEvent) => { - if (this.barRef.current != null) this.barRef.current.onScroll(event); + onScroll = (event: NativeSyntheticEvent) => { + if (this.barRef.current != null) { + this.barRef.current.onScroll(event); + } }; /** @@ -354,13 +363,14 @@ class PlanexScreen extends React.Component { DateManager.isWeekend(new Date()) ? 'calendar.next()' : '' }${INJECT_STYLE}`; - if (ThemeManager.getNightMode()) + if (ThemeManager.getNightMode()) { this.customInjectedJS += `$('head').append('');`; + } this.customInjectedJS += 'removeAlpha();});true;'; // Prevents crash on ios } - render(): React.Node { + render() { const {props, state} = this; return (