refactor: Remove unused code and optimize imports in ScanQRCode.js

IZUMI-Zu · Aug 25, 2024 · 097497c · 097497c
1 parent 8beb671
commit 097497c
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 50 deletions.
diff --git a/EnterAccountDetails.js b/EnterAccountDetails.js
@@ -120,12 +120,13 @@ const EnterAccountDetails = ({onClose, onAdd, validateSecret}) => {
           error={!!secretError}
           style={styles.input}
           mode="outlined"
-          right={
+          right={(props) => (
             <TextInput.Icon
+              {...props}
               icon={showPassword ? "eye-off" : "eye"}
               onPress={() => setShowPassword(!showPassword)}
             />
-          }
+          )}
         />
         <View style={styles.buttonContainer}>
           <Menu

diff --git a/HomePage.js b/HomePage.js
@@ -134,6 +134,16 @@ export default function HomePage() {
 
   const handleCloseScanner = () => setShowScanner(false);
 
+  const handleScanError = (error) => {
+    setShowScanner(false);
+    Toast.show({
+      type: "error",
+      text1: "Scan error",
+      text2: error,
+      autoHide: true,
+    });
+  };
+
   const togglePlusButton = () => {
     setIsPlusButton(!isPlusButton);
     setShowOptions(!showOptions);
@@ -330,7 +340,7 @@ export default function HomePage() {
       </Portal>
 
       {showScanner && (
-        <ScanQRCode onClose={handleCloseScanner} showScanner={showScanner} onAdd={handleAddAccount} />
+        <ScanQRCode onClose={handleCloseScanner} showScanner={showScanner} onAdd={handleAddAccount} onError={handleScanError} />
       )}
 
       <TouchableOpacity

diff --git a/ScanQRCode.js b/ScanQRCode.js
@@ -14,8 +14,9 @@
 
 import React, {useEffect, useState} from "react";
 import {Text, View} from "react-native";
-import {IconButton, Portal} from "react-native-paper";
-import {Camera, CameraView} from "expo-camera";
+import {Button, IconButton, Portal} from "react-native-paper";
+import {Camera, CameraView, scanFromURLAsync} from "expo-camera";
+import * as ImagePicker from "expo-image-picker";
 import PropTypes from "prop-types";
 import useProtobufDecoder from "./useProtobufDecoder";
 
@@ -30,18 +31,16 @@ const ScanQRCode = ({onClose, showScanner, onAdd}) => {
   const decoder = useProtobufDecoder(require("./google/google_auth.proto"));
 
   useEffect(() => {
-    const getCameraPermissions = async() => {
-      const {status} = await Camera.requestCameraPermissionsAsync();
-      setHasPermission(status === "granted");
+    const getPermissions = async() => {
+      const {status: cameraStatus} = await Camera.requestCameraPermissionsAsync();
+      setHasPermission(cameraStatus === "granted");
+      // const {status: mediaLibraryStatus} = await ImagePicker.requestMediaLibraryPermissionsAsync();
+      // setHasMediaLibraryPermission(mediaLibraryStatus === "granted");
     };
 
-    getCameraPermissions();
+    getPermissions();
   }, []);
 
-  const closeOptions = () => {
-    onClose();
-  };
-
   const handleBarCodeScanned = ({type, data}) => {
     // console.log(`Bar code with type ${type} and data ${data} has been scanned!`);
     const supportedProtocols = ["otpauth", "otpauth-migration"];
@@ -56,58 +55,75 @@ const ScanQRCode = ({onClose, showScanner, onAdd}) => {
         handleGoogleMigration(data);
         break;
       default:
-        break;
+        return;
       }
+      onClose();
     }
-    closeOptions();
   };
 
   const handleOtpAuth = (data) => {
-    const accountName = data.match(/otpauth:\/\/totp\/([^?]+)/);
-    const secretKey = data.match(/secret=([^&]+)/);
-    const issuer = data.match(/issuer=([^&]+)/);
+    const [, accountName] = data.match(/otpauth:\/\/totp\/([^?]+)/) || [];
+    const [, secretKey] = data.match(/secret=([^&]+)/) || [];
+    const [, issuer] = data.match(/issuer=([^&]+)/) || [];
 
     if (accountName && secretKey) {
-      onAdd({
-        accountName: accountName[1],
-        issuer: issuer ? issuer[1] : null,
-        secretKey: secretKey[1],
-      });
+      onAdd({accountName, issuer: issuer || null, secretKey});
     }
   };
 
   const handleGoogleMigration = (data) => {
-    try {
-      const accounts = decoder.decodeExportUri(data);
-      accounts.forEach(account => {
-        onAdd({
-          accountName: account.accountName,
-          issuer: account.issuer,
-          secretKey: account.totpSecret,
-        });
-      });
-    } catch (error) {
-      throw new Error("Failed to decode migration payload:", error);
+    const accounts = decoder.decodeExportUri(data);
+    accounts.forEach(({accountName, issuer, totpSecret}) => {
+      onAdd({accountName, issuer, secretKey: totpSecret});
+    });
+  };
+
+  const pickImage = async() => {
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.Images,
+      quality: 1,
+    });
+
+    if (!result.canceled && result.assets[0]) {
+      const scannedData = await scanFromURLAsync(result.assets[0].uri, ["qr", "pdf417"]);
+      if (scannedData[0]) {
+        handleBarCodeScanned({type: scannedData[0].type, data: scannedData[0].data});
+      }
     }
   };
 
+  if (hasPermission === null) {
+    return <Text style={{margin: "20%"}}>Requesting permissions...</Text>;
+  }
+
+  if (hasPermission === false) {
+    return <Text style={{margin: "20%"}}>No access to camera or media library</Text>;
+  }
+
   return (
-    <View style={{marginTop: "50%", flex: 1}} >
+    <View style={{marginTop: "50%", flex: 1}}>
       <Portal>
-        {hasPermission === null ? (
-          <Text style={{marginLeft: "20%", marginRight: "20%"}}>Requesting for camera permission</Text>
-        ) : hasPermission === false ? (
-          <Text style={{marginLeft: "20%", marginRight: "20%"}}>No access to camera</Text>
-        ) : (
-          <CameraView
-            onBarcodeScanned={handleBarCodeScanned}
-            barcodeScannerSettings={{
-              barcodeTypes: ["qr", "pdf417"],
-            }}
-            style={{flex: 1}}
-          />
-        )}
-        <IconButton icon={"close"} size={40} onPress={onClose} style={{position: "absolute", top: 30, right: 5}} />
+        <CameraView
+          onBarcodeScanned={handleBarCodeScanned}
+          barcodeScannerSettings={{
+            barcodeTypes: ["qr", "pdf417"],
+          }}
+          style={{flex: 1}}
+        />
+        <IconButton
+          icon="close"
+          size={40}
+          onPress={onClose}
+          style={{position: "absolute", top: 30, right: 5}}
+        />
+        <Button
+          icon="image"
+          mode="contained"
+          onPress={pickImage}
+          style={{position: "absolute", bottom: 20, alignSelf: "center"}}
+        >
+          Choose Image
+        </Button>
       </Portal>
     </View>
   );

diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
-    "start": "expo start --tunnel",
+    "start": "expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",