src/screens/Planex/GroupSelectionScreen.js

@@ -17,6 +17,8 @@
  * 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';
@@ -30,35 +32,31 @@ 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<any>;
+  navigation: StackNavigationProp,
 };
 
 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()) {
+  if (a.name.toLowerCase() < b.name.toLowerCase()) return -1;
-    return -1;
+  if (a.name.toLowerCase() > b.name.toLowerCase()) return 1;
-  }
-  if (a.name.toLowerCase() > b.name.toLowerCase()) {
-    return 1;
-  }
   return 0;
 }
 
@@ -98,9 +96,8 @@ class GroupSelectionScreen extends React.Component<PropsType, StateType> {
    *
    * @return {*}
    */
-  getSearchBar = () => {
+  getSearchBar = (): React.Node => {
     return (
-      // @ts-ignore
       <Searchbar
         placeholder={i18n.t('screens.proximo.search')}
         onChangeText={this.onSearchStringChange}
@@ -114,7 +111,7 @@ class GroupSelectionScreen extends React.Component<PropsType, StateType> {
    * @param item The article to render
    * @return {*}
    */
-  getRenderItem = ({item}: {item: PlanexGroupCategoryType}) => {
+  getRenderItem = ({item}: {item: PlanexGroupCategoryType}): React.Node => {
     const {currentSearchString, favoriteGroups} = this.state;
     if (
       this.shouldDisplayAccordion(item) ||
@@ -141,8 +138,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: '',
@@ -193,9 +190,7 @@ class GroupSelectionScreen extends React.Component<PropsType, StateType> {
     let isFav = false;
     const {favoriteGroups} = this.state;
     favoriteGroups.forEach((favGroup: PlanexGroupType) => {
-      if (group.id === favGroup.id) {
+      if (group.id === favGroup.id) isFav = true;
-        isFav = true;
-      }
     });
     return isFav;
   }
@@ -207,11 +202,8 @@ class GroupSelectionScreen extends React.Component<PropsType, StateType> {
    * @param group The group to add/remove to favorites
    */
   updateGroupFavorites(group: PlanexGroupType) {
-    if (this.isGroupInFavorites(group)) {
+    if (this.isGroupInFavorites(group)) this.removeGroupFromFavorites(group);
-      this.removeGroupFromFavorites(group);
+    else this.addGroupToFavorites(group);
-    } else {
-      this.addGroupToFavorites(group);
-    }
   }
 
   /**
@@ -240,13 +232,16 @@ class GroupSelectionScreen extends React.Component<PropsType, StateType> {
    * @returns {[]}
    */
   generateData(fetchedData: {
-    [key: string]: PlanexGroupCategoryType;
+    [key: string]: PlanexGroupCategoryType,
   }): Array<PlanexGroupCategoryType> {
     const {favoriteGroups} = this.state;
-    const data: Array<PlanexGroupCategoryType> = [];
+    const data = [];
-    Object.values(fetchedData).forEach((category: PlanexGroupCategoryType) => {
+    // eslint-disable-next-line flowtype/no-weak-types
+    (Object.values(fetchedData): Array<any>).forEach(
+      (category: PlanexGroupCategoryType) => {
         data.push(category);
-    });
+      },
+    );
     data.sort(sortName);
     data.unshift({
       name: i18n.t('screens.planex.favorites'),
@@ -263,7 +258,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) {
@@ -287,7 +282,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);
@@ -300,7 +295,7 @@ class GroupSelectionScreen extends React.Component<PropsType, StateType> {
     });
   }
 
-  render() {
+  render(): React.Node {
     const {props, state} = this;
     return (
       <WebSectionList

src/screens/Planex/PlanexScreen.js

@@ -22,10 +22,11 @@
 import * as React from 'react';
 import {Title, withTheme} from 'react-native-paper';
 import i18n from 'i18n-js';
-import {NativeScrollEvent, NativeSyntheticEvent, View} from 'react-native';
+import {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';
@@ -39,16 +40,16 @@ import {MASCOT_STYLE} from '../../components/Mascot/Mascot';
 import MascotPopup from '../../components/Mascot/MascotPopup';
 
 type PropsType = {
-  navigation: StackNavigationProp<any>;
+  navigation: StackNavigationProp,
-  route: {params: {group: PlanexGroupType}};
+  route: {params: {group: PlanexGroupType}},
-  theme: ReactNativePaper.Theme;
+  theme: CustomThemeType,
 };
 
 type StateType = {
-  dialogVisible: boolean;
+  dialogVisible: boolean,
-  dialogTitle: string | React.ReactNode;
+  dialogTitle: string | React.Node,
-  dialogMessage: string;
+  dialogMessage: string,
-  currentGroup: PlanexGroupType;
+  currentGroup: PlanexGroupType,
 };
 
 const PLANEX_URL = 'http://planex.insa-toulouse.fr/';
@@ -153,15 +154,14 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
     super(props);
     this.webScreenRef = React.createRef();
     this.barRef = React.createRef();
-    this.customInjectedJS = '';
+
-    let currentGroupString = AsyncStorageManager.getString(
+    let currentGroup = AsyncStorageManager.getString(
       AsyncStorageManager.PREFERENCES.planexCurrentGroup.key,
     );
-    let currentGroup: PlanexGroupType;
+    if (currentGroup === '')
-    if (currentGroupString === '') {
+      currentGroup = {name: 'SELECT GROUP', id: -1, isFav: false};
-      currentGroup = {name: 'SELECT GROUP', id: -1};
+    else {
-    } else {
+      currentGroup = JSON.parse(currentGroup);
-      currentGroup = JSON.parse(currentGroupString);
       props.navigation.setOptions({title: currentGroup.name});
     }
     this.state = {
@@ -189,9 +189,8 @@ 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;
   }
 
@@ -200,7 +199,7 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
    *
    * @returns {*}
    */
-  getWebView() {
+  getWebView(): React.Node {
     const {props, state} = this;
     const showWebview = state.currentGroup.id !== -1;
 
@@ -247,16 +246,12 @@ 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') {
+    if (action === 'setGroup') command = `displayAde(${data})`;
-      command = `displayAde(${data})`;
+    else command = `$('#calendar').fullCalendar('${action}', '${data}')`;
-    } else {
+    if (this.webScreenRef.current != null)
-      command = `$('#calendar').fullCalendar('${action}', '${data}')`;
+      this.webScreenRef.current.injectJavaScript(`${command};true;`); // Injected javascript must end with true
-    }
-    if (this.webScreenRef.current != null) {
-      this.webScreenRef.current.injectJavaScript(`${command};true;`);
-    } // Injected javascript must end with true
   };
 
   /**
@@ -266,10 +261,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);
@@ -277,9 +272,8 @@ 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);
   };
 
@@ -292,7 +286,6 @@ 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,
     });
@@ -312,10 +305,8 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
    *
    * @param event
    */
-  onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+  onScroll = (event: SyntheticEvent<EventTarget>) => {
-    if (this.barRef.current != null) {
+    if (this.barRef.current != null) this.barRef.current.onScroll(event);
-      this.barRef.current.onScroll(event);
-    }
   };
 
   /**
@@ -363,14 +354,13 @@ 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() {
+  render(): React.Node {
     const {props, state} = this;
     return (
       <View style={{flex: 1}}>

src/screens/Planning/PlanningDisplayScreen.js

@@ -36,12 +36,12 @@ import type {PlanningEventType} from '../../utils/Planning';
 import ImageGalleryButton from '../../components/Media/ImageGalleryButton';
 
 type PropsType = {
-  navigation: StackNavigationProp<any>;
+  navigation: StackNavigationProp,
-  route: {params: {data: PlanningEventType; id: number; eventId: number}};
+  route: {params: {data: PlanningEventType, id: number, eventId: number}},
 };
 
 type StateType = {
-  loading: boolean;
+  loading: boolean,
 };
 
 const EVENT_INFO_URL = 'event/info';
@@ -111,23 +111,22 @@ class PlanningDisplayScreen extends React.Component<PropsType, StateType> {
    *
    * @returns {*}
    */
-  getContent() {
+  getContent(): React.Node {
+    const {navigation} = this.props;
     const {displayData} = this;
-    if (displayData == null) {
+    if (displayData == null) return null;
-      return null;
-    }
     let subtitle = getTimeOnlyString(displayData.date_begin);
     const dateString = getDateOnlyString(displayData.date_begin);
-    if (dateString !== null && subtitle != null) {
+    if (dateString !== null && subtitle != null)
       subtitle += ` | ${DateManager.getInstance().getTranslatedDate(
         dateString,
       )}`;
-    }
     return (
       <CollapsibleScrollView style={{paddingLeft: 5, paddingRight: 5}} hasTab>
         <Card.Title title={displayData.title} subtitle={subtitle} />
         {displayData.logo !== null ? (
           <ImageGalleryButton
+            navigation={navigation}
             images={[{url: displayData.logo}]}
             style={{
               width: 300,
@@ -155,9 +154,9 @@ class PlanningDisplayScreen extends React.Component<PropsType, StateType> {
    *
    * @returns {*}
    */
-  getErrorView() {
+  getErrorView(): React.Node {
     const {navigation} = this.props;
-    if (this.errorCode === ERROR_TYPE.BAD_INPUT) {
+    if (this.errorCode === ERROR_TYPE.BAD_INPUT)
       return (
         <ErrorView
           navigation={navigation}
@@ -166,7 +165,6 @@ class PlanningDisplayScreen extends React.Component<PropsType, StateType> {
           icon="calendar-remove"
         />
       );
-    }
     return (
       <ErrorView
         navigation={navigation}
@@ -181,19 +179,15 @@ class PlanningDisplayScreen extends React.Component<PropsType, StateType> {
    */
   fetchData = () => {
     this.setState({loading: true});
-    apiRequest<PlanningEventType>(EVENT_INFO_URL, 'POST', {id: this.eventId})
+    apiRequest(EVENT_INFO_URL, 'POST', {id: this.eventId})
       .then(this.onFetchSuccess)
       .catch(this.onFetchError);
   };
 
-  render() {
+  render(): React.Node {
     const {loading} = this.state;
-    if (loading) {
+    if (loading) return <BasicLoadingScreen />;
-      return <BasicLoadingScreen />;
+    if (this.errorCode === 0) return this.getContent();
-    }
-    if (this.errorCode === 0) {
-      return this.getContent();
-    }
     return this.getErrorView();
   }
 }

src/screens/Planning/PlanningScreen.js

@@ -17,6 +17,8 @@
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+// @flow
+
 import * as React from 'react';
 import {BackHandler, View} from 'react-native';
 import i18n from 'i18n-js';
@@ -24,12 +26,12 @@ import {Agenda, LocaleConfig} from 'react-native-calendars';
 import {Avatar, Divider, List} from 'react-native-paper';
 import {StackNavigationProp} from '@react-navigation/stack';
 import {readData} from '../../utils/WebData';
+import type {PlanningEventType} from '../../utils/Planning';
 import {
   generateEventAgenda,
   getCurrentDateString,
   getDateOnlyString,
   getTimeOnlyString,
-  PlanningEventType,
 } from '../../utils/Planning';
 import CustomAgenda from '../../components/Overrides/CustomAgenda';
 import {MASCOT_STYLE} from '../../components/Mascot/Mascot';
@@ -75,16 +77,17 @@ LocaleConfig.locales.fr = {
     'Samedi',
   ],
   dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
+  today: "Aujourd'hui",
 };
 
 type PropsType = {
-  navigation: StackNavigationProp<any>;
+  navigation: StackNavigationProp,
 };
 
 type StateType = {
-  refreshing: boolean;
+  refreshing: boolean,
-  agendaItems: {[key: string]: Array<PlanningEventType>};
+  agendaItems: {[key: string]: Array<PlanningEventType>},
-  calendarShowing: boolean;
+  calendarShowing: boolean,
 };
 
 const FETCH_URL = 'https://www.amicale-insat.fr/api/event/list';
@@ -94,22 +97,19 @@ const AGENDA_MONTH_SPAN = 3;
  * Class defining the app's planning screen
  */
 class PlanningScreen extends React.Component<PropsType, StateType> {
-  agendaRef: null | Agenda<any>;
+  agendaRef: null | Agenda;
 
-  lastRefresh: Date | null;
+  lastRefresh: Date;
 
   minTimeBetweenRefresh = 60;
 
-  currentDate: string | null;
+  currentDate = getDateOnlyString(getCurrentDateString());
 
   constructor(props: PropsType) {
     super(props);
     if (i18n.currentLocale().startsWith('fr')) {
       LocaleConfig.defaultLocale = 'fr';
     }
-    this.agendaRef = null;
-    this.currentDate = getDateOnlyString(getCurrentDateString());
-    this.lastRefresh = null;
     this.state = {
       refreshing: false,
       agendaItems: {},
@@ -145,7 +145,6 @@ class PlanningScreen extends React.Component<PropsType, StateType> {
   onBackButtonPressAndroid = (): boolean => {
     const {calendarShowing} = this.state;
     if (calendarShowing && this.agendaRef != null) {
-      // @ts-ignore
       this.agendaRef.chooseDay(this.agendaRef.state.selectedDay);
       return true;
     }
@@ -157,13 +156,11 @@ class PlanningScreen extends React.Component<PropsType, StateType> {
    */
   onRefresh = () => {
     let canRefresh;
-    if (this.lastRefresh) {
+    if (this.lastRefresh !== undefined)
       canRefresh =
         (new Date().getTime() - this.lastRefresh.getTime()) / 1000 >
         this.minTimeBetweenRefresh;
-    } else {
+    else canRefresh = true;
-      canRefresh = true;
-    }
 
     if (canRefresh) {
       this.setState({refreshing: true});
@@ -188,7 +185,7 @@ class PlanningScreen extends React.Component<PropsType, StateType> {
    *
    * @param ref
    */
-  onAgendaRef = (ref: Agenda<any>) => {
+  onAgendaRef = (ref: Agenda) => {
     this.agendaRef = ref;
   };
 
@@ -207,24 +204,23 @@ class PlanningScreen extends React.Component<PropsType, StateType> {
    * @param item The current event to render
    * @return {*}
    */
-  getRenderItem = (item: PlanningEventType) => {
+  getRenderItem = (item: PlanningEventType): React.Node => {
     const {navigation} = this.props;
     const onPress = () => {
       navigation.navigate('planning-information', {
         data: item,
       });
     };
-    const logo = item.logo;
+    if (item.logo !== null) {
-    if (logo) {
       return (
         <View>
           <Divider />
           <List.Item
             title={item.title}
             description={getTimeOnlyString(item.date_begin)}
-            left={() => (
+            left={(): React.Node => (
               <Avatar.Image
-                source={{uri: logo}}
+                source={{uri: item.logo}}
                 style={{backgroundColor: 'transparent'}}
               />
             )}
@@ -250,22 +246,23 @@ class PlanningScreen extends React.Component<PropsType, StateType> {
    *
    * @return {*}
    */
-  getRenderEmptyDate = () => <Divider />;
+  getRenderEmptyDate = (): React.Node => <Divider />;
 
-  render() {
+  render(): React.Node {
     const {state, props} = this;
     return (
       <View style={{flex: 1}}>
         <CustomAgenda
+          // eslint-disable-next-line react/jsx-props-no-spreading
           {...props}
           // the list of items that have to be displayed in agenda. If you want to render item as empty date
           // the value of date key kas to be an empty array []. If there exists no value for date key it is
           // considered that the date in question is not yet loaded
           items={state.agendaItems}
           // initially selected day
-          selected={this.currentDate ? this.currentDate : undefined}
+          selected={this.currentDate}
           // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
-          minDate={this.currentDate ? this.currentDate : undefined}
+          minDate={this.currentDate}
           // Max amount of months allowed to scroll to the past. Default = 50
           pastScrollRange={1}
           // Max amount of months allowed to scroll to the future. Default = 50
@@ -282,9 +279,6 @@ class PlanningScreen extends React.Component<PropsType, StateType> {
           firstDay={1}
           // ref to this agenda in order to handle back button event
           onRef={this.onAgendaRef}
-          rowHasChanged={(r1: PlanningEventType, r2: PlanningEventType) =>
-            r1.id !== r2.id
-          }
         />
         <MascotPopup
           prefKey={AsyncStorageManager.PREFERENCES.eventsShowMascot.key}
@@ -292,6 +286,7 @@ class PlanningScreen extends React.Component<PropsType, StateType> {
           message={i18n.t('screens.planning.mascotDialog.message')}
           icon="party-popper"
           buttons={{
+            action: null,
             cancel: {
               message: i18n.t('screens.planning.mascotDialog.button'),
               icon: 'check',