From 313ccbe11ed37b73b423b5319c177816837279f5 Mon Sep 17 00:00:00 2001
From: Juan Luis Santana <juanluis@near.org>
Date: Thu, 4 Jan 2024 17:28:22 -0500
Subject: [PATCH 01/15] remove side effects from reformatAll function

---
 frontend/src/components/Editor/Editor.jsx | 2 --
 frontend/src/utils/validators.js          | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/components/Editor/Editor.jsx b/frontend/src/components/Editor/Editor.jsx
index 5efbb3b07..11cfabb3d 100644
--- a/frontend/src/components/Editor/Editor.jsx
+++ b/frontend/src/components/Editor/Editor.jsx
@@ -248,8 +248,6 @@ const Editor = ({
       console.error(error);
       setError("Could not format your SQL schema. Make sure it is proper SQL DDL");
     }
-    setIndexingCode(formattedCode);
-    setSchema(formattedSql);
     return { formattedCode, formattedSql }
   };
 
diff --git a/frontend/src/utils/validators.js b/frontend/src/utils/validators.js
index 73bae1e65..901d54bdc 100644
--- a/frontend/src/utils/validators.js
+++ b/frontend/src/utils/validators.js
@@ -32,6 +32,6 @@ export async function validateSQLSchema(schema) {
   } catch (error) {
 
     console.error(error.message)
-    return { data: null, error };
+    return { data: schema, error };
   }
 };
\ No newline at end of file

From d333b84b853ce30647257287654f2e71c803eebf Mon Sep 17 00:00:00 2001
From: Juan Luis Santana <juanluis@near.org>
Date: Thu, 4 Jan 2024 17:55:06 -0500
Subject: [PATCH 02/15] refactor: make codeValidation reusable and separate
 concerns in reformatAll function

---
 frontend/src/components/Editor/Editor.jsx | 36 ++++++++++++-----------
 frontend/src/utils/validators.js          | 14 ++++++++-
 2 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/Editor/Editor.jsx b/frontend/src/components/Editor/Editor.jsx
index 11cfabb3d..efcf80e9a 100644
--- a/frontend/src/components/Editor/Editor.jsx
+++ b/frontend/src/components/Editor/Editor.jsx
@@ -22,7 +22,7 @@ import { ForkIndexerModal } from "../Modals/ForkIndexerModal";
 import { getLatestBlockHeight } from "../../utils/getLatestBlockHeight";
 import { IndexerDetailsContext } from '../../contexts/IndexerDetailsContext';
 import { PgSchemaTypeGen } from "../../utils/pgSchemaTypeGen";
-import { validateSQLSchema } from "@/utils/validators";
+import { validateJSCode, validateSQLSchema } from "@/utils/validators";
 
 const BLOCKHEIGHT_LIMIT = 3600;
 
@@ -217,7 +217,9 @@ const Editor = ({
           setSchema(unformatted_schema);
         }
 
-        reformatAll(unformatted_wrapped_indexing_code, unformatted_schema);
+        const { formattedCode, formattedSchema } = reformatAll(unformatted_wrapped_indexing_code, unformatted_schema);
+        setIndexingCode(formattedCode);
+        setSchema(formattedSchema);
       } catch (formattingError) {
         console.log(formattingError);
       }
@@ -232,23 +234,21 @@ const Editor = ({
   };
 
   const reformatAll = (indexingCode, schema) => {
-    let formattedCode = indexingCode
-    let formattedSql = schema;
-    try {
-      formattedCode = formatIndexingCode(indexingCode);
-      setError(undefined);
-    } catch (error) {
-      console.error("error", error)
+    let { formattedCode, codeError } = validateJSCode(indexingCode);
+
+    if (codeError) {
+      formattedCode = indexingCode
       setError("Oh snap! We could not format your code. Make sure it is proper Javascript code.");
     }
-    try {
-      formattedSql = formatSQL(schema);
-      setError(undefined);
-    } catch (error) {
-      console.error(error);
-      setError("Could not format your SQL schema. Make sure it is proper SQL DDL");
+
+    let { data: formattedSchema, error: schemaError } = validateSQLSchema(schema);
+
+    if (schemaError) {
+      formattedSchema = schema;
+      setError("There was an error in your SQL schema. Make sure it is proper SQL DDL");
     }
-    return { formattedCode, formattedSql }
+
+    return { formattedCode, formattedSchema }
   };
 
   function handleCodeGen() {
@@ -263,7 +263,9 @@ const Editor = ({
   }
 
   async function handleFormating() {
-    await reformatAll(indexingCode, schema);
+    const { formattedCode, formattedSchema } = await reformatAll(indexingCode, schema);
+    setIndexingCode(formattedCode);
+    setSchema(formattedSchema);
   }
 
   function handleEditorMount(editor) {
diff --git a/frontend/src/utils/validators.js b/frontend/src/utils/validators.js
index 901d54bdc..397425cdb 100644
--- a/frontend/src/utils/validators.js
+++ b/frontend/src/utils/validators.js
@@ -1,4 +1,4 @@
-import { formatSQL } from "./formatters";
+import { formatIndexingCode, formatSQL } from "./formatters";
 import { PgSchemaTypeGen } from "./pgSchemaTypeGen";
 import { CONTRACT_NAME_REGEX } from '../constants/RegexExp';
 
@@ -31,6 +31,18 @@ export async function validateSQLSchema(schema) {
     return { data: formattedSchema, error: null }
   } catch (error) {
 
+    console.error(error.message)
+    return { data: schema, error };
+  }
+};
+
+export async function validateJSCode(code) {
+
+  try {
+    const formattedCode = await formatIndexingCode(code);
+    return { data: formattedCode, error: null }
+
+  } catch (error) {
     console.error(error.message)
     return { data: schema, error };
   }

From efb5bde7cd1a375e4ecc54825dbf48ea5bf19e03 Mon Sep 17 00:00:00 2001
From: Juan Luis Santana <juanluis@near.org>
Date: Thu, 4 Jan 2024 18:35:37 -0500
Subject: [PATCH 03/15] refactor: separate concern con useEffect, and react
 separately to changes on the indexerDetails object. - Show the schema even if
 it fails the validations

---
 frontend/src/components/Editor/Editor.jsx | 41 ++++++++++++-----------
 frontend/src/utils/validators.js          |  4 +++
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/Editor/Editor.jsx b/frontend/src/components/Editor/Editor.jsx
index efcf80e9a..464d0f1b5 100644
--- a/frontend/src/components/Editor/Editor.jsx
+++ b/frontend/src/components/Editor/Editor.jsx
@@ -83,13 +83,28 @@ const Editor = ({
   const disposableRef = useRef(null);
 
   useEffect(() => {
-    if (!indexerDetails.code || !indexerDetails.schema) return
-    const { formattedCode, formattedSchema } = reformatAll(indexerDetails.code, indexerDetails.schema)
-    setOriginalSQLCode(formattedSchema)
-    setOriginalIndexingCode(formattedCode)
-    setIndexingCode(formattedCode)
-    setSchema(formattedSchema)
-  }, [indexerDetails.code, indexerDetails.schema]);
+    if (!indexerDetails.code) {
+      const { data: formattedCode, error } = validateJSCode(indexerDetails.code)
+
+      if (error) {
+        setError("There was an error while formatting your code. Please check the console for more details")
+      }
+      setOriginalIndexingCode(formattedCode)
+      setIndexingCode(formattedCode)
+    }
+  }, [indexerDetails.code]);
+
+  useEffect(() => {
+    if (indexerDetails.schema) {
+      const { data: formattedSchema, error } = validateSQLSchema(indexerDetails.schema);
+
+      if (error) {
+        setError("There was an error in your schema. Please check the console for more details")
+      }
+
+      setSchema(formattedSchema)
+    }
+  }, [indexerDetails.schema])
 
   useEffect(() => {
     const savedSchema = localStorage.getItem(SCHEMA_STORAGE_KEY);
@@ -116,18 +131,6 @@ const Editor = ({
     return blockHeight
   }
 
-  useEffect(() => {
-    if (fileName === "indexingLogic.js") {
-      try {
-        setSchemaTypes(pgSchemaTypeGen.generateTypes(schema));
-        setError(undefined);
-      } catch (error) {
-        console.error("Error generating types for saved schema.\n", error.message);
-        setError("There was an error with your schema. Check the console for more details.");
-      }
-    }
-  }, [fileName]);
-
   useEffect(() => {
     localStorage.setItem(DEBUG_LIST_STORAGE_KEY, heights);
   }, [heights]);
diff --git a/frontend/src/utils/validators.js b/frontend/src/utils/validators.js
index 397425cdb..abcba2cfa 100644
--- a/frontend/src/utils/validators.js
+++ b/frontend/src/utils/validators.js
@@ -22,6 +22,8 @@ export function validateContractIds(accountIds) {
  * @returns {{ data: string | null, error: string | null }} - An object containing the formatted schema and error (if any).
  */
 export async function validateSQLSchema(schema) {
+  if (!schema) return { data: null, error: null };
+
   const pgSchemaTypeGen = new PgSchemaTypeGen();
 
   try {
@@ -38,6 +40,8 @@ export async function validateSQLSchema(schema) {
 
 export async function validateJSCode(code) {
 
+  if (!code) return { data: null, error: null };
+
   try {
     const formattedCode = await formatIndexingCode(code);
     return { data: formattedCode, error: null }

From e43d57e5be5e6c9e27bdd9b865c5ec7ef59090b9 Mon Sep 17 00:00:00 2001
From: Juan Luis Santana <juanluis@near.org>
Date: Thu, 4 Jan 2024 18:45:10 -0500
Subject: [PATCH 04/15] fix: remove dead code

---
 frontend/src/components/Editor/Editor.jsx           | 13 -------------
 .../src/components/Editor/ResizableLayoutEditor.jsx |  1 -
 2 files changed, 14 deletions(-)

diff --git a/frontend/src/components/Editor/Editor.jsx b/frontend/src/components/Editor/Editor.jsx
index 464d0f1b5..afd9ecc27 100644
--- a/frontend/src/components/Editor/Editor.jsx
+++ b/frontend/src/components/Editor/Editor.jsx
@@ -271,18 +271,6 @@ const Editor = ({
     setSchema(formattedSchema);
   }
 
-  function handleEditorMount(editor) {
-    const modifiedEditor = editor.getModifiedEditor();
-    modifiedEditor.onDidChangeModelContent((_) => {
-      if (fileName == "indexingLogic.js") {
-        setIndexingCode(modifiedEditor.getValue());
-      }
-      if (fileName == "schema.sql") {
-        setSchema(modifiedEditor.getValue());
-      }
-    });
-  }
-
   function handleEditorWillMount(monaco) {
     monaco.languages.typescript.typescriptDefaults.addExtraLib(
       `${primitives}}`,
@@ -401,7 +389,6 @@ const Editor = ({
             schema={schema}
             isCreateNewIndexer={isCreateNewIndexer}
             handleEditorWillMount={handleEditorWillMount}
-            handleEditorMount={handleEditorMount}
           />
         </div>
       </>}
diff --git a/frontend/src/components/Editor/ResizableLayoutEditor.jsx b/frontend/src/components/Editor/ResizableLayoutEditor.jsx
index 324ec7721..1d125fc19 100644
--- a/frontend/src/components/Editor/ResizableLayoutEditor.jsx
+++ b/frontend/src/components/Editor/ResizableLayoutEditor.jsx
@@ -48,7 +48,6 @@ const ResizableEditor = ({
   schema,
   indexingCode,
   handleEditorWillMount,
-  handleEditorMount,
   isCreateNewIndexer
 }) => {
   const { firstRef, secondRef, dragBarRef } = useDragResize({

From fabed5c879b950f72c6cb8fe0c20421062d87bf8 Mon Sep 17 00:00:00 2001
From: Juan Luis Santana <juanluis@near.org>
Date: Thu, 4 Jan 2024 18:48:08 -0500
Subject: [PATCH 05/15] refactor: Replace requestLatestBlockHeight with direct
 getLatestBlockHeight call

---
 frontend/src/components/Editor/Editor.jsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/frontend/src/components/Editor/Editor.jsx b/frontend/src/components/Editor/Editor.jsx
index afd9ecc27..389ee1c0d 100644
--- a/frontend/src/components/Editor/Editor.jsx
+++ b/frontend/src/components/Editor/Editor.jsx
@@ -126,11 +126,6 @@ const Editor = ({
     attachTypesToMonaco();
   }, [schemaTypes, monacoMount]);
 
-  const requestLatestBlockHeight = async () => {
-    const blockHeight = getLatestBlockHeight()
-    return blockHeight
-  }
-
   useEffect(() => {
     localStorage.setItem(DEBUG_LIST_STORAGE_KEY, heights);
   }, [heights]);
@@ -297,7 +292,7 @@ const Editor = ({
         await indexerRunner.start(startingBlockHeight, indexingCode, schema, schemaName, option)
         break
       case "latest":
-        const latestHeight = await requestLatestBlockHeight()
+        const latestHeight = getLatestBlockHeight();
         if (latestHeight) await indexerRunner.start(latestHeight - 10, indexingCode, schema, schemaName, option)
     }
     setIsExecutingIndexerFunction(() => false)

From ae8315e32b2601faa4f4f0aa3abc231b081c4fa1 Mon Sep 17 00:00:00 2001
From: Juan Luis Santana <juanluis@near.org>
Date: Thu, 4 Jan 2024 18:48:08 -0500
Subject: [PATCH 06/15] refactor: Replace requestLatestBlockHeight with direct
 getLatestBlockHeight call

---
 frontend/src/components/Editor/Editor.jsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/frontend/src/components/Editor/Editor.jsx b/frontend/src/components/Editor/Editor.jsx
index afd9ecc27..f7315d87f 100644
--- a/frontend/src/components/Editor/Editor.jsx
+++ b/frontend/src/components/Editor/Editor.jsx
@@ -126,11 +126,6 @@ const Editor = ({
     attachTypesToMonaco();
   }, [schemaTypes, monacoMount]);
 
-  const requestLatestBlockHeight = async () => {
-    const blockHeight = getLatestBlockHeight()
-    return blockHeight
-  }
-
   useEffect(() => {
     localStorage.setItem(DEBUG_LIST_STORAGE_KEY, heights);
   }, [heights]);
@@ -297,7 +292,7 @@ const Editor = ({
         await indexerRunner.start(startingBlockHeight, indexingCode, schema, schemaName, option)
         break
       case "latest":
-        const latestHeight = await requestLatestBlockHeight()
+        const latestHeight = await getLatestBlockHeight();
         if (latestHeight) await indexerRunner.start(latestHeight - 10, indexingCode, schema, schemaName, option)
     }
     setIsExecutingIndexerFunction(() => false)

From 1dcdb3b636ac68efe77678c8d0ee210b8d238a99 Mon Sep 17 00:00:00 2001
From: Juan Luis Santana <juanluis@near.org>
Date: Thu, 4 Jan 2024 19:41:29 -0500
Subject: [PATCH 07/15] refactor: only validate schemas different from the
 default

---
 frontend/src/components/Editor/Editor.jsx | 65 +++++++++++++++--------
 frontend/src/utils/validators.js          |  8 ++-
 2 files changed, 48 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/Editor/Editor.jsx b/frontend/src/components/Editor/Editor.jsx
index f7315d87f..aad67d8dc 100644
--- a/frontend/src/components/Editor/Editor.jsx
+++ b/frontend/src/components/Editor/Editor.jsx
@@ -83,29 +83,49 @@ const Editor = ({
   const disposableRef = useRef(null);
 
   useEffect(() => {
-    if (!indexerDetails.code) {
-      const { data: formattedCode, error } = validateJSCode(indexerDetails.code)
+    if (indexerDetails.code != null) {
+      (async () => {
+        const { data: formattedCode, error: codeError } = await validateJSCode(indexerDetails.code)
 
-      if (error) {
-        setError("There was an error while formatting your code. Please check the console for more details")
-      }
-      setOriginalIndexingCode(formattedCode)
-      setIndexingCode(formattedCode)
+        if (codeError) {
+          setError("There was an error while formatting your code. Please check the console for more details")
+        }
+
+        setOriginalIndexingCode(formattedCode)
+        setIndexingCode(formattedCode)
+      })()
     }
+
   }, [indexerDetails.code]);
 
   useEffect(() => {
-    if (indexerDetails.schema) {
-      const { data: formattedSchema, error } = validateSQLSchema(indexerDetails.schema);
-
-      if (error) {
-        setError("There was an error in your schema. Please check the console for more details")
-      }
+    if (indexerDetails.schema != null) {
+      (async () => {
+        const { data: formattedSchema, error: schemaError } = await validateSQLSchema(indexerDetails.schema);
+        if (schemaError) {
+          setError("There was an error in your schema. Please check the console for more details")
+        }
 
-      setSchema(formattedSchema)
+        setSchema(formattedSchema)
+      })();
     }
   }, [indexerDetails.schema])
 
+  useEffect(() => {
+    (async () => {
+      if (fileName === 'indexingLogic.js') {
+        const { _, error: schemaError } = await validateSQLSchema(schema);
+        if (schemaError) setError("There is an error in your schema. Please check the console for more details")
+        else setError();
+      } else {
+        const { _, error: codeError } = await validateJSCode(indexingCode);
+        if (codeError) setError("There is an error in your code. Please check the console for more details")
+        else setError();
+      }
+    })()
+
+  }, [fileName])
+
   useEffect(() => {
     const savedSchema = localStorage.getItem(SCHEMA_STORAGE_KEY);
     const savedCode = localStorage.getItem(CODE_STORAGE_KEY);
@@ -161,9 +181,9 @@ const Editor = ({
   }
 
   const registerFunction = async (indexerName, indexerConfig) => {
-    const { data: formattedSchema, error } = await validateSQLSchema(schema);
+    const { data: formattedSchema, error: schemaError } = await validateSQLSchema(schema);
 
-    if (error) {
+    if (schemaError) {
       setError("There was an error in your schema, please check the console for more details");
       return;
     }
@@ -231,15 +251,15 @@ const Editor = ({
     return isUserIndexer ? actionButtonText : "Fork Indexer";
   };
 
-  const reformatAll = (indexingCode, schema) => {
-    let { formattedCode, codeError } = validateJSCode(indexingCode);
+  const reformatAll = async (indexingCode, schema) => {
+    let { formattedCode, codeError } = await validateJSCode(indexingCode);
 
     if (codeError) {
       formattedCode = indexingCode
       setError("Oh snap! We could not format your code. Make sure it is proper Javascript code.");
     }
 
-    let { data: formattedSchema, error: schemaError } = validateSQLSchema(schema);
+    let { data: formattedSchema, error: schemaError } = await validateSQLSchema(schema);
 
     if (schemaError) {
       formattedSchema = schema;
@@ -253,9 +273,8 @@ const Editor = ({
     try {
       setSchemaTypes(pgSchemaTypeGen.generateTypes(schema));
       attachTypesToMonaco(); // Just in case schema types have been updated but weren't added to monaco
-      setError(undefined);
-    } catch (error) {
-      console.error("Error generating types for saved schema.\n", error);
+    } catch (_error) {
+      console.error("Error generating types for saved schema.\n", _error);
       setError("Oh snap! We could not generate types for your SQL schema. Make sure it is proper SQL DDL.");
     }
   }
@@ -350,7 +369,7 @@ const Editor = ({
           }}
         >
           {error && (
-            <Alert dismissible="true" onClose={() => setError(undefined)} className="px-3 pt-3" variant="danger">
+            <Alert dismissible="true" className="px-3 pt-3" variant="danger">
               {error}
             </Alert>
           )}
diff --git a/frontend/src/utils/validators.js b/frontend/src/utils/validators.js
index abcba2cfa..394035436 100644
--- a/frontend/src/utils/validators.js
+++ b/frontend/src/utils/validators.js
@@ -1,4 +1,4 @@
-import { formatIndexingCode, formatSQL } from "./formatters";
+import { defaultSchema, formatIndexingCode, formatSQL } from "./formatters";
 import { PgSchemaTypeGen } from "./pgSchemaTypeGen";
 import { CONTRACT_NAME_REGEX } from '../constants/RegexExp';
 
@@ -24,10 +24,14 @@ export function validateContractIds(accountIds) {
 export async function validateSQLSchema(schema) {
   if (!schema) return { data: null, error: null };
 
+  if (schema === formatSQL(defaultSchema)) return { data: schema, error: null };
+
   const pgSchemaTypeGen = new PgSchemaTypeGen();
 
+  console.log(schema)
+
   try {
-    const formattedSchema = await formatSQL(schema);
+    const formattedSchema = formatSQL(schema);
     pgSchemaTypeGen.generateTypes(formattedSchema); // Sanity check
 
     return { data: formattedSchema, error: null }

From f844da08451b2728a5dd0baba6df49e7415f8e4f Mon Sep 17 00:00:00 2001
From: Juan Luis Santana <juanluis@near.org>
Date: Thu, 4 Jan 2024 19:47:20 -0500
Subject: [PATCH 08/15] refactor: remove log

---
 frontend/src/utils/validators.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/src/utils/validators.js b/frontend/src/utils/validators.js
index 394035436..0a8a5596e 100644
--- a/frontend/src/utils/validators.js
+++ b/frontend/src/utils/validators.js
@@ -28,8 +28,6 @@ export async function validateSQLSchema(schema) {
 
   const pgSchemaTypeGen = new PgSchemaTypeGen();
 
-  console.log(schema)
-
   try {
     const formattedSchema = formatSQL(schema);
     pgSchemaTypeGen.generateTypes(formattedSchema); // Sanity check

From 37157826ffc7110b8973b679b62e1aedb8c58617 Mon Sep 17 00:00:00 2001
From: Juan Luis Santana <juanluis@near.org>
Date: Thu, 4 Jan 2024 22:14:55 -0500
Subject: [PATCH 09/15] fix: fix issue when generating types, based on response
 type from astify method

---
 frontend/src/utils/pgSchemaTypeGen.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/utils/pgSchemaTypeGen.js b/frontend/src/utils/pgSchemaTypeGen.js
index 8db5f2fb7..355b60afd 100644
--- a/frontend/src/utils/pgSchemaTypeGen.js
+++ b/frontend/src/utils/pgSchemaTypeGen.js
@@ -55,8 +55,10 @@ export class PgSchemaTypeGen {
 		const schemaSyntaxTree = this.parser.astify(sqlSchema, { database: "Postgresql" });
 		const dbSchema = {};
 
+		const statements = Array.isArray(schemaSyntaxTree) ? schemaSyntaxTree : [schemaSyntaxTree];
+
 		// Process each statement in the schema
-		for (const statement of schemaSyntaxTree) {
+		for (const statement of statements) {
 			if (statement.type === "create" && statement.keyword === "table") {
 				// Process CREATE TABLE statements
 				const tableName = statement.table[0].table;

From ed081657b71f9161c0ae42176331fee799d6f87b Mon Sep 17 00:00:00 2001
From: Juan Luis Santana <juanluis@near.org>
Date: Thu, 4 Jan 2024 22:29:24 -0500
Subject: [PATCH 10/15] refactor: decouple ResizableLayourEditor from Editor

---
 frontend/src/components/Editor/Editor.jsx     | 39 ++++++++++++-------
 .../Editor/ResizableLayoutEditor.jsx          | 26 ++++---------
 2 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/Editor/Editor.jsx b/frontend/src/components/Editor/Editor.jsx
index aad67d8dc..ba3ca9074 100644
--- a/frontend/src/components/Editor/Editor.jsx
+++ b/frontend/src/components/Editor/Editor.jsx
@@ -23,6 +23,7 @@ import { getLatestBlockHeight } from "../../utils/getLatestBlockHeight";
 import { IndexerDetailsContext } from '../../contexts/IndexerDetailsContext';
 import { PgSchemaTypeGen } from "../../utils/pgSchemaTypeGen";
 import { validateJSCode, validateSQLSchema } from "@/utils/validators";
+import { useDebouncedCallback } from "use-debounce";
 
 const BLOCKHEIGHT_LIMIT = 3600;
 
@@ -67,6 +68,7 @@ const Editor = ({
   const [diffView, setDiffView] = useState(false);
   const [blockView, setBlockView] = useState(false);
 
+
   const [isExecutingIndexerFunction, setIsExecutingIndexerFunction] = useState(false);
 
   const { height, selectedTab, currentUserAccountId } = useInitialPayload();
@@ -81,6 +83,12 @@ const Editor = ({
   const indexerRunner = useMemo(() => new IndexerRunner(handleLog), []);
   const pgSchemaTypeGen = new PgSchemaTypeGen();
   const disposableRef = useRef(null);
+  const debouncedValidateSQLSchema = useDebouncedCallback((_schema) => {
+    const { error: schemaError } = validateSQLSchema(_schema);
+    if (!schemaError) {
+      setError();
+    }
+  }, 500);
 
   useEffect(() => {
     if (indexerDetails.code != null) {
@@ -113,15 +121,12 @@ const Editor = ({
 
   useEffect(() => {
     (async () => {
-      if (fileName === 'indexingLogic.js') {
-        const { _, error: schemaError } = await validateSQLSchema(schema);
-        if (schemaError) setError("There is an error in your schema. Please check the console for more details")
-        else setError();
-      } else {
-        const { _, error: codeError } = await validateJSCode(indexingCode);
-        if (codeError) setError("There is an error in your code. Please check the console for more details")
-        else setError();
-      }
+      const { error: schemaError } = await validateSQLSchema(schema);
+      const { error: codeError } = await validateJSCode(indexingCode);
+
+      if (schemaError) setError("There is an error in your schema. Please check the console for more details")
+      else if (codeError) setError("There is an error in your code. Please check the console for more details")
+      else setError();
     })()
 
   }, [fileName])
@@ -167,7 +172,6 @@ const Editor = ({
     }
   }
 
-
   const forkIndexer = async (indexerName) => {
     let code = indexingCode;
     setAccountId(currentUserAccountId)
@@ -317,6 +321,15 @@ const Editor = ({
     setIsExecutingIndexerFunction(() => false)
   }
 
+  function handleOnChangeSchema(_schema) {
+    setSchema(_schema);
+    debouncedValidateSQLSchema(_schema);
+  }
+
+  function handleOnChangeCode(_code) {
+    setIndexingCode(_code);
+  }
+
   return (
     <div
       style={{
@@ -369,7 +382,7 @@ const Editor = ({
           }}
         >
           {error && (
-            <Alert dismissible="true" className="px-3 pt-3" variant="danger">
+            <Alert dismissible="true" onClose={() => setError()} className="px-3 pt-3" variant="danger">
               {error}
             </Alert>
           )}
@@ -395,8 +408,8 @@ const Editor = ({
             indexingCode={indexingCode}
             blockView={blockView}
             diffView={diffView}
-            setIndexingCode={setIndexingCode}
-            setSchema={setSchema}
+            onChangeCode={handleOnChangeCode}
+            onChangeSchema={handleOnChangeSchema}
             block_details={block_details}
             originalSQLCode={originalSQLCode}
             originalIndexingCode={originalIndexingCode}
diff --git a/frontend/src/components/Editor/ResizableLayoutEditor.jsx b/frontend/src/components/Editor/ResizableLayoutEditor.jsx
index 1d125fc19..049191965 100644
--- a/frontend/src/components/Editor/ResizableLayoutEditor.jsx
+++ b/frontend/src/components/Editor/ResizableLayoutEditor.jsx
@@ -4,7 +4,6 @@ import { defaultCode, defaultSchema } from "../../utils/formatters";
 import { useDragResize } from "../../utils/resize";
 import GraphqlPlayground from "./../Playground";
 import { validateSQLSchema } from "@/utils/validators";
-import { useDebouncedCallback } from "use-debounce";
 
 // Define styles as separate objects
 const containerStyle = {
@@ -40,8 +39,8 @@ const ResizableEditor = ({
   blockView,
   diffView,
   consoleView,
-  setIndexingCode,
-  setSchema,
+  onChangeCode,
+  onChangeSchema,
   block_details,
   originalSQLCode,
   originalIndexingCode,
@@ -58,15 +57,6 @@ const ResizableEditor = ({
     sizeThresholdSecond: 60,
   });
 
-  const debouncedValidateSQLSchema = useDebouncedCallback((_schema) => {
-    validateSQLSchema(_schema)
-  }, 1000);
-
-  const handleOnChangeSchema = (_schema) => {
-    setSchema(_schema);
-    debouncedValidateSQLSchema(_schema);
-  }
-
   // Render logic based on fileName
   const editorComponents = {
     GraphiQL: () => <GraphqlPlayground />,
@@ -87,7 +77,7 @@ const ResizableEditor = ({
           defaultValue={defaultCode}
           defaultLanguage="typescript"
           readOnly={false}
-          onChange={(text) => setIndexingCode(text)}
+          onChange={onChangeCode}
           handleEditorWillMount={handleEditorWillMount}
         />
       ),
@@ -108,7 +98,7 @@ const ResizableEditor = ({
           defaultValue={defaultSchema}
           defaultLanguage="sql"
           readOnly={isCreateNewIndexer === true ? false : false}
-          onChange={handleOnChangeSchema}
+          onChange={onChangeSchema}
           handleEditorWillMount={undefined}
         />
       ),
@@ -135,8 +125,8 @@ export default function ResizableLayoutEditor({
   blockView,
   diffView,
   consoleView,
-  setIndexingCode,
-  setSchema,
+  onChangeCode,
+  onChangeSchema,
   block_details,
   originalSQLCode,
   originalIndexingCode,
@@ -168,8 +158,8 @@ export default function ResizableLayoutEditor({
           indexingCode={indexingCode}
           blockView={blockView}
           diffView={diffView}
-          setIndexingCode={setIndexingCode}
-          setSchema={setSchema}
+          onChangeCode={onChangeCode}
+          onChangeSchema={onChangeSchema}
           block_details={block_details}
           originalSQLCode={originalSQLCode}
           originalIndexingCode={originalIndexingCode}

From 55cbb72c00e32406db7924d81daaa4f968aebc46 Mon Sep 17 00:00:00 2001
From: Juan Luis Santana <juanluis@near.org>
Date: Fri, 5 Jan 2024 10:24:22 -0500
Subject: [PATCH 11/15] chore: Add description to function

---
 frontend/src/utils/validators.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/src/utils/validators.js b/frontend/src/utils/validators.js
index 0a8a5596e..3456ec492 100644
--- a/frontend/src/utils/validators.js
+++ b/frontend/src/utils/validators.js
@@ -40,6 +40,12 @@ export async function validateSQLSchema(schema) {
   }
 };
 
+/**
+ * Asynchronously validates and formats JavaScript code.
+ * 
+ * @param {string} code - The JavaScript code to be validated and formatted.
+ * @returns {{ data: string | null, error: string | null }} An object containing either the formatted code or an error.
+ */
 export async function validateJSCode(code) {
 
   if (!code) return { data: null, error: null };

From 83c861db7316733e7de298fe431fb74eef44d743 Mon Sep 17 00:00:00 2001
From: Juan Luis Santana <juanluis@near.org>
Date: Fri, 5 Jan 2024 14:57:12 -0500
Subject: [PATCH 12/15] fix: change reference to variable

---
 frontend/src/utils/validators.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/utils/validators.js b/frontend/src/utils/validators.js
index 3456ec492..66193be17 100644
--- a/frontend/src/utils/validators.js
+++ b/frontend/src/utils/validators.js
@@ -56,6 +56,6 @@ export async function validateJSCode(code) {
 
   } catch (error) {
     console.error(error.message)
-    return { data: schema, error };
+    return { data: code, error };
   }
 };
\ No newline at end of file

From 8634c39dbe8d20b30d0ae45eaf57ae54413418ad Mon Sep 17 00:00:00 2001
From: Juan Luis Santana <juanluis@near.org>
Date: Fri, 5 Jan 2024 15:13:01 -0500
Subject: [PATCH 13/15] refactor: Make error messages constants

---
 frontend/src/components/Editor/Editor.jsx | 17 +++++++++--------
 frontend/src/constants/Strings.js         |  5 +++++
 2 files changed, 14 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/constants/Strings.js

diff --git a/frontend/src/components/Editor/Editor.jsx b/frontend/src/components/Editor/Editor.jsx
index ba3ca9074..418c74237 100644
--- a/frontend/src/components/Editor/Editor.jsx
+++ b/frontend/src/components/Editor/Editor.jsx
@@ -24,6 +24,7 @@ import { IndexerDetailsContext } from '../../contexts/IndexerDetailsContext';
 import { PgSchemaTypeGen } from "../../utils/pgSchemaTypeGen";
 import { validateJSCode, validateSQLSchema } from "@/utils/validators";
 import { useDebouncedCallback } from "use-debounce";
+import { SCHEMA_GENERAL_ERROR, CODE_GENERAL_ERROR, CODE_FORMATTING_ERROR, SCHEMA_FORMATTING_ERROR } from '../../constants/Strings';
 
 const BLOCKHEIGHT_LIMIT = 3600;
 
@@ -96,7 +97,7 @@ const Editor = ({
         const { data: formattedCode, error: codeError } = await validateJSCode(indexerDetails.code)
 
         if (codeError) {
-          setError("There was an error while formatting your code. Please check the console for more details")
+          setError(CODE_FORMATTING_ERROR)
         }
 
         setOriginalIndexingCode(formattedCode)
@@ -111,7 +112,7 @@ const Editor = ({
       (async () => {
         const { data: formattedSchema, error: schemaError } = await validateSQLSchema(indexerDetails.schema);
         if (schemaError) {
-          setError("There was an error in your schema. Please check the console for more details")
+          setError(SCHEMA_GENERAL_ERROR)
         }
 
         setSchema(formattedSchema)
@@ -124,8 +125,8 @@ const Editor = ({
       const { error: schemaError } = await validateSQLSchema(schema);
       const { error: codeError } = await validateJSCode(indexingCode);
 
-      if (schemaError) setError("There is an error in your schema. Please check the console for more details")
-      else if (codeError) setError("There is an error in your code. Please check the console for more details")
+      if (schemaError) setError(SCHEMA_GENERAL_ERROR)
+      else if (codeError) setError(CODE_GENERAL_ERROR)
       else setError();
     })()
 
@@ -188,7 +189,7 @@ const Editor = ({
     const { data: formattedSchema, error: schemaError } = await validateSQLSchema(schema);
 
     if (schemaError) {
-      setError("There was an error in your schema, please check the console for more details");
+      setError(SCHEMA_GENERAL_ERROR);
       return;
     }
 
@@ -260,14 +261,14 @@ const Editor = ({
 
     if (codeError) {
       formattedCode = indexingCode
-      setError("Oh snap! We could not format your code. Make sure it is proper Javascript code.");
+      setError(CODE_FORMATTING_ERROR);
     }
 
     let { data: formattedSchema, error: schemaError } = await validateSQLSchema(schema);
 
     if (schemaError) {
       formattedSchema = schema;
-      setError("There was an error in your SQL schema. Make sure it is proper SQL DDL");
+      setError(SCHEMA_GENERAL_ERROR);
     }
 
     return { formattedCode, formattedSchema }
@@ -279,7 +280,7 @@ const Editor = ({
       attachTypesToMonaco(); // Just in case schema types have been updated but weren't added to monaco
     } catch (_error) {
       console.error("Error generating types for saved schema.\n", _error);
-      setError("Oh snap! We could not generate types for your SQL schema. Make sure it is proper SQL DDL.");
+      setError(SCHEMA_FORMATTING_ERROR);
     }
   }
 
diff --git a/frontend/src/constants/Strings.js b/frontend/src/constants/Strings.js
new file mode 100644
index 000000000..427b42154
--- /dev/null
+++ b/frontend/src/constants/Strings.js
@@ -0,0 +1,5 @@
+//errors
+export const SCHEMA_GENERAL_ERROR = "There was an error in your schema. Please check the console for more details";
+export const CODE_GENERAL_ERROR = "There is an error in your code. Please check the console for more details";
+export const CODE_FORMATTING_ERROR = "There was an error while formatting your code. Please check the console for more details";
+export const SCHEMA_FORMATTING_ERROR = "Oh snap! We could not generate types for your SQL schema. Make sure it is proper SQL DDL.";
\ No newline at end of file

From b1e0a5f314c83d3fe185990d2984efd6d5bd8040 Mon Sep 17 00:00:00 2001
From: Juan Luis Santana <juanluis@near.org>
Date: Fri, 5 Jan 2024 15:54:18 -0500
Subject: [PATCH 14/15] fix: Solve an issue on the reformatAll function, also
 added real-time validation when user is changing the code

---
 frontend/src/components/Editor/Editor.jsx | 59 ++++++++++++-----------
 frontend/src/utils/validators.js          |  6 +--
 2 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/Editor/Editor.jsx b/frontend/src/components/Editor/Editor.jsx
index 418c74237..ef5c93074 100644
--- a/frontend/src/components/Editor/Editor.jsx
+++ b/frontend/src/components/Editor/Editor.jsx
@@ -91,44 +91,46 @@ const Editor = ({
     }
   }, 500);
 
+  const debouncedValidateCode = useDebouncedCallback((_code) => {
+    const { error: codeError } = validateJSCode(_code);
+    if (!codeError) {
+      setError();
+    }
+  }, 500);
+
   useEffect(() => {
     if (indexerDetails.code != null) {
-      (async () => {
-        const { data: formattedCode, error: codeError } = await validateJSCode(indexerDetails.code)
+      const { data: formattedCode, error: codeError } = validateJSCode(indexerDetails.code)
 
-        if (codeError) {
-          setError(CODE_FORMATTING_ERROR)
-        }
+      if (codeError) {
+        setError(CODE_FORMATTING_ERROR)
+      }
 
-        setOriginalIndexingCode(formattedCode)
-        setIndexingCode(formattedCode)
-      })()
+      setOriginalIndexingCode(formattedCode)
+      setIndexingCode(formattedCode)
     }
 
   }, [indexerDetails.code]);
 
   useEffect(() => {
     if (indexerDetails.schema != null) {
-      (async () => {
-        const { data: formattedSchema, error: schemaError } = await validateSQLSchema(indexerDetails.schema);
-        if (schemaError) {
-          setError(SCHEMA_GENERAL_ERROR)
-        }
+      const { data: formattedSchema, error: schemaError } = validateSQLSchema(indexerDetails.schema);
+      if (schemaError) {
+        setError(SCHEMA_GENERAL_ERROR)
+      }
 
-        setSchema(formattedSchema)
-      })();
+      setSchema(formattedSchema)
     }
   }, [indexerDetails.schema])
 
   useEffect(() => {
-    (async () => {
-      const { error: schemaError } = await validateSQLSchema(schema);
-      const { error: codeError } = await validateJSCode(indexingCode);
 
-      if (schemaError) setError(SCHEMA_GENERAL_ERROR)
-      else if (codeError) setError(CODE_GENERAL_ERROR)
-      else setError();
-    })()
+    const { error: schemaError } = validateSQLSchema(schema);
+    const { error: codeError } = validateJSCode(indexingCode);
+
+    if (schemaError) setError(SCHEMA_GENERAL_ERROR)
+    else if (codeError) setError(CODE_GENERAL_ERROR)
+    else setError();
 
   }, [fileName])
 
@@ -186,7 +188,7 @@ const Editor = ({
   }
 
   const registerFunction = async (indexerName, indexerConfig) => {
-    const { data: formattedSchema, error: schemaError } = await validateSQLSchema(schema);
+    const { data: formattedSchema, error: schemaError } = validateSQLSchema(schema);
 
     if (schemaError) {
       setError(SCHEMA_GENERAL_ERROR);
@@ -256,15 +258,15 @@ const Editor = ({
     return isUserIndexer ? actionButtonText : "Fork Indexer";
   };
 
-  const reformatAll = async (indexingCode, schema) => {
-    let { formattedCode, codeError } = await validateJSCode(indexingCode);
+  const reformatAll = (indexingCode, schema) => {
+    let { data: formattedCode, error: codeError } = validateJSCode(indexingCode);
 
     if (codeError) {
       formattedCode = indexingCode
       setError(CODE_FORMATTING_ERROR);
     }
 
-    let { data: formattedSchema, error: schemaError } = await validateSQLSchema(schema);
+    let { data: formattedSchema, error: schemaError } = validateSQLSchema(schema);
 
     if (schemaError) {
       formattedSchema = schema;
@@ -284,8 +286,8 @@ const Editor = ({
     }
   }
 
-  async function handleFormating() {
-    const { formattedCode, formattedSchema } = await reformatAll(indexingCode, schema);
+  function handleFormating() {
+    const { formattedCode, formattedSchema } = reformatAll(indexingCode, schema);
     setIndexingCode(formattedCode);
     setSchema(formattedSchema);
   }
@@ -329,6 +331,7 @@ const Editor = ({
 
   function handleOnChangeCode(_code) {
     setIndexingCode(_code);
+    debouncedValidateCode(_code);
   }
 
   return (
diff --git a/frontend/src/utils/validators.js b/frontend/src/utils/validators.js
index 66193be17..8d9db540d 100644
--- a/frontend/src/utils/validators.js
+++ b/frontend/src/utils/validators.js
@@ -21,7 +21,7 @@ export function validateContractIds(accountIds) {
  * @param {string} schema - The SQL schema to validate and format.
  * @returns {{ data: string | null, error: string | null }} - An object containing the formatted schema and error (if any).
  */
-export async function validateSQLSchema(schema) {
+export function validateSQLSchema(schema) {
   if (!schema) return { data: null, error: null };
 
   if (schema === formatSQL(defaultSchema)) return { data: schema, error: null };
@@ -46,12 +46,12 @@ export async function validateSQLSchema(schema) {
  * @param {string} code - The JavaScript code to be validated and formatted.
  * @returns {{ data: string | null, error: string | null }} An object containing either the formatted code or an error.
  */
-export async function validateJSCode(code) {
+export function validateJSCode(code) {
 
   if (!code) return { data: null, error: null };
 
   try {
-    const formattedCode = await formatIndexingCode(code);
+    const formattedCode = formatIndexingCode(code);
     return { data: formattedCode, error: null }
 
   } catch (error) {

From 538cd39a933e5ee80d0c71aab1bbc668eb10556f Mon Sep 17 00:00:00 2001
From: Juan Luis Santana <juanluis@near.org>
Date: Fri, 5 Jan 2024 22:25:16 -0500
Subject: [PATCH 15/15] fix: Reset errors if code/schemar are ok when reloading

---
 frontend/src/components/Editor/Editor.jsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Editor/Editor.jsx b/frontend/src/components/Editor/Editor.jsx
index ef5c93074..af5b77a54 100644
--- a/frontend/src/components/Editor/Editor.jsx
+++ b/frontend/src/components/Editor/Editor.jsx
@@ -260,17 +260,16 @@ const Editor = ({
 
   const reformatAll = (indexingCode, schema) => {
     let { data: formattedCode, error: codeError } = validateJSCode(indexingCode);
+    let { data: formattedSchema, error: schemaError } = validateSQLSchema(schema);
 
     if (codeError) {
       formattedCode = indexingCode
       setError(CODE_FORMATTING_ERROR);
-    }
-
-    let { data: formattedSchema, error: schemaError } = validateSQLSchema(schema);
-
-    if (schemaError) {
+    } else if (schemaError) {
       formattedSchema = schema;
-      setError(SCHEMA_GENERAL_ERROR);
+      setError(SCHEMA_GENERAL_ERROR)
+    } else {
+      setError()
     }
 
     return { formattedCode, formattedSchema }