Upgrade React and ReactXP

3 files changed, 14 insertions, 13 deletions

diff --git a/gui/src/renderer/components/Marquee.tsx b/gui/src/renderer/components/Marquee.tsx
index 04b095711e..8dc6724797 100644
--- a/gui/src/renderer/components/Marquee.tsx
+++ b/gui/src/renderer/components/Marquee.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Animated, Component, Styles, Types, UserInterface, View } from 'reactxp';
+import { Scheduler } from '../../shared/scheduler';
 
 const styles = {
   text: Styles.createTextStyle({
@@ -18,7 +19,7 @@ export default class Marquee extends Component<IMarqueeProps> {
   private textAnimation = Styles.createAnimatedTextStyle({ left: this.initialLeft });
   private textRef = React.createRef<Animated.Text>();
 
-  private animationTimeout?: number;
+  private animationScheduler = new Scheduler();
   private animation?: Types.Animated.CompositeAnimation;
 
   public componentDidMount() {
@@ -48,7 +49,7 @@ export default class Marquee extends Component<IMarqueeProps> {
   private startAnimation() {
     this.stopAnimation();
 
-    this.animationTimeout = setTimeout(async () => {
+    this.animationScheduler.schedule(async () => {
       if (this.textRef.current) {
         const textLayout = await UserInterface.measureLayoutRelativeToWindow(this.textRef.current);
         const viewLayout = await UserInterface.measureLayoutRelativeToWindow(this);
@@ -75,9 +76,7 @@ export default class Marquee extends Component<IMarqueeProps> {
   }
 
   private stopAnimation() {
-    clearTimeout(this.animationTimeout);
-    if (this.animation) {
-      this.animation.stop();
-    }
+    this.animationScheduler.cancel();
+    this.animation?.stop();
   }
 }
diff --git a/gui/src/renderer/components/SvgMap.tsx b/gui/src/renderer/components/SvgMap.tsx
index 0713faf7e2..2cc23d3399 100644
--- a/gui/src/renderer/components/SvgMap.tsx
+++ b/gui/src/renderer/components/SvgMap.tsx
@@ -9,6 +9,7 @@ import {
   Markers,
   ZoomableGroup,
 } from 'react-simple-maps';
+import { Scheduler } from '../../shared/scheduler';
 
 import geographyData from '../../../assets/geo/geometry.json';
 import statesProvincesLinesData from '../../../assets/geo/states-provinces-lines.json';
@@ -69,7 +70,7 @@ export default class SvgMap extends React.Component<IProps, IState> {
     scale: 160,
   };
 
-  private transitionEndTimeout?: number;
+  private transitionEndScheduler = new Scheduler();
 
   constructor(props: IProps) {
     super(props);
@@ -101,15 +102,14 @@ export default class SvgMap extends React.Component<IProps, IState> {
 
   public componentDidUpdate(_prevProps: IProps, _prevState: IState) {
     if (this.state.viewportBboxes.length > 1) {
-      clearTimeout(this.transitionEndTimeout);
-      this.transitionEndTimeout = setTimeout(() => {
+      this.transitionEndScheduler.schedule(() => {
         this.setState((state) => this.removeOldViewportBboxes(state));
       }, MOVE_SPEED);
     }
   }
 
   public componentWillUnmount() {
-    clearTimeout(this.transitionEndTimeout);
+    this.transitionEndScheduler.cancel();
   }
 
   public render() {
diff --git a/gui/src/shared/scheduler.ts b/gui/src/shared/scheduler.ts
index af28a7e95b..902254c567 100644
--- a/gui/src/shared/scheduler.ts
+++ b/gui/src/shared/scheduler.ts
@@ -1,12 +1,14 @@
 export class Scheduler {
-  private timer?: number;
+  private timer?: NodeJS.Timeout;
 
   public schedule(action: () => void, delay: number) {
     this.cancel();
-    this.timer = setTimeout(action, delay);
+    this.timer = global.setTimeout(action, delay);
   }
 
   public cancel() {
-    clearTimeout(this.timer);
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
   }
 }