upgrade react to v18 and react pinch pan to v3 (#3958)

Co-authored-by: WofWca <[email protected]>

CHANGELOG.md

@@ -5,6 +5,7 @@
 ## Added
 
 ## Changed
+- dev: upgrade react to v18 and react pinch pan zoom to v3
 
 ## Fixed
 

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

@@ -78,6 +78,9 @@ export default class Gallery extends Component<
     galleryImageKeepAspectRatio?: boolean
   }
 > {
+  static contextType = DialogContext
+  declare context: React.ContextType<typeof DialogContext>
+
   dateHeader = createRef<HTMLDivElement>()
   tabListRef = createRef<HTMLUListElement>()
   constructor(props: Props) {
@@ -443,8 +446,6 @@ function GalleryTab(props: {
   )
 }
 
-Gallery.contextType = DialogContext
-
 function FileTable({
   width,
   height,

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

@@ -199,8 +199,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,9 @@ export default class ComposerMessageInput extends React.Component<
   ComposerMessageInputProps,
   ComposerMessageInputState
 > {
+  static contextType = DialogContext
+  declare context: React.ContextType<typeof DialogContext>
+
   composerSize: number
   setCursorPosition: number | false
   textareaRef: React.RefObject<HTMLTextAreaElement>
@@ -229,5 +232,3 @@ export default class ComposerMessageInput extends React.Component<
     )
   }
 }
-
-ComposerMessageInput.contextType = DialogContext

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:' +