@websolutespa/bom-mixer-hooks 0.2.0 → 0.2.2

package/src/useSearchParams/useSearchParams.ts

@@ -0,0 +1,123 @@
+import { NextRouter, useRouter } from 'next/router';
+import { useCallback, useMemo } from 'react';
+
+export const isBrowser = typeof window !== 'undefined';
+
+function replace_(params: URLSearchParams) {
+  if (window.history) {
+    const title = document.title;
+    const url = `${window.location.href.split('?')[0]}?${params.toString()}`;
+    window.history.replaceState(params.toString(), title, url);
+  }
+}
+
+function deserialize_(url: string): URLSearchParams {
+  const components = url.split('?');
+  const search = components[1] || '';
+  return new URLSearchParams(search);
+}
+
+function serialize_(url: string, params: IParams): URLSearchParams {
+  const searchParams = deserialize_(url);
+  if (params) {
+    for (const [key, value] of Object.entries(params)) {
+      searchParams.set(key, value);
+    }
+  }
+  return searchParams;
+}
+
+function searchParamsToObject_(params: URLSearchParams): { [key: string]: string } {
+  const entries = params.entries();
+  const result: { [key: string]: string } = {};
+  for (const [key, value] of entries) { // each 'entry' is a [key, value] tuple
+    result[key] = value;
+  }
+  return result;
+}
+
+export function getSearchParams(url: string, key?: string): IParams | string | null {
+  const params = deserialize_(url);
+  const value = key ? params.get(key) : Object.fromEntries(params);
+  // console.log('getSearchParams', value, params, search);
+  return value;
+}
+
+export function updateSearchParams(currentPath: string, params: IParams): { pathname: string, query: { [key: string]: string } } {
+  const components = currentPath.split('?');
+  const searchParams = serialize_(components[1] || '', params);
+  const query = searchParamsToObject_(searchParams);
+  const pathname = components[0] || '';
+  // console.log(pathname, query);
+  return { pathname, query };
+}
+
+export function replaceSearchParams(router: NextRouter, params: IParams): void {
+  const { pathname, query } = updateSearchParams(router.asPath, params);
+  router.replace({ pathname, query });
+}
+
+export function pushSearchParams(router: NextRouter, params: IParams): void {
+  const { pathname, query } = updateSearchParams(router.asPath, params);
+  router.push({ pathname, query });
+}
+
+export function replaceSearchParamsSilently(params: IParams): void {
+  if (isBrowser) {
+    const searchParams = serialize_(window.location.search, params);
+    replace_(searchParams);
+  }
+}
+
+export function useSearchParams(): IUseSearchParamsResult {
+  const router = useRouter();
+
+  const initialValue = useMemo(() => {
+    const params = deserialize_(router.asPath);
+    const value = Object.fromEntries(params);
+    return value;
+  }, [router.asPath]);
+
+  const params = initialValue;
+
+  const replaceParamsSilently = useCallback((params: IParams) => {
+    replaceSearchParamsSilently(params);
+  }, []);
+
+  const replaceParams = useCallback((params: IParams) => {
+    replaceSearchParams(router, params);
+  }, [router]);
+
+  return { params, replaceParamsSilently, replaceParams };
+}
+
+export function useSearchParamsValue(key: string): IUseSearchParamsValueResult {
+  const router = useRouter();
+
+  const initialValue = useMemo(() => {
+    const params = deserialize_(router.asPath);
+    const value = params.get(key);
+    return value;
+  }, [key, router.asPath]);
+
+  const params = initialValue;
+
+  const replaceParamsSilently = useCallback((params: IParams) => {
+    replaceSearchParamsSilently(params);
+  }, []);
+
+  return { params, replaceParamsSilently };
+}
+
+export type IUseSearchParamsResult = {
+  params: IParams,
+  replaceParamsSilently: (params: IParams) => void,
+  replaceParams: (params: IParams) => void
+};
+
+export type IUseSearchParamsValueResult = { params: string | null, replaceParamsSilently: (params: IParams) => void };
+
+export type IParams = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: string;
+};

package/src/useSearchParamsEncoded/useSearchParamsEncoded.test.ts

@@ -0,0 +1,58 @@
+
+// readme https://testing-library.com/
+import { act, renderHook } from '@testing-library/react';
+import * as nextRouter from 'next/router';
+import { useSearchParamsEncoded } from './useSearchParamsEncoded';
+
+const useRouter = (nextRouter as any).useRouter = jest.fn();
+
+describe('useSearchParamsEncoded', () => {
+
+  it('should work correctly', async () => {
+    useRouter.mockReturnValue({
+      asPath: '',
+    });
+    const { result } = renderHook(() => useSearchParamsEncoded());
+    expect(result.current.params).toEqual(null);
+  });
+
+  it('should work correctly with params', async () => {
+    useRouter.mockReturnValue({
+      asPath: '?params=eyJmbGFnIjoiMSJ9',
+    });
+    const params = { flag: '1' };
+    const { result } = renderHook(() => useSearchParamsEncoded());
+    expect(result.current.params).toEqual(params);
+  });
+
+  it('should replace search params silently', async () => {
+    useRouter.mockReturnValue({
+      asPath: '',
+    });
+    const params = { flag: '1' };
+    const { result } = renderHook(() => useSearchParamsEncoded());
+    window.history.replaceState = jest.fn();
+    expect(result.current.replaceParamsSilently).toEqual(expect.any(Function));
+    act(() => result.current.replaceParamsSilently(params));
+    expect(window.history.replaceState).toBeCalledWith('params=eyJmbGFnIjoiMSJ9', '', 'http://localhost/?params=eyJmbGFnIjoiMSJ9');
+  });
+
+  it('should replace search params', async () => {
+    const handler = jest.fn();
+    useRouter.mockReturnValue({
+      asPath: '',
+      replace: handler,
+    });
+    const params = { flag: '1' };
+    const { result } = renderHook(() => useSearchParamsEncoded());
+    window.history.replaceState = jest.fn();
+    expect(result.current.replaceParams).toEqual(expect.any(Function));
+    act(() => result.current.replaceParams(params));
+    expect(handler).toBeCalledTimes(1);
+    expect(handler).toBeCalledWith({
+      pathname: '',
+      query: { params: 'eyJmbGFnIjoiMSJ9' }
+    });
+  });
+
+});

package/src/useSearchParamsEncoded/useSearchParamsEncoded.ts

@@ -0,0 +1,202 @@
+import { NextRouter, useRouter } from 'next/router';
+import { useCallback, useMemo } from 'react';
+import { isBrowser } from '../useSearchParams/useSearchParams';
+
+const USE_ENCRYPTION = true;
+
+function base64ToString(base64: string): string {
+  if (!USE_ENCRYPTION) return base64;
+  return isBrowser ? window.atob(base64) : Buffer.from(base64, 'base64').toString();
+}
+
+function stringToBase64(text: string): string {
+  if (!USE_ENCRYPTION) return text;
+  return isBrowser ? window.btoa(text) : Buffer.from(text).toString('base64');
+}
+
+function stringToURLSearchParams(url: string): URLSearchParams {
+  // console.log('stringToURLSearchParams', url);
+  return new URLSearchParams(url);
+}
+
+/*
+function hasURLSearchParams(url: string, key: string):boolean {
+  const params = stringToURLSearchParams(url);
+  return params.has(key);
+}
+*/
+
+function getURLSearchParams(url: string, key: string): string | null {
+  const params = stringToURLSearchParams(url);
+  return params.get(key);
+}
+
+function setURLSearchParams(url: string, keyOrValue: string, value: string | null | undefined): URLSearchParams { // !!! any
+  const params = stringToURLSearchParams(url);
+  if (value != null) {
+    params.set(keyOrValue, value);
+  } else {
+    params.set(keyOrValue, '');
+  }
+  return params;
+  // push_(params);
+  // replace_(params);
+}
+
+/*
+function push_(params: URLSearchParams) {
+  if (window.history) {
+    const title = document.title;
+    const url = `${window.location.href.split('?')[0]}?${params.toString()}`;
+    window.history.pushState(params.toString(), title, url);
+  }
+}
+*/
+
+function replace_(params: URLSearchParams) {
+  if (window.history) {
+    const title = document.title;
+    const url = `${window.location.href.split('?')[0]}?${params.toString()}`;
+    window.history.replaceState(params.toString(), title, url);
+  }
+}
+
+/*
+function replace__(from: string, to: string) {
+  const history = window.history;
+  if (history && history.replaceState) {
+    const location = window.location;
+    const title = document.title;
+    if (location.pathname === '/') {
+      const url = location.origin + to + location.search;
+      history.replaceState(history.state, title, url);
+    } else if (location.href.indexOf(from) !== -1) {
+      const url = location.href.replace(from, to);
+      history.replaceState(history.state, title, url);
+    }
+  }
+}
+*/
+
+function deserialize_(url: string, key?: string) {
+  const encoded = getURLSearchParams(url, 'params');
+  return decode(encoded, key);
+}
+
+function serialize_(url: string, value: IParamsEncoded, key?: string): URLSearchParams {
+  const params = deserialize_(url);
+  const encoded = encode(params, value, key);
+  return setURLSearchParams(url, 'params', encoded);
+}
+
+export function decode(encoded: string | null | undefined, key?: string): IParamsEncoded {
+  let decoded = null;
+  if (encoded) {
+    const json = base64ToString(encoded);
+    decoded = JSON.parse(json);
+  }
+  // console.log('useSearchParamsEncoded.decode', decoded);
+  if (key && decoded) {
+    decoded = decoded[key];
+  }
+  return decoded || null;
+}
+
+function encode(params: IParamsEncoded, value: IParamsEncoded, key?: string) {
+  params = params || {};
+  let encoded = null;
+  if (typeof key === 'string') {
+    params[key] = value;
+  } else if (typeof value === 'object') {
+    params = Object.assign(params, value);
+  }
+  // console.log('useSearchParamsEncoded.encode', params);
+  const json = JSON.stringify(params);
+  encoded = stringToBase64(json);
+  return encoded;
+}
+
+function searchParamsToObject_(params: URLSearchParams): { [key: string]: string } {
+  const entries = params.entries();
+  const result: { [key: string]: string } = {};
+  for (const [key, value] of entries) { // each 'entry' is a [key, value] tuple
+    result[key] = value;
+  }
+  return result;
+}
+
+export function getSearchParamsEncoded(url: string, key?: string): {} | null {
+  const components = url.split('?');
+  const search = components[1] || '';
+  const searchParams = new URLSearchParams(search);
+  const params = searchParams.get('params');
+  const value = params ? decode(params, key) : null;
+  // console.log('getSearchParamsEncoded', value, params, search);
+  return value;
+}
+
+export function updateSearchParamsEncoded(currentPath: string, value: IParamsEncoded, key?: string): { pathname: string, query: { [key: string]: string } } {
+  const components = currentPath.split('?');
+  const searchParams = serialize_(components[1] || '', value, key);
+  const query = searchParamsToObject_(searchParams);
+  const pathname = components[0] || '';
+  // console.log(pathname, query);
+  return { pathname, query };
+}
+
+export function replaceSearchParamsEncoded(router: NextRouter, value: IParamsEncoded, key?: string): void {
+  const { pathname, query } = updateSearchParamsEncoded(router.asPath, value, key);
+  router.replace({ pathname, query });
+}
+
+export function pushSearchParamsEncoded(router: NextRouter, value: IParamsEncoded, key?: string): void {
+  const { pathname, query } = updateSearchParamsEncoded(router.asPath, value, key);
+  router.push({ pathname, query });
+}
+
+export function replaceSearchParamsEncodedSilently(value: IParamsEncoded, key?: string): void {
+  if (isBrowser) {
+    const searchParams = serialize_(window.location.search, value, key);
+    replace_(searchParams);
+  }
+}
+
+export function useSearchParamsEncoded(key?: string): IUseSearchParamsEncodedResult {
+  const router = useRouter();
+
+  const initialValue = useMemo(() => {
+    const value = getSearchParamsEncoded(router.asPath, key);
+    return value;
+  }, [key, router.asPath]);
+
+  const params = initialValue;
+  // console.log('useSearchParamsEncoded', params);
+  // const [params, setParams_] = useState(initialValue);
+
+  /*
+  const setParams = useCallback((params: IParamsEncoded) => {
+    replaceSearchParamsEncoded(router, params, key);
+  }, [key, router]);
+  */
+
+  const replaceParamsSilently = useCallback((params: IParamsEncoded) => {
+    replaceSearchParamsEncodedSilently(params, key);
+  }, [key]);
+
+  const replaceParams = useCallback((params: IParamsEncoded) => {
+    replaceSearchParamsEncoded(router, params, key);
+  }, [key, router]);
+
+  return { params, replaceParamsSilently, replaceParams };
+}
+
+export type IUseSearchParamsEncodedResult = {
+  params: IParamsEncoded,
+  replaceParamsSilently: (params: IParamsEncoded) => void,
+  replaceParams: (params: IParamsEncoded) => void
+};
+
+export type IParamsEncoded = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any;
+} | null;

package/src/useSorting/useSorting.test.ts

@@ -0,0 +1,40 @@
+// readme https://testing-library.com/
+import { act, renderHook } from '@testing-library/react';
+import { IEquatable } from '@websolutespa/bom-core';
+import { useSorting } from './useSorting';
+
+const SorterFunction = (items: number[], sort: IEquatable | undefined) => {
+  switch (sort) {
+    case 'ascending':
+      items.sort((a, b) => a - b);
+      break;
+    case 'descending':
+      items.sort((a, b) => b - a);
+      break;
+  }
+  // console.log('SorterFunction', sort, items);
+  return items;
+};
+
+describe('useSorting', () => {
+
+  test('should sort items', () => {
+    const handler = jest.fn(SorterFunction);
+    const items = [1, 2, 3];
+    const { result } = renderHook(() => useSorting(items, handler, 'descending'));
+    expect(handler).toHaveBeenCalledTimes(1);
+    expect(result.current.items).toEqual([3, 2, 1]);
+  });
+
+  test('should call doSort and sort items', async () => {
+    const handler = jest.fn(SorterFunction);
+    const items = [1, 2, 3];
+    const { result } = renderHook(() => useSorting(items, handler, 'descending'));
+    expect(handler).toHaveBeenCalledTimes(1);
+    expect(result.current.items).toEqual([3, 2, 1]);
+    act(() => { result.current.setSort('ascending'); });
+    expect(handler).toHaveBeenCalledTimes(3);
+    expect(result.current.items).toEqual([1, 2, 3]);
+  });
+
+});

package/src/useSorting/useSorting.ts

@@ -0,0 +1,99 @@
+import { IEquatable } from '@websolutespa/bom-core';
+import { useEffect, useRef, useState } from 'react';
+
+export type Sorting<T> = {
+  items: T[];
+  sort?: IEquatable;
+};
+
+export function useSorting<T>(items_: T[], callback_: (items: T[], sort?: IEquatable) => T[], sort_?: IEquatable) {
+
+  const [sort, setSort] = useState(sort_);
+  // const items = callback_(items_.slice(), sort);
+  const [items, setItems] = useState(callback_(items_.slice(), sort));
+
+  const isInitialMount = useRef(true);
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+    } else {
+      setSort(sort_);
+      setItems(callback_(items_.slice(), sort_));
+    }
+  }, [items_, sort_]);
+
+  function doSort(sort?: IEquatable) {
+    setSort(sort);
+    setItems(callback_(items_.slice(), sort));
+  }
+
+  return { items, sort, setSort: doSort };
+}
+
+/*
+export function useSorting___<T>($items: T[], $callback: (items: T[], sort?: IEquatable) => T[], $sort?: IEquatable) {
+
+  // const callback = useCallback($callback, []);
+  const [state, setState] = useState<Sorting<T>>({ items: $callback($items.slice(), $sort), sort: $sort });
+
+  const isInitialMount = useRef(true);
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+    } else {
+      setState({ ...state, items: $callback($items.slice(), $sort), sort: $sort });
+    }
+  }, [$items]);
+
+  function setSort(sort?: IEquatable) {
+    setState({ ...state, items: $callback($items.slice(), sort), sort });
+  }
+
+  return { ...state, setSort };
+}
+
+export function useSorting__<T>($items: T[], $callback: (items: T[], sort?: IEquatable) => T[], $sort?: IEquatable) {
+
+  // const callback = useCallback($callback, []);
+  const [state, setState] = useState<Sorting<T>>({ items: $callback($items.slice(), $sort), sort: $sort });
+
+  const isInitialMount = useRef(true);
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+    } else {
+      setState({ ...state, items: $callback($items.slice(), $sort), sort: $sort });
+    }
+  }, [$items]);
+
+  function setSort(sort?: IEquatable) {
+    setState({ ...state, items: $callback($items.slice(), sort), sort });
+  }
+
+  return { ...state, setSort };
+}
+
+export function useSorting_<T>($items: T[], $callback: (items: T[], sort?: IEquatable) => T[], $sort?: IEquatable) {
+
+  const callback = useCallback($callback, []);
+  const [sort, setSort] = useState($sort);
+  const [items, setItems] = useState(callback($items.slice(), $sort));
+
+  const isInitialMount = useRef(true);
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+    } else {
+      // console.log('setPagination');
+      setItems(callback($items.slice(), $sort));
+    }
+  }, [$items]);
+
+  function doSort(sort?: IEquatable) {
+    setSort(sort);
+    setItems(callback($items.slice(), sort));
+  }
+
+  return { items, sort, setSort: doSort };
+}
+*/

package/src/useSwiperIndex/useSwiperIndex.ts

@@ -0,0 +1,30 @@
+import { useCallback, useEffect, useState } from 'react';
+import Swiper from 'swiper';
+import { useSwiper } from 'swiper/react';
+
+export function useSwiperIndex(): [number, (index: number) => void] {
+  const swiper = useSwiper();
+
+  const [index, setIndex] = useState<number>(swiper.realIndex);
+
+  const slideTo = useCallback((index: number) => {
+    swiper.slideTo(index);
+  }, [swiper]);
+
+  const onSlideChange = (swiper: Swiper) => {
+    setIndex(swiper.realIndex);
+  };
+
+  useEffect(() => {
+    if (swiper) {
+      swiper.on('slideChange', onSlideChange);
+    }
+    return () => {
+      if (swiper) {
+        swiper.off('slideChange', onSlideChange);
+      }
+    };
+  }, [swiper]);
+
+  return [index, slideTo];
+}

package/src/useSyncedRef/useSyncedRef.test.ts

@@ -0,0 +1,16 @@
+// readme https://testing-library.com/
+import { renderHook } from '@testing-library/react';
+import { useSyncedRef } from './useSyncedRef';
+
+describe('useSyncedRef', () => {
+
+  test('should run synced ref', () => {
+    const callback = jest.fn();
+    const { result, unmount } = renderHook(() => useSyncedRef(callback));
+    const ref = result.current;
+    expect(ref.current).toBe(callback);
+    unmount();
+    expect(ref.current).toBe(callback);
+  });
+
+});

package/src/useSyncedRef/useSyncedRef.ts

@@ -0,0 +1,18 @@
+import { useMemo, useRef } from 'react';
+
+/**
+ * Like `useRef`, but it returns immutable ref that contains actual value.
+ *
+ * @param value
+ */
+export function useSyncedRef<T>(value: T): { readonly current: T } {
+  const ref = useRef(value);
+
+  ref.current = value;
+
+  return useMemo(() => Object.freeze({
+    get current() {
+      return ref.current;
+    },
+  }), []);
+}

package/src/useUI/useUI.test.ts

@@ -0,0 +1,16 @@
+
+
+// readme https://testing-library.com/
+import { act, renderHook } from '@testing-library/react';
+import { useUI } from './useUI';
+
+describe('useUI', () => {
+  it('should work correctly', async () => {
+    const { result } = renderHook(() => useUI(state => state));
+    let state = result.current;
+    expect(state.views.view).toBe(undefined);
+    act(() => state.actions.reduce('view', (views) => 1));
+    state = result.current;
+    expect(state.views.view).toBe(1);
+  });
+});

package/src/useUI/useUI.ts

@@ -0,0 +1,44 @@
+import { create } from 'zustand';
+
+// !!! todo rename useUI -> useView
+
+export type UIValue = string | number | boolean | undefined;
+
+type UIViews = {
+  [key: string]: UIValue;
+};
+
+export type UIReducer = (state: UIViews) => UIValue;
+
+type UIActions = {
+  reduce(key: string, reducer: UIReducer): void;
+};
+
+type UIStore = {
+  views: UIViews;
+  actions: UIActions;
+};
+
+export const useUI = create<UIStore>((set, get) => ({
+  views: {},
+  actions: {
+    reduce: (key: string, reducer: UIReducer) => {
+      const views = { ...get().views };
+      const newViews = { ...views };
+      const value = reducer(views);
+      newViews[key] = value;
+      set({
+        views: newViews,
+      });
+    },
+  },
+}));
+
+/*
+const PERSIST = false;
+
+export const useUI =
+  PERSIST ?
+    create<IUIStore>()(persist(uiStore, { name: 'ui' })) :
+    create<IUIStore>(uiStore as StateCreator<any>);
+*/

package/src/useUnit/useUnit.test.tsx

@@ -0,0 +1,33 @@
+import { renderHook } from '@testing-library/react';
+import { LayoutDefaults } from '@websolutespa/bom-mixer-mock';
+import { LayoutProvider } from '../useLayout/useLayout';
+import { useUnit } from './useUnit';
+
+const wrapper = (props: { children: React.ReactNode }) => (
+  <LayoutProvider layout={LayoutDefaults}>{props.children}</LayoutProvider>
+);
+
+describe('useUnit', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'error').mockImplementation(() => { });
+  });
+
+  test('should throw without provider', () => {
+    expect(() => {
+      renderHook(() => useUnit());
+    }).toThrow('useGenericContext must be used within a Provider');
+  });
+
+  test('should not throw with provider', () => {
+    expect(() => {
+      renderHook(() => useUnit(), { wrapper });
+    }).not.toThrow();
+  });
+
+  test('should return formatted value', () => {
+    const { result } = renderHook(() => useUnit('kilometer'), { wrapper });
+    const formatted = result.current(1234.5678);
+    expect(formatted).toEqual('1,234.57 km');
+  });
+
+});

package/src/useUnit/useUnit.ts

@@ -0,0 +1,5 @@
+import { useNumber } from '../useNumber/useNumber';
+
+export function useUnit(unit: string = 'kilometer', locale?: string): (value: number) => string {
+  return useNumber({ style: 'unit', unit, minimumFractionDigits: 2, maximumFractionDigits: 2 }, locale);
+}