From ef3c8d2eac1c4413a823e6bd4f0bd59af6421997 Mon Sep 17 00:00:00 2001
From: Amy <minds10@hotmail.com>
Date: Sun, 22 Aug 2021 16:28:42 -0400
Subject: [PATCH] Use useWindowDimension hook in shapes background

---
 components/ShapesBackground.tsx |  4 +++-
 hooks/useWindowDimension.tsx    | 37 +++++++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 hooks/useWindowDimension.tsx

diff --git a/components/ShapesBackground.tsx b/components/ShapesBackground.tsx
index 1d960668..851e2433 100644
--- a/components/ShapesBackground.tsx
+++ b/components/ShapesBackground.tsx
@@ -1,3 +1,4 @@
+import { useWindowDimension } from "hooks/useWindowDimension";
 import React, { CSSProperties, useEffect, useState } from "react";
 
 import { Image } from "./Image";
@@ -10,10 +11,11 @@ interface Props {
 
 export function ShapesBackground({ getConfig }: Props) {
   const [config, setConfig] = useState<ShapesConfig>({});
+  const { width, height } = useWindowDimension();
 
   useEffect(() => {
     setConfig(getConfig?.() ?? {});
-  }, [getConfig]);
+  }, [getConfig, width, height]);
 
   return (
     <div className={styles.shapesContainer}>
diff --git a/hooks/useWindowDimension.tsx b/hooks/useWindowDimension.tsx
new file mode 100644
index 00000000..0b6924ea
--- /dev/null
+++ b/hooks/useWindowDimension.tsx
@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react";
+
+interface WindowDimension {
+  width: number;
+  height: number;
+}
+
+function getWindowDimension() {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height,
+  };
+}
+
+export function useWindowDimension(): WindowDimension {
+  const [windowSize, setWindowDimension] = useState<WindowDimension>({
+    width: 0,
+    height: 0,
+  });
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowDimension(getWindowDimension());
+    };
+
+    // Set size at the first client-side load
+    handleResize();
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  return windowSize;
+}