@trackunit/filters-filter-bar 1.0.59 → 1.0.63

package/index.cjs.js

@@ -916,6 +916,7 @@ const mockFilterBar = {
         setObjectValue: doNothing,
         toggleObjectValue: doNothing,
     },
+    dataLoaded: doNothing(),
     filterBarDefinition: {},
 };
 
@@ -1119,7 +1120,8 @@ const validateFilter = (filter, filterDefinitions) => {
  * @template TFilterBarDefinition - A generic type for the filter bar definition.
  * @returns {object} An object containing filter bar configuration and actions.
  */
-const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState, }) => {
+const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState, loadAsync, }) => {
+    const [internalFilterBarDefinitions, setInternalFilterBarDefinitions] = react.useState(filterBarDefinition);
     const setValue = react.useCallback((key, callback) => {
         setFilterBarConfig(prevState => {
             return {
@@ -1131,13 +1133,13 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
             };
         });
     }, []);
-    const filterDefinitionsValues = react.useMemo(() => sharedUtils.objectValues(filterBarDefinition), [filterBarDefinition]);
-    const [filterBarConfig, setFilterBarConfig] = react.useState(() => {
+    const [initialStoredFilters] = react.useState(() => localStorage.getItem(`filter-${name}`) || "{}");
+    const loadData = react.useCallback((updatedFilterDefinitionsValues) => {
         let initialFilterBarConfig;
-        const storedFilters = localStorage.getItem(`filter-${name}`);
+        const storedFilters = initialStoredFilters;
         if (storedFilters && storedFilters !== "undefined") {
             const loadedFilterBarConfig = JSON.parse(storedFilters);
-            if (validateFilter(loadedFilterBarConfig, filterDefinitionsValues)) {
+            if (validateFilter(loadedFilterBarConfig, updatedFilterDefinitionsValues)) {
                 initialFilterBarConfig = {
                     ...loadedFilterBarConfig,
                     initialState: initialState || loadedFilterBarConfig.initialState,
@@ -1149,14 +1151,14 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
         //To do this for a changing default value as in customers and sites we would need to recreate the initialFilterBarConfig every time the default value changes.
         //This mean that filterbars that have this functionality wouldn't be able to save the state of the filterbar.
         //Another option would be to create a new filterbar for each customer or site. This also has its drawbacks. Would raise it with the frontend community.
-        const hasNonVisibleDefaultValues = filterDefinitionsValues.some(value => value.showInStarredMenu &&
+        const hasNonVisibleDefaultValues = updatedFilterDefinitionsValues.some(value => value.showInStarredMenu &&
             !value.showInStarredMenu() &&
             value.showInFilterBar &&
             !value.showInFilterBar() &&
             value.defaultValue?.toString &&
             value.defaultValue.toString().length > 0);
         if (initialFilterBarConfig === undefined || hasNonVisibleDefaultValues) {
-            initialFilterBarConfig = createInitialState(name, filterDefinitionsValues, initialState || {}, setValue);
+            initialFilterBarConfig = createInitialState(name, updatedFilterDefinitionsValues, initialState || {}, setValue);
         }
         // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
         Object.keys(initialFilterBarConfig.values).forEach(key => {
@@ -1164,6 +1166,28 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
             initialFilterBarConfig.setters[`set${stringTs.capitalize(key)}`] = (callback) => setValue(key, callback);
         });
         return initialFilterBarConfig;
+    }, [initialState, name, setValue, initialStoredFilters]);
+    const dataLoaded = react.useCallback((loadedFilterDefinitionsValues) => {
+        if (!loadAsync) {
+            throw new Error("You must pass in loadAsync to useFilterBar when loading filter data asynchronously");
+        }
+        setInternalFilterBarDefinitions(loadedFilterDefinitionsValues);
+        setFilterBarConfig(prev => loadData(sharedUtils.objectValues(loadedFilterDefinitionsValues)));
+    }, [loadAsync, loadData]);
+    const [filterBarConfig, setFilterBarConfig] = react.useState(() => {
+        let initialFilterBarConfig;
+        if (!loadAsync) {
+            initialFilterBarConfig = loadData(sharedUtils.objectValues(internalFilterBarDefinitions));
+        }
+        else {
+            initialFilterBarConfig = createInitialState(name, sharedUtils.objectValues(internalFilterBarDefinitions), initialState || {}, setValue);
+            // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
+            Object.keys(initialFilterBarConfig.values).forEach(key => {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                initialFilterBarConfig.setters[`set${stringTs.capitalize(key)}`] = (callback) => setValue(key, callback);
+            });
+        }
+        return initialFilterBarConfig;
     });
     react.useEffect(() => {
         onValuesChange?.(filterBarConfig.values);
@@ -1177,7 +1201,7 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
                 return filterBarConfig.name;
             },
             getFilterTitle(key) {
-                return filterBarDefinition[key]?.title ?? key;
+                return internalFilterBarDefinitions[key]?.title ?? key;
             },
             arrayIncludesValue(key, value) {
                 const filter = filterBarConfig.values[key];
@@ -1222,11 +1246,11 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
                 return filter?.value === value || false;
             },
         };
-    }, [filterBarConfig.initialState, filterBarConfig.name, filterBarConfig.values, filterBarDefinition]);
+    }, [filterBarConfig.initialState, filterBarConfig.name, filterBarConfig.values, internalFilterBarDefinitions]);
     const filterMapActions = react.useMemo(() => {
         // Reset an individual filter to its initial state
         const resetIndividualFilterToInitialState = (key) => {
-            const tmpInitialState = createInitialState(name, filterDefinitionsValues, initialState || {}, setValue);
+            const tmpInitialState = createInitialState(name, sharedUtils.objectValues(internalFilterBarDefinitions), initialState || {}, setValue);
             setFilterBarConfig(prevState => {
                 return {
                     ...prevState,
@@ -1443,19 +1467,20 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
                 setFilterBarConfig(prevState => {
                     return {
                         ...prevState,
-                        values: createInitialState(name, filterDefinitionsValues, initialState || {}, setValue).values,
+                        values: createInitialState(name, sharedUtils.objectValues(internalFilterBarDefinitions), initialState || {}, setValue).values,
                     };
                 });
             },
             resetIndividualFilterToInitialState,
         };
-    }, [filterDefinitionsValues, initialState, name, setValue]);
+    }, [initialState, name, setValue, internalFilterBarDefinitions]);
     return react.useMemo(() => {
         return {
             filterBarConfig: { ...filterBarConfig, ...filterMapActions, ...filterMapGetter },
-            filterBarDefinition,
+            filterBarDefinition: internalFilterBarDefinitions,
+            dataLoaded,
         };
-    }, [filterBarConfig, filterMapActions, filterMapGetter, filterBarDefinition]);
+    }, [filterBarConfig, filterMapActions, filterMapGetter, internalFilterBarDefinitions, dataLoaded]);
 };
 const getKeysOfUnequalProperties = (obj1, obj2) => {
     return reduce(obj1, (result, value, key) => {

package/index.esm.js

@@ -914,6 +914,7 @@ const mockFilterBar = {
         setObjectValue: doNothing,
         toggleObjectValue: doNothing,
     },
+    dataLoaded: doNothing(),
     filterBarDefinition: {},
 };
 
@@ -1117,7 +1118,8 @@ const validateFilter = (filter, filterDefinitions) => {
  * @template TFilterBarDefinition - A generic type for the filter bar definition.
  * @returns {object} An object containing filter bar configuration and actions.
  */
-const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState, }) => {
+const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState, loadAsync, }) => {
+    const [internalFilterBarDefinitions, setInternalFilterBarDefinitions] = useState(filterBarDefinition);
     const setValue = useCallback((key, callback) => {
         setFilterBarConfig(prevState => {
             return {
@@ -1129,13 +1131,13 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
             };
         });
     }, []);
-    const filterDefinitionsValues = useMemo(() => objectValues(filterBarDefinition), [filterBarDefinition]);
-    const [filterBarConfig, setFilterBarConfig] = useState(() => {
+    const [initialStoredFilters] = useState(() => localStorage.getItem(`filter-${name}`) || "{}");
+    const loadData = useCallback((updatedFilterDefinitionsValues) => {
         let initialFilterBarConfig;
-        const storedFilters = localStorage.getItem(`filter-${name}`);
+        const storedFilters = initialStoredFilters;
         if (storedFilters && storedFilters !== "undefined") {
             const loadedFilterBarConfig = JSON.parse(storedFilters);
-            if (validateFilter(loadedFilterBarConfig, filterDefinitionsValues)) {
+            if (validateFilter(loadedFilterBarConfig, updatedFilterDefinitionsValues)) {
                 initialFilterBarConfig = {
                     ...loadedFilterBarConfig,
                     initialState: initialState || loadedFilterBarConfig.initialState,
@@ -1147,14 +1149,14 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
         //To do this for a changing default value as in customers and sites we would need to recreate the initialFilterBarConfig every time the default value changes.
         //This mean that filterbars that have this functionality wouldn't be able to save the state of the filterbar.
         //Another option would be to create a new filterbar for each customer or site. This also has its drawbacks. Would raise it with the frontend community.
-        const hasNonVisibleDefaultValues = filterDefinitionsValues.some(value => value.showInStarredMenu &&
+        const hasNonVisibleDefaultValues = updatedFilterDefinitionsValues.some(value => value.showInStarredMenu &&
             !value.showInStarredMenu() &&
             value.showInFilterBar &&
             !value.showInFilterBar() &&
             value.defaultValue?.toString &&
             value.defaultValue.toString().length > 0);
         if (initialFilterBarConfig === undefined || hasNonVisibleDefaultValues) {
-            initialFilterBarConfig = createInitialState(name, filterDefinitionsValues, initialState || {}, setValue);
+            initialFilterBarConfig = createInitialState(name, updatedFilterDefinitionsValues, initialState || {}, setValue);
         }
         // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
         Object.keys(initialFilterBarConfig.values).forEach(key => {
@@ -1162,6 +1164,28 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
             initialFilterBarConfig.setters[`set${capitalize(key)}`] = (callback) => setValue(key, callback);
         });
         return initialFilterBarConfig;
+    }, [initialState, name, setValue, initialStoredFilters]);
+    const dataLoaded = useCallback((loadedFilterDefinitionsValues) => {
+        if (!loadAsync) {
+            throw new Error("You must pass in loadAsync to useFilterBar when loading filter data asynchronously");
+        }
+        setInternalFilterBarDefinitions(loadedFilterDefinitionsValues);
+        setFilterBarConfig(prev => loadData(objectValues(loadedFilterDefinitionsValues)));
+    }, [loadAsync, loadData]);
+    const [filterBarConfig, setFilterBarConfig] = useState(() => {
+        let initialFilterBarConfig;
+        if (!loadAsync) {
+            initialFilterBarConfig = loadData(objectValues(internalFilterBarDefinitions));
+        }
+        else {
+            initialFilterBarConfig = createInitialState(name, objectValues(internalFilterBarDefinitions), initialState || {}, setValue);
+            // eslint-disable-next-line no-autofix/local-rules/prefer-custom-object-keys
+            Object.keys(initialFilterBarConfig.values).forEach(key => {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                initialFilterBarConfig.setters[`set${capitalize(key)}`] = (callback) => setValue(key, callback);
+            });
+        }
+        return initialFilterBarConfig;
     });
     useEffect(() => {
         onValuesChange?.(filterBarConfig.values);
@@ -1175,7 +1199,7 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
                 return filterBarConfig.name;
             },
             getFilterTitle(key) {
-                return filterBarDefinition[key]?.title ?? key;
+                return internalFilterBarDefinitions[key]?.title ?? key;
             },
             arrayIncludesValue(key, value) {
                 const filter = filterBarConfig.values[key];
@@ -1220,11 +1244,11 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
                 return filter?.value === value || false;
             },
         };
-    }, [filterBarConfig.initialState, filterBarConfig.name, filterBarConfig.values, filterBarDefinition]);
+    }, [filterBarConfig.initialState, filterBarConfig.name, filterBarConfig.values, internalFilterBarDefinitions]);
     const filterMapActions = useMemo(() => {
         // Reset an individual filter to its initial state
         const resetIndividualFilterToInitialState = (key) => {
-            const tmpInitialState = createInitialState(name, filterDefinitionsValues, initialState || {}, setValue);
+            const tmpInitialState = createInitialState(name, objectValues(internalFilterBarDefinitions), initialState || {}, setValue);
             setFilterBarConfig(prevState => {
                 return {
                     ...prevState,
@@ -1441,19 +1465,20 @@ const useFilterBar = ({ name, onValuesChange, filterBarDefinition, initialState,
                 setFilterBarConfig(prevState => {
                     return {
                         ...prevState,
-                        values: createInitialState(name, filterDefinitionsValues, initialState || {}, setValue).values,
+                        values: createInitialState(name, objectValues(internalFilterBarDefinitions), initialState || {}, setValue).values,
                     };
                 });
             },
             resetIndividualFilterToInitialState,
         };
-    }, [filterDefinitionsValues, initialState, name, setValue]);
+    }, [initialState, name, setValue, internalFilterBarDefinitions]);
     return useMemo(() => {
         return {
             filterBarConfig: { ...filterBarConfig, ...filterMapActions, ...filterMapGetter },
-            filterBarDefinition,
+            filterBarDefinition: internalFilterBarDefinitions,
+            dataLoaded,
         };
-    }, [filterBarConfig, filterMapActions, filterMapGetter, filterBarDefinition]);
+    }, [filterBarConfig, filterMapActions, filterMapGetter, internalFilterBarDefinitions, dataLoaded]);
 };
 const getKeysOfUnequalProperties = (obj1, obj2) => {
     return reduce(obj1, (result, value, key) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/filters-filter-bar",
-  "version": "1.0.59",
+  "version": "1.0.63",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,15 +14,15 @@
     "tailwind-merge": "^2.0.0",
     "string-ts": "^2.0.0",
     "zod": "3.22.4",
-    "@trackunit/react-components": "1.1.38",
-    "@trackunit/react-core-hooks": "1.0.37",
-    "@trackunit/react-filter-components": "1.0.59",
-    "@trackunit/react-date-and-time-components": "1.0.57",
-    "@trackunit/shared-utils": "1.2.29",
-    "@trackunit/react-form-components": "1.0.57",
-    "@trackunit/react-core-contexts-api": "1.0.37",
-    "@trackunit/geo-json-utils": "1.0.33",
-    "@trackunit/i18n-library-translation": "1.0.41"
+    "@trackunit/react-components": "1.1.42",
+    "@trackunit/react-core-hooks": "1.0.41",
+    "@trackunit/react-filter-components": "1.0.63",
+    "@trackunit/react-date-and-time-components": "1.0.61",
+    "@trackunit/shared-utils": "1.2.33",
+    "@trackunit/react-form-components": "1.0.61",
+    "@trackunit/react-core-contexts-api": "1.0.41",
+    "@trackunit/geo-json-utils": "1.0.37",
+    "@trackunit/i18n-library-translation": "1.0.45"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/lib/hooks/useFilterBar.d.ts

@@ -16,6 +16,10 @@ export interface FilterBarProps<TFilterBarDefinition extends FilterBarDefinition
      * The filters that should potentially be used in the filter bar
      */
     filterBarDefinition: TFilterBarDefinition;
+    /**
+     * Whether the filter bar should be loaded asynchronously
+     */
+    loadAsync?: boolean;
 }
 /**
  * Custom hook for managing a filter bar's state and actions.
@@ -23,7 +27,7 @@ export interface FilterBarProps<TFilterBarDefinition extends FilterBarDefinition
  * @template TFilterBarDefinition - A generic type for the filter bar definition.
  * @returns {object} An object containing filter bar configuration and actions.
  */
-export declare const useFilterBar: <TFilterBarDefinition extends FilterBarDefinition>({ name, onValuesChange, filterBarDefinition, initialState, }: FilterBarProps<TFilterBarDefinition>) => {
+export declare const useFilterBar: <TFilterBarDefinition extends FilterBarDefinition>({ name, onValuesChange, filterBarDefinition, initialState, loadAsync, }: FilterBarProps<TFilterBarDefinition>) => {
     filterBarConfig: {
         getFilterTitle: (key: string) => string;
         getFilterBarName: () => string;
@@ -56,4 +60,5 @@ export declare const useFilterBar: <TFilterBarDefinition extends FilterBarDefini
         setters: import("../types/FilterTypes").FilterStateSetters<TFilterBarDefinition>;
     };
     filterBarDefinition: TFilterBarDefinition;
+    dataLoaded: <TFilterBarDefinitionExtended extends TFilterBarDefinition>(loadedFilterDefinitionsValues: TFilterBarDefinitionExtended) => void;
 };