added translations for intro slides and moved intro in separate custom component

2019-08-07 14:39:20 +02:00 · 2019-08-07 14:39:20 +02:00 · 228a3dbabf
commit 228a3dbabf
parent af0bcd0c5c
4 changed files with 190 additions and 112 deletions
--- a/App.js
+++ b/App.js
@ -1,95 +1,18 @@
 // @flow

 import * as React from 'react';
-import {Root, StyleProvider, Text} from 'native-base';
-import {Image, StyleSheet, View} from 'react-native'
+import {Root, StyleProvider} from 'native-base';
+import {View} from 'react-native'
 import AppNavigator from './navigation/AppNavigator';
 import ThemeManager from './utils/ThemeManager';
 import LocaleManager from './utils/LocaleManager';
 import * as Font from 'expo-font';
-import {LinearGradient} from 'expo-linear-gradient';
-import AppIntroSlider from 'react-native-app-intro-slider';
 // edited native-base-shoutem-theme according to
 // https://github.com/GeekyAnts/theme/pull/5/files/91f67c55ca6e65fe3af779586b506950c9f331be#diff-4cfc2dd4d5dae7954012899f2268a422
 // to allow for dynamic theme switching
 import {clearThemeCache} from 'native-base-shoutem-theme';
 import AsyncStorageManager from "./utils/AsyncStorageManager";
-import CustomMaterialIcon from "./components/CustomMaterialIcon";
-import SideBar from "./components/Sidebar";
-import SideMenu from "react-native-side-menu";
-
-const styles = StyleSheet.create({
-    mainContent: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingBottom: 100
-    },
-    image: {
-        width: 200,
-        height: 200,
-    },
-    text: {
-        color: 'rgba(255, 255, 255, 0.8)',
-        backgroundColor: 'transparent',
-        textAlign: 'center',
-        paddingHorizontal: 16,
-    },
-    title: {
-        fontSize: 22,
-        color: 'white',
-        backgroundColor: 'transparent',
-        textAlign: 'center',
-        marginBottom: 16,
-    },
-});
-
-// Content to be used int the intro slides
-const slides = [
-    {
-        key: '1',
-        title: 'Bienvenue sur COFFEE',
-        text: ' La nouvelle app à consulter pendant la pause café pour être au courant de la vie du campus !',
-        image: require('./assets/drawer-cover.png'),
-        colors: ['#e01928', '#be1522'],
-    },
-    {
-        key: '2',
-        title: 'Restez informés',
-        text: 'COFFEE vous permettra bientôt d\'être au courant de tous les événements qui ont lieu sur le campus, de la vente de crêpes jusqu\'aux concerts enfoiros !',
-        icon: 'calendar-range',
-        colors: ['#d99e09', '#c28d08'],
-    },
-    {
-        key: '3',
-        title: 'N\'oubliez plus votre linge !',
-        text: 'COFFEE vous informe de la disponibilité des machines et vous permet d\'être notifiés lorsque la vôtre se termine bientôt !',
-        icon: 'washing-machine',
-        colors: ['#1fa5ee', '#1c97da'],
-    },
-    {
-        key: '4',
-        title: 'Proximo',
-        text: 'Il vous manque des pâtes ? Ou un petit creux au gouter, regardez les stocks de votre supérette insaienne en temps réel',
-        icon: 'shopping',
-        colors: ['#ec5904', '#da5204'],
-    },
-    {
-        key: '5',
-        title: 'Planex',
-        text: 'Consultez votre emploi du temps sur COFFEE',
-        icon: 'timetable',
-        colors: ['#7c33ec', '#732fda'],
-    },
-    {
-        key: '6',
-        title: 'Toujours en développement',
-        text: 'D\'autres fonctionnalités arrivent bientôt, n\'hésitez pas à nous donner votre avis pour améliorer l\'appli',
-        icon: 'cogs',
-        colors: ['#37c13e', '#26852b'],
-    },
-];
-
+import CustomIntroSlider from "./components/CustomIntroSlider";

 type Props = {};

@ -143,33 +66,6 @@ export default class App extends React.Component<Props, State> {
        clearThemeCache();
    }

-    /**
-     * Render item to be used for the intro slides
-     * @param item
-     * @param dimensions
-     */
-    getIntroRenderItem(item: Object, dimensions: Object) {
-        return (
-            <LinearGradient
-                style={[
-                    styles.mainContent,
-                    dimensions,
-                ]}
-                colors={item.colors}
-                start={{x: 0, y: 0.1}}
-                end={{x: 0.1, y: 1}}
-            >
-                {item.image !== undefined ?
-                    <Image source={item.image} style={styles.image}/>
-                    : <CustomMaterialIcon icon={item.icon} color={'#fff'} fontSize={200} width={200}/>}
-                <View style={{marginTop: 20}}>
-                    <Text style={styles.title}>{item.title}</Text>
-                    <Text style={styles.text}>{item.text}</Text>
-                </View>
-            </LinearGradient>
-        );
-    }
-
    /**
     * Callback when user ends the intro. Save in preferences to avaoid showing back the slides
     */
@ -186,18 +82,15 @@ export default class App extends React.Component<Props, State> {
            return <View/>;
        }
        if (this.state.showIntro) {
-            return <AppIntroSlider renderItem={({item, dimensions}) => this.getIntroRenderItem(item, dimensions)}
-                                   slides={slides} onDone={() => this.onIntroDone()} bottomButton showSkipButton/>;
+            return <CustomIntroSlider onDone={() => this.onIntroDone()}/>;
        } else {
            return (
                <Root>
                    <StyleProvider style={this.state.currentTheme}>
-                            <AppNavigator/>
+                        <AppNavigator/>
                    </StyleProvider>
                </Root>
            );
        }
    }
-
-    menu = <View/>;
 }
--- a/components/CustomIntroSlider.js
+++ b/components/CustomIntroSlider.js
@ -0,0 +1,133 @@
+// @flow
+
+import * as React from 'react';
+import {LinearGradient} from "expo-linear-gradient";
+import {Image, StyleSheet, View} from "react-native";
+import CustomMaterialIcon from "./CustomMaterialIcon";
+import {Text} from "native-base";
+import i18n from 'i18n-js';
+import AppIntroSlider from "react-native-app-intro-slider";
+
+// Content to be used int the intro slides
+
+const styles = StyleSheet.create({
+    mainContent: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingBottom: 100
+    },
+    image: {
+        width: 200,
+        height: 200,
+    },
+    text: {
+        color: 'rgba(255, 255, 255, 0.8)',
+        backgroundColor: 'transparent',
+        textAlign: 'center',
+        paddingHorizontal: 16,
+    },
+    title: {
+        fontSize: 22,
+        color: 'white',
+        backgroundColor: 'transparent',
+        textAlign: 'center',
+        marginBottom: 16,
+    },
+});
+
+type Props = {
+    onDone: Function,
+};
+
+export default class CustomIntroSlider extends React.Component<Props> {
+
+    slides: Array<Object>;
+
+    constructor() {
+        super();
+        this.slides = [
+            {
+                key: '1',
+                title: i18n.t('intro.slide1.title'),
+                text: i18n.t('intro.slide1.text'),
+                image: require('../assets/drawer-cover.png'),
+                colors: ['#e01928', '#be1522'],
+            },
+            {
+                key: '2',
+                title: i18n.t('intro.slide2.title'),
+                text: i18n.t('intro.slide2.text'),
+                icon: 'calendar-range',
+                colors: ['#d99e09', '#c28d08'],
+            },
+            {
+                key: '3',
+                title: i18n.t('intro.slide3.title'),
+                text: i18n.t('intro.slide3.text'),
+                icon: 'washing-machine',
+                colors: ['#1fa5ee', '#1c97da'],
+            },
+            {
+                key: '4',
+                title: i18n.t('intro.slide4.title'),
+                text: i18n.t('intro.slide4.text'),
+                icon: 'shopping',
+                colors: ['#ec5904', '#da5204'],
+            },
+            {
+                key: '5',
+                title: i18n.t('intro.slide5.title'),
+                text: i18n.t('intro.slide5.text'),
+                icon: 'timetable',
+                colors: ['#7c33ec', '#732fda'],
+            },
+            {
+                key: '6',
+                title: i18n.t('intro.slide6.title'),
+                text: i18n.t('intro.slide6.text'),
+                icon: 'cogs',
+                colors: ['#37c13e', '#26852b'],
+            },
+        ];
+    }
+
+
+    /**
+     * Render item to be used for the intro slides
+     * @param item
+     * @param dimensions
+     */
+    static getIntroRenderItem(item: Object, dimensions: Object) {
+
+        return (
+            <LinearGradient
+                style={[
+                    styles.mainContent,
+                    dimensions,
+                ]}
+                colors={item.colors}
+                start={{x: 0, y: 0.1}}
+                end={{x: 0.1, y: 1}}
+            >
+                {item.image !== undefined ?
+                    <Image source={item.image} style={styles.image}/>
+                    : <CustomMaterialIcon icon={item.icon} color={'#fff'} fontSize={200} width={200}/>}
+                <View style={{marginTop: 20}}>
+                    <Text style={styles.title}>{item.title}</Text>
+                    <Text style={styles.text}>{item.text}</Text>
+                </View>
+            </LinearGradient>
+        );
+    }
+
+    render() {
+        return (
+            <AppIntroSlider renderItem={({item, dimensions}) => CustomIntroSlider.getIntroRenderItem(item, dimensions)}
+                            slides={this.slides} onDone={() => this.props.onDone()} bottomButton showSkipButton/>
+        );
+    }
+
+}
+
+
--- a/translations/en.json
+++ b/translations/en.json
@ -7,6 +7,32 @@
    "settings": "Settings",
    "about": "About"
  },
+  "intro": {
+    "slide1": {
+      "title": "Welcome to COFFEE",
+      "text": "The new app to use during your coffee break to get updates on the campus life!",
+    },
+    "slide2": {
+      "title": "Stay up to date",
+      "text": "COFFEE will soon allow you to be aware of any event occuring on the campus, from pancake sales to Enfoiros concerts!"
+    },
+    "slide3": {
+      "title": "Never forget your laundry",
+      "text": "COFFEE will inform you on the availability of washing machines and will remind you just before yours finishes !"
+    },
+    "slide4": {
+      "title": "Proximo",
+      "text": "Are you short on pasta? Or you maybe you feel a little peckish, then lookup the stock for your insa shop in real time"
+    },
+    "slide5": {
+      "title": "Planex",
+      "text": "Lookup your timetable on COFFE"
+    },
+    "slide6": {
+      "title": "Still in development",
+      "text": "New features coming soon, do not hesitate to give us feedback to improve the app"
+    }
+  },
  "settingsScreen": {
    "appearanceCard": "Appearance",
    "nightMode": "Night Mode",
--- a/translations/fr.json
+++ b/translations/fr.json
@ -7,6 +7,32 @@
    "settings": "Paramètres",
    "about": "À Propos"
  },
+  "intro": {
+    "slide1": {
+      "title": "Bienvenue sur COFFEE",
+      "text": "La nouvelle app à consulter pendant la pause café pour être au courant de la vie du campus !"
+    },
+    "slide2": {
+      "title": "Restez informés",
+      "text": "COFFEE vous permettra bientôt d'être au courant de tous les événements qui ont lieu sur le campus, de la vente de crêpes jusqu'aux concerts enfoiros !"
+    },
+    "slide3": {
+      "title": "N'oubliez plus votre linge !",
+      "text": "COFFEE vous informe de la disponibilité des machines et vous permet d'être notifiés lorsque la vôtre se termine bientôt !"
+    },
+    "slide4": {
+      "title": "Proximo",
+      "text": "Il vous manque des pâtes ? Ou un petit creux au gouter, regardez les stocks de votre supérette insaienne en temps réel"
+    },
+    "slide5": {
+      "title": "Planex",
+      "text": "Consultez votre emploi du temps sur COFFEE"
+    },
+    "slide6": {
+      "title": "Toujours en développement",
+      "text": "D'autres fonctionnalités arrivent bientôt, n'hésitez pas à nous donner votre avis pour améliorer l'appli"
+    }
+  },
  "settingsScreen": {
    "appearanceCard": "Apparence",
    "nightMode": "Mode Nuit",