M2-5096: eliminate 3rd-party dep useWindowFocus

Implement custom version instead.

package.json

@@ -74,7 +74,6 @@
  "react-transition-group": "^4.4.5",
  "stream-browserify": "^3.0.0",
  "typescript": "^4.9.5",
- "use-window-focus": "^1.4.2",
  "uuid": "^9.0.1",
  "web-vitals": "^3.5.0",
  "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgz",

src/shared/components/Banners/Banner/Banner.test.tsx

@@ -1,17 +1,19 @@
 import { render, screen, fireEvent } from '@testing-library/react';
-import useWindowFocus from 'use-window-focus';
 
 import { Banner } from './Banner';
 
 const mockOnClose = jest.fn();
+const mockUseWindowFocus = jest.fn();
 
 const props = {
  children: 'Test banner',
  onClose: mockOnClose,
  duration: 5000,
 };
 
-jest.mock('use-window-focus');
+jest.mock('shared/hooks/useWindowFocus', () => ({
+ useWindowFocus: () => mockUseWindowFocus(),
+}));
 
 describe('Banner', () => {
  afterEach(() => {
@@ -37,21 +39,21 @@ describe('Banner', () => {
 
  test('banner auto-closes after 5 seconds if window in focus', () => {
  jest.useFakeTimers();
- (useWindowFocus as jest.Mock).mockReturnValue(true);
+ mockUseWindowFocus.mockReturnValue(true);
 
  render(<Banner {...props} />);
 
- jest.advanceTimersByTime(props.duration);
+ jest.advanceTimersByTime(props.duration + 1000);
  expect(mockOnClose).toHaveBeenCalled();
  });
 
  test('banner does not auto-close if window unfocused', () => {
  jest.useFakeTimers();
- (useWindowFocus as jest.Mock).mockReturnValue(false);
+ mockUseWindowFocus.mockReturnValue(false);
 
  render(<Banner {...props} />);
 
- jest.advanceTimersByTime(props.duration);
+ jest.advanceTimersByTime(props.duration + 1000);
  expect(mockOnClose).not.toHaveBeenCalled();
  });
 });

src/shared/components/Banners/Banner/Banner.tsx

@@ -1,9 +1,9 @@
 import { Alert } from '@mui/material';
 import { useEffect, useState } from 'react';
-import useWindowFocus from 'use-window-focus';
 
 import { Svg } from 'shared/components/Svg';
 import { StyledClearedButton } from 'shared/styles';
+import { useWindowFocus } from 'shared/hooks/useWindowFocus';
 
 import { BannerProps } from './Banner.types';
 import { BANNER_ICONS } from './Banner.const';

src/shared/components/Banners/Banners.test.tsx

@@ -27,7 +27,7 @@ describe('Banners', () => {
  const button = screen.getByRole('button');
  fireEvent.click(button);
 
- // Wait for Collpse transition to complete
+ // Wait for Collapse transition to complete
  await waitFor(() => {
  expect(screen.queryByText('You are using the new version of MindLogger!')).toBeNull();
  });

src/shared/hooks/index.ts

@@ -19,3 +19,4 @@ export * from './useIntersectionObserver';
 export * from './useNetwork';
 export * from './useCheckIfAppletHasNotFoundError';
 export * from './useRespondentLabel';
+export * from './useWindowFocus';

src/shared/hooks/useWindowFocus.test.ts

@@ -0,0 +1,45 @@
+import { act, renderHook } from '@testing-library/react';
+
+import { useWindowFocus } from './useWindowFocus';
+
+const fireFocusEvent = () => {
+ global.window.dispatchEvent(new Event('focus'));
+};
+
+const fireBlurEvent = () => {
+ global.window.dispatchEvent(new Event('blur'));
+};
+
+describe('useWindowFocus)', () => {
+ test('should default to false', () => {
+ const { result } = renderHook(() => useWindowFocus());
+
+ expect(result.current).toBe(false);
+ });
+
+ test('should be true after focus event', () => {
+ const { result } = renderHook(() => useWindowFocus());
+
+ act(() => {
+ fireFocusEvent();
+ });
+
+ expect(result.current).toBe(true);
+ });
+
+ test('should be false after blur event', () => {
+ const { result } = renderHook(() => useWindowFocus());
+
+ act(() => {
+ fireFocusEvent();
+ });
+
+ expect(result.current).toBe(true);
+
+ act(() => {
+ fireBlurEvent();
+ });
+
+ expect(result.current).toBe(false);
+ });
+});

src/shared/hooks/useWindowFocus.ts

@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'react';
+
+const hasFocus = () => typeof document !== 'undefined' && document.hasFocus();
+
+/**
+ * Monitors and returns boolean window focus state reactively.
+ */
+export const useWindowFocus = () => {
+ const [focused, setFocused] = useState(hasFocus);
+
+ useEffect(() => {
+ setFocused(hasFocus());
+
+ const onFocus = () => setFocused(true);
+ const onBlur = () => setFocused(false);
+
+ window.addEventListener('focus', onFocus);
+ window.addEventListener('blur', onBlur);
+
+ return () => {
+ window.removeEventListener('focus', onFocus);
+ window.removeEventListener('blur', onBlur);
+ };
+ }, []);
+
+ return focused;
+};