From 9637d561fba1cd9ef7259a099ae2ef1bcef10275 Mon Sep 17 00:00:00 2001
From: Arpit <arpitnath42@gmail.com>
Date: Wed, 17 Jul 2024 13:53:45 +0530
Subject: [PATCH] fixes: component property value after a delay (#520)

---
 .../Editor/ControlledComponentToRender.jsx    |  2 +
 frontend/src/_stores/utils.js                 | 44 +++++++++++--------
 2 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/frontend/src/Editor/ControlledComponentToRender.jsx b/frontend/src/Editor/ControlledComponentToRender.jsx
index b2bb76f56d..4a9664bf5a 100644
--- a/frontend/src/Editor/ControlledComponentToRender.jsx
+++ b/frontend/src/Editor/ControlledComponentToRender.jsx
@@ -33,6 +33,8 @@ export const shouldUpdate = (prevProps, nextProps) => {
     deepEqualityCheckusingLoDash(prevProps?.id, nextProps?.id) &&
     deepEqualityCheckusingLoDash(prevProps?.component?.definition, nextProps?.component?.definition) &&
     deepEqualityCheckusingLoDash(prevProps?.customResolvables, nextProps?.customResolvables) &&
+    deepEqualityCheckusingLoDash(prevProps?.properties, nextProps?.properties) &&
+    deepEqualityCheckusingLoDash(prevProps?.styles, nextProps?.styles) &&
     prevProps?.width === nextProps?.width &&
     prevProps?.height === nextProps?.height &&
     prevProps?.darkMode === nextProps?.darkMode &&
diff --git a/frontend/src/_stores/utils.js b/frontend/src/_stores/utils.js
index 95d778455a..cb5051eab7 100644
--- a/frontend/src/_stores/utils.js
+++ b/frontend/src/_stores/utils.js
@@ -449,29 +449,37 @@ function containsBracketNotation(queryString) {
 }
 
 export function findAllEntityReferences(node, allRefs) {
+  const extractReferencesFromString = (str) => {
+    const regex = /{{(components|queries)\.[^{}]*}}/g;
+    const matches = str.match(regex);
+    if (matches) {
+      matches.forEach((match) => {
+        const ref = match.replace('{{', '').replace('}}', '');
+        const entityName = ref.split('.')[1];
+        allRefs.push(entityName);
+      });
+    }
+  };
+
   if (typeof node === 'object') {
     for (let key in node) {
       const value = node[key];
-      if (typeof value === 'string' && containsBracketNotation(value)) {
-        //skip if the value is a bracket notation
 
-        break;
-      }
+      if (typeof value === 'string') {
+        if (containsBracketNotation(value)) {
+          // Skip if the value is a bracket notation
+          break;
+        }
 
-      if (
-        typeof value === 'string' &&
-        value.includes('{{') &&
-        value.includes('}}') &&
-        (value.startsWith('{{components') || value.startsWith('{{queries'))
-      ) {
-        const referenceExists = value;
-
-        if (referenceExists) {
-          const ref = value.replace('{{', '').replace('}}', '');
-
-          const entityName = ref.split('.')[1];
-
-          allRefs.push(entityName);
+        if (
+          value.includes('{{') &&
+          value.includes('}}') &&
+          (value.startsWith('{{components') || value.startsWith('{{queries'))
+        ) {
+          extractReferencesFromString(value);
+        } else {
+          // Handle cases where references are embedded within strings
+          extractReferencesFromString(value);
         }
       } else if (typeof value === 'object') {
         findAllEntityReferences(value, allRefs);