From 5247265500d49c56ead7d414e8d4aacd9da35b9d Mon Sep 17 00:00:00 2001
From: Arpit <arpitnath42@gmail.com>
Date: Tue, 14 Dec 2021 16:47:11 +0530
Subject: [PATCH] [improvement] Widget components #1475 - text widget (#1485)

* new implementation/text-widget

* fixed loading state

* resolved
---
 frontend/src/Editor/Components/Text.jsx | 59 +++++--------------------
 1 file changed, 12 insertions(+), 47 deletions(-)

diff --git a/frontend/src/Editor/Components/Text.jsx b/frontend/src/Editor/Components/Text.jsx
index 9c93fd788b..7d65404f34 100644
--- a/frontend/src/Editor/Components/Text.jsx
+++ b/frontend/src/Editor/Components/Text.jsx
@@ -1,66 +1,31 @@
 import React, { useState, useEffect } from 'react';
-import { resolveReferences, resolveWidgetFieldValue } from '@/_helpers/utils';
 import DOMPurify from 'dompurify';
 
-export const Text = function Text({ id, height, component, onComponentClick, currentState }) {
-  const text = component.definition.properties.text.value;
-  const color = component.definition.styles.textColor.value;
-  const widgetVisibility = component.definition.styles?.visibility?.value ?? true;
-  const disabledState = component.definition.styles?.disabledState?.value ?? false;
-
-  const parsedDisabledState =
-    typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState;
-
+export const Text = function Text({ height, properties, styles }) {
   const [loadingState, setLoadingState] = useState(false);
 
+  const { textColor, visibility, disabledState } = styles;
+  const text = properties.text ?? '';
+  const color = textColor;
+
   useEffect(() => {
-    const loadingStateProperty = component.definition.properties.loadingState;
-    if (loadingStateProperty && currentState) {
-      const newState = resolveReferences(loadingStateProperty.value, currentState, false);
-      setLoadingState(newState);
+    const loadingStateProperty = properties.loadingState;
+    if (loadingStateProperty) {
+      setLoadingState(loadingStateProperty);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentState]);
-
-  let data = text;
-  if (currentState) {
-    const matchedParams = text.match(/\{\{(.*?)\}\}/g);
-
-    if (matchedParams) {
-      for (const param of matchedParams) {
-        const resolvedParam = resolveReferences(param, currentState, '');
-        console.log('resolved param', param, resolvedParam);
-        data = data.replace(param, resolvedParam);
-      }
-    }
-  }
-
-  let parsedWidgetVisibility = widgetVisibility;
-
-  try {
-    parsedWidgetVisibility = resolveReferences(parsedWidgetVisibility, currentState, []);
-  } catch (err) {
-    console.log(err);
-  }
+  }, [properties.loadingState]);
 
   const computedStyles = {
     color,
     height,
-    display: parsedWidgetVisibility ? 'flex' : 'none',
+    display: visibility ? 'flex' : 'none',
     alignItems: 'center',
   };
 
   return (
-    <div
-      data-disabled={parsedDisabledState}
-      className="text-widget"
-      style={computedStyles}
-      onClick={(event) => {
-        event.stopPropagation();
-        onComponentClick(id, component, event);
-      }}
-    >
-      {!loadingState && <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(data) }} />}
+    <div data-disabled={disabledState} className="text-widget" style={computedStyles}>
+      {!loadingState && <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(text) }} />}
       {loadingState === true && (
         <div>
           <div className="skeleton-line w-10"></div>