Improved scanner information display

src/screens/Amicale/Clubs/ClubDisplayScreen.js

@@ -68,7 +68,7 @@ class ClubDisplayScreen extends React.Component<Props, State> {
             this.clubId = this.props.route.params.data.id;
             this.shouldFetchData = false;
         } else {
-            this.displayData = {};
+            this.displayData = null;
             this.categories = null;
             this.clubId = this.props.route.params.clubId;
             this.shouldFetchData = true;
@@ -76,10 +76,6 @@ class ClubDisplayScreen extends React.Component<Props, State> {
         }
     }
 
-    componentDidMount(): * {
-        this.props.navigation.setOptions({title: this.displayData.name})
-    }
-
     getCategoryName(id: number) {
         if (this.categories !== null) {
             for (let i = 0; i < this.categories.length; i++) {
@@ -134,8 +130,13 @@ class ClubDisplayScreen extends React.Component<Props, State> {
         );
     }
 
+    updateHeaderTitle(data: Object) {
+        this.props.navigation.setOptions({title: data.name})
+    }
+
     getScreen = (data: Object) => {
         data = FakeClub;
+        this.updateHeaderTitle(data);
 
         return (
             <ScrollView style={{paddingLeft: 5, paddingRight: 5}}>

src/screens/ScannerScreen.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import {StyleSheet, View} from "react-native";
-import {Text, withTheme} from 'react-native-paper';
+import {Button, Text, withTheme} from 'react-native-paper';
 import {BarCodeScanner} from "expo-barcode-scanner";
 import {Camera} from 'expo-camera';
 import URLHandler from "../utils/URLHandler";
@@ -15,6 +15,8 @@ type State = {
     hasPermission: boolean,
     scanned: boolean,
     dialogVisible: boolean,
+    dialogTitle: string,
+    dialogMessage: string,
 };
 
 class ScannerScreen extends React.Component<Props, State> {
@@ -23,6 +25,8 @@ class ScannerScreen extends React.Component<Props, State> {
         hasPermission: false,
         scanned: false,
         dialogVisible: false,
+        dialogTitle: "",
+        dialogMessage: "",
     };
 
     constructor() {
@@ -30,22 +34,39 @@ class ScannerScreen extends React.Component<Props, State> {
     }
 
     componentDidMount() {
-        Camera.requestPermissionsAsync().then(this.updatePermissionStatus);
+        this.requestPermissions();
     }
 
+    requestPermissions = () => Camera.requestPermissionsAsync().then(this.updatePermissionStatus);
+
     updatePermissionStatus = ({status}) => this.setState({hasPermission: status === "granted"});
 
-
     handleCodeScanned = ({type, data}) => {
-        this.setState({scanned: true});
+
         if (!URLHandler.isUrlValid(data))
             this.showErrorDialog();
-        else
+        else {
+            this.setState({scanned: true});
             Linking.openURL(data);
+        }
     };
 
     getPermissionScreen() {
-        return <Text>PLS</Text>
+        return <View style={{marginLeft: 10, marginRight: 10}}>
+            <Text>{i18n.t("scannerScreen.errorPermission")}</Text>
+            <Button
+                icon="camera"
+                mode="contained"
+                onPress={this.requestPermissions}
+                style={{
+                    marginTop: 10,
+                    marginLeft: 'auto',
+                    marginRight: 'auto',
+                }}
+            >
+                {i18n.t("scannerScreen.buttonPermission")}
+            </Button>
+        </View>
     }
 
     getOverlay() {
@@ -78,8 +99,22 @@ class ScannerScreen extends React.Component<Props, State> {
         );
     }
 
+    showHelpDialog = () => {
+        this.setState({
+            dialogVisible: true,
+            scanned: true,
+            dialogTitle: i18n.t("scannerScreen.helpTitle"),
+            dialogMessage: i18n.t("scannerScreen.helpMessage"),
+        });
+    };
+
     showErrorDialog() {
-        this.setState({dialogVisible: true});
+        this.setState({
+            dialogVisible: true,
+            scanned: true,
+            dialogTitle: i18n.t("scannerScreen.errorTitle"),
+            dialogMessage: i18n.t("scannerScreen.errorMessage"),
+        });
     }
 
     onDialogDismiss = () => this.setState({
@@ -90,12 +125,6 @@ class ScannerScreen extends React.Component<Props, State> {
     getScanner() {
         return (
             <View style={styles.cameraContainer}>
-                <AlertDialog
-                    visible={this.state.dialogVisible}
-                    onDismiss={this.onDialogDismiss}
-                    title={i18n.t("scannerScreen.errorTitle")}
-                    message={i18n.t("scannerScreen.errorMessage")}
-                />
                 <Camera
                     onBarCodeScanned={this.state.scanned ? undefined : this.handleCodeScanned}
                     type={Camera.Constants.Type.back}
@@ -118,6 +147,20 @@ class ScannerScreen extends React.Component<Props, State> {
                     ? this.getScanner()
                     : this.getPermissionScreen()
                 }
+                <AlertDialog
+                    visible={this.state.dialogVisible}
+                    onDismiss={this.onDialogDismiss}
+                    title={this.state.dialogTitle}
+                    message={this.state.dialogMessage}
+                />
+                <Button
+                    icon="information"
+                    mode="contained"
+                    onPress={this.showHelpDialog}
+                    style={styles.button}
+                >
+                    {i18n.t("scannerScreen.helpButton")}
+                </Button>
             </View>
         );
     }
@@ -167,6 +210,12 @@ const styles = StyleSheet.create({
         aspectRatio: 1,
         width: '100%',
     },
+    button: {
+        position: 'absolute',
+        bottom: 5,
+        width: '80%',
+        left: '10%'
+    },
     overlayTopLeft: {
         ...overlayBoxStyle,
         top: borderOffset,

translations/en.json

@@ -227,8 +227,13 @@
     "membershipNotPayed": "Not payed"
   },
   "scannerScreen": {
+    "errorPermission": "Scanotron 3000 needs access to the camera in order to scan QR codes.\nThe camera will never be used for any other purpose.",
+    "buttonPermission": "Grant camera access",
     "errorTitle": "QR code invalid",
-    "errorMessage": "The QR code scanned could not be recognised, please make sure it is valid."
+    "errorMessage": "The QR code scanned could not be recognised, please make sure it is valid.",
+    "helpButton": "What can I scan?",
+    "helpTitle": "How to use Scanotron 3000",
+    "helpMessage": "Find Campus QR codes posted by clubs and events, scan them and get instant access to detailed information!"
   },
   "loginScreen": {
     "title": "Amicale account",

translations/fr.json

@@ -227,8 +227,13 @@
     "membershipNotPayed": "Non payée"
   },
   "scannerScreen": {
+    "errorPermission": "Scanotron 3000 a besoin d'accéder à la caméra pour scanner des QR codes.\nLa caméra ne sera jamais utilisée autrement.",
+    "buttonPermission": "Autoriser l'accès à la caméra",
     "errorTitle": "QR code invalide",
-    "errorMessage": "Le QR code scannée n'a pas été reconnu. Merci de vérifier sa validité."
+    "errorMessage": "Le QR code scannée n'a pas été reconnu. Merci de vérifier sa validité.",
+    "helpButton": "Quoi scanner ?",
+    "helpTitle": "Comment utiliser Scanotron 3000",
+    "helpMessage": "Trouvez des QR codes Campus affichés par des clubs ou des respo d'évenements, scannez les et accédez à des informations détaillées !"
   },
   "loginScreen": {
     "title": "Compte Amicale",