Feat/use array modify by (#43)

* feat(usearray): modifyById

* docs: useArray has modifyById

* improvement(test): modifyById is tested via find and not via inline filter

* docs(readme): modifyById typo

README-ARRAY.md

@@ -112,6 +112,8 @@ Actions:
 - `removeIndex`
 - `removeById` - if array consists of objects with some specific `id` that you pass
 all of them will be removed
+- `modifyById` - if array consists of objects with some specific `id` that you pass
+these elements will be modified.
 - `move` - moves item from position to position shifting other elements. 
 ```
     So if input is [1, 2, 3, 4, 5]

README.md

@@ -171,6 +171,8 @@ Methods:
 - `removeIndex`
 - `removeById` - if array consists of objects with some specific `id` that you pass
 all of them will be removed
+- `modifyById` - if array consists of objects with some specific `id` that you pass
+these elements will be modified.
 - `move` - moves item from position to position shifting other elements.
 ```
     So if input is [1, 2, 3, 4, 5]

src/array/index.test.ts

@@ -216,6 +216,19 @@ describe('useArray array', () => {
     expect(result.current[0].length).toBe(1);
   });
 
+  it('should modify item by id', () => {
+    const { result } = renderHook(() => useArray([{ id: 1, foo: true }, { id: 2, foo: false }]));
+    const [, actions] = result.current;
+    expect(result.current[0].length).toBe(2);
+
+    act(() => actions.modifyById(2, { foo: true }));
+
+    const modifiedElement = result.current[0].find(
+      (element: { id: number; foo: boolean }) => element.id === 2,
+    );
+    expect(modifiedElement.foo).toBe(true);
+  });
+
   it('should clear the array', () => {
     const { result } = renderHook(() => useArray([1, 2, 3, 4, 5]));
     const [, actions] = result.current;

src/array/useArray.ts

@@ -11,6 +11,10 @@ export type UseArrayActions<T> = {
   clear: () => void;
   move: (from: number, to: number) => void;
   removeById: (id: T extends { id: string } ? string : T extends { id: number } ? number : unknown) => void;
+  modifyById: (
+    id: T extends { id: string } ? string : T extends { id: number } ? number : unknown,
+    newValue: Partial<T>,
+  ) => void;
   removeIndex: (index: number) => void;
 };
 export type UseArray<T = any> = [T[], UseArrayActions<T>];
@@ -47,6 +51,12 @@ export function useArray<T = any>(initial: T[]): UseArray<T> {
       }),
     [],
   );
+  const modifyById = useCallback(
+    (id, newValue) =>
+      // @ts-ignore not every array that you will pass down will have object with id field.
+      setValue(arr => arr.map(v => (v.id === id ? { ...v, ...newValue } : v))),
+    [],
+  );
   const actions = useMemo(
     () => ({
       setValue,
@@ -59,6 +69,7 @@ export function useArray<T = any>(initial: T[]): UseArray<T> {
       removeIndex,
       pop,
       shift,
+      modifyById,
     }),
     [push, unshift, move, clear, removeById, removeIndex, pop, shift],
   );

src/index.test.ts

@@ -192,6 +192,19 @@ describe('useArray', () => {
     expect(result.current.value.length).toBe(1);
   });
 
+  it('should modify item by id', () => {
+    const { result } = renderHook(() => useArray([{ id: 1, foo: true }, { id: 2, foo: false }]));
+    const { modifyById } = result.current;
+    expect(result.current.value.length).toBe(2);
+
+    act(() => modifyById(2, { foo: true }));
+
+    const modifiedElement = result.current.value.find(
+      (element: { id: number; foo: boolean }) => element.id === 2,
+    );
+    expect(modifiedElement.foo).toBe(true);
+  });
+
   it('should clear the array', () => {
     const { result } = renderHook(() => useArray([1, 2, 3, 4, 5]));
     const { clear } = result.current;