fix: createQueue

hope-ui · May 15, 2022 · f893ef7 · f893ef7
1 parent f871b23
commit f893ef7
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 39 deletions.
diff --git a/packages/solid/src/components/notification/notifications-provider.tsx b/packages/solid/src/components/notification/notifications-provider.tsx
@@ -89,9 +89,9 @@ export function NotificationsProvider(props: NotificationsProviderProps) {
   const finalPlacement: Accessor<NotificationsProviderProps["placement"]> = () =>
     local.placement ?? "top-end";
 
-  const notificationsAccessor = () => notificationQueue().state.current;
+  const notificationsAccessor = () => notificationQueue().state.current();
 
-  const queueAccessor = () => notificationQueue().state.queue;
+  const queueAccessor = () => notificationQueue().state.queue();
 
   const showNotification = (notification: ShowNotificationProps) => {
     const id = notification.id ?? `hope-notification-${createUniqueId()}`;

diff --git a/packages/solid/src/hooks/create-queue/create-queue.test.ts b/packages/solid/src/hooks/create-queue/create-queue.test.ts
@@ -4,68 +4,68 @@ describe("createQueue", () => {
   it("correctly distributes initial values when limit is not reached", () => {
     const { state } = createQueue({ initialValues: [1], limit: 2 });
 
-    expect(state.current).toStrictEqual([1]);
-    expect(state.queue).toStrictEqual([]);
+    expect(state.current()).toStrictEqual([1]);
+    expect(state.queue()).toStrictEqual([]);
   });
 
   it("correctly distributes initial values when limit is reached", () => {
     const { state } = createQueue({ initialValues: [1, 2, 3, 4, 5], limit: 2 });
 
-    expect(state.current).toStrictEqual([1, 2]);
-    expect(state.queue).toStrictEqual([3, 4, 5]);
+    expect(state.current()).toStrictEqual([1, 2]);
+    expect(state.queue()).toStrictEqual([3, 4, 5]);
   });
 
   it("adds items to the state when limit is not reached", () => {
     const { state, add } = createQueue({ initialValues: [1], limit: 2 });
 
     add(2);
 
-    expect(state.current).toStrictEqual([1, 2]);
-    expect(state.queue).toStrictEqual([]);
+    expect(state.current()).toStrictEqual([1, 2]);
+    expect(state.queue()).toStrictEqual([]);
   });
 
   it("adds items to the queue when limit is reached", () => {
     const { state, add } = createQueue({ initialValues: [1, 2], limit: 2 });
 
     add(3, 4, 5);
 
-    expect(state.current).toStrictEqual([1, 2]);
-    expect(state.queue).toStrictEqual([3, 4, 5]);
+    expect(state.current()).toStrictEqual([1, 2]);
+    expect(state.queue()).toStrictEqual([3, 4, 5]);
   });
 
   it("correctly applies given update to state without queue", () => {
     const { state, update } = createQueue({ initialValues: [1, 2], limit: 3 });
 
     update(state => state.filter(i => i % 2));
 
-    expect(state.current).toStrictEqual([1]);
-    expect(state.queue).toStrictEqual([]);
+    expect(state.current()).toStrictEqual([1]);
+    expect(state.queue()).toStrictEqual([]);
   });
 
   it("correctly applies given update to state with queue", () => {
     const { state, update } = createQueue({ initialValues: [1, 2, 3, 4, 5, 6, 7, 8], limit: 3 });
 
     update(state => state.filter(i => i % 2));
 
-    expect(state.current).toStrictEqual([1, 3, 5]);
-    expect(state.queue).toStrictEqual([7]);
+    expect(state.current()).toStrictEqual([1, 3, 5]);
+    expect(state.queue()).toStrictEqual([7]);
   });
 
   it("puts extra items to the queue if state has extra items after update", () => {
     const { state, update } = createQueue<number>({ initialValues: [], limit: 3 });
 
     update(() => [1, 2, 3, 4, 5, 6, 7, 8]);
 
-    expect(state.current).toStrictEqual([1, 2, 3]);
-    expect(state.queue).toStrictEqual([4, 5, 6, 7, 8]);
+    expect(state.current()).toStrictEqual([1, 2, 3]);
+    expect(state.queue()).toStrictEqual([4, 5, 6, 7, 8]);
   });
 
   it("cleans queue with cleanQueue handlers", () => {
     const { state, clearQueue } = createQueue({ initialValues: [1, 2, 3, 4], limit: 2 });
 
     clearQueue();
 
-    expect(state.current).toStrictEqual([1, 2]);
-    expect(state.queue).toStrictEqual([]);
+    expect(state.current()).toStrictEqual([1, 2]);
+    expect(state.queue()).toStrictEqual([]);
   });
 });
diff --git a/packages/solid/src/hooks/create-queue/index.ts b/packages/solid/src/hooks/create-queue/index.ts
@@ -1,14 +1,14 @@
-import { createStore } from "solid-js/store";
+import { Accessor, createSignal } from "solid-js";
 
 interface CreateQueueProps<T> {
   initialValues?: T[];
   limit: number;
 }
 
 interface CreateQueueState<T> {
-  current: T[];
-  queue: T[];
-  limit: number;
+  current: Accessor<T[]>;
+  queue: Accessor<T[]>;
+  limit: Accessor<number>;
 }
 
 interface CreateQueueReturn<T> {
@@ -19,38 +19,40 @@ interface CreateQueueReturn<T> {
 }
 
 export function createQueue<T>(props: CreateQueueProps<T>): CreateQueueReturn<T> {
-  const [state, setState] = createStore<CreateQueueState<T>>({
-    // eslint-disable-next-line solid/reactivity
-    current: props.initialValues?.slice(0, props.limit) ?? [],
+  const [currentState, setCurrentState] = createSignal(
+    props.initialValues?.slice(0, props.limit) ?? []
+  );
 
-    // eslint-disable-next-line solid/reactivity
-    queue: props.initialValues?.slice(props.limit) ?? [],
+  const [queue, setQueue] = createSignal(props.initialValues?.slice(props.limit) ?? []);
 
-    get limit() {
-      return props.limit;
-    },
-  });
+  const limit = () => props.limit;
 
   const add = (...items: T[]) => {
-    const results = [...state.current, ...state.queue, ...items];
+    const results = [...currentState(), ...queue(), ...items];
 
-    setState("current", results.slice(0, state.limit) as T[]);
-    setState("queue", results.slice(state.limit) as T[]);
+    setCurrentState(results.slice(0, limit()) as T[]);
+    setQueue(results.slice(limit()) as T[]);
   };
 
   const update = (fn: (state: T[]) => T[]) => {
-    const results = fn([...state.current, ...state.queue] as Array<T>);
+    const results = fn([...currentState(), ...queue()] as Array<T>);
 
-    setState("current", results.slice(0, state.limit));
-    setState("queue", results.slice(state.limit));
+    setCurrentState(results.slice(0, limit()) as T[]);
+    setQueue(results.slice(limit()) as T[]);
   };
 
   const clearQueue = () => {
-    setState("queue", []);
+    setQueue([]);
+  };
+
+  const state: CreateQueueState<T> = {
+    current: currentState,
+    queue,
+    limit,
   };
 
   return {
-    state: state as CreateQueueState<any>,
+    state,
     add,
     update,
     clearQueue,