use-query-data/dist/useURLQuery.js

A React custom hook for managing URL queries with Next.js navigation.

"use strict";
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = require("react");
var navigation_1 = require("next/navigation");
var useURLQuery = function (_a) {
    var onURLChange = _a.onURLChange, queries = _a.queries;
    var router = (0, navigation_1.useRouter)();
    var searchParams = (0, navigation_1.useSearchParams)();
    var previousValuesRef = (0, react_1.useRef)(null);
    var isValidValue = function (value) {
        if (Array.isArray(value))
            return value.length > 0;
        if (typeof value === "object" && value !== null) {
            return Object.values(value).some(isValidValue);
        }
        return value !== undefined && value !== null && value !== "";
    };
    var cleanObject = function (obj) {
        var cleanedObject = Object.entries(obj).reduce(function (acc, _a) {
            var key = _a[0], value = _a[1];
            if (isValidValue(value)) {
                acc[key] = value;
            }
            return acc;
        }, {});
        return Object.keys(cleanedObject).length > 0 ? cleanedObject : {};
    };
    // Getter useEffect - Reads query params and updates state
    (0, react_1.useEffect)(function () {
        var params = {};
        searchParams.forEach(function (value, key) {
            try {
                var parsedValue = JSON.parse(value);
                params[key] = Array.isArray(parsedValue)
                    ? __spreadArray([], parsedValue, true) : parsedValue;
            }
            catch (_a) {
                params[key] = value;
            }
        });
        onURLChange(params);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [searchParams]);
    var setQueries = function (values) {
        var newSearchParams = new URLSearchParams();
        Object.keys(values).forEach(function (key) {
            var value = values[key];
            if (typeof value === "object" &&
                value !== null &&
                !Array.isArray(value)) {
                value = cleanObject(value);
            }
            if (isValidValue(value)) {
                newSearchParams.set(key, JSON.stringify(value));
            }
            else {
                newSearchParams.delete(key);
            }
        });
        var newUrl = "?".concat(newSearchParams.toString());
        if (previousValuesRef.current !== newUrl) {
            previousValuesRef.current = newUrl;
            router.push(newUrl, { scroll: false });
        }
    };
    // Setter useEffect - Updates URL when values change
    (0, react_1.useEffect)(function () {
        setQueries(queries);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [queries]);
};
exports.default = useURLQuery;