@websolutespa/bom-mixer-hooks 0.2.0 → 0.2.2

package/src/useUnmountEffect/useUnmountEffect.test.ts

@@ -0,0 +1,15 @@
+// readme https://testing-library.com/
+import { renderHook } from '@testing-library/react';
+import { useUnmountEffect } from './useUnmountEffect';
+
+describe('useUnmountEffect', () => {
+
+  test('should run callback on unmount', () => {
+    const callback = jest.fn();
+    const { unmount } = renderHook(() => useUnmountEffect(callback));
+    expect(callback).toHaveBeenCalledTimes(0);
+    unmount();
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+});

package/src/useUnmountEffect/useUnmountEffect.ts

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
+
+/**
+ * Run effect only when component is unmounted.
+ *
+ * @param effect Effector to run on unmount
+ */
+export function useUnmountEffect(effect: CallableFunction): void {
+  const effectRef = useSyncedRef(effect);
+
+  useEffect(() => () => {
+    effectRef.current();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+}

package/src/useUser/useUser.test.ts

@@ -0,0 +1,22 @@
+
+
+// readme https://testing-library.com/
+import { act, renderHook } from '@testing-library/react';
+import { useUser } from './useUser';
+
+describe('useUser', () => {
+  it('should work correctly', async () => {
+    const user = {
+      id: 1,
+      firstName: 'Jhon',
+      lastName: 'Appleseed',
+      email: 'jhon.appleseed@gmail.com',
+    };
+    const { result } = renderHook(() => useUser(state => state));
+    let state = result.current;
+    expect(state.user).toBe(undefined);
+    act(() => state.actions.setUser(user));
+    state = result.current;
+    expect(state.user).toBe(user);
+  });
+});

package/src/useUser/useUser.ts

@@ -0,0 +1,20 @@
+import { IUser } from '@websolutespa/bom-mixer-models';
+import { create } from 'zustand';
+
+type UserState = {
+  user?: IUser;
+};
+
+type UserActions = {
+  setUser: (user?: IUser) => void;
+};
+
+type UserStore = UserState & {
+  actions: UserActions;
+};
+
+export const useUser = create<UserStore>((set) => ({
+  actions: {
+    setUser: (user?: IUser) => set((state) => ({ user })),
+  },
+}));

package/src/useWindowSize/useWindowSize.test.ts

@@ -0,0 +1,48 @@
+// readme https://testing-library.com/
+import { act, renderHook } from '@testing-library/react';
+import { useWindowSize } from './useWindowSize';
+
+const setupHook = () => renderHook(() => useWindowSize());
+
+const windowResize = (dimension: 'width' | 'height', value: number): void => {
+  if (dimension === 'width') {
+    window.innerWidth = value;
+  }
+  if (dimension === 'height') {
+    window.innerHeight = value;
+  }
+  window.dispatchEvent(new Event('resize'));
+};
+
+describe('useElementSize', () => {
+  it('should initialize', () => {
+    const { result } = setupHook();
+    const { height, width } = result.current;
+    expect(typeof height).toBe('number');
+    expect(typeof width).toBe('number');
+  });
+
+  it('should return the corresponding height', () => {
+    const { result } = setupHook();
+    act(() => {
+      windowResize('height', 420);
+    });
+    expect(result.current.height).toBe(420);
+    act(() => {
+      windowResize('height', 2196);
+    });
+    expect(result.current.height).toBe(2196);
+  });
+
+  it('should return the corresponding width', () => {
+    const { result } = setupHook();
+    act(() => {
+      windowResize('width', 420);
+    });
+    expect(result.current.width).toBe(420);
+    act(() => {
+      windowResize('width', 2196);
+    });
+    expect(result.current.width).toBe(2196);
+  });
+});

package/src/useWindowSize/useWindowSize.ts

@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import { useEventListener } from '../useEventListener/useEventListener';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
+
+type WindowSize = {
+  width: number;
+  height: number;
+};
+
+export function useWindowSize(): WindowSize {
+
+  const [windowSize, setWindowSize] = useState<WindowSize>({
+    width: 0, height: 0,
+  });
+
+  const handleSize = () => {
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+    setWindowSize({ width, height });
+  };
+
+  useEventListener('resize', handleSize);
+
+  // Set size at the first client-side load
+  useIsomorphicLayoutEffect(() => {
+    handleSize();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return windowSize;
+}