src/components/Mascot/MascotPopup.tsx

@@ -17,31 +17,81 @@
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import React, { useEffect, useRef, useState } from 'react';
+import * as React from 'react';
-import { Portal } from 'react-native-paper';
+import {
+  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 = MascotSpeechBubbleProps & {
+type PropsType = {
+  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)',
@@ -54,139 +104,245 @@ 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.
  */
-function MascotPopup(props: PropsType) {
+class MascotPopup extends React.Component<PropsType, StateType> {
-  const isVisible = () => {
+  mascotSize: number;
-    if (props.visible !== undefined) {
+
-      return props.visible;
+  windowWidth: number;
+
+  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) {
-      return AsyncStorageManager.getBool(props.prefKey);
+      const visible = AsyncStorageManager.getBool(props.prefKey);
+      this.state = {
+        shouldRenderDialog: visible,
+        dialogVisible: visible,
+      };
     } else {
-      return false;
+      this.state = {
-    }
+        shouldRenderDialog: false,
+        dialogVisible: false,
       };
+    }
+  }
 
-  const [shouldRenderDialog, setShouldRenderDialog] = useState(isVisible());
+  componentDidMount() {
-  const [dialogVisible, setDialogVisible] = useState(isVisible());
+    BackHandler.addEventListener(
-  const lastVisibleProps = useRef(props.visible);
+      'hardwareBackPress',
-  const lastVisibleState = useRef(dialogVisible);
+      this.onBackButtonPressAndroid
+    );
+  }
 
-  useMountEffect(() => {
+  shouldComponentUpdate(nextProps: PropsType, nextState: StateType): boolean {
-    BackHandler.addEventListener('hardwareBackPress', onBackButtonPressAndroid);
+    // TODO this is so dirty it shouldn't even work
-  });
+    const { props, state } = this;
-
+    if (nextProps.visible) {
-  useEffect(() => {
+      this.state.shouldRenderDialog = true;
-    if (props.visible && !dialogVisible) {
+      this.state.dialogVisible = true;
-      setShouldRenderDialog(true);
-      setDialogVisible(true);
     } else if (
-      lastVisibleProps.current !== props.visible ||
+      nextProps.visible !== props.visible ||
-      (!dialogVisible && dialogVisible !== lastVisibleState.current)
+      (!nextState.dialogVisible &&
+        nextState.dialogVisible !== state.dialogVisible)
     ) {
-      setDialogVisible(false);
+      this.state.dialogVisible = false;
-      setTimeout(onAnimationEnd, 400);
+      setTimeout(this.onAnimationEnd, 300);
+    }
+    return true;
   }
-    lastVisibleProps.current = props.visible;
-    lastVisibleState.current = dialogVisible;
-  }, [props.visible, dialogVisible]);
 
-  const onAnimationEnd = () => {
+  onAnimationEnd = () => {
-    setShouldRenderDialog(false);
+    this.setState({
+      shouldRenderDialog: false,
+    });
   };
 
-  const onBackButtonPressAndroid = (): boolean => {
+  onBackButtonPressAndroid = (): boolean => {
-    if (dialogVisible) {
+    const { state, props } = this;
+    if (state.dialogVisible) {
       const { cancel } = props.buttons;
       const { action } = props.buttons;
       if (cancel) {
-        onDismiss(cancel.onPress);
+        this.onDismiss(cancel.onPress);
       } else if (action) {
-        onDismiss(action.onPress);
+        this.onDismiss(action.onPress);
       } else {
-        onDismiss();
+        this.onDismiss();
       }
+
       return true;
     }
     return false;
   };
 
-  const getSpeechBubble = () => {
+  getSpeechBubble() {
+    const { state, props } = this;
     return (
-      <MascotSpeechBubble
+      <Animatable.View
-        title={props.title}
+        style={styles.speechBubbleContainer}
-        message={props.message}
+        useNativeDriver
-        icon={props.icon}
+        animation={state.dialogVisible ? 'bounceInLeft' : 'bounceOutLeft'}
-        buttons={props.buttons}
+        duration={state.dialogVisible ? 1000 : 300}
-        visible={dialogVisible}
+      >
-        onDismiss={onDismiss}
+        <SpeechArrow
-        speechArrowPos={MASCOT_SIZE / 3}
+          style={{ marginLeft: this.mascotSize / 3 }}
-        bubbleMaxHeight={BUBBLE_HEIGHT}
+          size={20}
+          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>
 
-  const getMascot = () => {
+          <Card.Actions style={styles.actionsContainer}>
+            {this.getButtons()}
+          </Card.Actions>
+        </Card>
+      </Animatable.View>
+    );
+  }
+
+  getMascot() {
+    const { props, state } = this;
     return (
       <Animatable.View
         useNativeDriver
-        animation={dialogVisible ? 'bounceInLeft' : 'bounceOutLeft'}
+        animation={state.dialogVisible ? 'bounceInLeft' : 'bounceOutLeft'}
-        duration={dialogVisible ? 1500 : 200}
+        duration={state.dialogVisible ? 1500 : 200}
       >
         <Mascot
-          style={{ width: MASCOT_SIZE }}
+          style={{ width: this.mascotSize }}
           animated
           emotion={props.emotion}
         />
       </Animatable.View>
     );
-  };
+  }
 
-  const getBackground = () => {
+  getButtons() {
+    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={() => {
-          onDismiss(props.buttons.cancel?.onPress);
+          this.onDismiss(props.buttons.cancel?.onPress);
         }}
       >
         <Animatable.View
           style={styles.background}
           useNativeDriver
-          animation={dialogVisible ? 'fadeIn' : 'fadeOut'}
+          animation={state.dialogVisible ? 'fadeIn' : 'fadeOut'}
-          duration={dialogVisible ? 300 : 300}
+          duration={state.dialogVisible ? 300 : 300}
         />
       </TouchableWithoutFeedback>
     );
-  };
-
-  const onDismiss = (callback?: () => void) => {
-    if (props.prefKey != null) {
-      AsyncStorageManager.set(props.prefKey, false);
-      setDialogVisible(false);
   }
-    if (callback) {
+
+  onDismiss = (callback?: () => void) => {
+    const { prefKey } = this.props;
+    if (prefKey != null) {
+      AsyncStorageManager.set(prefKey, false);
+      this.setState({ dialogVisible: false });
+    }
+    if (callback != null) {
       callback();
     }
   };
 
+  render() {
+    const { shouldRenderDialog } = this.state;
     if (shouldRenderDialog) {
       return (
         <Portal>
-        {getBackground()}
+          {this.getBackground()}
           <View style={GENERAL_STYLES.centerVertical}>
             <View style={styles.container}>
-            {getMascot()}
+              {this.getMascot()}
-            {getSpeechBubble()}
+              {this.getSpeechBubble()}
             </View>
           </View>
         </Portal>
       );
     }
     return null;
+  }
 }
 
-export default MascotPopup;
+export default withTheme(MascotPopup);

src/components/Mascot/MascotSpeechBubble.tsx

@@ -1,147 +0,0 @@
-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>
-  );
-}