Convert mascot popup to functional

THis fixes TS issues

src/components/Mascot/MascotPopup.tsx

@@ -17,81 +17,31 @@
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import * as React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
-import {
+import { Portal, withTheme } from 'react-native-paper';
-  Avatar,
-  Button,
-  Card,
-  Paragraph,
-  Portal,
-  withTheme,
-} from 'react-native-paper';
 import * as Animatable from 'react-native-animatable';
 import {
   BackHandler,
   Dimensions,
-  ScrollView,
   StyleSheet,
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
 import Mascot from './Mascot';
-import SpeechArrow from './SpeechArrow';
 import AsyncStorageManager from '../../managers/AsyncStorageManager';
 import GENERAL_STYLES from '../../constants/Styles';
+import MascotSpeechBubble, {
+  MascotSpeechBubbleProps,
+} from './MascotSpeechBubble';
+import { useMountEffect } from '../../utils/customHooks';
 
-type PropsType = {
+type PropsType = MascotSpeechBubbleProps & {
-  theme: ReactNativePaper.Theme;
-  icon: string;
-  title: string;
-  message: string;
-  buttons: {
-    action?: {
-      message: string;
-      icon?: string;
-      color?: string;
-      onPress?: () => void;
-    };
-    cancel?: {
-      message: string;
-      icon?: string;
-      color?: string;
-      onPress?: () => void;
-    };
-  };
   emotion: number;
   visible?: boolean;
   prefKey?: string;
 };
 
-type StateType = {
-  shouldRenderDialog: boolean; // Used to stop rendering after hide animation
-  dialogVisible: boolean;
-};
-
 const styles = StyleSheet.create({
-  speechBubbleContainer: {
-    marginLeft: '10%',
-    marginRight: '10%',
-  },
-  speechBubbleCard: {
-    borderWidth: 4,
-    borderRadius: 10,
-  },
-  speechBubbleIcon: {
-    backgroundColor: 'transparent',
-  },
-  speechBubbleText: {
-    marginBottom: 10,
-  },
-  actionsContainer: {
-    marginTop: 10,
-    marginBottom: 10,
-  },
-  button: {
-    ...GENERAL_STYLES.centerHorizontal,
-    marginBottom: 10,
-  },
   background: {
     position: 'absolute',
     backgroundColor: 'rgba(0,0,0,0.7)',
@@ -104,245 +54,139 @@ const styles = StyleSheet.create({
   },
 });
 
+const MASCOT_SIZE = Dimensions.get('window').height / 6;
+const BUBBLE_HEIGHT = Dimensions.get('window').height / 3;
+
 /**
  * Component used to display a popup with the mascot.
  */
-class MascotPopup extends React.Component<PropsType, StateType> {
+function MascotPopup(props: PropsType) {
-  mascotSize: number;
+  const isVisible = () => {
-
+    if (props.visible !== undefined) {
-  windowWidth: number;
+      return props.visible;
-
-  windowHeight: number;
-
-  constructor(props: PropsType) {
-    super(props);
-
-    this.windowWidth = Dimensions.get('window').width;
-    this.windowHeight = Dimensions.get('window').height;
-
-    this.mascotSize = Dimensions.get('window').height / 6;
-
-    if (props.visible != null) {
-      this.state = {
-        shouldRenderDialog: props.visible,
-        dialogVisible: props.visible,
-      };
     } else if (props.prefKey != null) {
-      const visible = AsyncStorageManager.getBool(props.prefKey);
+      return AsyncStorageManager.getBool(props.prefKey);
-      this.state = {
-        shouldRenderDialog: visible,
-        dialogVisible: visible,
-      };
     } else {
-      this.state = {
+      return false;
-        shouldRenderDialog: false,
-        dialogVisible: false,
-      };
     }
-  }
-
-  componentDidMount() {
-    BackHandler.addEventListener(
-      'hardwareBackPress',
-      this.onBackButtonPressAndroid
-    );
-  }
-
-  shouldComponentUpdate(nextProps: PropsType, nextState: StateType): boolean {
-    // TODO this is so dirty it shouldn't even work
-    const { props, state } = this;
-    if (nextProps.visible) {
-      this.state.shouldRenderDialog = true;
-      this.state.dialogVisible = true;
-    } else if (
-      nextProps.visible !== props.visible ||
-      (!nextState.dialogVisible &&
-        nextState.dialogVisible !== state.dialogVisible)
-    ) {
-      this.state.dialogVisible = false;
-      setTimeout(this.onAnimationEnd, 300);
-    }
-    return true;
-  }
-
-  onAnimationEnd = () => {
-    this.setState({
-      shouldRenderDialog: false,
-    });
   };
 
-  onBackButtonPressAndroid = (): boolean => {
+  const [shouldRenderDialog, setShouldRenderDialog] = useState(isVisible());
-    const { state, props } = this;
+  const [dialogVisible, setDialogVisible] = useState(isVisible());
-    if (state.dialogVisible) {
+  const lastVisibleProps = useRef(props.visible);
+  const lastVisibleState = useRef(dialogVisible);
+
+  useMountEffect(() => {
+    BackHandler.addEventListener('hardwareBackPress', onBackButtonPressAndroid);
+  });
+
+  useEffect(() => {
+    if (props.visible && !dialogVisible) {
+      setShouldRenderDialog(true);
+      setDialogVisible(true);
+    } else if (
+      lastVisibleProps.current !== props.visible ||
+      (!dialogVisible && dialogVisible !== lastVisibleState.current)
+    ) {
+      setDialogVisible(false);
+      setTimeout(onAnimationEnd, 400);
+    }
+    lastVisibleProps.current = props.visible;
+    lastVisibleState.current = dialogVisible;
+  }, [props.visible, dialogVisible]);
+
+  const onAnimationEnd = () => {
+    setShouldRenderDialog(false);
+  };
+
+  const onBackButtonPressAndroid = (): boolean => {
+    if (dialogVisible) {
       const { cancel } = props.buttons;
       const { action } = props.buttons;
       if (cancel) {
-        this.onDismiss(cancel.onPress);
+        onDismiss(cancel.onPress);
       } else if (action) {
-        this.onDismiss(action.onPress);
+        onDismiss(action.onPress);
       } else {
-        this.onDismiss();
+        onDismiss();
       }
-
       return true;
     }
     return false;
   };
 
-  getSpeechBubble() {
+  const getSpeechBubble = () => {
-    const { state, props } = this;
     return (
-      <Animatable.View
+      <MascotSpeechBubble
-        style={styles.speechBubbleContainer}
+        title={props.title}
-        useNativeDriver
+        message={props.message}
-        animation={state.dialogVisible ? 'bounceInLeft' : 'bounceOutLeft'}
+        icon={props.icon}
-        duration={state.dialogVisible ? 1000 : 300}
+        buttons={props.buttons}
-      >
+        visible={dialogVisible}
-        <SpeechArrow
+        onDismiss={onDismiss}
-          style={{ marginLeft: this.mascotSize / 3 }}
+        speechArrowPos={MASCOT_SIZE / 3}
-          size={20}
+        bubbleMaxHeight={BUBBLE_HEIGHT}
-          color={props.theme.colors.mascotMessageArrow}
+      />
-        />
-        <Card
-          style={{
-            borderColor: props.theme.colors.mascotMessageArrow,
-            ...styles.speechBubbleCard,
-          }}
-        >
-          <Card.Title
-            title={props.title}
-            left={
-              props.icon != null
-                ? () => (
-                    <Avatar.Icon
-                      size={48}
-                      style={styles.speechBubbleIcon}
-                      color={props.theme.colors.primary}
-                      icon={props.icon}
-                    />
-                  )
-                : undefined
-            }
-          />
-          <Card.Content
-            style={{
-              maxHeight: this.windowHeight / 3,
-            }}
-          >
-            <ScrollView>
-              <Paragraph style={styles.speechBubbleText}>
-                {props.message}
-              </Paragraph>
-            </ScrollView>
-          </Card.Content>
-
-          <Card.Actions style={styles.actionsContainer}>
-            {this.getButtons()}
-          </Card.Actions>
-        </Card>
-      </Animatable.View>
     );
-  }
+  };
 
-  getMascot() {
+  const getMascot = () => {
-    const { props, state } = this;
     return (
       <Animatable.View
         useNativeDriver
-        animation={state.dialogVisible ? 'bounceInLeft' : 'bounceOutLeft'}
+        animation={dialogVisible ? 'bounceInLeft' : 'bounceOutLeft'}
-        duration={state.dialogVisible ? 1500 : 200}
+        duration={dialogVisible ? 1500 : 200}
       >
         <Mascot
-          style={{ width: this.mascotSize }}
+          style={{ width: MASCOT_SIZE }}
           animated
           emotion={props.emotion}
         />
       </Animatable.View>
     );
-  }
+  };
 
-  getButtons() {
+  const getBackground = () => {
-    const { props } = this;
-    const { action } = props.buttons;
-    const { cancel } = props.buttons;
-    return (
-      <View style={GENERAL_STYLES.center}>
-        {action != null ? (
-          <Button
-            style={styles.button}
-            mode="contained"
-            icon={action.icon}
-            color={action.color}
-            onPress={() => {
-              this.onDismiss(action.onPress);
-            }}
-          >
-            {action.message}
-          </Button>
-        ) : null}
-        {cancel != null ? (
-          <Button
-            style={styles.button}
-            mode="contained"
-            icon={cancel.icon}
-            color={cancel.color}
-            onPress={() => {
-              this.onDismiss(cancel.onPress);
-            }}
-          >
-            {cancel.message}
-          </Button>
-        ) : null}
-      </View>
-    );
-  }
-
-  getBackground() {
-    const { props, state } = this;
     return (
       <TouchableWithoutFeedback
         onPress={() => {
-          this.onDismiss(props.buttons.cancel?.onPress);
+          onDismiss(props.buttons.cancel?.onPress);
         }}
       >
         <Animatable.View
           style={styles.background}
           useNativeDriver
-          animation={state.dialogVisible ? 'fadeIn' : 'fadeOut'}
+          animation={dialogVisible ? 'fadeIn' : 'fadeOut'}
-          duration={state.dialogVisible ? 300 : 300}
+          duration={dialogVisible ? 300 : 300}
         />
       </TouchableWithoutFeedback>
     );
-  }
+  };
 
-  onDismiss = (callback?: () => void) => {
+  const onDismiss = (callback?: () => void) => {
-    const { prefKey } = this.props;
+    if (props.prefKey != null) {
-    if (prefKey != null) {
+      AsyncStorageManager.set(props.prefKey, false);
-      AsyncStorageManager.set(prefKey, false);
+      setDialogVisible(false);
-      this.setState({ dialogVisible: false });
     }
-    if (callback != null) {
+    if (callback) {
       callback();
     }
   };
 
-  render() {
+  if (shouldRenderDialog) {
-    const { shouldRenderDialog } = this.state;
+    return (
-    if (shouldRenderDialog) {
+      <Portal>
-      return (
+        {getBackground()}
-        <Portal>
+        <View style={GENERAL_STYLES.centerVertical}>
-          {this.getBackground()}
+          <View style={styles.container}>
-          <View style={GENERAL_STYLES.centerVertical}>
+            {getMascot()}
-            <View style={styles.container}>
+            {getSpeechBubble()}
-              {this.getMascot()}
-              {this.getSpeechBubble()}
-            </View>
           </View>
-        </Portal>
+        </View>
-      );
+      </Portal>
-    }
+    );
-    return null;
   }
+  return null;
 }
 
-export default withTheme(MascotPopup);
+export default MascotPopup;

src/components/Mascot/MascotSpeechBubble.tsx

@@ -0,0 +1,147 @@
+import React from 'react';
+import { ScrollView, StyleSheet, View } from 'react-native';
+import * as Animatable from 'react-native-animatable';
+import { Avatar, Button, Card, Paragraph, useTheme } from 'react-native-paper';
+import GENERAL_STYLES from '../../constants/Styles';
+import SpeechArrow from './SpeechArrow';
+
+export type MascotSpeechBubbleProps = {
+  icon: string;
+  title: string;
+  message: string;
+  visible?: boolean;
+  buttons: {
+    action?: {
+      message: string;
+      icon?: string;
+      color?: string;
+      onPress?: () => void;
+    };
+    cancel?: {
+      message: string;
+      icon?: string;
+      color?: string;
+      onPress?: () => void;
+    };
+  };
+};
+
+type Props = MascotSpeechBubbleProps & {
+  onDismiss: (callback?: () => void) => void;
+  speechArrowPos: number;
+  bubbleMaxHeight: number;
+};
+
+const styles = StyleSheet.create({
+  speechBubbleContainer: {
+    marginLeft: '10%',
+    marginRight: '10%',
+  },
+  speechBubbleCard: {
+    borderWidth: 4,
+    borderRadius: 10,
+  },
+  speechBubbleIcon: {
+    backgroundColor: 'transparent',
+  },
+  speechBubbleText: {
+    marginBottom: 10,
+  },
+  actionsContainer: {
+    marginTop: 10,
+    marginBottom: 10,
+  },
+  button: {
+    ...GENERAL_STYLES.centerHorizontal,
+    marginBottom: 10,
+  },
+});
+
+export default function MascotSpeechBubble(props: Props) {
+  const theme = useTheme();
+  const getButtons = () => {
+    const { action, cancel } = props.buttons;
+    return (
+      <View style={GENERAL_STYLES.center}>
+        {action ? (
+          <Button
+            style={styles.button}
+            mode="contained"
+            icon={action.icon}
+            color={action.color}
+            onPress={() => {
+              props.onDismiss(action.onPress);
+            }}
+          >
+            {action.message}
+          </Button>
+        ) : null}
+        {cancel != null ? (
+          <Button
+            style={styles.button}
+            mode="contained"
+            icon={cancel.icon}
+            color={cancel.color}
+            onPress={() => {
+              props.onDismiss(cancel.onPress);
+            }}
+          >
+            {cancel.message}
+          </Button>
+        ) : null}
+      </View>
+    );
+  };
+
+  return (
+    <Animatable.View
+      style={styles.speechBubbleContainer}
+      useNativeDriver={true}
+      animation={props.visible ? 'bounceInLeft' : 'bounceOutLeft'}
+      duration={props.visible ? 1000 : 300}
+    >
+      <SpeechArrow
+        style={{ marginLeft: props.speechArrowPos }}
+        size={20}
+        color={theme.colors.mascotMessageArrow}
+      />
+      <Card
+        style={{
+          borderColor: theme.colors.mascotMessageArrow,
+          ...styles.speechBubbleCard,
+        }}
+      >
+        <Card.Title
+          title={props.title}
+          left={
+            props.icon
+              ? () => (
+                  <Avatar.Icon
+                    size={48}
+                    style={styles.speechBubbleIcon}
+                    color={theme.colors.primary}
+                    icon={props.icon}
+                  />
+                )
+              : undefined
+          }
+        />
+        <Card.Content
+          style={{
+            maxHeight: props.bubbleMaxHeight,
+          }}
+        >
+          <ScrollView>
+            <Paragraph style={styles.speechBubbleText}>
+              {props.message}
+            </Paragraph>
+          </ScrollView>
+        </Card.Content>
+
+        <Card.Actions style={styles.actionsContainer}>
+          {getButtons()}
+        </Card.Actions>
+      </Card>
+    </Animatable.View>
+  );
+}