Added mascot to every main screen and allow cancel with back button

2020-07-12 11:37:11 +02:00 · 2020-07-12 11:37:11 +02:00 · 2a9bf5bb6a
commit 2a9bf5bb6a
parent 761132732b
5 changed files with 168 additions and 50 deletions
--- a/src/components/Mascot/MascotPopup.js
+++ b/src/components/Mascot/MascotPopup.js
@ -4,7 +4,7 @@ import * as React from 'react';
 import {Avatar, Button, Card, Paragraph, Portal, withTheme} from 'react-native-paper';
 import Mascot from "./Mascot";
 import * as Animatable from "react-native-animatable";
-import {Dimensions, ScrollView, TouchableWithoutFeedback, View} from "react-native";
+import {BackHandler, Dimensions, ScrollView, TouchableWithoutFeedback, View} from "react-native";
 import type {CustomTheme} from "../../managers/ThemeManager";

 type Props = {
@ -62,13 +62,35 @@ class MascotPopup extends React.Component<Props, State> {
    }

    shouldComponentUpdate(nextProps: Props): boolean {
-        if (nextProps.visible)
+        if (nextProps.visible) {
            this.state.shouldShowDialog = true;
-        else if (nextProps.visible !== this.props.visible)
+        }else if (nextProps.visible !== this.props.visible) {
            setTimeout(this.onAnimationEnd, 300);
+        }
        return true;
    }

+    componentDidMount(): * {
+        BackHandler.addEventListener(
+            'hardwareBackPress',
+            this.onBackButtonPressAndroid
+        )
+    }
+
+    onBackButtonPressAndroid = () => {
+        if (this.state.shouldShowDialog) {
+            const cancel = this.props.buttons.cancel;
+            const action = this.props.buttons.action;
+            if (cancel != null)
+                cancel.onPress();
+            else
+                action.onPress();
+            return true;
+        } else {
+            return false;
+        }
+    };
+
    getSpeechBubble() {
        return (
            <Animatable.View
--- a/src/managers/AsyncStorageManager.js
+++ b/src/managers/AsyncStorageManager.js
@ -59,8 +59,8 @@ export default class AsyncStorageManager {
            default: 'home',
            current: '',
        },
-        homeShowBanner: {
-            key: 'homeShowBanner',
+        servicesShowBanner: {
+            key: 'servicesShowBanner',
            default: '1',
            current: '',
        },
@ -69,9 +69,14 @@ export default class AsyncStorageManager {
            default: '1',
            current: '',
        },
-        proxiwashWatchedMachines: {
-            key: 'proxiwashWatchedMachines',
-            default: '[]',
+        homeShowBanner: {
+            key: 'homeShowBanner',
+            default: '1',
+            current: '',
+        },
+        eventsShowBanner: {
+            key: 'eventsShowBanner',
+            default: '1',
            current: '',
        },
        planexShowBanner: {
@ -79,6 +84,11 @@ export default class AsyncStorageManager {
            default: '1',
            current: '',
        },
+        proxiwashWatchedMachines: {
+            key: 'proxiwashWatchedMachines',
+            default: '[]',
+            current: '',
+        },
        showAprilFoolsStart: {
            key: 'showAprilFoolsStart',
            default: '1',
--- a/src/screens/Planning/PlanningScreen.js
+++ b/src/screens/Planning/PlanningScreen.js
@ -15,6 +15,9 @@ import {
 import {Avatar, Divider, List} from 'react-native-paper';
 import CustomAgenda from "../../components/Overrides/CustomAgenda";
 import {StackNavigationProp} from "@react-navigation/stack";
+import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
+import MascotPopup from "../../components/Mascot/MascotPopup";
+import AsyncStorageManager from "../../managers/AsyncStorageManager";

 LocaleConfig.locales['fr'] = {
    monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
@ -33,6 +36,7 @@ type State = {
    refreshing: boolean,
    agendaItems: Object,
    calendarShowing: boolean,
+    mascotDialogVisible: boolean,
 };

 const FETCH_URL = "https://www.amicale-insat.fr/api/event/list";
@ -52,6 +56,7 @@ class PlanningScreen extends React.Component<Props, State> {
        refreshing: false,
        agendaItems: {},
        calendarShowing: false,
+        mascotDialogVisible: AsyncStorageManager.getInstance().preferences.eventsShowBanner.current === "1"
    };

    currentDate = getDateOnlyString(getCurrentDateString());
@ -100,6 +105,18 @@ class PlanningScreen extends React.Component<Props, State> {
        }
    };

+    /**
+     * Callback used when closing the banner.
+     * This hides the banner and saves to preferences to prevent it from reopening
+     */
+    onHideMascotDialog = () => {
+        this.setState({mascotDialogVisible: false});
+        AsyncStorageManager.getInstance().savePref(
+            AsyncStorageManager.getInstance().preferences.eventsShowBanner.key,
+            '0'
+        );
+    };
+
    /**
     * Function used to check if a row has changed
     *
@ -206,6 +223,7 @@ class PlanningScreen extends React.Component<Props, State> {

    render() {
        return (
+            <View style={{flex: 1}}>
                <CustomAgenda
                    {...this.props}
                    // the list of items that have to be displayed in agenda. If you want to render item as empty date
@ -234,6 +252,22 @@ class PlanningScreen extends React.Component<Props, State> {
                    // ref to this agenda in order to handle back button event
                    onRef={this.onAgendaRef}
                />
+                <MascotPopup
+                    visible={this.state.mascotDialogVisible}
+                    title={i18n.t("planningScreen.mascotTitle")}
+                    message={i18n.t("planningScreen.mascotMessage")}
+                    icon={"calendar-range"}
+                    buttons={{
+                        action: null,
+                        cancel: {
+                            message: i18n.t("planningScreen.mascotButton"),
+                            icon: "check",
+                            onPress: this.onHideMascotDialog,
+                        }
+                    }}
+                    emotion={MASCOT_STYLE.HAPPY}
+                />
+            </View>
        );
    }
 }
--- a/src/screens/Services/ServicesScreen.js
+++ b/src/screens/Services/ServicesScreen.js
@ -14,6 +14,9 @@ import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHead
 import ConnectionManager from "../../managers/ConnectionManager";
 import {StackNavigationProp} from "@react-navigation/stack";
 import AvailableWebsites from "../../constants/AvailableWebsites";
+import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
+import MascotPopup from "../../components/Mascot/MascotPopup";
+import AsyncStorageManager from "../../managers/AsyncStorageManager";

 type Props = {
    navigation: StackNavigationProp,
@ -21,6 +24,11 @@ type Props = {
    theme: CustomTheme,
 }

+type State = {
+    mascotDialogVisible: boolean,
+}
+
+
 export type listItem = {
    title: string,
    description: string,
@ -49,7 +57,7 @@ const EMAIL_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Bluemind.
 const ENT_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/ENT.png";
 const ACCOUNT_IMAGE = "https://etud.insa-toulouse.fr/~amicale_app/images/Account.png";

-class ServicesScreen extends React.Component<Props> {
+class ServicesScreen extends React.Component<Props, State> {

    amicaleDataset: cardList;
    studentsDataset: cardList;
@ -57,6 +65,10 @@ class ServicesScreen extends React.Component<Props> {

    finalDataset: Array<listItem>

+    state = {
+        mascotDialogVisible: AsyncStorageManager.getInstance().preferences.servicesShowBanner.current === "1"
+    }
+
    constructor(props) {
        super(props);
        const nav = props.navigation;
@ -187,6 +199,19 @@ class ServicesScreen extends React.Component<Props> {
        });
    }

+
+    /**
+     * Callback used when closing the banner.
+     * This hides the banner and saves to preferences to prevent it from reopening
+     */
+    onHideMascotDialog = () => {
+        this.setState({mascotDialogVisible: false});
+        AsyncStorageManager.getInstance().savePref(
+            AsyncStorageManager.getInstance().preferences.servicesShowBanner.key,
+            '0'
+        );
+    };
+
    getAboutButton = () =>
        <MaterialHeaderButtons>
            <Item title="information" iconName="information" onPress={this.onAboutPress}/>
@ -271,7 +296,9 @@ class ServicesScreen extends React.Component<Props> {

    render() {
        const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
-        return <Animated.FlatList
+        return (
+            <View>
+                <Animated.FlatList
                    data={this.finalDataset}
                    renderItem={this.renderItem}
                    keyExtractor={this.keyExtractor}
@ -283,6 +310,23 @@ class ServicesScreen extends React.Component<Props> {
                    scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
                    ItemSeparatorComponent={() => <Divider/>}
                />
+                <MascotPopup
+                    visible={this.state.mascotDialogVisible}
+                    title={i18n.t("servicesScreen.mascot.title")}
+                    message={i18n.t("servicesScreen.mascot.message")}
+                    icon={"calendar-range"}
+                    buttons={{
+                        action: null,
+                        cancel: {
+                            message: i18n.t("servicesScreen.mascot.button"),
+                            icon: "check",
+                            onPress: this.onHideMascotDialog,
+                        }
+                    }}
+                    emotion={MASCOT_STYLE.WINK}
+                />
+            </View>
+        );
    }
 }

--- a/translations/en.json
+++ b/translations/en.json
@ -436,10 +436,18 @@
      "ent": "See your grades",
      "insaAccount": "See your information and change your password",
      "equipment": "Book a BBQ or other equipment"
+    },
+    "mascot": {
+      "title": "So handy!",
+      "message": "There a lot of thing you can do with Campus!\n\nHere is a list of every service provided by the app.",
+      "button": "Thx buddy"
    }
  },
  "planningScreen": {
-    "invalidEvent": "Could not find the event. Please make sure the event you are trying to access is valid."
+    "invalidEvent": "Could not find the event. Please make sure the event you are trying to access is valid.",
+    "mascotTitle": "Let's party!",
+    "mascotMessage": "At the INSA, it's not all about classes!\n\nIf you want to see new people, this page is just for you. Here you will find the list of every event organised by students!",
+    "mascotButton": "Thx!"
  },
  "feedbackScreen": {
    "bugs": "Report Bugs",