Fix loading a schema from registry

frontend/src/components/Editor/Editor.jsx

@@ -22,7 +22,9 @@ 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";
+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;
 
@@ -67,6 +69,7 @@ const Editor = ({
   const [diffView, setDiffView] = useState(false);
   const [blockView, setBlockView] = useState(false);
 
+
   const [isExecutingIndexerFunction, setIsExecutingIndexerFunction] = useState(false);
 
   const { height, selectedTab, currentUserAccountId } = useInitialPayload();
@@ -81,15 +84,55 @@ 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);
+
+  const debouncedValidateCode = useDebouncedCallback((_code) => {
+    const { error: codeError } = validateJSCode(_code);
+    if (!codeError) {
+      setError();
+    }
+  }, 500);
+
+  useEffect(() => {
+    if (indexerDetails.code != null) {
+      const { data: formattedCode, error: codeError } = validateJSCode(indexerDetails.code)
+
+      if (codeError) {
+        setError(CODE_FORMATTING_ERROR)
+      }
+
+      setOriginalIndexingCode(formattedCode)
+      setIndexingCode(formattedCode)
+    }
+
+  }, [indexerDetails.code]);
 
   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.schema != null) {
+      const { data: formattedSchema, error: schemaError } = validateSQLSchema(indexerDetails.schema);
+      if (schemaError) {
+        setError(SCHEMA_GENERAL_ERROR)
+      }
+
+      setSchema(formattedSchema)
+    }
+  }, [indexerDetails.schema])
+
+  useEffect(() => {
+
+    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])
 
   useEffect(() => {
     const savedSchema = localStorage.getItem(SCHEMA_STORAGE_KEY);
@@ -111,23 +154,6 @@ const Editor = ({
     attachTypesToMonaco();
   }, [schemaTypes, monacoMount]);
 
-  const requestLatestBlockHeight = async () => {
-    const blockHeight = getLatestBlockHeight()
-    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]);
@@ -149,7 +175,6 @@ const Editor = ({
     }
   }
 
-
   const forkIndexer = async (indexerName) => {
     let code = indexingCode;
     setAccountId(currentUserAccountId)
@@ -163,10 +188,10 @@ const Editor = ({
   }
 
   const registerFunction = async (indexerName, indexerConfig) => {
-    const { data: formattedSchema, error } = await validateSQLSchema(schema);
+    const { data: formattedSchema, error: schemaError } = validateSQLSchema(schema);
 
-    if (error) {
-      setError("There was an error in your schema, please check the console for more details");
+    if (schemaError) {
+      setError(SCHEMA_GENERAL_ERROR);
       return;
     }
 
@@ -217,7 +242,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,52 +259,36 @@ const Editor = ({
   };
 
   const reformatAll = (indexingCode, schema) => {
-    let formattedCode = indexingCode
-    let formattedSql = schema;
-    try {
-      formattedCode = formatIndexingCode(indexingCode);
-      setError(undefined);
-    } catch (error) {
-      console.error("error", error)
-      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: formattedCode, error: codeError } = validateJSCode(indexingCode);
+    let { data: formattedSchema, error: schemaError } = validateSQLSchema(schema);
+
+    if (codeError) {
+      formattedCode = indexingCode
+      setError(CODE_FORMATTING_ERROR);
+    } else if (schemaError) {
+      formattedSchema = schema;
+      setError(SCHEMA_GENERAL_ERROR)
+    } else {
+      setError()
     }
-    setIndexingCode(formattedCode);
-    setSchema(formattedSql);
-    return { formattedCode, formattedSql }
+
+    return { formattedCode, formattedSchema }
   };
 
   function handleCodeGen() {
     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);
-      setError("Oh snap! We could not generate types for your SQL schema. Make sure it is proper SQL DDL.");
+    } catch (_error) {
+      console.error("Error generating types for saved schema.\n", _error);
+      setError(SCHEMA_FORMATTING_ERROR);
     }
   }
 
-  async function handleFormating() {
-    await reformatAll(indexingCode, schema);
-  }
-
-  function handleEditorMount(editor) {
-    const modifiedEditor = editor.getModifiedEditor();
-    modifiedEditor.onDidChangeModelContent((_) => {
-      if (fileName == "indexingLogic.js") {
-        setIndexingCode(modifiedEditor.getValue());
-      }
-      if (fileName == "schema.sql") {
-        setSchema(modifiedEditor.getValue());
-      }
-    });
+  function handleFormating() {
+    const { formattedCode, formattedSchema } = reformatAll(indexingCode, schema);
+    setIndexingCode(formattedCode);
+    setSchema(formattedSchema);
   }
 
   function handleEditorWillMount(monaco) {
@@ -306,12 +317,22 @@ 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)
   }
 
+  function handleOnChangeSchema(_schema) {
+    setSchema(_schema);
+    debouncedValidateSQLSchema(_schema);
+  }
+
+  function handleOnChangeCode(_code) {
+    setIndexingCode(_code);
+    debouncedValidateCode(_code);
+  }
+
   return (
     <div
       style={{
@@ -364,7 +385,7 @@ const Editor = ({
           }}
         >
           {error && (
-            <Alert dismissible="true" onClose={() => setError(undefined)} className="px-3 pt-3" variant="danger">
+            <Alert dismissible="true" onClose={() => setError()} className="px-3 pt-3" variant="danger">
               {error}
             </Alert>
           )}
@@ -390,15 +411,14 @@ const Editor = ({
             indexingCode={indexingCode}
             blockView={blockView}
             diffView={diffView}
-            setIndexingCode={setIndexingCode}
-            setSchema={setSchema}
+            onChangeCode={handleOnChangeCode}
+            onChangeSchema={handleOnChangeSchema}
             block_details={block_details}
             originalSQLCode={originalSQLCode}
             originalIndexingCode={originalIndexingCode}
             schema={schema}
             isCreateNewIndexer={isCreateNewIndexer}
             handleEditorWillMount={handleEditorWillMount}
-            handleEditorMount={handleEditorMount}
           />
         </div>
       </>}

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,15 +39,14 @@ const ResizableEditor = ({
   blockView,
   diffView,
   consoleView,
-  setIndexingCode,
-  setSchema,
+  onChangeCode,
+  onChangeSchema,
   block_details,
   originalSQLCode,
   originalIndexingCode,
   schema,
   indexingCode,
   handleEditorWillMount,
-  handleEditorMount,
   isCreateNewIndexer
 }) => {
   const { firstRef, secondRef, dragBarRef } = useDragResize({
@@ -59,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 />,
@@ -88,7 +77,7 @@ const ResizableEditor = ({
           defaultValue={defaultCode}
           defaultLanguage="typescript"
           readOnly={false}
-          onChange={(text) => setIndexingCode(text)}
+          onChange={onChangeCode}
           handleEditorWillMount={handleEditorWillMount}
         />
       ),
@@ -109,7 +98,7 @@ const ResizableEditor = ({
           defaultValue={defaultSchema}
           defaultLanguage="sql"
           readOnly={isCreateNewIndexer === true ? false : false}
-          onChange={handleOnChangeSchema}
+          onChange={onChangeSchema}
           handleEditorWillMount={undefined}
         />
       ),
@@ -136,8 +125,8 @@ export default function ResizableLayoutEditor({
   blockView,
   diffView,
   consoleView,
-  setIndexingCode,
-  setSchema,
+  onChangeCode,
+  onChangeSchema,
   block_details,
   originalSQLCode,
   originalIndexingCode,
@@ -169,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}

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.";

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;