From 53daa6671a234e0da6dc3caae7c379241748fcc1 Mon Sep 17 00:00:00 2001 From: Arnaud Vergnet Date: Wed, 8 Apr 2020 16:23:33 +0200 Subject: [PATCH] Improved scanner information display --- .../Amicale/Clubs/ClubDisplayScreen.js | 11 +-- src/screens/ScannerScreen.js | 75 +++++++++++++++---- translations/en.json | 7 +- translations/fr.json | 7 +- 4 files changed, 80 insertions(+), 20 deletions(-) diff --git a/src/screens/Amicale/Clubs/ClubDisplayScreen.js b/src/screens/Amicale/Clubs/ClubDisplayScreen.js index 092c0ab..8ff7597 100644 --- a/src/screens/Amicale/Clubs/ClubDisplayScreen.js +++ b/src/screens/Amicale/Clubs/ClubDisplayScreen.js @@ -68,7 +68,7 @@ class ClubDisplayScreen extends React.Component { 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 { } } - 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 { ); } + updateHeaderTitle(data: Object) { + this.props.navigation.setOptions({title: data.name}) + } + getScreen = (data: Object) => { data = FakeClub; + this.updateHeaderTitle(data); return ( diff --git a/src/screens/ScannerScreen.js b/src/screens/ScannerScreen.js index b46d6dd..9b4c365 100644 --- a/src/screens/ScannerScreen.js +++ b/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 { @@ -23,6 +25,8 @@ class ScannerScreen extends React.Component { hasPermission: false, scanned: false, dialogVisible: false, + dialogTitle: "", + dialogMessage: "", }; constructor() { @@ -30,22 +34,39 @@ class ScannerScreen extends React.Component { } 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 PLS + return + {i18n.t("scannerScreen.errorPermission")} + + } getOverlay() { @@ -78,8 +99,22 @@ class ScannerScreen extends React.Component { ); } + 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 { getScanner() { return ( - { ? this.getScanner() : this.getPermissionScreen() } + + ); } @@ -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, diff --git a/translations/en.json b/translations/en.json index 5948d81..2c0f87e 100644 --- a/translations/en.json +++ b/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", diff --git a/translations/fr.json b/translations/fr.json index 96e5f6d..b66cb56 100644 --- a/translations/fr.json +++ b/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",