@websolutespa/bom-mixer-hooks 0.2.0 → 0.2.2

package/src/useHttp/useHttp.test.tsx

@@ -0,0 +1,192 @@
+import '@testing-library/jest-dom';
+import { render, screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
+import { getApiUrl } from '@websolutespa/bom-mixer-store';
+import { useHttpDelete, useHttpFetch, useHttpGet, useHttpPatch, useHttpPost, useHttpPut } from './useHttp';
+
+const defaultResponse = {
+  ok: true,
+  status: 200,
+  json: () => Promise.resolve(null),
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function mockFetch(method: string = 'GET', result: any = { message: 'ok' }, overrideResponse: Partial<typeof defaultResponse> = {}) {
+  const endpoint = '/endpoint';
+  const url = `${getApiUrl(endpoint)}?locale=en&market=ww`;
+  const payload = { data: 'data' };
+  const response = {
+    ...defaultResponse,
+    ...overrideResponse,
+    json: () => Promise.resolve(result),
+  } as Response;
+  global.fetch = jest.fn(() =>
+    Promise.resolve(response)
+  );
+  const request: {
+    body?: string;
+    headers: { [key: string]: string },
+    method: string;
+  } = {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method,
+  };
+  if (['POST', 'PATCH', 'PUT'].includes(method)) {
+    request.body = JSON.stringify(payload);
+  }
+  return { endpoint, url, payload, result, request, response };
+}
+
+describe('useHttp', () => {
+  jest.useFakeTimers();
+
+  const ENV = process.env;
+  const FETCH = global.fetch;
+
+  beforeEach(() => {
+    // !!! act error
+    jest.spyOn(console, 'error').mockImplementation(() => { });
+    jest.resetModules();
+    jest.resetAllMocks();
+    process.env = {
+      NODE_ENV: 'test',
+      NEXT_PUBLIC_URL: 'http://localhost:3000',
+      NEXT_PUBLIC_MOCK_FALLBACK_URL: 'http://localhost:3000',
+      NEXT_PUBLIC_API: '/api',
+      NEXT_PUBLIC_GOOGLE_MAP_API_KEY: 'AIzaSyDvGw6iAoKdRv8mmaC9GeT-LWLPQtA8p60',
+      STORE_URL: 'http://localhost:4000',
+      STORE_API: '/api',
+      STORE_BEARER: '7584f15d12972fb1e7695e998dd5e4c754f46c74d06a08e8d76f556adcd045e48cd52bed6faac098784471ac273ee40243194b9cff7eba3c4a768f8f41d2d51959a7f767b943c7f0170f6e5f632db523803c357083bf7a7bf03ee8e0df2d8ce5cd52e0211283b34d7781313da775018a9e950433d2b6faf711c20e5a63b25243',
+      STORE_STRATEGY: 'mock',
+      SECRET_COOKIE_PASSWORD: '2gyZ3GDw3LHZQKDhPmPDL3sjREVRXPr8',
+      HOOKS_SECRET: '7584f15d12972fb1e7695e998dd5e4',
+    };
+  });
+
+  afterAll(() => {
+    process.env = ENV;
+    global.fetch = FETCH;
+  });
+
+  /*
+  !!! todo
+  test('useHttpFetch expect loading to be true', async () => {
+    const mock = mockFetch();
+    const { result } = renderHook(() => useHttpFetch(mock.url));
+    await waitFor(() => expect(fetch).toBeCalled());
+    expect(fetch).toHaveBeenCalledTimes(1);
+    expect(fetch).toHaveBeenCalledWith(mock.url, mock.request);
+    const [response, loading, error, setError] = result.current;
+    expect(loading).toBe(true);
+  });
+  */
+
+  test('useHttpFetch expect result ok', async () => {
+    const mock = mockFetch();
+    const Wrapper = () => {
+      const [response, loading, error, setError] = useHttpFetch(mock.url);
+      return (
+        <>
+          {loading && <div data-testid="loading">loading</div>}
+          {response && <div data-testid="result">{JSON.stringify(response)}</div>}
+          {error && <div data-testid="error">{JSON.stringify(error)}</div>}
+        </>
+      );
+    };
+    const { findByTestId } = render(<Wrapper />);
+    const loading = await findByTestId('loading');
+    expect(loading).toHaveTextContent('loading');
+    await waitForElementToBeRemoved(() => screen.getByTestId('loading'));
+    await waitFor(() => expect(fetch).toBeCalled());
+    expect(fetch).toHaveBeenCalledTimes(1);
+    expect(fetch).toHaveBeenCalledWith(mock.url, mock.request);
+    const result = await waitFor(() => screen.getByTestId('result'));
+    expect(result).toHaveTextContent(JSON.stringify(mock.result));
+  });
+
+  /*
+  !!! todo
+  test('useHttpFetch expect error', async () => {
+    const mock = mockFetch(undefined, undefined, { ok: false, status: 500 });
+    const Wrapper = () => {
+      const [response, loading, error, setError] = useHttpFetch(mock.url);
+      return (
+        <>
+          {loading && <div data-testid="loading">loading</div>}
+          {response && <div data-testid="result">{JSON.stringify(response)}</div>}
+          {error && <div data-testid="error">{JSON.stringify(error)}</div>}
+        </>
+      );
+    };
+    const { findByTestId } = render(<Wrapper />);
+    const loading = await findByTestId('loading');
+    expect(loading).toHaveTextContent('loading');
+    await waitForElementToBeRemoved(() => screen.getByTestId('loading'));
+    await waitFor(() => expect(fetch).toBeCalled());
+    expect(fetch).toHaveBeenCalledTimes(1);
+    expect(fetch).toHaveBeenCalledWith(mock.url, mock.request);
+    const error = await waitFor(() => screen.getByTestId('error'));
+    expect(error).toHaveTextContent('{"ok":false,"status":500}');
+  });
+  */
+
+  test('useHttpGet expect result ok', TestMethod('GET'));
+
+  test('useHttpPost expect result ok', TestMethod('POST'));
+
+  test('useHttpPatch expect result ok', TestMethod('PATCH'));
+
+  test('useHttpPut expect result ok', TestMethod('PUT'));
+
+  test('useHttpDelete expect result ok', TestMethod('DELETE'));
+
+  function TestMethod(method?: string) {
+    const useHook = (mock: ReturnType<typeof mockFetch>) => {
+      switch (method) {
+        case 'GET':
+          // eslint-disable-next-line react-hooks/rules-of-hooks
+          return useHttpGet(mock.url);
+        case 'POST':
+          // eslint-disable-next-line react-hooks/rules-of-hooks
+          return useHttpPost(mock.url, mock.payload);
+        case 'PATCH':
+          // eslint-disable-next-line react-hooks/rules-of-hooks
+          return useHttpPatch(mock.url, mock.payload);
+        case 'PUT':
+          // eslint-disable-next-line react-hooks/rules-of-hooks
+          return useHttpPut(mock.url, mock.payload);
+        case 'DELETE':
+          // eslint-disable-next-line react-hooks/rules-of-hooks
+          return useHttpDelete(mock.url);
+        default:
+          // eslint-disable-next-line react-hooks/rules-of-hooks
+          return useHttpFetch(mock.url);
+      }
+    };
+    return async () => {
+      const mock = mockFetch(method);
+      const Wrapper = () => {
+        const [response, loading, error, setError] = useHook(mock);
+        return (
+          <>
+            {loading && <div data-testid="loading">loading</div>}
+            {response && <div data-testid="result">{JSON.stringify(response)}</div>}
+            {error && <div data-testid="error">{JSON.stringify(error)}</div>}
+          </>
+        );
+      };
+      const { findByTestId } = render(<Wrapper />);
+      const loading = await findByTestId('loading');
+      expect(loading).toHaveTextContent('loading');
+      await waitForElementToBeRemoved(() => screen.getByTestId('loading'));
+      await waitFor(() => expect(fetch).toBeCalled());
+      expect(fetch).toHaveBeenCalledTimes(1);
+      expect(fetch).toHaveBeenCalledWith(mock.url, mock.request);
+      const result = await waitFor(() => screen.getByTestId('result'));
+      expect(result).toHaveTextContent(JSON.stringify(mock.result));
+    };
+  }
+
+});
+

package/src/useHttp/useHttp.ts

@@ -0,0 +1,52 @@
+import { FetchRequestOptions, FetchService, httpFetch } from '@websolutespa/bom-core';
+import { Dispatch, useEffect, useState } from 'react';
+
+export function useHttpFetch<T = any>(
+  pathname: string,
+  options: FetchRequestOptions = { method: 'GET' },
+  service: FetchService<T> = httpFetch,
+  serviceOptions?: any
+): [T | undefined, boolean, any, Dispatch<any>] {
+  const [response, setResponse] = useState<T>();
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<any>(null);
+  useEffect(() => {
+    // const source = axios.CancelToken.source();
+    const fetchData = async () => {
+      loading ? null : setLoading(true);
+      error ? setError(null) : null;
+      try {
+        const response = await service(pathname, options, serviceOptions);
+        // console.log('useHttp.response', response);
+        setResponse(response);
+      } catch (error) {
+        // console.error(error)
+        setError(error);
+      }
+      setLoading(false);
+    };
+    fetchData();
+    // return () => source.cancel();
+  }, [pathname, options.method, options.body]);
+  return [response, loading, error, setError];
+}
+
+export function useHttpGet<T = any>(pathname: string, options: FetchRequestOptions = {}) {
+  return useHttpFetch<T>(pathname, { ...options, method: 'GET' });
+}
+
+export function useHttpPost<T = any>(pathname: string, payload: any, options: FetchRequestOptions = {}) {
+  return useHttpFetch<T>(pathname, { ...options, method: 'POST', body: payload ? JSON.stringify(payload) : undefined });
+}
+
+export function useHttpPut<T = any>(pathname: string, payload: any, options: FetchRequestOptions = {}) {
+  return useHttpFetch<T>(pathname, { ...options, method: 'PUT', body: payload ? JSON.stringify(payload) : undefined });
+}
+
+export function useHttpPatch<T = any>(pathname: string, payload: any, options: FetchRequestOptions = {}) {
+  return useHttpFetch<T>(pathname, { ...options, method: 'PATCH', body: payload ? JSON.stringify(payload) : undefined });
+}
+
+export function useHttpDelete<T = any>(pathname: string, options: FetchRequestOptions = {}) {
+  return useHttpFetch<T>(pathname, { ...options, method: 'DELETE' });
+}

package/src/useIdle/useIdle.test.ts

@@ -0,0 +1,31 @@
+// readme https://testing-library.com/
+import { act, fireEvent, renderHook } from '@testing-library/react';
+import { useIdle } from './useIdle';
+
+describe('useIdle', () => {
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('should work correctly', async () => {
+    const { result } = renderHook(() => useIdle(100));
+    expect(result.current).toBe(false);
+    fireEvent.mouseMove(document);
+    expect(result.current).toBe(false);
+    act(() => jest.advanceTimersByTime(100));
+    expect(result.current).toBe(true);
+  });
+
+  it('should fire with immediate', async () => {
+    const { result } = renderHook(() => useIdle(100, true));
+    expect(result.current).toBe(false);
+    act(() => jest.advanceTimersByTime(100));
+    expect(result.current).toBe(true);
+  });
+
+});

package/src/useIdle/useIdle.ts

@@ -0,0 +1,79 @@
+import { useEffect, useRef, useState } from 'react';
+
+export function useIdle(delay: number = 3000, immediate: boolean = false) {
+
+  const [isIdle, setIsIdle] = useState<boolean>(false);
+
+  // create a new reference to track timer
+  const timeoutId = useRef<NodeJS.Timeout>();
+
+  const goInactive = () => {
+    setIsIdle(true);
+  };
+
+  const onStartTimer = () => {
+    // wait till delay time before calling goInactive
+    timeoutId.current = setTimeout(goInactive, delay);
+  };
+
+  const goActive = () => {
+    setIsIdle(false);
+    // start the timer to track Inactiveness
+    onStartTimer();
+  };
+
+  const onResetTimer = () => {
+    // reset the timer and make user active
+    clearTimeout(timeoutId.current);
+    goActive();
+  };
+
+  const setup = () => {
+    document.addEventListener('mousemove', onResetTimer, false);
+    document.addEventListener('mousedown', onResetTimer, false);
+    document.addEventListener('keypress', onResetTimer, false);
+    document.addEventListener('DOMMouseScroll', onResetTimer, false);
+    document.addEventListener('mousewheel', onResetTimer, false);
+    document.addEventListener('touchmove', onResetTimer, false);
+    document.addEventListener('MSPointerMove', onResetTimer, false);
+
+    // edge case
+    // if tab is changed or is out of focus
+    window.addEventListener('blur', onStartTimer, false);
+    window.addEventListener('focus', onResetTimer, false);
+
+    if (immediate) {
+      onStartTimer();
+    }
+  };
+
+  const cleanUp = () => {
+    document.removeEventListener('mousemove', onResetTimer);
+    document.removeEventListener('mousedown', onResetTimer);
+    document.removeEventListener('keypress', onResetTimer);
+    document.removeEventListener('DOMMouseScroll', onResetTimer);
+    document.removeEventListener('mousewheel', onResetTimer);
+    document.removeEventListener('touchmove', onResetTimer);
+    document.removeEventListener('MSPointerMove', onResetTimer);
+
+    // edge case
+    // if tab is changed or is out of focus
+    window.removeEventListener('blur', onStartTimer);
+    window.removeEventListener('focus', onResetTimer);
+
+    // memory leak
+    clearTimeout(timeoutId.current);
+  };
+
+  // assign and remove the listeners
+  useEffect(() => {
+    setup();
+
+    return () => {
+      cleanUp();
+    };
+  });
+
+  // return previous value (happens before update in useEffect above)
+  return isIdle;
+}

package/src/useInfiniteLoader/useInfiniteLoader.test.ts

@@ -0,0 +1,41 @@
+// readme https://testing-library.com/
+import { act, renderHook } from '@testing-library/react';
+import { useInfiniteLoader } from './useInfiniteLoader';
+
+describe('useInfiniteLoader', () => {
+  jest.useFakeTimers();
+
+  test('should paginate items', () => {
+    const items = new Array(100).fill(0).map((_, i) => i + 1);
+    const { result } = renderHook(() => useInfiniteLoader(items));
+    const [visibleItems, loadMore, hasMore] = result.current;
+    expect(visibleItems.length).toEqual(12);
+    expect(visibleItems[0]).toEqual(1);
+    expect(hasMore).toBe(true);
+  });
+
+  test('should paginate items with params', () => {
+    const items = new Array(100).fill(0).map((_, i) => i + 1);
+    const { result } = renderHook(() => useInfiniteLoader(items, 20));
+    const [visibleItems, loadMore, hasMore] = result.current;
+    expect(visibleItems.length).toEqual(20);
+    expect(visibleItems[0]).toEqual(1);
+    expect(hasMore).toBe(true);
+  });
+
+  test('should call loadMore and paginate items', async () => {
+    const items = new Array(100).fill(0).map((_, i) => i + 1);
+    const { result } = renderHook(() => useInfiniteLoader(items, 20));
+    let [visibleItems, loadMore, hasMore] = result.current;
+    expect(visibleItems.length).toEqual(20);
+    expect(visibleItems[0]).toEqual(1);
+    expect(hasMore).toBe(true);
+    act(() => { loadMore(); });
+    act(() => jest.advanceTimersByTime(100));
+    [visibleItems, loadMore, hasMore] = result.current;
+    expect(visibleItems.length).toEqual(40);
+    expect(visibleItems.pop()).toEqual(40);
+    expect(hasMore).toBe(true);
+  });
+
+});

package/src/useInfiniteLoader/useInfiniteLoader.ts

@@ -0,0 +1,46 @@
+import { useEffect, useMemo, useState } from 'react';
+
+export function useInfiniteLoader(items: any[], perPage: number = 12, delayInMs = 100): [any[], () => void, boolean] {
+
+  const total = items.length;
+
+  const [position, setPosition] = useState(Math.min(total, perPage));
+
+  const [hasMore, setHasMore] = useState(position < total);
+
+  const [more, setMore] = useState(0);
+
+  useEffect(() => {
+    const nextPosition = Math.min(total, perPage);
+    setPosition(nextPosition);
+    setMore(0);
+    setHasMore(nextPosition < total);
+  }, [items]);
+
+  const visibleItems = useMemo(() => (
+    items.slice(0, position)
+  ), [items, position]);
+
+  const loadMore = () => {
+    setMore(more + 1);
+  };
+
+  useEffect(() => {
+    // console.log('useInfiniteLoader', hasMore, more, total, position);
+    if (hasMore && more > 0) {
+      const timer = setTimeout(() => {
+        const nextPosition = Math.min(total, position + perPage);
+        setPosition(nextPosition);
+        setHasMore(nextPosition < total);
+      }, delayInMs);
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+    return;
+  }, [more, delayInMs]);
+
+  return [visibleItems, loadMore, hasMore];
+}
+
+export default useInfiniteLoader;

package/src/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,3 @@
+import { useEffect, useLayoutEffect } from 'react';
+
+export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

package/src/useKeyboard/codes.ts

@@ -0,0 +1,94 @@
+/**
+ * KeyBinding Codes
+ * The content of this file is based on the design of the open source project "microsoft/vscode",
+ *   Copyright (c) Microsoft Corporation. All rights reserved.
+ *
+ * We inherit the KeyMod values from "microsoft/vscode",
+ * but use the Browser's KeyboardEvent event implementation, and all values are used only as identification.
+ */
+
+export enum KeyCode {
+  Unknown = 0,
+  Backspace = 8,
+  Tab = 9,
+  Enter = 13,
+  Shift = 16,
+  Ctrl = 17,
+  Alt = 18,
+  PauseBreak = 19,
+  CapsLock = 20,
+  Escape = 27,
+  Space = 32,
+  PageUp = 33,
+  PageDown = 34,
+  End = 35,
+  Home = 36,
+  LeftArrow = 37,
+  UpArrow = 38,
+  RightArrow = 39,
+  DownArrow = 40,
+  Insert = 45,
+  Delete = 46,
+  KEY_0 = 48,
+  KEY_1 = 49,
+  KEY_2 = 50,
+  KEY_3 = 51,
+  KEY_4 = 52,
+  KEY_5 = 53,
+  KEY_6 = 54,
+  KEY_7 = 55,
+  KEY_8 = 56,
+  KEY_9 = 57,
+  KEY_A = 65,
+  KEY_B = 66,
+  KEY_C = 67,
+  KEY_D = 68,
+  KEY_E = 69,
+  KEY_F = 70,
+  KEY_G = 71,
+  KEY_H = 72,
+  KEY_I = 73,
+  KEY_J = 74,
+  KEY_K = 75,
+  KEY_L = 76,
+  KEY_M = 77,
+  KEY_N = 78,
+  KEY_O = 79,
+  KEY_P = 80,
+  KEY_Q = 81,
+  KEY_R = 82,
+  KEY_S = 83,
+  KEY_T = 84,
+  KEY_U = 85,
+  KEY_V = 86,
+  KEY_W = 87,
+  KEY_X = 88,
+  KEY_Y = 89,
+  KEY_Z = 90,
+  Meta = 91,
+  F1 = 112,
+  F2 = 113,
+  F3 = 114,
+  F4 = 115,
+  F5 = 116,
+  F6 = 117,
+  F7 = 118,
+  F8 = 119,
+  F9 = 120,
+  F10 = 121,
+  F11 = 122,
+  F12 = 123,
+  NumLock = 144,
+  ScrollLock = 145,
+  Equal = 187,
+  Minus = 189,
+  Backquote = 192,
+  Backslash = 220,
+}
+
+export enum KeyMod {
+  CtrlCmd = (1 << 11) >>> 0,
+  Shift = (1 << 10) >>> 0,
+  Alt = (1 << 9) >>> 0,
+  WinCtrl = (1 << 8) >>> 0,
+}

package/src/useKeyboard/helper.ts

@@ -0,0 +1,31 @@
+import { detectIsBrowser } from '../useSSR/useSSR';
+import { KeyMod } from './codes';
+
+export function getCtrlKeysByPlatform(): Record<string, 'metaKey' | 'ctrlKey'> {
+  return {
+    CtrlCmd: isMac() ? 'metaKey' : 'ctrlKey',
+    WinCtrl: isMac() ? 'ctrlKey' : 'metaKey',
+  };
+}
+
+export function getActiveModMap(bindings: number[]): Record<keyof typeof KeyMod, boolean> {
+  const modBindings = bindings.filter((item: number) => !!KeyMod[item]);
+  const activeModMap: Record<keyof typeof KeyMod, boolean> = {
+    CtrlCmd: false,
+    Shift: false,
+    Alt: false,
+    WinCtrl: false,
+  };
+  modBindings.forEach(code => {
+    const modKey = KeyMod[code] as keyof typeof KeyMod;
+    activeModMap[modKey] = true;
+  });
+  return activeModMap;
+}
+
+export function isMac(): boolean {
+  if (!detectIsBrowser()) {
+    return false;
+  }
+  return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+}