@cccsaurora/howler-ui 2.19.0-dev.989 → 2.19.0

package/components/app/providers/ParameterProvider.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { isEmpty, isEqual, isUndefined, omitBy, uniq } from 'lodash-es';
+import { identity, 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,12 +9,10 @@ export const ParameterContext = createContext(null);
 const DEFAULT_VALUES = {
     query: DEFAULT_QUERY,
     sort: 'event.created desc',
-    span: 'date.range.1.month'
+    span: 'date.range.1.month',
+    indexes: ['hit']
 };
-/**
- * Mapping of URL parameter keys to internal state keys
- * Note: 'filters' is handled separately due to multi-value support
- */
+/** Scalar URL params that map 1:1 to a state key */
 const PARAM_MAPPINGS = [
     ['query', 'query'],
     ['sort', 'sort'],
@@ -22,6 +20,13 @@ 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' }
+];
+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.
@@ -47,252 +52,132 @@ const getSelectedValue = (params, pathname, bundleId) => {
     return null;
 };
 /**
- * Context responsible for tracking updates to query operations in hit and view search.
+ * 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 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;
+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;
         }
-        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 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.
+ */
+const useUrlSync = (values, defaults, _setValues, params, setParams, pathname, search, routeId) => {
     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) {
-                // 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;
-                }
+            if (stateValue === urlValue) {
+                return;
+            }
+            if (params.has(urlKey) && stateValue === defaults[stateKey]) {
+                changes[urlKey] = null; // remove
+            }
+            else if (stateValue !== defaults[stateKey]) {
+                changes[urlKey] = stateValue; // write
             }
         });
-        // 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'))) {
+        // Array params: skip when state equals default and URL is already empty
+        ARRAY_PARAMS.forEach(({ urlKey, stateKey }) => {
+            const stateArr = values[stateKey];
+            const urlArr = params.getAll(urlKey);
+            const defaultValue = stateKey === 'indexes' ? defaults.indexes : undefined;
+            if (isEqual(stateArr, urlArr)) {
+                return;
+            }
+            const isDefault = defaultValue ? isEqual(stateArr, defaultValue) : 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
+            }
+        });
+        // selected
+        if (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;
         }
-        // Handle offset: remove if 0, otherwise set
-        const urlOffset = parseOffset(params.get('offset'));
-        if (urlOffset !== values.offset) {
+        // offset: remove when 0
+        if (parseOffset(params.get('offset')) !== values.offset) {
             changes.offset = values.offset || null;
         }
-        // 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.
-     */
+        // Drop scalar entries that already match the URL
+        return omitBy(changes, (val, key) => !ARRAY_URL_KEYS.has(key) && val == params.get(key));
+    }, [values, defaults, params, pathname]);
     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);
+            const urlValue = params.has(urlKey) ? params.get(urlKey) : (defaults[stateKey] ?? undefined);
             if (urlValue !== values[stateKey]) {
                 changes[stateKey] = urlValue;
             }
         });
-        // 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);
+        // Array params: fall back to their declared default when absent from URL
+        ARRAY_PARAMS.forEach(({ urlKey, stateKey }) => {
+            const raw = params.getAll(urlKey);
+            const defaultValue = stateKey === 'indexes' ? defaults.indexes : undefined;
+            const resolved = (isEmpty(raw) && defaultValue ? defaultValue : uniq(raw));
+            if (!isEqual(resolved, values[stateKey])) {
+                changes[stateKey] = resolved;
+            }
+        });
+        // selected
+        const selectedValue = getSelectedValue(params, pathname, routeId);
         if (selectedValue !== values.selected) {
             changes.selected = selectedValue;
         }
-        // Handle offset
+        // offset
         const urlOffset = parseOffset(params.get('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, location.pathname, routeParams.id]);
-    /**
-     * Effect to synchronize the context's state with the address bar
-     */
+    }, [values, defaults, params, pathname, routeId]);
+    // State → URL
     useEffect(() => {
         const changes = getUrlFromState();
         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 (['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)
+                if (Array.isArray(value)) {
+                    newParams.delete(key);
+                    value.forEach(val => newParams.append(key, val));
                 }
                 else if (value === null || value === undefined) {
                     newParams.delete(key);
@@ -305,17 +190,64 @@ const ParameterProvider = ({ children }) => {
         }, { 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)) {
             return;
         }
-        _setValues(_current => ({
-            ..._current,
-            ...changes
-        }));
+        _setValues(c => ({ ...c, ...changes }));
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [location.search, location.pathname, routeParams.id]);
+    }, [search, pathname, routeId]);
+};
+/**
+ * Context responsible for tracking updates to query operations in hit and view search.
+ */
+const ParameterProvider = ({ children, defaults: _defaults = {} }) => {
+    const location = useLocation();
+    const routeParams = useParams();
+    const [params, setParams] = useSearchParams();
+    const defaults = useMemo(() => ({ ...DEFAULT_VALUES, ..._defaults }), [_defaults]);
+    const pendingChanges = useRef({});
+    const [values, _setValues] = useState({
+        selected: getSelectedValue(params, location.pathname, routeParams.id),
+        query: params.get('query') ?? defaults.query,
+        sort: params.get('sort') ?? defaults.sort,
+        span: params.get('span') ?? defaults.span,
+        indexes: params.has('index') ? uniq(params.getAll('index')).filter(identity) : defaults.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, defaults, _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 ?? defaults[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, defaults]);
+    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);
     return (_jsx(ParameterContext.Provider, { value: {
             ...values,
             setOffset,
@@ -324,14 +256,19 @@ const ParameterProvider = ({ children }) => {
             setQuery: useMemo(() => set('query'), [set]),
             setSort: useMemo(() => set('sort'), [set]),
             setSpan: useMemo(() => set('span'), [set]),
-            addFilter,
-            removeFilter,
-            setFilter,
-            clearFilters,
-            addView,
-            removeView,
-            setView,
-            clearViews
+            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(defaults.indexes), [indexes, defaults]),
+            addView: views.add,
+            removeView: views.remove,
+            setView: views.setAt,
+            resetViews: views.reset
         }, children: children }));
 };
 export const useParameterContextSelector = (selector) => {