refactor: Replace useWindowSize with Paragon's useWindowSize (#1006)

* refactor: Replace useWindowSize with Paragon's useWindowSize

* refactor: applied changes per reviewer comment

src/components/IconWithTooltip/IconWithTooltip.test.jsx

@@ -3,9 +3,6 @@ import { render, screen, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import IconWithTooltip from './index';
-import useWindowSize from '../../hooks/useWindowSize';
-
-jest.mock('./../../hooks/useWindowSize');
 
 const defaultAltText = 'infoooo';
 const defaultTooltipText = 'Tooool';
@@ -17,7 +14,8 @@ const DEFAULT_PROPS = {
 
 describe('<IconWithTooltip />', () => {
   it('renders the icon passed to it with alt text', () => {
-    useWindowSize.mockReturnValue({ width: 800 });
+    global.innerWidth = 800;
+    global.dispatchEvent(new Event('resize'));
     const { container } = render(<IconWithTooltip {...DEFAULT_PROPS} />);
     expect(container.querySelector(`[data-icon=${faInfoCircle.iconName}]`)).toBeTruthy();
   });
@@ -26,7 +24,8 @@ describe('<IconWithTooltip />', () => {
     { windowSize: 700, expectedLocation: 'top' },
   ].forEach((data) => {
     it(`renders the tooltip on the ${data.expectedLocation} for ${data.windowSize}px screen`, () => {
-      useWindowSize.mockReturnValue({ width: data.windowSize });
+      global.innerWidth = data.windowSize;
+      global.dispatchEvent(new Event('resize'));
       const { container } = render(<IconWithTooltip {...DEFAULT_PROPS} />);
       const icon = container.querySelector(`[data-icon=${faInfoCircle.iconName}]`);
       expect(icon).toBeTruthy();

src/components/IconWithTooltip/index.jsx

@@ -1,18 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { OverlayTrigger, Tooltip } from '@edx/paragon';
-import useWindowSize from '../../hooks/useWindowSize';
+import { OverlayTrigger, Tooltip, useWindowSize } from '@edx/paragon';
 
 const IconWithTooltip = ({
   icon, altText, tooltipText, placementSm = 'right', placementLg = 'top', trigger = ['hover', 'focus'], breakpoint = 768, iconClassNames = 'ml-1',
 }) => {
-  const windowSize = useWindowSize();
-  const placement = windowSize.width >= breakpoint ? placementSm : placementLg;
+  const { width } = useWindowSize();
+  const placement = width >= breakpoint ? placementSm : placementLg;
   return (
     <OverlayTrigger
       trigger={trigger}
-      placement={windowSize.width >= breakpoint ? placementSm : placementLg}
+      placement={placement}
       data-testid={`tooltip-${placement}`}
       overlay={(
         <Tooltip id={`tooltip-${placement}`}>

src/components/forms/tests/ValidatedFormControl.test.tsx

@@ -28,8 +28,8 @@ const ValidatedFormControlWrapper = ({
     formFields: { [formId]: formValue },
   };
   if (formError) {
-    contextValue = 
-    { ...contextValue, 
+    contextValue = {
+      ...contextValue,
       errorMap: { [formId]: [formError] },
       showErrors: true,
     };

src/hooks/index.js

@@ -1,3 +1,2 @@
 export { default as useInterval } from './useInterval';
-export { default as useWindowSize } from './useWindowSize';
 export { default as useOnMount } from './useOnMount';