@evoke-platform/ui-components 1.4.0-testing.16 → 1.4.0-testing.18

package/dist/published/components/custom/CriteriaBuilder/CriteriaBuilder.js

@@ -2,7 +2,7 @@ import { AddRounded, UnfoldMore } from '@mui/icons-material';
 import { Typography } from '@mui/material';
 import { QueryBuilderMaterial } from '@react-querybuilder/material';
 import { isArray, isEmpty, startCase } from 'lodash';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { QueryBuilder, RuleGroupBodyComponents, RuleGroupHeaderComponents, TestID, add, defaultRuleProcessorMongoDB, formatQuery, useRuleGroup, } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
 import escape from 'string-escape-regex';
@@ -266,9 +266,8 @@ export const valueEditor = (props) => {
 };
 const CriteriaBuilder = (props) => {
     const { properties, criteria, setCriteria, originalCriteria, enablePresetValues, presetValues, operators, disabled, disabledCriteria, hideBorder, presetGroupLabel, customValueEditor, treeViewOpts, disableRegexEscapeChars, } = props;
-    const [query, setQuery] = useState(undefined);
     const [propertyTreeMap, setPropertyTreeMap] = useState();
-    const processRules = useCallback((rules, isSavedValue) => {
+    const processRules = (rules, isSavedValue) => {
         return rules.map((rule) => {
             if ('rules' in rule) {
                 return {
@@ -295,46 +294,68 @@ const CriteriaBuilder = (props) => {
                 };
             }
         });
-    }, [properties]);
-    // this retrieves the properties from a treeview for each property in the query
-    // they are then used in the custom query builder components to determine the input type etc
-    const updatePropertyTreeMap = useCallback((q) => {
-        const ids = [];
-        const traverseRulesForIds = (rules) => {
-            rules.forEach((rule) => {
-                if ('rules' in rule) {
-                    traverseRulesForIds(rule.rules);
-                }
-                else {
-                    ids.push(rule.field);
-                }
-            });
-        };
-        traverseRulesForIds(q.rules);
-        const tempPropertyMap = { ...propertyTreeMap };
-        ids.forEach(async (id) => {
-            if (!propertyTreeMap?.[id] && treeViewOpts?.object && treeViewOpts?.fetchObject) {
-                const prop = await traversePropertyPath(id, treeViewOpts?.object, treeViewOpts?.fetchObject);
-                if (prop)
-                    tempPropertyMap[id] = prop;
-            }
-            setPropertyTreeMap(tempPropertyMap);
-        });
-    }, [treeViewOpts, propertyTreeMap]);
+    };
     useEffect(() => {
-        if (criteria || originalCriteria) {
-            const criteriaToParse = criteria || originalCriteria || {};
-            const updatedQuery = parseMongoDB(criteriaToParse);
-            !isEmpty(treeViewOpts) && updatePropertyTreeMap(updatedQuery);
-            setQuery({
+        if ((criteria || originalCriteria) &&
+            !isEmpty(treeViewOpts) &&
+            treeViewOpts.object &&
+            treeViewOpts.fetchObject) {
+            const { object, fetchObject } = treeViewOpts;
+            // this retrieves the properties from a treeview for each property in the query
+            // they are then used in the custom query builder components to determine the input type etc
+            const updatePropertyTreeMap = async () => {
+                const newQuery = parseMongoDB(criteria || originalCriteria || {});
+                const ids = [];
+                const traverseRulesForIds = (rules) => {
+                    rules.forEach((rule) => {
+                        if ('rules' in rule) {
+                            traverseRulesForIds(rule.rules);
+                        }
+                        else {
+                            ids.push(rule.field);
+                        }
+                    });
+                };
+                traverseRulesForIds(newQuery.rules);
+                let newPropertyTreeMap = {};
+                const newPropertyTreeMapPromises = [];
+                for (const id of ids) {
+                    if (!propertyTreeMap?.[id]) {
+                        newPropertyTreeMapPromises.push(traversePropertyPath(id, object, fetchObject)
+                            .then((property) => {
+                            if (property) {
+                                return {
+                                    [id]: property,
+                                };
+                            }
+                            return {};
+                        })
+                            .catch((err) => {
+                            console.error(err);
+                            return {};
+                        }));
+                    }
+                }
+                newPropertyTreeMap = (await Promise.all(newPropertyTreeMapPromises)).reduce((acc, currentProperty) => ({ ...acc, ...currentProperty }), {});
+                setPropertyTreeMap((prevPropertyTreeMap) => ({
+                    ...prevPropertyTreeMap,
+                    ...newPropertyTreeMap,
+                }));
+            };
+            updatePropertyTreeMap().catch((err) => console.error(err));
+        }
+    }, [criteria, originalCriteria, treeViewOpts]);
+    const initializeQuery = () => {
+        const criteriaToParse = criteria || originalCriteria;
+        const updatedQuery = criteriaToParse ? parseMongoDB(criteriaToParse || {}) : undefined;
+        return updatedQuery
+            ? {
                 ...updatedQuery,
                 rules: processRules(updatedQuery.rules, true),
-            });
-        }
-        else {
-            setQuery({ combinator: 'and', rules: [] });
-        }
-    }, [criteria, originalCriteria, treeViewOpts, processRules, updatePropertyTreeMap]);
+            }
+            : { combinator: 'and', rules: [] };
+    };
+    const [query, setQuery] = useState(initializeQuery);
     const handleClearAll = () => {
         handleQueryChange({ combinator: 'and', rules: [] });
     };

package/dist/published/components/custom/CriteriaBuilder/utils.js

@@ -246,14 +246,14 @@ export function parseMongoDB(mongoQuery) {
             return {
                 field: key,
                 operator: 'in',
-                value: (value.$in || []).join(','),
+                value: value.$in ?? [],
             };
         }
         else if ('$nin' in value) {
             return {
                 field: key,
                 operator: 'notIn',
-                value: (value.$nin || []).join(','),
+                value: value.$nin ?? [],
             };
         }
         else {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.4.0-testing.16",
+    "version": "1.4.0-testing.18",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",