@cccsaurora/howler-ui 2.17.0-dev.600 → 2.17.1

package/components/app/providers/ParameterProvider.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { identity, isEmpty, isEqual, isUndefined, omitBy, uniq } from 'lodash-es';
+import { isEmpty, isEqual, isUndefined, omitBy, uniq } from 'lodash-es';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useLocation, useParams, useSearchParams } from 'react-router-dom';
 import { createContext, useContextSelector } from 'use-context-selector';
@@ -9,10 +9,12 @@ export const ParameterContext = createContext(null);
 const DEFAULT_VALUES = {
     query: DEFAULT_QUERY,
     sort: 'event.created desc',
-    span: 'date.range.1.month',
-    indexes: ['hit']
+    span: 'date.range.1.month'
 };
-/** Scalar URL params that map 1:1 to a state key */
+/**
+ * Mapping of URL parameter keys to internal state keys
+ * Note: 'filters' is handled separately due to multi-value support
+ */
 const PARAM_MAPPINGS = [
     ['query', 'query'],
     ['sort', 'sort'],
@@ -20,21 +22,15 @@ const PARAM_MAPPINGS = [
     ['start_date', 'startDate'],
     ['end_date', 'endDate']
 ];
-/** Multi-value URL params that map to array state keys */
-const ARRAY_PARAMS = [
-    { urlKey: 'filter', stateKey: 'filters' },
-    { urlKey: 'view', stateKey: 'views' },
-    { urlKey: 'index', stateKey: 'indexes', default: DEFAULT_VALUES.indexes }
-];
-const ARRAY_URL_KEYS = new Set(ARRAY_PARAMS.map(p => p.urlKey));
 const WRITE_THROTTLER = new Throttler(100);
 /**
  * Helper function to convert a number/string representation of a number into a valid offset.
  * @returns
  */
 const parseOffset = (_offset) => {
-    if (typeof _offset === 'number')
+    if (typeof _offset === 'number') {
         return _offset;
+    }
     const candidate = parseInt(_offset);
     return isNaN(candidate) ? 0 : candidate;
 };
@@ -42,131 +38,261 @@ const parseOffset = (_offset) => {
  * Helper function to determine the selected value based on URL params and route context.
  */
 const getSelectedValue = (params, pathname, bundleId) => {
-    if (params.has('selected'))
+    if (params.has('selected')) {
         return params.get('selected');
-    if (pathname.startsWith('/bundles') && bundleId)
+    }
+    if (pathname.startsWith('/bundles') && bundleId) {
         return bundleId;
+    }
     return null;
 };
 /**
- * Returns stable add / remove / setAt / setAll / clear handlers for a list field in
- * SearchValues. All returned functions are memoized; since _setValues (from useState)
- * and key are both stable for the lifetime of the component, the deps array is empty.
- */
-const useListHandlers = (key, _setValues) => {
-    const add = useCallback((item) => _setValues(c => ({ ...c, [key]: uniq([...c[key], item]) })), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    const remove = useCallback((item) => _setValues(c => {
-        const arr = c[key];
-        const i = arr.indexOf(item);
-        return i === -1 ? c : { ...c, [key]: arr.filter((_, idx) => idx !== i) };
-    }), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    const setAt = useCallback((pos, item) => _setValues(c => {
-        const arr = c[key];
-        if (pos < 0 || pos >= arr.length)
-            return c;
-        const next = [...arr];
-        next[pos] = item;
-        return { ...c, [key]: next };
-    }), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    const setAll = useCallback((items) => _setValues(c => ({ ...c, [key]: uniq(items) })), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    const reset = useCallback((defaultValue = []) => _setValues(c => ({ ...c, [key]: defaultValue })), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    return { add, remove, setAt, setAll, reset };
-};
-/**
- * Synchronizes SearchValues state with the URL search string, and vice-versa.
+ * Context responsible for tracking updates to query operations in hit and view search.
  */
-const useUrlSync = (values, _setValues, params, setParams, pathname, search, routeId) => {
+const ParameterProvider = ({ children }) => {
+    const location = useLocation();
+    const routeParams = useParams();
+    const [params, setParams] = useSearchParams();
+    const pendingChanges = useRef({});
+    const [values, _setValues] = useState({
+        selected: getSelectedValue(params, location.pathname, routeParams.id),
+        query: params.get('query') ?? DEFAULT_VALUES.query,
+        sort: params.get('sort') ?? DEFAULT_VALUES.sort,
+        span: params.get('span') ?? DEFAULT_VALUES.span,
+        filters: params.getAll('filter'),
+        views: params.getAll('view'),
+        startDate: params.get('start_date'),
+        endDate: params.get('end_date'),
+        offset: parseOffset(params.get('offset')),
+        trackTotalHits: (params.get('track_total_hits') ?? 'false') !== 'false'
+    });
+    // TODO: SELECTING A BUNDLE STILL CAUSES A FREAKOUT
+    const set = useCallback(key => value => {
+        if (key === 'filters') {
+            // eslint-disable-next-line no-console
+            console.error('Cannot use set() for filters. Use addFilter/removeFilter/clearFilters instead.');
+            return;
+        }
+        if (key === 'views') {
+            // eslint-disable-next-line no-console
+            console.error('Cannot use set() for views. Use addView/removeView/clearViews instead.');
+            return;
+        }
+        if (value === values[key]) {
+            return;
+        }
+        if (key === 'selected') {
+            pendingChanges.current.selected = value;
+        }
+        else {
+            pendingChanges.current[key] = value ?? DEFAULT_VALUES[key] ?? null;
+        }
+        if (key === 'span' && typeof value === 'string' && !value.endsWith('custom')) {
+            pendingChanges.current.startDate = null;
+            pendingChanges.current.endDate = null;
+        }
+        WRITE_THROTTLER.debounce(() => {
+            _setValues(_current => ({ ..._current, ...pendingChanges.current }));
+            pendingChanges.current = {};
+        });
+    }, [values]);
+    const setOffset = useCallback(_offset => _setValues(_current => ({ ..._current, offset: parseOffset(_offset) })), []);
+    const setCustomSpan = useCallback((startDate, endDate) => {
+        _setValues(_values => ({
+            ..._values,
+            startDate,
+            endDate
+        }));
+    }, []);
+    /**
+     * Filter manipulation
+     */
+    const addFilter = useCallback(filter => {
+        _setValues(_current => ({
+            ..._current,
+            filters: uniq([..._current.filters, filter])
+        }));
+    }, []);
+    const removeFilter = useCallback(filter => {
+        _setValues(_current => {
+            const index = _current.filters.indexOf(filter);
+            if (index === -1) {
+                return _current;
+            }
+            return {
+                ..._current,
+                filters: _current.filters.filter((_, i) => i !== index)
+            };
+        });
+    }, []);
+    const setFilter = useCallback((index, filter) => {
+        _setValues(_current => {
+            // Validate index
+            if (index < 0 || index >= _current.filters.length) {
+                return _current;
+            }
+            const newFilters = [..._current.filters];
+            newFilters[index] = filter;
+            return {
+                ..._current,
+                filters: newFilters
+            };
+        });
+    }, []);
+    const clearFilters = useCallback(() => {
+        _setValues(_current => ({
+            ..._current,
+            filters: []
+        }));
+    }, []);
+    /**
+     * View manipulation
+     */
+    const addView = useCallback(view => {
+        _setValues(_current => ({
+            ..._current,
+            views: uniq([..._current.views, view])
+        }));
+    }, []);
+    const removeView = useCallback(view => {
+        _setValues(_current => {
+            const index = _current.views.indexOf(view);
+            if (index === -1) {
+                return _current;
+            }
+            return {
+                ..._current,
+                views: _current.views.filter((_, i) => i !== index)
+            };
+        });
+    }, []);
+    const setView = useCallback((index, view) => {
+        _setValues(_current => {
+            // Validate index
+            if (index < 0 || index >= _current.views.length) {
+                return _current;
+            }
+            const newViews = [..._current.views];
+            newViews[index] = view;
+            return {
+                ..._current,
+                views: newViews
+            };
+        });
+    }, []);
+    const clearViews = useCallback(() => {
+        _setValues(_current => ({
+            ..._current,
+            views: []
+        }));
+    }, []);
+    /**
+     * Get URL parameter changes needed to sync internal state to the address bar.
+     * Returns null values for params that should be removed from URL.
+     */
     const getUrlFromState = useCallback(() => {
         const changes = {};
-        // Scalar params: write if changed from URL, remove if back to default
         PARAM_MAPPINGS.forEach(([urlKey, stateKey]) => {
             const stateValue = values[stateKey];
             const urlValue = params.get(urlKey);
-            if (stateValue === urlValue)
-                return;
-            if (params.has(urlKey) && stateValue === DEFAULT_VALUES[stateKey]) {
-                changes[urlKey] = null; // remove
-            }
-            else if (stateValue !== DEFAULT_VALUES[stateKey]) {
-                changes[urlKey] = stateValue; // write
-            }
-        });
-        // Array params: skip when state equals default and URL is already empty
-        ARRAY_PARAMS.forEach(({ urlKey, stateKey, default: def }) => {
-            const stateArr = values[stateKey];
-            const urlArr = params.getAll(urlKey);
-            if (isEqual(stateArr, urlArr))
-                return;
-            const isDefault = def ? isEqual(stateArr, def) : stateArr.length === 0;
-            if (!isDefault) {
-                changes[urlKey] = stateArr.length === 0 ? null : stateArr;
-            }
-            else if (urlArr.length > 0) {
-                changes[urlKey] = null; // state is default but URL isn't — remove
+            if (stateValue !== urlValue) {
+                // If the value matches the default, remove it from URL (null signals removal)
+                if (params.has(urlKey) && stateValue === DEFAULT_VALUES[stateKey]) {
+                    changes[urlKey] = null;
+                }
+                else if (stateValue !== DEFAULT_VALUES[stateKey]) {
+                    changes[urlKey] = stateValue;
+                }
             }
         });
-        // selected
-        if (pathname.startsWith('/bundles') && (!params.has('selected') || values.selected === params.get('selected'))) {
+        // Handle filters: compare arrays with isEqual
+        const urlFilters = params.getAll('filter');
+        if (!isEqual(values.filters, urlFilters)) {
+            // Coerce empty array to null for removal signal
+            changes.filters = values.filters.length === 0 ? null : values.filters;
+        }
+        // Handle views: compare arrays with isEqual
+        const urlViews = params.getAll('view');
+        if (!isEqual(values.views, urlViews)) {
+            // Coerce empty array to null for removal signal
+            changes.views = values.views.length === 0 ? null : values.views;
+        }
+        // Handle selected: remove if redundant in bundle context, otherwise set
+        if (location.pathname.startsWith('/bundles') &&
+            (!params.has('selected') || values.selected === params.get('selected'))) {
             changes.selected = null;
         }
         else if (values.selected !== params.get('selected')) {
             changes.selected = values.selected;
         }
-        // offset: remove when 0
-        if (parseOffset(params.get('offset')) !== values.offset) {
+        // Handle offset: remove if 0, otherwise set
+        const urlOffset = parseOffset(params.get('offset'));
+        if (urlOffset !== values.offset) {
             changes.offset = values.offset || null;
         }
-        // Drop scalar entries that already match the URL
-        return omitBy(changes, (val, key) => !ARRAY_URL_KEYS.has(key) && val == params.get(key));
-    }, [values, params, pathname]);
+        // Filter out values that already match the URL (skip 'filters', 'views' as they're handled above)
+        return omitBy(changes, (val, key) => {
+            if (['filters', 'views'].includes(key)) {
+                return false;
+            }
+            return val == params.get(key);
+        });
+    }, [values, params, location.pathname]);
+    /**
+     * Get state changes needed to sync URL parameters to internal state.
+     */
     const getStateFromUrl = useCallback(() => {
         const changes = {};
-        // Scalar params: fall back to default when absent from URL
         PARAM_MAPPINGS.forEach(([urlKey, stateKey]) => {
             const urlValue = params.has(urlKey) ? params.get(urlKey) : (DEFAULT_VALUES[stateKey] ?? undefined);
             if (urlValue !== values[stateKey]) {
                 changes[stateKey] = urlValue;
             }
         });
-        // Array params: fall back to their declared default when absent from URL
-        ARRAY_PARAMS.forEach(({ urlKey, stateKey, default: def }) => {
-            const raw = params.getAll(urlKey);
-            const resolved = (isEmpty(raw) && def ? def : uniq(raw));
-            if (!isEqual(resolved, values[stateKey])) {
-                changes[stateKey] = resolved;
-            }
-        });
-        // selected
-        const selectedValue = getSelectedValue(params, pathname, routeId);
-        if (selectedValue !== values.selected)
+        // Handle filters: compare arrays with isEqual
+        const urlFilters = uniq(params.getAll('filter'));
+        if (!isEqual(urlFilters, values.filters)) {
+            changes.filters = urlFilters;
+        }
+        // Handle filters: compare arrays with isEqual
+        const urlViews = uniq(params.getAll('view'));
+        if (!isEqual(urlViews, values.views)) {
+            changes.views = urlViews;
+        }
+        // Handle selected using helper
+        const selectedValue = getSelectedValue(params, location.pathname, routeParams.id);
+        if (selectedValue !== values.selected) {
             changes.selected = selectedValue;
-        // offset
+        }
+        // Handle offset
         const urlOffset = parseOffset(params.get('offset'));
-        if (urlOffset !== values.offset)
+        if (urlOffset !== values.offset) {
             changes.offset = urlOffset;
+        }
+        // Filter out undefined values and values that already match state
         return omitBy(omitBy(changes, isUndefined), (val, key) => val == values[key]);
-    }, [values, params, pathname, routeId]);
-    // State → URL
+    }, [values, params, location.pathname, routeParams.id]);
+    /**
+     * Effect to synchronize the context's state with the address bar
+     */
     useEffect(() => {
         const changes = getUrlFromState();
-        if (isEmpty(changes))
+        if (isEmpty(changes)) {
             return;
+        }
         setParams(_params => {
+            // Build fresh URLSearchParams from existing params
             const newParams = new URLSearchParams(_params);
+            // Handle standard params
             Object.entries(changes).forEach(([key, value]) => {
-                if (Array.isArray(value)) {
-                    newParams.delete(key);
-                    value.forEach(val => newParams.append(key, val));
+                if (['filters', 'views'].includes(key)) {
+                    const multiFieldKey = key.replace(/s$/, '');
+                    // Special handling for arrays
+                    newParams.delete(multiFieldKey);
+                    if (Array.isArray(value)) {
+                        value.forEach(val => newParams.append(multiFieldKey, val));
+                    }
+                    // null/undefined means remove (already deleted above)
                 }
                 else if (value === null || value === undefined) {
                     newParams.delete(key);
@@ -179,63 +305,17 @@ const useUrlSync = (values, _setValues, params, setParams, pathname, search, rou
         }, { replace: !changes.query && !Object.keys(changes).includes('offset') });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [values]);
-    // URL → State
     useEffect(() => {
         const changes = getStateFromUrl();
-        if (isEmpty(changes))
+        if (isEmpty(changes)) {
             return;
-        _setValues(c => ({ ...c, ...changes }));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [search, pathname, routeId]);
-};
-/**
- * Context responsible for tracking updates to query operations in hit and view search.
- */
-const ParameterProvider = ({ children }) => {
-    const location = useLocation();
-    const routeParams = useParams();
-    const [params, setParams] = useSearchParams();
-    const pendingChanges = useRef({});
-    const [values, _setValues] = useState({
-        selected: getSelectedValue(params, location.pathname, routeParams.id),
-        query: params.get('query') ?? DEFAULT_VALUES.query,
-        sort: params.get('sort') ?? DEFAULT_VALUES.sort,
-        span: params.get('span') ?? DEFAULT_VALUES.span,
-        indexes: params.has('index')
-            ? uniq(params.getAll('index')).filter(identity)
-            : DEFAULT_VALUES.indexes,
-        filters: params.getAll('filter'),
-        views: params.getAll('view'),
-        startDate: params.get('start_date'),
-        endDate: params.get('end_date'),
-        offset: parseOffset(params.get('offset')),
-        trackTotalHits: (params.get('track_total_hits') ?? 'false') !== 'false'
-    });
-    // TODO: SELECTING A BUNDLE STILL CAUSES A FREAKOUT
-    useUrlSync(values, _setValues, params, setParams, location.pathname, location.search, routeParams.id);
-    const set = useCallback((key) => (value) => {
-        if (value === values[key])
-            return;
-        if (key === 'selected') {
-            pendingChanges.current.selected = value;
-        }
-        else {
-            pendingChanges.current[key] = value ?? DEFAULT_VALUES[key] ?? null;
         }
-        if (key === 'span' && typeof value === 'string' && !value.endsWith('custom')) {
-            pendingChanges.current.startDate = null;
-            pendingChanges.current.endDate = null;
-        }
-        WRITE_THROTTLER.debounce(() => {
-            _setValues(c => ({ ...c, ...pendingChanges.current }));
-            pendingChanges.current = {};
-        });
-    }, [values]);
-    const setOffset = useCallback((_offset) => _setValues(c => ({ ...c, offset: parseOffset(_offset) })), []);
-    const setCustomSpan = useCallback((startDate, endDate) => _setValues(c => ({ ...c, startDate, endDate })), []);
-    const filters = useListHandlers('filters', _setValues);
-    const indexes = useListHandlers('indexes', _setValues);
-    const views = useListHandlers('views', _setValues);
+        _setValues(_current => ({
+            ..._current,
+            ...changes
+        }));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [location.search, location.pathname, routeParams.id]);
     return (_jsx(ParameterContext.Provider, { value: {
             ...values,
             setOffset,
@@ -244,19 +324,14 @@ const ParameterProvider = ({ children }) => {
             setQuery: useMemo(() => set('query'), [set]),
             setSort: useMemo(() => set('sort'), [set]),
             setSpan: useMemo(() => set('span'), [set]),
-            addFilter: filters.add,
-            removeFilter: filters.remove,
-            setFilter: filters.setAt,
-            resetFilters: filters.reset,
-            addIndex: indexes.add,
-            removeIndex: indexes.remove,
-            setIndex: indexes.setAt,
-            setIndexes: indexes.setAll,
-            resetIndexes: useCallback(() => indexes.reset(DEFAULT_VALUES.indexes), [indexes]),
-            addView: views.add,
-            removeView: views.remove,
-            setView: views.setAt,
-            resetViews: views.reset
+            addFilter,
+            removeFilter,
+            setFilter,
+            clearFilters,
+            addView,
+            removeView,
+            setView,
+            clearViews
         }, children: children }));
 };
 export const useParameterContextSelector = (selector) => {