Update Planex screens to use TypeScript

src/screens/Planex/GroupSelectionScreen.tsx

@@ -17,8 +17,6 @@
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-// @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,
+  name: string;
-  id: number,
+  id: number;
 };
 
 export type PlanexGroupCategoryType = {
-  name: string,
+  name: string;
-  id: number,
+  id: number;
-  content: Array<PlanexGroupType>,
+  content: Array<PlanexGroupType>;
 };
 
 type PropsType = {
-  navigation: StackNavigationProp,
+  navigation: StackNavigationProp<any>;
 };
 
 type StateType = {
-  currentSearchString: string,
+  currentSearchString: string;
-  favoriteGroups: Array<PlanexGroupType>,
+  favoriteGroups: Array<PlanexGroupType>;
 };
 
 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()) {
-  if (a.name.toLowerCase() > b.name.toLowerCase()) return 1;
+    return -1;
+  }
+  if (a.name.toLowerCase() > b.name.toLowerCase()) {
+    return 1;
+  }
   return 0;
 }
 
@@ -96,8 +98,9 @@ class GroupSelectionScreen extends React.Component<PropsType, StateType> {
    *
    * @return {*}
    */
-  getSearchBar = (): React.Node => {
+  getSearchBar = () => {
     return (
+      // @ts-ignore
       <Searchbar
         placeholder={i18n.t('screens.proximo.search')}
         onChangeText={this.onSearchStringChange}
@@ -111,7 +114,7 @@ class GroupSelectionScreen extends React.Component<PropsType, StateType> {
    * @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<PropsType, StateType> {
    * @return {*}
    * */
   createDataset = (fetchedData: {
-    [key: string]: PlanexGroupCategoryType,
+    [key: string]: PlanexGroupCategoryType;
-  }): Array<{title: string, data: Array<PlanexGroupCategoryType>}> => {
+  }): Array<{title: string; data: Array<PlanexGroupCategoryType>}> => {
     return [
       {
         title: '',
@@ -190,7 +193,9 @@ class GroupSelectionScreen extends React.Component<PropsType, StateType> {
     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<PropsType, StateType> {
    * @param group The group to add/remove to favorites
    */
   updateGroupFavorites(group: PlanexGroupType) {
-    if (this.isGroupInFavorites(group)) this.removeGroupFromFavorites(group);
+    if (this.isGroupInFavorites(group)) {
-    else this.addGroupToFavorites(group);
+      this.removeGroupFromFavorites(group);
+    } else {
+      this.addGroupToFavorites(group);
+    }
   }
 
   /**
@@ -232,16 +240,13 @@ class GroupSelectionScreen extends React.Component<PropsType, StateType> {
    * @returns {[]}
    */
   generateData(fetchedData: {
-    [key: string]: PlanexGroupCategoryType,
+    [key: string]: PlanexGroupCategoryType;
   }): Array<PlanexGroupCategoryType> {
     const {favoriteGroups} = this.state;
-    const data = [];
+    const data: Array<PlanexGroupCategoryType> = [];
-    // eslint-disable-next-line flowtype/no-weak-types
+    Object.values(fetchedData).forEach((category: PlanexGroupCategoryType) => {
-    (Object.values(fetchedData): Array<any>).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<PropsType, StateType> {
    */
   removeGroupFromFavorites(group: PlanexGroupType) {
     this.setState((prevState: StateType): {
-      favoriteGroups: Array<PlanexGroupType>,
+      favoriteGroups: Array<PlanexGroupType>;
     } => {
       const {favoriteGroups} = prevState;
       for (let i = 0; i < favoriteGroups.length; i += 1) {
@@ -282,7 +287,7 @@ class GroupSelectionScreen extends React.Component<PropsType, StateType> {
    */
   addGroupToFavorites(group: PlanexGroupType) {
     this.setState((prevState: StateType): {
-      favoriteGroups: Array<PlanexGroupType>,
+      favoriteGroups: Array<PlanexGroupType>;
     } => {
       const {favoriteGroups} = prevState;
       favoriteGroups.push(group);
@@ -295,7 +300,7 @@ class GroupSelectionScreen extends React.Component<PropsType, StateType> {
     });
   }
 
-  render(): React.Node {
+  render() {
     const {props, state} = this;
     return (
       <WebSectionList

src/screens/Planex/PlanexScreen.tsx

@@ -22,11 +22,10 @@
 import * as React from 'react';
 import {Title, withTheme} from 'react-native-paper';
 import i18n from 'i18n-js';
-import {View} from 'react-native';
+import {NativeScrollEvent, NativeSyntheticEvent, View} from 'react-native';
 import {CommonActions} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 import Autolink from 'react-native-autolink';
-import type {CustomThemeType} from '../../managers/ThemeManager';
 import ThemeManager from '../../managers/ThemeManager';
 import WebViewScreen from '../../components/Screens/WebViewScreen';
 import AsyncStorageManager from '../../managers/AsyncStorageManager';
@@ -40,16 +39,16 @@ import {MASCOT_STYLE} from '../../components/Mascot/Mascot';
 import MascotPopup from '../../components/Mascot/MascotPopup';
 
 type PropsType = {
-  navigation: StackNavigationProp,
+  navigation: StackNavigationProp<any>;
-  route: {params: {group: PlanexGroupType}},
+  route: {params: {group: PlanexGroupType}};
-  theme: CustomThemeType,
+  theme: ReactNativePaper.Theme;
 };
 
 type StateType = {
-  dialogVisible: boolean,
+  dialogVisible: boolean;
-  dialogTitle: string | React.Node,
+  dialogTitle: string | React.ReactNode;
-  dialogMessage: string,
+  dialogMessage: string;
-  currentGroup: PlanexGroupType,
+  currentGroup: PlanexGroupType;
 };
 
 const PLANEX_URL = 'http://planex.insa-toulouse.fr/';
@@ -154,14 +153,15 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
     super(props);
     this.webScreenRef = React.createRef();
     this.barRef = React.createRef();
-
+    this.customInjectedJS = '';
-    let currentGroup = AsyncStorageManager.getString(
+    let currentGroupString = AsyncStorageManager.getString(
       AsyncStorageManager.PREFERENCES.planexCurrentGroup.key,
     );
-    if (currentGroup === '')
+    let currentGroup: PlanexGroupType;
-      currentGroup = {name: 'SELECT GROUP', id: -1, isFav: false};
+    if (currentGroupString === '') {
-    else {
+      currentGroup = {name: 'SELECT GROUP', id: -1};
-      currentGroup = JSON.parse(currentGroup);
+    } else {
+      currentGroup = JSON.parse(currentGroupString);
       props.navigation.setOptions({title: currentGroup.name});
     }
     this.state = {
@@ -189,8 +189,9 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
    */
   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<PropsType, StateType> {
    *
    * @returns {*}
    */
-  getWebView(): React.Node {
+  getWebView() {
     const {props, state} = this;
     const showWebview = state.currentGroup.id !== -1;
 
@@ -246,12 +247,16 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
    * 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})`;
+    if (action === 'setGroup') {
-    else command = `$('#calendar').fullCalendar('${action}', '${data}')`;
+      command = `displayAde(${data})`;
-    if (this.webScreenRef.current != null)
+    } else {
-      this.webScreenRef.current.injectJavaScript(`${command};true;`); // Injected javascript must end with true
+      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<PropsType, StateType> {
    */
   onMessage = (event: {nativeEvent: {data: string}}) => {
     const data: {
-      start: string,
+      start: string;
-      end: string,
+      end: string;
-      title: string,
+      title: string;
-      color: 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<PropsType, StateType> {
     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,6 +292,7 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
   showDialog = (title: string, message: string) => {
     this.setState({
       dialogVisible: true,
+      // @ts-ignore
       dialogTitle: <Autolink text={title} component={Title} />,
       dialogMessage: message,
     });
@@ -305,8 +312,10 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
    *
    * @param event
    */
-  onScroll = (event: SyntheticEvent<EventTarget>) => {
+  onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-    if (this.barRef.current != null) this.barRef.current.onScroll(event);
+    if (this.barRef.current != null) {
+      this.barRef.current.onScroll(event);
+    }
   };
 
   /**
@@ -354,13 +363,14 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
       DateManager.isWeekend(new Date()) ? 'calendar.next()' : ''
     }${INJECT_STYLE}`;
 
-    if (ThemeManager.getNightMode())
+    if (ThemeManager.getNightMode()) {
       this.customInjectedJS += `$('head').append('<style>${CUSTOM_CSS_DARK}</style>');`;
+    }
 
     this.customInjectedJS += 'removeAlpha();});true;'; // Prevents crash on ios
   }
 
-  render(): React.Node {
+  render() {
     const {props, state} = this;
     return (
       <View style={{flex: 1}}>