upgrade react to v18 and react pinch pan to v3

[farooqkz]

Let me know if there is any problem.

Softly depends on removal of BluePrint as upgrading React to v18 also requires upgrading BP. And as BP will get removed, we'll have a wasted effort here.

Closes #3957

[farooqkz]

I don't know how to fix the remaining typing errors about contextType

[Simon-Laux]

move that to the top, your change is not released yet ;)

[farooqkz]

sowwy

[Simon-Laux]

This needs to be tested carefully before merging because it is a big change that might introduce new bugs.

useful links:

• https://react.dev/blog/2022/03/29/react-v18
• https://react.dev/blog/2022/03/08/react-18-upgrade-guide

typescript now needs explicit children in the props everywhere https://react.dev/blog/2022/03/08/react-18-upgrade-guide#updates-to-typescript-definitions

[Simon-Laux]

pr looks good code wise so far 👍

[nicodh]

Maybe test and review again after #4006

[WofWca]

I rebased and fixed the "context" errors.

Things that don't work:

• composer's emoji picker
• Opening a profile modal prints an error

  Warning: findDOMNode is deprecated and will be removed in the next major release.

I think this is because of

 WARN  Issues with peer dependencies found
packages/frontend
└─┬ @blueprintjs/core 4.20.2
  └─┬ react-popper 1.3.11
    └── ✕ unmet peer react@"0.14.x || ^15.0.0 || ^16.0.0 || ^17.0.0": found 18.3.1

So yeah, either a Blueprint upgrade or Blueprint removal (#4006) is needed.

Otherwise: I checked the React 18 migration guide and I didn't notice anything that we need to do, though I didn't really understand some things from the guide.

[WofWca]

I rebased again, and fixed the emoji picker not opening issue: 26a4dc8. And I suspect we might have a few more such problematic places where timing matters. I think this has to do with this item from the React upgrade guide:

Consistent useEffect timing: React now always synchronously flushes effect functions if the update was triggered during a discrete user input event such as a click or a keydown event. Previously, the behavior wasn’t always predictable or consistent.

Another issue that I don't think I've seen happen outside of this MR:

reply.scroll.mp4

I believe it has to do with this recently added code:

deltachat-desktop/packages/frontend/src/components/message/MessageList.tsx

Lines 496 to 532 in 50c5b9b

	const observer = new ResizeObserver(entries => {
	const entry = entries[0]
	if (!entry) {
	return
	}
	const newHeight = el.clientHeight
	if (newHeight === prevHeight) {
	// In case only width changed or something.
	return
	}
	const scrollDistanceToBottomBeforeResize =
	el.scrollHeight - el.scrollTop - prevHeight
	if (
	scrollDistanceToBottomBeforeResize <=
	maxScrollToBottomDistanceConsideredShort
	) {
	el.scrollTop = Number.MAX_SAFE_INTEGER
	// Sometimes this spews out negative numbers when we're scrolled
	// all the way to the bottom and then resize the window.
	// We'd expect this to be 0 in that case, but as long as
	// it works it's fine I guess.
	log.debug(
	`Message list resized, and distance to bottom was` +
	` ${scrollDistanceToBottomBeforeResize} before the resize.` +
	` Scrolling to bottom.`
	)
	}
	prevHeight = newHeight
	})
	observer.observe(el)
	return () => {
	observer.unobserve(el)
	}
	}, [])

Other surface-level things appear to work fine.