From 5be9d2f8741224ed7cd291898b1abe88668b3fed Mon Sep 17 00:00:00 2001
From: Maxwell Talbot <talbot.maxwell@gmail.com>
Date: Thu, 14 Jul 2022 10:36:26 +0100
Subject: [PATCH] refactored the IE check into `useSize`

---
 setupTests.ts         |  3 ---
 src/hooks/useRive.tsx | 38 +++++---------------------------------
 src/utils.ts          | 43 ++++++++++++++++++++++++++++++++++++-------
 3 files changed, 41 insertions(+), 43 deletions(-)

diff --git a/setupTests.ts b/setupTests.ts
index e4daa37..638a0d4 100644
--- a/setupTests.ts
+++ b/setupTests.ts
@@ -1,7 +1,4 @@
 import '@testing-library/jest-dom';
-import ResizeObserver from 'resize-observer-polyfill';
-
-global.ResizeObserver = ResizeObserver;
 
 window.IntersectionObserver = class IntersectionObserver {
   readonly root: Element | null;
diff --git a/src/hooks/useRive.tsx b/src/hooks/useRive.tsx
index 51ac688..2f8d49d 100644
--- a/src/hooks/useRive.tsx
+++ b/src/hooks/useRive.tsx
@@ -13,7 +13,7 @@ import {
   RiveState,
   Dimensions,
 } from '../types';
-import { isIE, useWindowSize } from '../utils';
+import { useSize } from '../utils';
 
 type RiveComponentProps = {
   setContainerRef: RefCallback<HTMLElement>;
@@ -89,13 +89,7 @@ export default function useRive(
 
   // Listen to changes in the window sizes and update the bounds when changes
   // occur.
-  const windowSize = useWindowSize();
-
-  // when the container dimensions change, we need to re evaluate our dimensions.
-  const [containerDimensions, setContainerDimensions] = useState<Dimensions>({
-    height: 0,
-    width: 0,
-  });
+  const size = useSize(containerRef);
 
   const isParamsLoaded = Boolean(riveParams);
   const options = getOptions(opts);
@@ -166,39 +160,17 @@ export default function useRive(
    * ie does not support ResizeObservers, so we fallback to the window listener there
    */
   useEffect(() => {
-    if (isIE() && rive) {
+    if (rive) {
       updateBounds();
     }
-  }, [rive, windowSize]);
-
-  const observer = useRef(
-    new ResizeObserver((entries) => {
-      setContainerDimensions(entries[entries.length - 1].contentRect);
-    })
-  );
-
-  useEffect(() => {
-    if (!isIE() && rive) {
-      updateBounds();
-    }
-  }, [rive, containerDimensions]);
-
-  useEffect(() => {
-    if (!isIE() && containerRef.current) {
-      observer.current.observe(containerRef.current);
-    }
-
-    return () => {
-      observer.current.disconnect();
-    };
-  }, [containerRef.current, observer]);
+  }, [rive, size]);
 
   /**
    * Ref callback called when the canvas element mounts and unmounts.
    */
   const setCanvasRef: RefCallback<HTMLCanvasElement> = useCallback(
     (canvas: HTMLCanvasElement | null) => {
-      if (canvas && riveParams) {
+      if (canvas && riveParams && isParamsLoaded) {
         const { useOffscreenRenderer } = options;
         const r = new Rive({
           useOffscreenRenderer,
diff --git a/src/utils.ts b/src/utils.ts
index 08d1851..4f84861 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,26 +1,55 @@
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Dimensions } from './types';
+import ResizeObserver from 'resize-observer-polyfill';
 
-export function useWindowSize() {
-  const [windowSize, setWindowSize] = useState<Dimensions>({
+export function useSize(
+  containerRef: React.MutableRefObject<HTMLElement | null>
+) {
+  const [size, setSize] = useState<Dimensions>({
     width: 0,
     height: 0,
   });
 
+  // internet explorer does not support ResizeObservers.
   useEffect(() => {
     if (typeof window !== 'undefined') {
       const handleResize = () => {
-        setWindowSize({
+        setSize({
           width: window.innerWidth,
           height: window.innerHeight,
         });
       };
-      window.addEventListener('resize', handleResize);
-      handleResize();
+
+      if (isIE()) {
+        // only listen to window when its IE, as ResizeObserver will be polyfilled.
+        window.addEventListener('resize', handleResize);
+        handleResize();
+      }
       return () => window.removeEventListener('resize', handleResize);
     }
   }, []);
-  return windowSize;
+
+  const observer = useRef(
+    new ResizeObserver((entries) => {
+      setSize({
+        width: entries[entries.length - 1].contentRect.width,
+        height: entries[entries.length - 1].contentRect.height,
+      });
+    })
+  );
+
+  useEffect(() => {
+    const current = observer.current;
+    if (containerRef.current) {
+      current.observe(containerRef.current);
+    }
+
+    return () => {
+      current.disconnect();
+    };
+  }, [containerRef, observer]);
+
+  return size;
 }
 
 // grabbed from: https://stackoverflow.com/questions/19999388/check-if-user-is-using-ie