refactoring: share basic scanner

Author: nicodh

_locales/_untranslated_en.json

@@ -99,6 +99,9 @@
     "message": "Are you sure you want to add this transport?"
   },
   "confirm_remove_transport": {
-    "message": "Are you sure you want to remove this?"
+    "message": "Are you sure you want to remove this transport? %1$s"
+  },
+  "invalid_transport_qr": {
+    "message": "The scanned QR code does not contain a valid transport"
   }
 }

packages/frontend/package.json

@@ -25,7 +25,7 @@
     "@breezystack/lamejs": "^1.2.7",
     "@deltachat-desktop/runtime-interface": "link:../runtime",
     "@deltachat-desktop/shared": "link:../shared",
-    "@deltachat/jsonrpc-client": "link:../../../core/deltachat-jsonrpc/typescript",
+    "@deltachat/jsonrpc-client": "catalog:",
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",
     "@jcoreio/async-throttle": "^1.6.1",

packages/frontend/src/components/dialogs/TransportScanner.tsx renamed to packages/frontend/src/components/dialogs/BasicScanner.tsx

@@ -4,23 +4,19 @@ import Dialog, { DialogBody, DialogFooter, FooterActions } from '../Dialog'
 import FooterActionButton from '../Dialog/FooterActionButton'
 import { QrReader, QrCodeScanRef } from '../QrReader'
 import useTranslationFunction from '../../hooks/useTranslationFunction'
-import { processQr } from '../../backend/qr'
 import useAlertDialog from '../../hooks/dialog/useAlertDialog'
-import { selectedAccountId } from '../../ScreenController'
 
 import type { DialogProps } from '../../contexts/DialogContext'
 
 /**
- * QR code scanner for transport configuration
- * Processes scanned QR code and calls onSuccess if it is a valid transport QR code
- * copied from dialogs/QrCode.tsx
+ * Basic QR code scanner
+ * Just returns the scanned QR code as string
  */
-export default function TransportQrScanner({
+export default function BasicQrScanner({
   onSuccess,
   onClose,
 }: DialogProps & { onSuccess: (result: string) => void }) {
   const tx = useTranslationFunction()
-  const accountId = selectedAccountId()
   const openAlertDialog = useAlertDialog()
   const qrReaderRef = useRef<QrCodeScanRef | null>(null)
 
@@ -29,25 +25,18 @@ export default function TransportQrScanner({
       const errorMessage = error?.message || error.toString()
       openAlertDialog({
         message: `${tx('qrscan_failed')} ${errorMessage}`,
-        dataTestid: 'transport-scan-failed',
+        dataTestid: 'scan-failed',
       })
     },
     [openAlertDialog, tx]
   )
 
   const handleScan = useCallback(
     async (data: string) => {
-      if (data) {
-        const { qr } = await processQr(accountId, data)
-        if (qr.kind === 'account') {
-          onSuccess(data)
-          onClose()
-        } else {
-          handleError(new Error('Invalid transport QR code'))
-        }
-      }
+      onSuccess(data)
+      onClose()
     },
-    [onSuccess, onClose, accountId, handleError]
+    [onSuccess, onClose]
   )
 
   const pasteClipboard = useCallback(async () => {

packages/frontend/src/components/dialogs/ProxyConfiguration/index.tsx

@@ -19,7 +19,8 @@ import { getLogger } from '@deltachat-desktop/shared/logger'
 import { unknownErrorToString } from '../../helpers/unknownErrorToString'
 
 import ProxyItemRow from './ProxyItemRow'
-import ProxyQrScanner from '../ProxyQrScanner'
+import { processQr } from '../../../backend/qr'
+import BasicQrScanner from '../BasicScanner'
 
 const log = getLogger('proxy-configuration')
 
@@ -210,12 +211,21 @@ export default function ProxyConfiguration(
   )
 
   const openQrScanner = useCallback(() => {
-    openDialog(ProxyQrScanner, {
-      onSuccess: (result: string) => {
-        addProxy(result)
+    openDialog(BasicQrScanner, {
+      onSuccess: async (result: string) => {
+        if (result) {
+          const { qr } = await processQr(accountId, result)
+          if (qr.kind === 'proxy') {
+            addProxy(result)
+          } else {
+            openAlertDialog({
+              message: tx('proxy_invalid'),
+            })
+          }
+        }
       },
     })
-  }, [openDialog, addProxy])
+  }, [openDialog, accountId, addProxy, openAlertDialog, tx])
 
   const changeActiveProxy = useCallback(
     (proxyUrl: string) => {

packages/frontend/src/components/dialogs/ProxyQrScanner.tsx

@@ -5,7 +5,8 @@ import { BackendRemote } from '../../../backend-com'
 
 import useTranslationFunction from '../../../hooks/useTranslationFunction'
 import useConfirmationDialog from '../../../hooks/dialog/useConfirmationDialog'
-import TransportQrScanner from '../TransportScanner'
+import useAlertDialog from '../../../hooks/dialog/useAlertDialog'
+import BasicQrScanner from '../BasicScanner'
 import EditAccountAndPasswordDialog from '../EditAccountAndPasswordDialog'
 import Button from '../../Button'
 
@@ -14,10 +15,10 @@ import styles from './styles.module.scss'
 import { EnteredLoginParam } from '@deltachat/jsonrpc-client/dist/generated/types'
 import classNames from 'classnames'
 import useDialog from '../../../hooks/dialog/useDialog'
+import { processQr } from '../../../backend/qr'
 
 /**
  * Dialog for transports configuration
-
  */
 export default function TransportsDialog(
   props: DialogProps & {
@@ -27,7 +28,7 @@ export default function TransportsDialog(
   }
 ) {
   const tx = useTranslationFunction()
-
+  const openAlertDialog = useAlertDialog()
   const { accountId, onClose } = props
 
   // used in  new transport form
@@ -50,63 +51,67 @@ export default function TransportsDialog(
     fetchTransports()
   }, [accountId])
 
-  // const addTransport = useCallback(async (transport: EnteredLoginParam) => {
-  //   await BackendRemote.rpc
-  //     .addTransport(accountId, transport)
-  //     .then(() => {
-  //       // refresh transport list
-  //       setTransports((prev) => [
-  //         ...prev,
-  //         transport,
-  //       ])
-  //     })
-  // }, [accountId])
-
   const { openDialog } = useDialog()
   const openConfirmationDialog = useConfirmationDialog()
 
-  const changeDefaultTransport = (transport: EnteredLoginParam) => {
-    const setDefaultConfig = async (addr: string) => {
-      await BackendRemote.rpc.setConfig(accountId, 'configured_addr', addr)
+  const changeDefaultTransport = useCallback(
+    async (transport: EnteredLoginParam) => {
+      await BackendRemote.rpc.setConfig(
+        accountId,
+        'configured_addr',
+        transport.addr
+      )
       await BackendRemote.rpc.stopIo(accountId)
       await BackendRemote.rpc.startIo(accountId)
       setTransports(prev =>
         prev.map(t => ({ ...t, isDefault: t.addr === transport.addr }))
       )
-    }
-    setDefaultConfig(transport.addr)
-  }
+    },
+    [accountId]
+  )
 
   const openQrScanner = useCallback(() => {
-    openDialog(TransportQrScanner, {
-      onSuccess: (result: string) => {
-        BackendRemote.rpc.addTransportFromQr(accountId, result).then(() => {
+    openDialog(BasicQrScanner, {
+      onSuccess: async (result: string) => {
+        const { qr } = await processQr(accountId, result)
+        if (qr.kind === 'account') {
+          await BackendRemote.rpc.addTransportFromQr(accountId, result)
           // refresh transport list
           getTransports()
-        })
+        } else {
+          openAlertDialog({
+            message: tx('invalid_transport_qr'),
+          })
+        }
       },
     })
-  }, [openDialog, accountId, getTransports])
+  }, [openDialog, accountId, getTransports, openAlertDialog, tx])
 
   useEffect(() => {
     getTransports()
   }, [getTransports])
 
-  const deleteTransport = async (transport: EnteredLoginParam) => {
-    const confirmed = await openConfirmationDialog({
-      message: tx('confirm_remove_transport', transport.addr),
-    })
-    if (confirmed) {
-      await BackendRemote.rpc.deleteTransport(accountId, transport.addr)
-      setTransports(prev => prev.filter(t => t.addr !== transport.addr))
-    }
-  }
+  const deleteTransport = useCallback(
+    async (transport: EnteredLoginParam) => {
+      const confirmed = await openConfirmationDialog({
+        message: tx('confirm_remove_transport', transport.addr),
+      })
+      if (confirmed) {
+        await BackendRemote.rpc.deleteTransport(accountId, transport.addr)
+        setTransports(prev => prev.filter(t => t.addr !== transport.addr))
+      }
+    },
+    [openConfirmationDialog, tx, accountId]
+  )
 
-  const editTransport = (transport: EnteredLoginParam) => {
-    openDialog(EditAccountAndPasswordDialog, {
-      addr: transport.addr,
-    })
-  }
+  const editTransport = useCallback(
+    (transport: EnteredLoginParam) => {
+      openDialog(EditAccountAndPasswordDialog, {
+        addr: transport.addr,
+      })
+    },
+    [openDialog]
+  )
 
   return (
     <Dialog

packages/frontend/src/components/dialogs/Transports/index.tsx

@@ -29,9 +29,6 @@
     display: flex;
     flex-grow: 1;
     padding-inline-end: 10px;
-    &:hover {
-      background-color: var(--globalHoverBg);
-    }
   }
   .transportItem {
     cursor: pointer;
@@ -69,13 +66,6 @@ $iconSize: 1.3em;
   margin-bottom: 20px;
 }
 
-.buttons {
-  display: flex;
-  button {
-    padding: 6px;
-  }
-}
-
 .addTransportButton {
   padding: 8px 10px 7px 10px;
 }

packages/frontend/src/components/dialogs/Transports/styles.module.scss

@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "@deltachat-desktop/shared": "link:../shared",
-    "@deltachat/jsonrpc-client": "link:../../../core/deltachat-jsonrpc/typescript",
+    "@deltachat/jsonrpc-client": "catalog:",
     "@types/node": "catalog:"
   }
 }

packages/runtime/package.json

@@ -17,8 +17,8 @@
   "dependencies": {
     "@deltachat-desktop/runtime-interface": "link:../runtime",
     "@deltachat-desktop/shared": "link:../shared",
-    "@deltachat/jsonrpc-client": "link:../../../core/deltachat-jsonrpc/typescript",
-    "@deltachat/stdio-rpc-server": "link:../../../core/deltachat-rpc-server/npm-package",
+    "@deltachat/jsonrpc-client": "catalog:",
+    "@deltachat/stdio-rpc-server": "catalog:",
     "@types/express-session": "^1.18.0",
     "@types/node-localstorage": "^1.3.3",
     "express": "^4.20.0",