Working with window.location.search

window-location.js

/**
 * Create a string to use for the search element in window.location
 *
 * @params {string} search - the original window.location.search value
 * @params {Object} params - the new params to add to the search
 */
export const createNewSearchParams = ({
    search = window.location.search,
    params = {},
}) => {
    let searchString = '';

    // Create an object that represents the original search
    const currentSearchParams = search.replace('?', '').split('&');
    let originalSearch = {};
    currentSearchParams.forEach(param => {
        const [name, value] = param.split('=');
        if (name && value) {
            originalSearch[name] = value;
        }
    });

    // Create an object that represents the new search
    const newSearch = Object.assign({}, originalSearch, params);

    // Create an array of the params to add to the search
    const searchParams = Object.keys(newSearch);
    if (searchParams.length) {
        searchString = searchParams.reduce((
            searchString,
            param,
            index,
            array
        ) => {
            if (newSearch[param]) {
                const ampersand = (index === array.length - 1) ? '' : '&';
                return searchString.concat(`${param}=${newSearch[param]}${ampersand}`);
            } else {
                return searchString;
            }
        }, '');
    }

    // Return the new string that represents the search query
    return (searchString.length > 1) ? `?${searchString}` : '';
}

window-location.spec.js

import { createNewSearchParams } from './window-location.js';

describe('window-location utility', () => {
    it('returns the original search query if no params provided', () => {
        const search = '?query=united%20states';
        const result = createNewSearchParams({search});
        expect(result).toEqual(search);
    });

    it('returns an empty search if the original query is removed', () => {
        const search = '?query=united%20states';
        const params = {
            query: null
        };
        const result = createNewSearchParams({search, params});
        expect(result).toEqual('');
    });

    it('returns the original seach query if it is empty and no newParams', () => {
        const search = '';
        const result = createNewSearchParams({search});
        expect(result).toEqual(search);
    });

    it('returns the original empty search query plus a new one defined in params', () => {
        const search = '';
        const params = {
            pmx: 'united-states',
        };
        const expected = '?pmx=united-states';
        const result = createNewSearchParams({search, params});
        expect(result).toEqual(expected);
    });

    it('returns the original empty search query plus a new two defined in params', () => {
        const search = '';
        const params = {
            pmx: 'united-states',
            query: 'something-else'
        };
        const expected = '?pmx=united-states&query=something-else';
        const result = createNewSearchParams({search, params});
        expect(result).toEqual(expected);
    });

    it('keeps the original search query and adds a new parameter', () => {
        const search = '?query=documentation';
        const params = {
            pmx: 'north-america',
        };
        const expected = '?query=documentation&pmx=north-america';
        const result = createNewSearchParams({search, params});
        expect(result).toEqual(expected);
    });

    it('updates the original search if the same parameter is passed in params', () => {
        const search = '?pmx=ideal';
        const params = {
            pmx: 'north-america',
        };
        const expected = '?pmx=north-america';
        const result = createNewSearchParams({search, params});
        expect(result).toEqual(expected);
    });

    it('updates the original search query and adds a new parameter', () => {
        const search = '?query=documentation';
        const params = {
            query: 'payments',
            pmx: 'north-america',
        };
        const expected = '?query=payments&pmx=north-america';
        const result = createNewSearchParams({search, params});
        expect(result).toEqual(expected);
    });
});