Replaced bug report modal by a screen

src/navigation/MainNavigator.js

@@ -29,6 +29,7 @@ import ClubListScreen from "../screens/Amicale/Clubs/ClubListScreen";
 import ClubAboutScreen from "../screens/Amicale/Clubs/ClubAboutScreen";
 import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
 import {createScreenCollapsibleStack, getWebsiteStack} from "../utils/CollapsibleUtils";
+import BugReportScreen from "../screens/Other/FeedbackScreen";
 
 const modalTransition = Platform.OS === 'ios' ? TransitionPresets.ModalPresentationIOS : TransitionPresets.ModalSlideFromBottomIOS;
 
@@ -158,6 +159,14 @@ function MainStackComponent(props: { createTabNavigator: () => React.Node }) {
                     title: i18n.t('screens.vote'),
                 }}
             />
+
+            <MainStack.Screen
+                name="feedback"
+                component={BugReportScreen}
+                options={{
+                    title: i18n.t('screens.feedback'),
+                }}
+            />
         </MainStack.Navigator>
     );
 }

src/screens/About/AboutScreen.js

@@ -5,23 +5,12 @@ import {FlatList, Linking, Platform, View} from 'react-native';
 import i18n from "i18n-js";
 import appJson from '../../../app';
 import AsyncStorageManager from "../../managers/AsyncStorageManager";
-import CustomModal from "../../components/Overrides/CustomModal";
+import {Avatar, Card, List, Title, withTheme} from 'react-native-paper';
-import {Avatar, Button, Card, List, Text, Title, withTheme} from 'react-native-paper';
 
 const links = {
     appstore: 'https://apps.apple.com/us/app/campus-amicale-insat/id1477722148',
     playstore: 'https://play.google.com/store/apps/details?id=fr.amicaleinsat.application',
     git: 'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/README.md',
-    bugsMail: 'mailto:vergnet@etud.insa-toulouse.fr?' +
-        'subject=' +
-        '[BUG] Application Amicale INSA Toulouse' +
-        '&body=' +
-        'Coucou Arnaud ça bug c\'est nul,\n\n' +
-        'Informations sur ton système si tu sais (iOS ou Android, modèle du tel, version):\n\n\n' +
-        'Nature du problème :\n\n\n' +
-        'Étapes pour reproduire ce pb :\n\n\n\n' +
-        'Stp corrige le pb, bien cordialement.',
-    bugsGit: 'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/issues',
     changelog: 'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/Changelog.md',
     license: 'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/LICENSE',
     authorMail: "mailto:vergnet@etud.insa-toulouse.fr?" +
@@ -78,9 +67,9 @@ class AboutScreen extends React.Component<Props, State> {
             showChevron: true
         },
         {
-            onPressCallback: () => this.openBugReportModal(),
+            onPressCallback: () => this.props.navigation.navigate("feedback"),
             icon: 'bug',
-            text: i18n.t('aboutScreen.bugs'),
+            text: i18n.t('screens.feedback'),
             showChevron: true
         },
         {
@@ -193,21 +182,11 @@ class AboutScreen extends React.Component<Props, State> {
         },
     ];
 
-    getCardItem: Function;
-    getMainCard: Function;
-    onModalRef: Function;
-    onPressMail: Function;
-    onPressGit: Function;
 
     colors: Object;
 
     constructor(props) {
         super(props);
-        this.getCardItem = this.getCardItem.bind(this);
-        this.getMainCard = this.getMainCard.bind(this);
-        this.onModalRef = this.onModalRef.bind(this);
-        this.onPressMail = openWebLink.bind(this, links.bugsMail);
-        this.onPressGit = openWebLink.bind(this, links.bugsGit);
         this.colors = props.theme.colors;
     }
 
@@ -340,7 +319,7 @@ class AboutScreen extends React.Component<Props, State> {
      *
      * @returns {*}
      */
-    getCardItem({item}: Object) {
+    getCardItem = ({item}: Object) => {
         let shouldShow = item === undefined
             || !item.showOnlyInDebug
             || (item.showOnlyInDebug && this.state.isDebugUnlocked);
@@ -366,7 +345,7 @@ class AboutScreen extends React.Component<Props, State> {
             }
         } else
             return null;
-    }
+    };
 
     /**
      * Tries to unlock debug mode
@@ -387,63 +366,13 @@ class AboutScreen extends React.Component<Props, State> {
         AsyncStorageManager.getInstance().savePref(key, '1');
     }
 
-    /**
-     * Gets the bug report modal's content
-     *
-     * @return {*}
-     */
-    getBugReportModal() {
-        return (
-            <View style={{
-                flex: 1,
-                padding: 20
-            }}>
-                <Title>{i18n.t('aboutScreen.bugs')}</Title>
-                <Text>
-                    {i18n.t('aboutScreen.bugsDescription')}
-                </Text>
-                <Button
-                    icon="email"
-                    mode="contained"
-                    style={{
-                        marginTop: 20,
-                        marginLeft: 'auto',
-                        marginRight: 'auto',
-                    }}
-                    onPress={this.onPressMail}>
-                    {i18n.t('aboutScreen.bugsMail')}
-                </Button>
-                <Button
-                    icon="git"
-                    mode="contained"
-                    style={{
-                        marginTop: 20,
-                        marginLeft: 'auto',
-                        marginRight: 'auto',
-                    }}
-                    onPress={this.onPressGit}>
-                    {i18n.t('aboutScreen.bugsGit')}
-                </Button>
-            </View>
-        );
-    }
-
-    /**
-     * opens the bug report modal
-     */
-    openBugReportModal() {
-        if (this.modalRef) {
-            this.modalRef.open();
-        }
-    }
-
     /**
      * Gets a card, depending on the given item's id
      *
      * @param item The item to show
      * @return {*}
      */
-    getMainCard({item}: Object) {
+    getMainCard = ({item}: Object) => {
         switch (item.id) {
             case 'app':
                 return this.getAppCard();
@@ -453,29 +382,15 @@ class AboutScreen extends React.Component<Props, State> {
                 return this.getTechnoCard();
         }
         return <View/>;
-    }
+    };
-
-    /**
-     * Callback used when receiving the modal ref
-     *
-     * @param ref
-     */
-    onModalRef(ref: Object) {
-        this.modalRef = ref;
-    }
 
     render() {
         return (
-            <View style={{padding: 5}}>
+            <FlatList
-                <CustomModal onRef={this.onModalRef}>
+                style={{padding: 5}}
-                    {this.getBugReportModal()}
+                data={this.dataOrder}
-                </CustomModal>
+                renderItem={this.getMainCard}
-                <FlatList
+            />
-                    style={{padding: 5}}
-                    data={this.dataOrder}
-                    renderItem={this.getMainCard}
-                />
-            </View>
         );
     }
 }

src/screens/Other/FeedbackScreen.js

@@ -0,0 +1,104 @@
+// @flow
+
+import * as React from 'react';
+import {Avatar, Button, Card, Paragraph, withTheme} from "react-native-paper";
+import i18n from "i18n-js";
+import {ScrollView} from "react-native";
+import {Linking} from "expo";
+import type {CustomTheme} from "../../managers/ThemeManager";
+
+type Props = {
+    theme: CustomTheme
+};
+
+const links = {
+    bugsMail: `mailto:vergnet@etud.insa-toulouse.fr
+?subject=[BUG] Application CAMPUS
+&body=Coucou Arnaud ça bug c'est nul,\n\n
+Informations sur ton système si tu sais (iOS ou Android, modèle du tel, version):\n\n\n
+Nature du problème :\n\n\n
+Étapes pour reproduire ce pb :\n\n\n\n
+Stp corrige le pb, bien cordialement.`,
+    bugsGit: 'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/issues/new',
+    facebook: "https://www.facebook.com/campus.insat",
+    feedbackMail: `mailto:vergnet@etud.insa-toulouse.fr
+?subject=[FEEDBACK] Application CAMPUS
+&body=Coucou Arnaud j'ai du feedback\n\n\n\nBien cordialement.`,
+    feedbackGit: "https://git.etud.insa-toulouse.fr/vergnet/application-amicale/issues/new",
+}
+
+class FeedbackScreen extends React.Component<Props> {
+
+    getButtons(isBug: boolean) {
+        return (
+            <Card.Actions>
+                <Button
+                    icon="email"
+                    mode="contained"
+                    style={{
+                        marginLeft: 'auto',
+                    }}
+                    onPress={() => Linking.openURL(isBug ? links.bugsMail : links.feedbackMail)}>
+                    MAIL
+                </Button>
+                <Button
+                    icon="git"
+                    mode="contained"
+                    style={{
+                        marginLeft: 10,
+                    }}
+                    onPress={() => Linking.openURL(isBug ? links.bugsGit : links.feedbackGit)}>
+                    GIT
+                </Button>
+                <Button
+                    icon="facebook"
+                    mode="contained"
+                    style={{
+                        marginLeft: 10,
+                    }}
+                    onPress={() => Linking.openURL(links.facebook)}>
+                    Facebook
+                </Button>
+            </Card.Actions>
+        );
+    }
+
+    render() {
+        return (
+            <ScrollView style={{padding: 5}}>
+                <Card>
+                    <Card.Title
+                        title={i18n.t('feedbackScreen.bugs')}
+                        subtitle={i18n.t('feedbackScreen.bugsSubtitle')}
+                        left={(props) => <Avatar.Icon {...props} icon="bug"/>}
+                    />
+                    <Card.Content>
+                        <Paragraph>
+                            {i18n.t('feedbackScreen.bugsDescription')}
+                        </Paragraph>
+                        <Paragraph style={{color: this.props.theme.colors.primary}}>
+                            {i18n.t('feedbackScreen.contactMeans')}
+                        </Paragraph>
+                    </Card.Content>
+                    {this.getButtons(true)}
+                </Card>
+
+                <Card style={{marginTop: 20, marginBottom: 10}}>
+                    <Card.Title
+                        title={i18n.t('feedbackScreen.feedback')}
+                        subtitle={i18n.t('feedbackScreen.feedbackSubtitle')}
+                        left={(props) => <Avatar.Icon {...props} icon="comment"/>}
+                    />
+                    <Card.Content>
+                        <Paragraph>
+                            {i18n.t('feedbackScreen.feedbackDescription')}
+                        </Paragraph>
+                    </Card.Content>
+                    {this.getButtons(false)}
+                </Card>
+            </ScrollView>
+        );
+    }
+}
+
+export default withTheme(FeedbackScreen);

translations/en.json

@@ -24,7 +24,8 @@
     "logout": "Logout",
     "profile": "Profile",
     "vote": "Elections",
-    "scanner": "Scanotron 3000"
+    "scanner": "Scanotron 3000",
+    "feedback": "Feedback"
   },
   "intro": {
     "slide1": {
@@ -99,10 +100,6 @@
   "aboutScreen": {
     "appstore": "See on the Appstore",
     "playstore": "See on the Playstore",
-    "bugs": "Report Bugs",
-    "bugsDescription": "Reporting bugs helps us make the app better. Please be as precise as possible when describing your problem!",
-    "bugsMail": "Send a Mail",
-    "bugsGit": "Open an issue on Git",
     "changelog": "Changelog",
     "license": "License",
     "debug": "Debug",
@@ -389,5 +386,14 @@
   },
   "planningScreen": {
     "invalidEvent": "Could not find the event. Please make sure the event you are trying to access is valid."
+  },
+  "feedbackScreen": {
+    "bugs": "Report Bugs",
+    "bugsSubtitle": "Did you find a bug? Let us know!",
+    "bugsDescription": "Reporting bugs helps us make the app better. To do so, use one of the buttons below and be as precise as possible when describing your problem!",
+    "feedback": "Feedback",
+    "feedbackSubtitle": "Let us know what you think!",
+    "feedbackDescription": "Do you have a feature you want to be added/changed/removed, want to give your opinion on the app or simply chat with the dev? Use one of the links below!",
+    "contactMeans": "Using Git is recommended, to use it simply login with your INSA account."
   }
 }

translations/fr.json

@@ -24,7 +24,8 @@
     "logout": "Se Déconnecter",
     "profile": "Profil",
     "vote": "Élections",
-    "scanner": "Scanotron 3000"
+    "scanner": "Scanotron 3000",
+    "feedback": "Votre avis"
   },
   "intro": {
     "slide1": {
@@ -99,10 +100,6 @@
   "aboutScreen": {
     "appstore": "Voir sur l'Appstore",
     "playstore": "Voir sur le Playstore",
-    "bugs": "Rapporter des Bugs",
-    "bugsDescription": "Rapporter les bugs nous aide à améliorer l'appli. Merci de décrire votre problème le plus précisément possible !",
-    "bugsMail": "Envoyer un Mail",
-    "bugsGit": "Ouvrir un ticket sur Git",
     "changelog": "Historique des modifications",
     "license": "Licence",
     "debug": "Debug",
@@ -389,5 +386,15 @@
   },
   "planningScreen": {
     "invalidEvent": "Impossible de trouver l'événement. Merci de vérifier que l'événement que vous voulez voir est valide."
+  },
+  "feedbackScreen": {
+    "bugs": "Rapporter des Bugs",
+    "bugsSubtitle": "Vous avez trouvé un bug ?",
+    "bugsDescription": "Rapporter les bugs nous aide à améliorer l'appli. Pour cela, merci d'utiliser un des boutons ci-dessous et de décrire votre problème le plus précisément possible !",
+    "feedback": "Feedback",
+    "feedbackSubtitle": "Did nous ce que vous pensez!",
+    "feedbackDescription": "Vous voulez voir une fonctionnalité ajoutée/modifiée/supprimée ?, vous voulez donner votre opinion sur l'appli ou simplement discuter avec les devs ? Utilisez un des liens ci-dessous !",
+    "contactMeans": "L'utilisation de Git est recommandée, pour l'utiliser, connectez vous avec vos identifiants INSA."
+
   }
 }