refactor planex screen to functionnal component

src/screens/Planex/PlanexScreen.tsx

@@ -17,8 +17,8 @@
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import * as React from 'react';
+import React, { useCallback, useRef, useState } from 'react';
-import { Title, withTheme } from 'react-native-paper';
+import { Title, useTheme } from 'react-native-paper';
 import i18n from 'i18n-js';
 import {
   NativeScrollEvent,
@@ -26,8 +26,11 @@ import {
   StyleSheet,
   View,
 } from 'react-native';
-import { CommonActions } from '@react-navigation/native';
+import {
-import { StackNavigationProp } from '@react-navigation/stack';
+  CommonActions,
+  useFocusEffect,
+  useNavigation,
+} from '@react-navigation/native';
 import Autolink from 'react-native-autolink';
 import ThemeManager from '../../managers/ThemeManager';
 import WebViewScreen from '../../components/Screens/WebViewScreen';
@@ -43,20 +46,7 @@ import MascotPopup from '../../components/Mascot/MascotPopup';
 import { getPrettierPlanexGroupName } from '../../utils/Utils';
 import GENERAL_STYLES from '../../constants/Styles';
 import Urls from '../../constants/Urls';
-
+import { useMountEffect } from '../../utils/customHooks';
-type PropsType = {
-  navigation: StackNavigationProp<any>;
-  route: { params: { group: PlanexGroupType } };
-  theme: ReactNativePaper.Theme;
-};
-
-type StateType = {
-  dialogVisible: boolean;
-  dialogTitle: string | React.ReactNode;
-  dialogMessage: string;
-  currentGroup: PlanexGroupType;
-  injectJS: string;
-};
 
 // // JS + JQuery functions used to remove alpha from events. Copy paste in browser console for quick testing
 // // Remove alpha from given Jquery node
@@ -131,14 +121,19 @@ calendar.option({
   }
 });`;
 
+// Mobile friendly CSS
 const CUSTOM_CSS =
   'body>.container{padding-top:20px; padding-bottom: 50px}header,#entite,#groupe_visibility,#calendar .fc-left,#calendar .fc-right{display:none}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-time{font-size:.5rem}#calendar .fc-month-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-month-view .fc-content-skeleton .fc-time{font-size:.7rem}.fc-axis{font-size:.8rem;width:15px!important}.fc-day-header{font-size:.8rem}.fc-unthemed td.fc-today{background:#be1522; opacity:0.4}';
+
+// Dark mode CSS, to be used with the mobile friendly css
 const CUSTOM_CSS_DARK =
   'body{background-color:#121212}.fc-unthemed .fc-content,.fc-unthemed .fc-divider,.fc-unthemed .fc-list-heading td,.fc-unthemed .fc-list-view,.fc-unthemed .fc-popover,.fc-unthemed .fc-row,.fc-unthemed tbody,.fc-unthemed td,.fc-unthemed th,.fc-unthemed thead{border-color:#222}.fc-toolbar .fc-center>*,h2,table{color:#fff}.fc-event-container{color:#121212}.fc-event-container .fc-bg{opacity:0.2;background-color:#000}.fc-unthemed td.fc-today{background:#be1522; opacity:0.4}';
 
-const INJECT_STYLE = `
+// Inject the custom css into the webpage
-$('head').append('<style>${CUSTOM_CSS}</style>');
+const INJECT_STYLE = `$('head').append('<style>${CUSTOM_CSS}</style>');`;
-`;
+
+// Inject the dark mode into the webpage, to call after the custom css inject above
+const INJECT_STYLE_DARK = `$('head').append('<style>${CUSTOM_CSS_DARK}</style>');`;
 
 const styles = StyleSheet.create({
   container: {
@@ -148,60 +143,64 @@ const styles = StyleSheet.create({
   },
 });
 
-/**
+type Props = {
- * Class defining the app's Planex screen.
+  route: {
- * This screen uses a webview to render the page
+    params: {
- */
+      group?: PlanexGroupType;
-class PlanexScreen extends React.Component<PropsType, StateType> {
+    };
-  barRef: { current: null | AnimatedBottomBar };
+  };
+};
 
-  /**
+function PlanexScreen(props: Props) {
-   * Defines custom injected JavaScript to improve the page display on mobile
+  const navigation = useNavigation();
-   */
+  const theme = useTheme();
-  constructor(props: PropsType) {
+  const barRef = useRef<typeof AnimatedBottomBar>();
-    super(props);
+
-    this.barRef = React.createRef();
+  const [dialogContent, setDialogContent] = useState<
+    | undefined
+    | {
+        title: string | React.ReactElement;
+        message: string | React.ReactElement;
+      }
+  >();
+  const [injectJS, setInjectJS] = useState('');
+  const [currentGroup, setCurrentGroup] = useState<
+    PlanexGroupType | undefined
+  >();
+
+  useMountEffect(() => {
     let currentGroupString = AsyncStorageManager.getString(
       AsyncStorageManager.PREFERENCES.planexCurrentGroup.key
     );
-    let currentGroup: PlanexGroupType;
+    let group: PlanexGroupType;
-    if (currentGroupString === '') {
+    if (currentGroupString !== '') {
-      currentGroup = { name: 'SELECT GROUP', id: -1 };
+      group = JSON.parse(currentGroupString);
-    } else {
+      navigation.setOptions({
-      currentGroup = JSON.parse(currentGroupString);
+        title: getPrettierPlanexGroupName(group.name),
-      props.navigation.setOptions({
-        title: getPrettierPlanexGroupName(currentGroup.name),
       });
+      setCurrentGroup(group);
     }
-    this.state = {
+  });
-      dialogVisible: false,
-      dialogTitle: '',
-      dialogMessage: '',
-      currentGroup,
-      injectJS: '',
-    };
-  }
 
-  /**
+  useFocusEffect(
-   * Register for events and show the banner after 2 seconds
+    useCallback(() => {
-   */
+      if (props.route.params?.group) {
-  componentDidMount() {
+        // reset params to prevent infinite loop
-    const { navigation } = this.props;
+        selectNewGroup(props.route.params.group);
-    navigation.addListener('focus', this.onScreenFocus);
+        navigation.dispatch(CommonActions.setParams({ group: undefined }));
       }
-
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+  );
   /**
    * Gets the Webview, with an error view on top if no group is selected.
    *
    * @returns {*}
    */
-  getWebView() {
+  const getWebView = () => {
-    const { state } = this;
-    const showWebview = state.currentGroup.id !== -1;
-
     return (
       <View style={GENERAL_STYLES.flex}>
-        {!showWebview ? (
+        {!currentGroup ? (
           <ErrorView
             icon={'account-clock'}
             message={i18n.t('screens.planex.noGroupSelected')}
@@ -209,28 +208,21 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
         ) : null}
         <WebViewScreen
           url={Urls.planex.planning}
-          initialJS={this.generateInjectedJS(this.state.currentGroup.id)}
+          initialJS={generateInjectedJS(currentGroup)}
-          injectJS={this.state.injectJS}
+          injectJS={injectJS}
-          onMessage={this.onMessage}
+          onMessage={onMessage}
-          onScroll={this.onScroll}
+          onScroll={onScroll}
           showAdvancedControls={false}
         />
       </View>
     );
-  }
+  };
 
   /**
    * Callback used when the user clicks on the navigate to settings button.
    * This will hide the banner and open the SettingsScreen
    */
-  onGoToSettings = () => {
+  const onGoToSettings = () => navigation.navigate('settings');
-    const { navigation } = this.props;
-    navigation.navigate('settings');
-  };
-
-  onScreenFocus = () => {
-    this.handleNavigationParams();
-  };
 
   /**
    * Sends a FullCalendar action to the web page inside the webview.
@@ -239,7 +231,7 @@ 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) => {
+  const sendMessage = (action: string, data?: string) => {
     let command;
     if (action === 'setGroup') {
       command = `displayAde(${data})`;
@@ -249,10 +241,10 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
     // String must resolve to true to prevent crash on iOS
     command += ';true;';
     // Change the injected
-    if (command === this.state.injectJS) {
+    if (command === injectJS) {
       command += ';true;';
     }
-    this.setState({ injectJS: command });
+    setInjectJS(command);
   };
 
   /**
@@ -260,7 +252,7 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
    *
    * @param event
    */
-  onMessage = (event: { nativeEvent: { data: string } }) => {
+  const onMessage = (event: { nativeEvent: { data: string } }) => {
     const data: {
       start: string;
       end: string;
@@ -276,7 +268,7 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
     if (startString != null && endString != null) {
       msg += `${startString} - ${endString}`;
     }
-    this.showDialog(data.title, msg);
+    showDialog(data.title, msg);
   };
 
   /**
@@ -285,10 +277,9 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
    * @param title The dialog's title
    * @param message The message to show
    */
-  showDialog = (title: string, message: string) => {
+  const showDialog = (title: string, message: string) => {
-    this.setState({
+    setDialogContent({
-      dialogVisible: true,
+      title: (
-      dialogTitle: (
         <Autolink
           text={title}
           hashtag={'facebook'}
@@ -299,44 +290,20 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
           phone={true}
         />
       ),
-      dialogMessage: message,
+      message: message,
     });
   };
 
-  /**
+  const hideDialog = () => setDialogContent(undefined);
-   * Hides the dialog
-   */
-  hideDialog = () => {
-    this.setState({
-      dialogVisible: false,
-    });
-  };
 
   /**
    * Binds the onScroll event to the control bar for automatic hiding based on scroll direction and speed
    *
    * @param event
    */
-  onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+  const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-    if (this.barRef.current != null) {
+    if (barRef.current) {
-      this.barRef.current.onScroll(event);
+      barRef.current.onScroll(event);
-    }
-  };
-
-  /**
-   * If navigations parameters contain a group, set it as selected
-   */
-  handleNavigationParams = () => {
-    const { props } = this;
-    if (props.route.params != null) {
-      if (
-        props.route.params.group !== undefined &&
-        props.route.params.group !== null
-      ) {
-        // reset params to prevent infinite loop
-        this.selectNewGroup(props.route.params.group);
-        props.navigation.dispatch(CommonActions.setParams({ group: null }));
-      }
     }
   };
 
@@ -345,49 +312,47 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
    *
    * @param group The group object selected
    */
-  selectNewGroup(group: PlanexGroupType) {
+  const selectNewGroup = (group: PlanexGroupType) => {
-    const { navigation } = this.props;
+    sendMessage('setGroup', group.id.toString());
-    this.sendMessage('setGroup', group.id.toString());
+    setCurrentGroup(group);
-    this.setState({ currentGroup: group });
     AsyncStorageManager.set(
       AsyncStorageManager.PREFERENCES.planexCurrentGroup.key,
       group
     );
     navigation.setOptions({ title: getPrettierPlanexGroupName(group.name) });
-  }
+  };
 
   /**
    * Generates custom JavaScript to be injected into the webpage
    *
    * @param groupID The current group selected
    */
-  generateInjectedJS(groupID: number) {
+  const generateInjectedJS = (group: PlanexGroupType | undefined) => {
     let customInjectedJS = `$(document).ready(function() {
       ${OBSERVE_MUTATIONS_INJECTED}
-      ${FULL_CALENDAR_SETTINGS}
+      ${INJECT_STYLE}
-      displayAde(${groupID});
+      ${FULL_CALENDAR_SETTINGS}`;
-      ${INJECT_STYLE}`;
+    if (group) {
+      customInjectedJS += `displayAde(${group.id});`;
+    }
     if (DateManager.isWeekend(new Date())) {
       customInjectedJS += `calendar.next();`;
     }
     if (ThemeManager.getNightMode()) {
-      customInjectedJS += `$('head').append('<style>${CUSTOM_CSS_DARK}</style>');`;
+      customInjectedJS += INJECT_STYLE_DARK;
     }
-
     customInjectedJS += 'removeAlpha();});true;'; // Prevents crash on ios
     return customInjectedJS;
-  }
+  };
 
-  render() {
-    const { props, state } = this;
   return (
     <View style={GENERAL_STYLES.flex}>
       {/* Allow to draw webview bellow banner */}
       <View style={styles.container}>
-          {props.theme.dark ? ( // Force component theme update by recreating it on theme change
+        {theme.dark ? ( // Force component theme update by recreating it on theme change
-            this.getWebView()
+          getWebView()
         ) : (
-            <View style={GENERAL_STYLES.flex}>{this.getWebView()}</View>
+          <View style={GENERAL_STYLES.flex}>{getWebView()}</View>
         )}
       </View>
       {AsyncStorageManager.getString(
@@ -402,32 +367,31 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
             action: {
               message: i18n.t('screens.planex.mascotDialog.ok'),
               icon: 'cog',
-                onPress: this.onGoToSettings,
+              onPress: onGoToSettings,
             },
             cancel: {
               message: i18n.t('screens.planex.mascotDialog.cancel'),
               icon: 'close',
-                color: props.theme.colors.warning,
+              color: theme.colors.warning,
             },
           }}
           emotion={MASCOT_STYLE.INTELLO}
         />
       ) : null}
       <AlertDialog
-          visible={state.dialogVisible}
+        visible={dialogContent !== undefined}
-          onDismiss={this.hideDialog}
+        onDismiss={hideDialog}
-          title={state.dialogTitle}
+        title={dialogContent ? dialogContent.title : ''}
-          message={state.dialogMessage}
+        message={dialogContent ? dialogContent.message : ''}
       />
       <AnimatedBottomBar
-          navigation={props.navigation}
+        navigation={navigation}
-          ref={this.barRef}
+        ref={barRef}
-          onPress={this.sendMessage}
+        onPress={sendMessage}
-          seekAttention={state.currentGroup.id === -1}
+        seekAttention={currentGroup !== undefined}
       />
     </View>
   );
-  }
 }
 
-export default withTheme(PlanexScreen);
+export default PlanexScreen;