useEffect loop fixxed

Author: RafaelGB

src/cdm/ComponentsModel.ts

@@ -18,7 +18,7 @@ export type CellComponentProps = {
 }
 
 export type EditorCellComponentProps = {
-    persistChange: (changedValue: string) => void;
+    persistChange: (changedValue: string) => Promise<void>;
     textCell: string;
 } & CellComponentProps;
 

src/components/cellTypes/Editor/RelationEditor.tsx

@@ -8,6 +8,7 @@ import { recordRowsFromRelation } from "helpers/RelationHelper";
 import { TableColumn } from "cdm/FolderModel";
 import { Link } from "obsidian-dataview";
 import { OnChangeValue } from "react-select";
+import { StyleVariables } from "helpers/Constants";
 
 const RelationEditor = (props: RelationEditorComponentProps) => {
   const { defaultCell, persistChange, relationCell } = props;
@@ -22,7 +23,7 @@ const RelationEditor = (props: RelationEditorComponentProps) => {
       ? relationCell.map((link: Link) => ({
           label: link.fileName(),
           value: link.path,
-          color: "var(--text-normal)",
+          color: StyleVariables.TEXT_NORMAL,
         }))
       : []
   );
@@ -33,7 +34,7 @@ const RelationEditor = (props: RelationEditorComponentProps) => {
     const arrayTags = newValue.map((tag) => ({
       label: tag.value,
       value: tag.value,
-      color: "var(--text-normal)",
+      color: StyleVariables.TEXT_NORMAL,
     }));
     setRelationValue(arrayTags);
   };
@@ -54,7 +55,7 @@ const RelationEditor = (props: RelationEditorComponentProps) => {
     const multiOptions = Object.entries(relationRows).map(([key, value]) => ({
       label: value,
       value: key,
-      color: "var(--text-normal)",
+      color: StyleVariables.TEXT_NORMAL,
     }));
 
     setRelationOptions(multiOptions);

src/components/cellTypes/FormulaCell.tsx

@@ -29,39 +29,47 @@ const FormulaCell = (mdProps: CellComponentProps) => {
 
   useEffect(() => {
     if (formulaRef.current !== null) {
-      formulaRef.current.innerHTML = "";
+      const effectCallback = async () => {
+        formulaRef.current.innerHTML = "";
 
-      const formulaResponse = formulaInfo
-        .runFormula(
-          tableColumn.config.formula_query,
-          formulaRow,
-          configInfo.getLocalSettings()
-        )
-        .toString();
-
-      renderMarkdown(defaultCell, formulaResponse, formulaRef.current, 5);
+        const formulaResponse = formulaInfo
+          .runFormula(
+            tableColumn.config.formula_query,
+            formulaRow,
+            configInfo.getLocalSettings()
+          )
+          .toString();
 
-      // Save formula response on disk
-      if (
-        tableColumn.config.persist_formula &&
-        formulaCell !== formulaResponse
-      ) {
-        const newCell = ParseService.parseRowToLiteral(
-          formulaRow,
-          tableColumn,
-          formulaResponse
+        await renderMarkdown(
+          defaultCell,
+          formulaResponse,
+          formulaRef.current,
+          5
         );
 
-        dataActions.updateCell(
-          row.index,
-          tableColumn,
-          newCell,
-          columnsInfo.getAllColumns(),
-          configInfo.getLocalSettings()
-        );
-      }
+        // Save formula response on disk
+        if (
+          tableColumn.config.persist_formula &&
+          formulaCell !== formulaResponse
+        ) {
+          const newCell = ParseService.parseRowToLiteral(
+            formulaRow,
+            tableColumn,
+            formulaResponse
+          );
+
+          await dataActions.updateCell(
+            row.index,
+            tableColumn,
+            newCell,
+            columnsInfo.getAllColumns(),
+            configInfo.getLocalSettings()
+          );
+        }
+      };
+      effectCallback();
     }
-  }, [row]);
+  }, [formulaRow]);
   return (
     <span
       ref={formulaRef}

src/components/cellTypes/TextCell.tsx

@@ -54,7 +54,7 @@ const TextCell = (props: CellComponentProps) => {
     setDirtyCell(true);
   };
 
-  const persistChange = (changedValue: string) => {
+  const persistChange = async (changedValue: string) => {
     changedValue = changedValue.trim();
     if (changedValue !== undefined && changedValue !== textCell) {
       const newCell = ParseService.parseRowToLiteral(
@@ -63,7 +63,7 @@ const TextCell = (props: CellComponentProps) => {
         changedValue
       );
 
-      dataActions.updateCell(
+      await dataActions.updateCell(
         row.index,
         tableColumn,
         newCell,

src/components/styles/RowTemplateStyles.ts

@@ -1,9 +1,10 @@
+import { StyleVariables } from "helpers/Constants";
 import { GroupBase, StylesConfig } from "react-select";
 
 const CustomTemplateSelectorStyles: StylesConfig<any, true, GroupBase<any>> = {
     singleValue: (styles) => ({
         ...styles,
-        color: 'var(--text-normal)',
+        color: StyleVariables.TEXT_NORMAL,
         width: "max-content",
         minWidth: "100%",
         border: 0
@@ -12,16 +13,16 @@ const CustomTemplateSelectorStyles: StylesConfig<any, true, GroupBase<any>> = {
     option: (styles, { data, isDisabled, isFocused, isSelected }) => {
         return {
             ...styles,
-            color: 'var(--text-normal)',
-            backgroundColor: 'var(--background-primary)',
+            color: StyleVariables.TEXT_NORMAL,
+            backgroundColor: StyleVariables.BACKGROUND_PRIMARY,
             textAlign: 'left',
         }
     },
     control: (styles) => {
         return {
             ...styles,
-            color: 'var(--text-normal)',
-            backgroundColor: 'var(--background-primary)',
+            color: StyleVariables.TEXT_NORMAL,
+            backgroundColor: StyleVariables.BACKGROUND_PRIMARY,
             textAlign: 'left',
             height: "max-content",
             maxHeight: "30px",

src/services/ParseService.ts

@@ -111,7 +111,8 @@ class Parse {
                 const source = generateLiteral(column.nestedKey, newValue);
                 return deepMerge(source, target);
             } catch (e) {
-                // Just return the original value
+                LOGGER.error(`Error parsing row to literal: ${e}`);
+                newValue = "";
             }
         }
         return newValue;