disabled scroll events and moved window accessors to useEffect

Author: hi2dmitri

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslabs-beta/d3reactor",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "Open-source charting library for creating performant, responsive data visualizations in React",
   "main": "./dist/index.js",
   "types": "./dist/src/index.d.ts",

src/App.tsx

@@ -46,7 +46,7 @@ function App() {
         xAxisLabel="GDP per capita"
         yKey="Life expectancy"
         yGrid={true}
-        yAxis="left"
+        yAxis="right"
         yAxisLabel="Life Expectancy"
       />
       <LineChart

src/components/Arc.tsx

@@ -8,7 +8,6 @@ export const Arc = React.memo(
   ({
     data,
     dataTestId = 'arc',
-    key,
     fill = 'none',
     stroke,
     strokeWidth = '1px',
@@ -39,7 +38,7 @@ export const Arc = React.memo(
       }
     };
 
-    const onMouseLeave = (e: any) => {
+    const onMouseLeave = () => {
       if (setTooltip) {
         setTooltip ? setTooltip(false) : null;
       }
@@ -54,7 +53,7 @@ export const Arc = React.memo(
         strokeWidth={strokeWidth}
         d={d}
         onMouseMove={(e) => onMouseMove(e)}
-        onMouseLeave={(e) => onMouseLeave(e)}
+        onMouseLeave={() => onMouseLeave()}
       />
     );
   }

src/components/ListeningRect.tsx

@@ -41,20 +41,21 @@ export default function ListeningRect({
 }) {
   const anchor = useRef(null);
 
-  const [scrollPosition, setScrollPosition] = useState(0);
+  // const [scrollPosition, setScrollPosition] = useState(0);
 
-  const handleScroll = () => {
-    const position = window.pageYOffset;
-    setScrollPosition(position);
-  };
+  // const handleScroll = () => {
+  //   const position = window.pageYOffset;
+  //   setScrollPosition(position);
+  // };
 
-  useEffect(() => {
-    window.addEventListener('scroll', handleScroll, { passive: true });
+  // useEffect(() => {
+  //   window.addEventListener('scroll', handleScroll, { passive: true });
+
+  //   return () => {
+  //     window.removeEventListener('scroll', handleScroll);
+  //   };
+  // }, []);
 
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, []);
   const tooltipState: toolTipState = {
     cursorX: 0,
     cursorY: 0,
@@ -123,7 +124,7 @@ export default function ListeningRect({
     }
 
     tooltipState.distanceFromTop =
-      tooltipState.cursorY + margin.top - scrollPosition;
+      tooltipState.cursorY + margin.top;
     tooltipState.distanceFromRight =
       width - (margin.left + tooltipState.cursorX);
     tooltipState.distanceFromLeft = margin.left + tooltipState.cursorX;

src/components/VoronoiCell.tsx

@@ -14,20 +14,20 @@ export const VoronoiCell = ({
   margin,
 }: VoronoiProps): JSX.Element => {
   const { width } = useWindowDimensions();
-  const [scrollPosition, setScrollPosition] = useState(0);
+  // const [scrollPosition, setScrollPosition] = useState(0);
 
-  const handleScroll = () => {
-    const position = window.pageYOffset;
-    setScrollPosition(position);
-  };
+  // const handleScroll = () => {
+  //   const position = window.pageYOffset;
+  //   setScrollPosition(position);
+  // };
 
-  useEffect(() => {
-    window.addEventListener('scroll', handleScroll, { passive: true });
+  // useEffect(() => {
+  //   window.addEventListener('scroll', handleScroll, { passive: true });
 
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, []);
+  //   return () => {
+  //     window.removeEventListener('scroll', handleScroll);
+  //   };
+  // }, []);
 
   const tooltipState = {
     cursorX: 0,
@@ -49,7 +49,7 @@ export const VoronoiCell = ({
     };
 
     tooltipState.distanceFromTop =
-      tooltipState.cursorY + margin.top - scrollPosition;
+      tooltipState.cursorY + margin.top;
     tooltipState.distanceFromRight =
       width - (margin.left + tooltipState.cursorX);
     tooltipState.distanceFromLeft = margin.left + tooltipState.cursorX;

src/hooks/useWindowDimensions.tsx

@@ -1,22 +1,23 @@
 import { useState, useEffect } from 'react';
 
-function getWindowDimensions() {
-  const { innerWidth: width, innerHeight: height } = window;
-  return {
-    width,
-    height,
-  };
-}
 
 export default function useWindowDimensions() {
   const [windowDimensions, setWindowDimensions] = useState(
-    getWindowDimensions()
+    {width: 0, height: 0}
   );
 
   useEffect(() => {
+    function getWindowDimensions() {
+      const { innerWidth: width, innerHeight: height } = window;
+      return {
+        width,
+        height,
+      };
+    }
     function handleResize() {
       setWindowDimensions(getWindowDimensions());
     }
+    handleResize() 
 
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);