refactor: refoctor queue logic

asmyshlyaev177 · Nov 28, 2024 · eaaf4ba · eaaf4ba
1 parent 727b2c6
commit eaaf4ba
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 20 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/urlstate/react-router/useUrlState/useUrlState.ts b/packages/urlstate/react-router/useUrlState/useUrlState.ts
@@ -151,9 +151,9 @@ export function useUrlState<T extends JSONCompatible>(
       _useHistory
         ? routerHistory
         : {
-            replace: (url: string, options: NavigateOptions) =>
+            replace: (url: string, options?: NavigateOptions) =>
               navigate(url, { ...defOpts, ...options }),
-            push: (url: string, options: NavigateOptions) =>
+            push: (url: string, options?: NavigateOptions) =>
               navigate(url, { ...defOpts, ...options }),
           },
     [navigate],

diff --git a/packages/urlstate/useUrlStateBase/useUrlStateBase.ts b/packages/urlstate/useUrlStateBase/useUrlStateBase.ts
@@ -97,29 +97,21 @@ export function useUrlStateBase<T extends JSONCompatible>(
       const currUrl = `${window.location.pathname}${window.location.search}${window.location.hash}`;
       if (newUrl === currUrl) return;
 
-      let upd: (typeof queue.current)[0] | undefined;
       setState(newVal);
 
       const replace = options?.replace;
       delete options?.replace;
       queue.current.push([replace ? "replace" : "push", newUrl, options]);
 
       clearTimeout(timer.current);
-
       timer.current = setTimeout(() => {
         queueMicrotask(() => {
-          while (queue.current.length) {
-            const currUpd = queue.current.shift();
-            if (!!currUpd && currUpd?.[1] !== upd?.[1]) {
-              upd = currUpd;
-            }
-          }
-
-          // @ts-expect-error fots
-          const [method, url, opts] = upd || {};
-          upd = undefined;
-          // @ts-expect-error fots
-          method && router[method](url, opts);
+          if (!queue.current.length) return;
+          const upd = queue.current.at(-1);
+          queue.current = [];
+
+          const [method, url, opts] = upd || [];
+          router[method!](url!, opts);
         });
       }, TIMEOUT);
     },

diff --git a/packages/urlstate/utils.ts b/packages/urlstate/utils.ts
@@ -129,8 +129,8 @@ export function assignValue<T extends object>(shape: T, newVal: Partial<T>) {
 }
 
 export interface Router {
-  push: (href: string, opts: object) => void;
-  replace: (href: string, opts: object) => void;
+  push: (href: string, opts?: object) => void;
+  replace: (href: string, opts?: object) => void;
 }
 
 export const routerHistory: Router = {

diff --git a/tests/useUrlState/main.spec.ts b/tests/useUrlState/main.spec.ts
@@ -164,13 +164,14 @@ test.describe('main tests', () => {
       await page.waitForSelector('button[name="Reload page"]');
 
 
-      const text = 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'
+      const alpha = "abcdefghijklmnopqrstuvwxyz"
+      const text = alpha.repeat(5)
       await page
         .getByLabel('name')
         .pressSequentially(text, { delay: 0 });
         await page.waitForTimeout(500);
 
-        await expect(page.url()).toContain(text)
+        await expect(page.url().split('?')[1]).toEqual(`name=%27${text}%27`)
 
 
       await expect(page.locator('button[name="Reload page"]')).toBeVisible();