[use-queue] Handle limit changes (#16)

* Allow limit to be changed

* docs(changeset): [use-queue] handle limit changes

.changeset/itchy-actors-call.md

@@ -0,0 +1,5 @@
+---
+"@codiume/hooks": patch
+---
+
+[use-queue] handle limit changes

src/use-queue/use-queue.test.ts

@@ -66,4 +66,15 @@ describe('useQueue', () => {
     expect(dequeuedItem).toBeUndefined();
     expect(result.current[0]).toEqual({ active: [], queue: [] });
   });
+
+  it('should handle limit changes', () => {
+    const { result, rerender } = renderHook(
+      ({ limit }: { limit: number }) => useQueue<number>([1, 2, 3, 4], limit),
+      { initialProps: { limit: 2 } }
+    );
+    expect(result.current[0]).toEqual({ active: [1, 2], queue: [3, 4] });
+
+    rerender({ limit: 3 });
+    expect(result.current[0]).toEqual({ active: [1, 2, 3], queue: [4] });
+  });
 });

src/use-queue/use-queue.ts

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 type QueueState<T> = {
   active: T[];
@@ -22,6 +22,16 @@ export function useQueue<T>(
     queue: initialValues.slice(limit)
   }));
 
+  useEffect(() => {
+    setState((current) => {
+      const newState = [...current.active, ...current.queue];
+      return {
+        active: newState.slice(0, limit),
+        queue: newState.slice(limit)
+      };
+    });
+  }, [limit]);
+
   const enqueue = (item: T) =>
     setState((current) => {
       const newState = [...current.active, ...current.queue, item];