Add updateMultipleQueryParameters (#2156)

* Add util to updateMultipleQueryParameters

* Add tests for multiple parameters

src/lib/utilities/update-query-parameters.test.ts

@@ -1,6 +1,10 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
-import { gotoOptions, updateQueryParameters } from './update-query-parameters';
+import {
+  gotoOptions,
+  updateMultipleQueryParameters,
+  updateQueryParameters,
+} from './update-query-parameters';
 
 describe('updateQueryParameters', () => {
   afterEach(() => {
@@ -233,3 +237,225 @@ describe('a sanity test for how URLs work in JavaScript', () => {
     expect(url.hash).toBe('#hash');
   });
 });
+
+describe('updateMultipleQueryParameters', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should call `goto` with the correct path when no value is provided', () => {
+    const url = new URL('https://temporal.io');
+    const parameters = [{ parameter: 'parameter' }];
+    const goto = vi.fn().mockImplementation(() => Promise.resolve(null));
+
+    updateMultipleQueryParameters({ parameters, url, goto });
+
+    const [href, options] = goto.mock.calls[0];
+
+    expect(href).toBe('/');
+    expect(options).toEqual(gotoOptions);
+  });
+
+  it('should call `goto` with the correct path when an empty string is provided', () => {
+    const url = new URL('https://temporal.io');
+    const parameters = [{ parameter: 'parameter', value: '' }];
+    const goto = vi.fn().mockImplementation(() => Promise.resolve(null));
+
+    updateMultipleQueryParameters({ parameters, url, goto });
+
+    const [href, options] = goto.mock.calls[0];
+
+    expect(href).toBe('/');
+    expect(options).toEqual(gotoOptions);
+  });
+
+  it('should call `goto` with the correct path when an emmpty string is provided and there are other params', () => {
+    const url = new URL('https://temporal.io/?other=value');
+    const parameters = [{ parameter: 'parameter', value: '' }];
+
+    const goto = vi.fn().mockImplementation(() => Promise.resolve(null));
+
+    updateMultipleQueryParameters({ parameters, url, goto });
+
+    const [href, options] = goto.mock.calls[0];
+
+    expect(href).toBe('/?other=value');
+    expect(options).toEqual(gotoOptions);
+  });
+
+  it('should call `goto` with the correct path when null is provided', () => {
+    const url = new URL('https://temporal.io');
+    const parameters = [
+      { parameter: 'parameter', value: null as unknown as string },
+    ];
+    const goto = vi.fn().mockImplementation(() => Promise.resolve(null));
+
+    updateMultipleQueryParameters({ parameters, url, goto });
+
+    const [href, options] = goto.mock.calls[0];
+
+    expect(href).toBe('/');
+    expect(options).toEqual(gotoOptions);
+  });
+
+  it('should call `goto` with the correct path when null is provided and there are other params', () => {
+    const url = new URL('https://temporal.io/?other=value');
+    const parameters = [
+      { parameter: 'parameter', value: null as unknown as string },
+    ];
+
+    const goto = vi.fn().mockImplementation(() => Promise.resolve(null));
+
+    updateMultipleQueryParameters({ parameters, url, goto });
+
+    const [href, options] = goto.mock.calls[0];
+
+    expect(href).toBe('/?other=value');
+    expect(options).toEqual(gotoOptions);
+  });
+
+  it('should call `goto` with the correct path', () => {
+    const url = new URL('https://temporal.io');
+    const parameters = [{ parameter: 'parameter', value: 'value' }];
+    const goto = vi.fn().mockImplementation(() => Promise.resolve(null));
+
+    updateMultipleQueryParameters({ parameters, url, goto });
+
+    const [href, options] = goto.mock.calls[0];
+
+    expect(href).toBe('/?parameter=value');
+    expect(options).toEqual(gotoOptions);
+  });
+
+  it('should call `goto` with the correct path if multiple parameters are provided', () => {
+    const url = new URL('https://temporal.io');
+    const parameters = [
+      { parameter: 'A', value: 'value' },
+      { parameter: 'B', value: 'value' },
+    ];
+    const goto = vi.fn().mockImplementation(() => Promise.resolve(null));
+
+    updateMultipleQueryParameters({ parameters, url, goto });
+
+    const [href, options] = goto.mock.calls[0];
+
+    expect(href).toBe('/?A=value&B=value');
+    expect(options).toEqual(gotoOptions);
+  });
+
+  it('should call `goto` with the correct path when there are other params', () => {
+    const url = new URL('https://temporal.io/?other=value');
+    const parameters = [{ parameter: 'parameter', value: 'value' }];
+    const goto = vi.fn().mockImplementation(() => Promise.resolve(null));
+
+    updateMultipleQueryParameters({ parameters, url, goto });
+
+    const [href, options] = goto.mock.calls[0];
+
+    expect(href).toBe('/?other=value&parameter=value');
+    expect(options).toEqual(gotoOptions);
+  });
+
+  it('should call `goto` with the correct path when there are other params and multiple parameters are provided', () => {
+    const url = new URL('https://temporal.io/?other=value');
+    const parameters = [
+      { parameter: 'A', value: 'value' },
+      { parameter: 'B', value: 'value' },
+    ];
+    const goto = vi.fn().mockImplementation(() => Promise.resolve(null));
+
+    updateMultipleQueryParameters({ parameters, url, goto });
+
+    const [href, options] = goto.mock.calls[0];
+
+    expect(href).toBe('/?other=value&A=value&B=value');
+    expect(options).toEqual(gotoOptions);
+  });
+
+  it('should call `goto` with the correct path when query parameters already exist', () => {
+    const parameter = 'parameter';
+    const parameters = [{ parameter, value: 'value' }];
+    const url = new URL(`https://temporal.io/?${parameter}=oldvalue`);
+    const goto = vi.fn().mockImplementation(() => Promise.resolve(null));
+
+    updateMultipleQueryParameters({ parameters, url, goto });
+
+    const [href, options] = goto.mock.calls[0];
+
+    expect(href).toBe('/?parameter=value');
+    expect(options).toEqual(gotoOptions);
+  });
+
+  it('should call `goto` with the correct path for the updated param when there are other params', () => {
+    const parameter = 'parameter';
+    const parameters = [{ parameter, value: 'value' }];
+    const url = new URL(
+      `https://temporal.io/?${parameter}=oldvalue&other=value`,
+    );
+    const goto = vi.fn().mockImplementation(() => Promise.resolve(null));
+
+    updateMultipleQueryParameters({ parameters, url, goto });
+
+    const [href, options] = goto.mock.calls[0];
+
+    expect(href).toBe('/?other=value&parameter=value');
+    expect(options).toEqual(gotoOptions);
+  });
+
+  it('should call `goto` with without the "?" if the query params are empty', () => {
+    const url = new URL('https://temporal.io');
+    const parameters = [
+      { parameter: 'parameter', value: null as unknown as string },
+    ];
+    const goto = vi.fn().mockImplementation(() => Promise.resolve(null));
+
+    updateMultipleQueryParameters({ parameters, url, goto });
+
+    const [href, options] = goto.mock.calls[0];
+
+    expect(href).toBe('/');
+    expect(options).toEqual(gotoOptions);
+  });
+
+  it('should clear single clearParameter when on a page', () => {
+    const parameter = 'parameter';
+    const parameters = [{ parameter, value: 'value' }];
+    const url = new URL(
+      `https://temporal.io/?${parameter}=oldvalue&other=value`,
+    );
+    const goto = vi.fn().mockImplementation(() => Promise.resolve(null));
+
+    updateMultipleQueryParameters({
+      parameters,
+      url,
+      goto,
+      clearParameters: ['other'],
+    });
+
+    const [href, options] = goto.mock.calls[0];
+
+    expect(href).toBe('/?parameter=value');
+    expect(options).toEqual(gotoOptions);
+  });
+
+  it('should clear multiple clearParameters when on a page', () => {
+    const parameter = 'parameter';
+    const parameters = [{ parameter, value: 'value' }];
+    const url = new URL(
+      `https://temporal.io/?${parameter}=oldvalue&other=value&page=3`,
+    );
+    const goto = vi.fn().mockImplementation(() => Promise.resolve(null));
+
+    updateMultipleQueryParameters({
+      parameters,
+      url,
+      goto,
+      clearParameters: ['page', 'other'],
+    });
+
+    const [href, options] = goto.mock.calls[0];
+
+    expect(href).toBe('/?parameter=value');
+    expect(options).toEqual(gotoOptions);
+  });
+});

src/lib/utilities/update-query-parameters.ts

@@ -54,3 +54,49 @@ export const updateQueryParameters = async ({
 
   return value;
 };
+
+export type QueryParameter = {
+  parameter: string;
+  value?: string | number | boolean;
+};
+
+type UpdateMultipleQueryParams = {
+  parameters: QueryParameter[];
+  url: URL;
+  goto?: typeof navigateTo;
+  clearParameters?: string[];
+};
+
+export const updateMultipleQueryParameters = async ({
+  parameters,
+  url,
+  goto = navigateTo,
+  clearParameters = [],
+}: UpdateMultipleQueryParams) => {
+  const params: { [key: string]: string } = {};
+  url.searchParams.forEach((value, key) => {
+    if (!parameters.find(({ parameter }) => parameter === key)) {
+      params[key] = value;
+    }
+  });
+  const newQuery = new URLSearchParams(params);
+
+  parameters.forEach(({ parameter, value }) => {
+    if (value || value === false) {
+      newQuery.set(parameter, String(value));
+    }
+  });
+
+  if (clearParameters.length) {
+    clearParameters.forEach((parameter) => {
+      newQuery.delete(parameter);
+    });
+  }
+
+  if (BROWSER) {
+    const query = newQuery?.toString();
+    const newUrl = query ? `${url.pathname}?${query}` : url.pathname;
+
+    goto(newUrl, gotoOptions);
+  }
+};