upgrade react to v18 and react pinch pan to v3

CHANGELOG.md

@@ -206,6 +206,7 @@
 - use `SOURCE_DATE_EPOCH` environment var for build timestamp instead of `Date.now()` if set.
 - use italic variants of Roboto font correctly #3949
 - show chat name when searching in chat #3950
+- upgrades react to v18 and react pinch pan zoom to v3
 
 ### Fixed
 - skip `requestSingleInstanceLock` on mac appstore builds (mas), because it made it unable to start the app on older macOS devices. #3946

packages/frontend/package.json

@@ -37,13 +37,13 @@
     "mime-types": "catalog:",
     "moment": "^2.30.1",
     "path-browserify": "^1.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-string-replace": "^1.1.1",
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.10",
     "react-window-infinite-loader": "^1.0.9",
-    "react-zoom-pan-pinch": "^2.6.1",
+    "react-zoom-pan-pinch": "^3.0.0",
     "split2": "^4.2.0",
     "use-debounce": "^3.3.0",
     "ws": "7.5.10"
@@ -52,8 +52,8 @@
     "@types/debounce": "^1.2.4",
     "@types/emoji-mart": "^3.0.14",
     "@types/mime-types": "catalog:",
-    "@types/react": "^17.0.80",
-    "@types/react-dom": "^17.0.25",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "@types/react-window": "^1.8.8",
     "@types/react-window-infinite-loader": "^1.0.9",
     "@typescript-eslint/eslint-plugin": "^7.18.0",

packages/frontend/src/components/Gallery.tsx

@@ -73,6 +73,8 @@ export default class Gallery extends Component<
     galleryImageKeepAspectRatio?: boolean
   }
 > {
+  declare context: React.ContextType<typeof DialogContext>
+
   dateHeader = createRef<HTMLDivElement>()
   constructor(props: Props) {
     super(props)

packages/frontend/src/components/QrReader/index.tsx

@@ -5,7 +5,7 @@ import React, {
   useRef,
   useState,
 } from 'react'
-import scanQrCode from 'jsqr'
+import scanQrCode, { QRCode } from 'jsqr'
 import classNames from 'classnames'
 
 import Icon from '../Icon'
@@ -133,14 +133,14 @@ export default function QrReader({ onError, onScan }: Props) {
   // Additionally we have checks in place to make sure we're not firing any
   // callbacks when this React component has already been unmounted.
   const handleScanResult = useCallback(
-    result => {
+    (result: QRCode | null) => {
       let unmounted = false
 
       if (unmounted) {
         return
       }
 
-      onScan(result.data)
+      result && onScan(result.data)
 
       return () => {
         unmounted = true
@@ -386,15 +386,13 @@ export default function QrReader({ onError, onScan }: Props) {
   useEffect(() => {
     const canvas = canvasRef.current
     const video = videoRef.current
-
     const handleWorkerMessage = (event: MessageEvent) => {
       if (event.data) {
-        handleScanResult(event)
+        handleScanResult(event as unknown as QRCode)
       }
     }
 
     worker.addEventListener('message', handleWorkerMessage)
-
     if (!canvas) {
       return
     }

packages/frontend/src/components/composer/Composer.tsx

@@ -217,8 +217,14 @@ const Composer = forwardRef<
       if (clickIsOutSideEmojiPicker) setShowEmojiPicker(false)
     }
 
-    document.addEventListener('click', onClick)
+    // `setTimeout` to work around the fact that otherwise we'd catch
+    // the "click" event that caused the emoji picker to open
+    // in the first place, resulting in it getting closed immediately.
+    const timeoutId = setTimeout(() => {
+      document.addEventListener('click', onClick)
+    })
     return () => {
+      clearTimeout(timeoutId)
       document.removeEventListener('click', onClick)
     }
   }, [showEmojiPicker, emojiAndStickerRef])

packages/frontend/src/components/composer/ComposerMessageInput.tsx

@@ -26,6 +26,8 @@ export default class ComposerMessageInput extends React.Component<
   ComposerMessageInputProps,
   ComposerMessageInputState
 > {
+  declare context: React.ContextType<typeof DialogContext>
+
   composerSize: number
   setCursorPosition: number | false
   textareaRef: React.RefObject<HTMLTextAreaElement>

packages/frontend/src/components/screens/CrashScreen.tsx

@@ -1,26 +1,34 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 
 import { runtime } from '@deltachat-desktop/runtime-interface'
 import { getLogger } from '../../../../shared/logger'
 import { DialogContext } from '../../contexts/DialogContext'
 
 const log = getLogger('renderer/react-crashhandler')
 
-export class CrashScreen extends React.Component {
+interface CrashScreenState {
+  hasError: boolean
+  error: string
+}
+
+export class CrashScreen extends React.Component<
+  PropsWithChildren<{}>,
+  CrashScreenState
+> {
   state = {
     hasError: false,
     error: '',
   }
 
-  componentDidCatch(error: any) {
+  componentDidCatch(error: object | Error) {
     log.error('The app encountered an react error', error)
     this.setState({
       hasError: true,
       error: this.errorToText(error),
     })
   }
 
-  errorToText(error: any) {
+  errorToText(error: object | Error) {
     if (error instanceof Error) {
       // TODO parse the stack and map the sourcemap to provide a useful stacktrace
       return (error.stack || '[no stack trace provided]')

packages/frontend/src/components/screens/RecoverableCrashScreen.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 
 import { runtime } from '@deltachat-desktop/runtime-interface'
 import { getLogger } from '../../../../shared/logger'
@@ -9,9 +9,11 @@ const log = getLogger('renderer/react-crashhandler')
 /**
  * if props.reset_on_change_key changes the RecoverableCrashScreen is reset
  */
-export class RecoverableCrashScreen extends React.Component<{
-  reset_on_change_key: string | number
-}> {
+export class RecoverableCrashScreen extends React.Component<
+  PropsWithChildren<{
+    reset_on_change_key: string | number
+  }>
+> {
   state = {
     hasError: false,
     error: '',

packages/frontend/src/contexts/ContextMenuContext.tsx

@@ -27,7 +27,7 @@ export function ContextMenuProvider({ children }: PropsWithChildren<{}>) {
     }
   )
 
-  const setShowFunction = useCallback(showFn => {
+  const setShowFunction = useCallback((showFn: OpenContextMenu) => {
     setOpenContextMenuFn(
       // Similar to above we need to wrap this into a function, otherwise React
       // would call `showFn` thinking this is the method creating the next

packages/frontend/src/main.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import initWasm from '@deltachat/message_parser_wasm'
 
 import App from './App'
@@ -21,8 +21,12 @@ async function main() {
     await initWasm('./message_parser_wasm_bg.wasm')
 
     initSystemIntegration()
-
-    ReactDOM.render(<App />, document.querySelector('#root'))
+    const domNode = document.querySelector('#root')
+    if (!domNode) {
+      throw new Error('No element with ID root in the DOM. Cannot continue')
+    }
+    const root = createRoot(domNode)
+    root.render(<App />)
   } catch (error) {
     document.write(
       'Error while initialisation, please contact developers and look into the dev console for details:' +