feat(view::scanqrsettings): Nicer camera permission handling

Closes #14.
motorica-org · Jan 31, 2017 · ec9b221 · ec9b221
1 parent 5608ae2
commit ec9b221
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 30 deletions.
diff --git a/telemetry_ga_android/ScanQRSettingsScreen.js b/telemetry_ga_android/ScanQRSettingsScreen.js
@@ -3,6 +3,8 @@ import {
   AsyncStorage,
   Dimensions,
   StyleSheet,
+  Text,
+  View,
   ToastAndroid,
   PermissionsAndroid,
 } from 'react-native';
@@ -21,6 +23,11 @@ const styles = StyleSheet.create({
     height: Dimensions.get('window').height,
     width: Dimensions.get('window').width,
   },
+  center: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
 });
 
 class QRNotRecognizedError extends Error {
@@ -30,48 +37,61 @@ class QRNotRecognizedError extends Error {
   }
 }
 
-// Cannot be made a stateless component due to navigator being injected via props.
-// eslint-disable-next-line react/prefer-stateless-function
-export default class extends React.Component {
-  componentWillMount() {
-    PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.CAMERA).done();
-  }
 
-  render() {
-    return (
-      <Camera
-        style={styles.preview}
-        quality={Camera.constants.CaptureQuality.low} // supposed to make things faster
-        barCodeTypes={['qr']}
-        onBarCodeRead={(code) => {
-          try {
-            const d = JSON.parse(code.data); // throws
-            if (d.type === 'qrconfig.motorica.org' && d.version >= 0.2 && d.prosthetic.kind === 'mechanical') {
-              const m = d.matrix;
-              const matrix = Matrix.passwordLogin(m.home_server, m.user, m.password)
+const MyCamera = () =>
+  <Camera
+    style={styles.preview}
+    quality={Camera.constants.CaptureQuality.low} // supposed to make things faster
+    barCodeTypes={['qr']}
+    onBarCodeRead={(code) => {
+      try {
+        const d = JSON.parse(code.data); // throws
+        if (d.type === 'qrconfig.motorica.org' && d.version >= 0.2 && d.prosthetic.kind === 'mechanical') {
+          const m = d.matrix;
+          const matrix = Matrix.passwordLogin(m.home_server, m.user, m.password)
                 .then(JSON.parse)
                 .then(x => ({ ...x, home_server: m.home_server, room_stream_to: m.room_stream_to }))
                 .then(JSON.stringify);
 
-              matrix
+          matrix
                 .then(x => AsyncStorage.setItem('matrix', x))
                 .then(() => AsyncStorage.setItem('prosthetic_mac', d.prosthetic.mac))
                 .then(() => {
-                  ToastAndroid.show(I18n.t('saving_settings_for_prosthetic', {prosthetic: d.prosthetic.mac}), ToastAndroid.SHORT);
+                  ToastAndroid.show(I18n.t('saving_settings_for_prosthetic', { prosthetic: d.prosthetic.mac }), ToastAndroid.SHORT);
                   this.props.navigator.pop(); // we are done here
                 })
                 .catch(() => ToastAndroid.show(I18n.t('bad_qr_warning'), ToastAndroid.SHORT)); // FIXME: this might be a passwordLogin, a JSON parsing or a saving error
-            } else {
-              throw QRNotRecognizedError();
-            }
-          } catch (e) {
-            if ((e instanceof QRNotRecognizedError) ||
+        } else {
+          throw QRNotRecognizedError();
+        }
+      } catch (e) {
+        if ((e instanceof QRNotRecognizedError) ||
                 (e instanceof SyntaxError && e.message.includes('JSON'))) { // facepalm
-              ToastAndroid.show(I18n.t('bad_qr_warning'), ToastAndroid.SHORT);
-            }
-          }
-        }}
-      />
+          ToastAndroid.show(I18n.t('bad_qr_warning'), ToastAndroid.SHORT);
+        }
+      }
+    }}
+  />;
+
+
+export default class extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { hasPermission: false };
+    PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.CAMERA)
+      .then(result => this.setState({ hasPermission: result === PermissionsAndroid.RESULTS.GRANTED }));
+  }
+
+  render() {
+    return (
+      this.state.hasPermission ?
+        <MyCamera /> :
+        <View style={styles.center}>
+          <Text style={{ fontSize: 20 }}>
+            {I18n.t('requesting_camera_access')}
+          </Text>
+        </View>
     );
   }
 }
diff --git a/telemetry_ga_android/i18n.js b/telemetry_ga_android/i18n.js
@@ -9,6 +9,8 @@ I18n.translations = {
     request_access_coarse_location_message: 'We need access to BLE to connect to your prosthetic. Note though it is called "location" in Android, we don\'t track your location in any way.',
     request_access_coarse_location_restricted_warning: 'Bluetooth LE access restricted, can\'t connect',
 
+    requesting_camera_access: 'Requesting access to camera...',
+
     prosthetic_id_unset_warning: 'Prosthetic id not set, check Settings',
     matrix_auth_unset_warning: 'Matrix auth data not set, check Settings',
     bad_qr_warning: 'Bad QR code',
@@ -26,6 +28,8 @@ I18n.translations = {
     request_access_coarse_location_message: 'Нам нужен доступ к BLE чтобы подключиться к протезу. Обратите внимание, что несмотря на то, что в Android это называется "местоположение", мы никак его не отслеживаем.',
     request_access_coarse_location_restricted_warning: 'Доступ к Bluetooth LE запрёщен, не могу подключиться.',
 
+    requesting_camera_access: 'Получение доступа к камере...',
+
     prosthetic_id_unset_warning: 'Не настроено подключение к протезу, проверьте Настройки',
     matrix_auth_unset_warning: 'Не настроено подключение к Matrix, проверьте Настройки',
     bad_qr_warning: 'Ошибка чтения QR-кода',