main 🧊 rework use object

Author: debabin

packages/core/src/bundle/hooks/state.js

@@ -12,7 +12,6 @@ export * from './useList/useList';
 // storage
 export * from './useLocalStorage/useLocalStorage';
 export * from './useMap/useMap';
-export * from './useObject/useObject';
 export * from './useOffsetPagination/useOffsetPagination';
 export * from './useQuery/useQuery';
 export * from './useQueue/useQueue';

packages/core/src/bundle/hooks/useObject/useObject.js

@@ -4,49 +4,42 @@ import { useState } from 'react';
  * @description - Hook that provides state and helper methods to manage an object
  * @category State
  *
- * @template T The type of the object
- * @param {T} initialValue The initial object value
- * @returns {UseObjectReturn<T>} An object containing the current state and functions to interact with the object
+ * @template Value The type of the object
+ * @param {Value} initialValue The initial object value
+ * @returns {UseObjectReturn<Value>} An object containing the current state and functions to interact with the object
  *
  * @example
- * const { state, set, get, reset, update, merge, remove } = useObject({ a: 1, b: 2 });
+ * const { value, set, reset, remove, update, merge, clear, toggle, has, keys, isEmpty, size } = useObject({ name: 'John', age: 30, isActive: true });
  */
 export function useObject(initialValue) {
-  const [state, setState] = useState(initialValue);
-  const set = (key, value) => {
-    setState((prev) => ({
-      ...prev,
-      [key]: value
+  const [value, setValue] = useState(initialValue);
+  const set = (value) =>
+    setValue((prevValue) => ({
+      ...prevValue,
+      ...value
     }));
-  };
-  const get = (key) => {
-    return state[key];
-  };
-  const reset = () => {
-    setState(initialValue);
-  };
-  const update = (updater) => {
-    setState((prev) => updater(prev));
-  };
-  const merge = (newState) => {
-    setState((prev) => ({
-      ...prev,
-      ...newState
-    }));
-  };
+  const reset = () => setValue(initialValue);
   const remove = (key) => {
-    setState((prev) => {
-      const { [key]: _, ...rest } = prev;
+    if (!(key in value)) return;
+    setValue((prevValue) => {
+      const { [key]: _, ...rest } = prevValue;
       return rest;
     });
   };
+  const clear = () => setValue({});
+  const has = (key) => key in value;
+  const keys = Object.keys(value);
+  const empty = !Object.keys(value).length;
+  const size = Object.keys(value).length;
   return {
-    state,
+    value,
     set,
-    get,
     reset,
-    update,
-    merge,
-    remove
+    remove,
+    clear,
+    has,
+    keys,
+    empty,
+    size
   };
 }

packages/core/src/hooks/useObject/useObject.demo.tsx

@@ -1,45 +1,42 @@
 import { useObject } from './useObject';
 
 const Demo = () => {
-  const { state, get, set, update, merge, remove, reset } = useObject({
+  const profileObject = useObject({
     name: 'Vladislav',
     age: '32',
     email: 'testmail@mail.com'
   });
 
   return (
-    <div className='flex items-start gap-4'>
-      <div className=''>
-        <input
-          type='text'
-          value={state.name}
-          onChange={(event) => set('name', event.target.value)}
-          placeholder='Name'
-        />
-        <input
-          type='number'
-          value={state.age}
-          onChange={(event) => set('age', event.target.value)}
-          placeholder='Age'
-        />
-        <input
-          type='email'
-          value={state.email}
-          onChange={(event) => set('email', event.target.value)}
-          placeholder='Email'
-        />
-        <div className=''>
-          <button onClick={reset}>Reset</button>
-          <button onClick={() => alert(get('email'))}>Get Email</button>
-          <button onClick={() => update((prev) => ({ ...prev, age: '10' }))}>Update Age</button>
-          <button onClick={() => merge({ name: 'Updated name', age: '10' })}>
-            Merge Name and Age
-          </button>
-          <button onClick={() => remove('email')}>Remove Email</button>
-        </div>
-      </div>
+    <div>
+      <input
+        type='text'
+        value={profileObject.value.name}
+        onChange={(event) => profileObject.set({ name: event.target.value })}
+        placeholder='Name'
+      />
+      <input
+        type='number'
+        value={profileObject.value.age}
+        onChange={(event) => profileObject.set({ age: event.target.value })}
+        placeholder='Age'
+      />
+
+      <button onClick={profileObject.reset}>Reset</button>
+
+      <button
+        onClick={() =>
+          profileObject.set({
+            age: `${Number(profileObject.value.age) + 1}`
+          })
+        }
+      >
+        Update Age
+      </button>
+      <button onClick={() => profileObject.remove('email')}>Remove Email</button>
+
       <pre>
-        <code>{JSON.stringify(state, null, 2)}</code>
+        <code>{JSON.stringify(profileObject.value, null, 2)}</code>
       </pre>
     </div>
   );

packages/core/src/hooks/useObject/useObject.test.ts

@@ -2,72 +2,136 @@ import { act, renderHook } from '@testing-library/react';
 
 import { useObject } from './useObject';
 
-const INITIAL_OBJECT = { a: 1, b: 2, c: 3 };
-
-describe('useObject', () => {
-  it('Should use object', () => {
-    const { result } = renderHook(() => useObject(INITIAL_OBJECT));
-    const obj = result.current;
-
-    expect(obj.state).toEqual(INITIAL_OBJECT);
-    expect(obj.set).toBeTypeOf('function');
-    expect(obj.get).toBeTypeOf('function');
-    expect(obj.reset).toBeTypeOf('function');
-    expect(obj.update).toBeTypeOf('function');
-    expect(obj.merge).toBeTypeOf('function');
-    expect(obj.remove).toBeTypeOf('function');
-  });
+it('Should use object', () => {
+  const { result } = renderHook(() => useObject({ a: 1, b: 2, c: 3 }));
+
+  expect(result.current.value).toEqual({ a: 1, b: 2, c: 3 });
+  expect(result.current.set).toBeTypeOf('function');
+  expect(result.current.reset).toBeTypeOf('function');
+  expect(result.current.remove).toBeTypeOf('function');
+  expect(result.current.clear).toBeTypeOf('function');
+  expect(result.current.has).toBeTypeOf('function');
+  expect(result.current.keys).toBeTypeOf('object');
+  expect(result.current.empty).toBeTypeOf('boolean');
+  expect(result.current.size).toBeTypeOf('number');
+});
 
-  it('Should set property', () => {
-    const { result } = renderHook(() => useObject(INITIAL_OBJECT));
-    const obj = result.current;
+it('Should set initial value', () => {
+  const { result } = renderHook(() => useObject({ name: 'John', age: 30 }));
 
-    act(() => obj.set('a', 42));
+  expect(result.current.value).toEqual({ name: 'John', age: 30 });
+});
 
-    expect(result.current.state).toEqual({ a: 42, b: 2, c: 3 });
-  });
+it('Should set partial object', () => {
+  const { result } = renderHook(() => useObject({ a: 1, b: 2, c: 3 }));
 
-  it('Should get property', () => {
-    const { result } = renderHook(() => useObject(INITIAL_OBJECT));
-    const obj = result.current;
+  act(() => result.current.set({ a: 42 }));
 
-    expect(obj.get('b')).toBe(2);
-  });
+  expect(result.current.value).toEqual({ a: 42, b: 2, c: 3 });
+});
 
-  it('Should reset object', () => {
-    const { result } = renderHook(() => useObject(INITIAL_OBJECT));
-    const obj = result.current;
+it('Should set multiple properties', () => {
+  const { result } = renderHook(() => useObject({ a: 1, b: 2, c: 3 }));
 
-    act(() => obj.set('a', 99));
-    act(() => obj.reset());
+  act(() => result.current.set({ a: 42, c: 99 }));
 
-    expect(result.current.state).toEqual(INITIAL_OBJECT);
-  });
+  expect(result.current.value).toEqual({ a: 42, b: 2, c: 99 });
+});
 
-  it('Should update object', () => {
-    const { result } = renderHook(() => useObject(INITIAL_OBJECT));
-    const obj = result.current;
+it('Should reset object', () => {
+  const { result } = renderHook(() => useObject({ a: 1, b: 2 }));
 
-    act(() => obj.update((prev) => ({ ...prev, d: 4 }) as typeof INITIAL_OBJECT & { d: number }));
+  act(() => result.current.set({ a: 99 }));
+  act(() => result.current.reset());
 
-    expect(result.current.state).toEqual({ a: 1, b: 2, c: 3, d: 4 });
-  });
+  expect(result.current.value).toEqual({ a: 1, b: 2 });
+});
+
+it('Should remove property', () => {
+  const { result } = renderHook(() => useObject({ a: 1, b: 2, c: 3 }));
+
+  act(() => result.current.remove('b'));
+
+  expect(result.current.value).toEqual({ a: 1, c: 3 });
+});
+
+it('Should not remove non-existing property', () => {
+  const { result } = renderHook(() => useObject({ a: 1, b: 2 }));
+
+  act(() => result.current.remove('c' as any));
+
+  expect(result.current.value).toEqual({ a: 1, b: 2 });
+});
+
+it('Should clear object', () => {
+  const { result } = renderHook(() => useObject({ a: 1, b: 2, c: 3 }));
+
+  act(() => result.current.clear());
+
+  expect(result.current.value).toEqual({});
+});
+
+it('Should check if property exists', () => {
+  const { result } = renderHook(() => useObject({ a: 1, b: 2 }));
+
+  expect(result.current.has('a')).toBe(true);
+  expect(result.current.has('b')).toBe(true);
+  expect(result.current.has('c' as any)).toBe(false);
+});
+
+it('Should return object keys', () => {
+  const { result } = renderHook(() => useObject({ a: 1, b: 2, c: 3 }));
 
-  it('Should merge object', () => {
-    const { result } = renderHook(() => useObject(INITIAL_OBJECT));
-    const obj = result.current;
+  expect(result.current.keys).toEqual(['a', 'b', 'c']);
+});
+
+it('Should update keys when object changes', () => {
+  const { result } = renderHook(() => useObject({ a: 1, b: 2, c: 3 }));
+
+  expect(result.current.keys).toEqual(['a', 'b', 'c']);
+
+  act(() => result.current.remove('b'));
+
+  expect(result.current.keys).toEqual(['a', 'c']);
+});
+
+it('Should check if object is empty', () => {
+  const { result } = renderHook(() => useObject({}));
+
+  expect(result.current.empty).toBe(true);
+
+  act(() => result.current.set({ a: 1 }));
+
+  expect(result.current.empty).toBe(false);
+});
+
+it('Should return object size', () => {
+  const { result } = renderHook(() => useObject({ a: 1, b: 2, c: 3 }));
+
+  expect(result.current.size).toBe(3);
+
+  act(() => result.current.remove('b'));
+
+  expect(result.current.size).toBe(2);
+});
 
-    act(() => obj.merge({ b: 10 }));
+describe('Empty object', () => {
+  it('Should handle empty initial object', () => {
+    const { result } = renderHook(() => useObject({}));
 
-    expect(result.current.state).toEqual({ a: 1, b: 10, c: 3 });
+    expect(result.current.value).toEqual({});
+    expect(result.current.empty).toBe(true);
+    expect(result.current.size).toBe(0);
+    expect(result.current.keys).toEqual([]);
   });
 
-  it('Should remove property', () => {
-    const { result } = renderHook(() => useObject(INITIAL_OBJECT));
-    const obj = result.current;
+  it('Should add properties to empty object', () => {
+    const { result } = renderHook(() => useObject({}));
 
-    act(() => obj.remove('b'));
+    act(() => result.current.set({ a: 1, b: 2 }));
 
-    expect(result.current.state).toEqual({ a: 1, c: 3 });
+    expect(result.current.value).toEqual({ a: 1, b: 2 });
+    expect(result.current.empty).toBe(false);
+    expect(result.current.size).toBe(2);
   });
 });