type generation for launchpad code

frontend/src/components/Editor/EditorComponents/Editor.tsx

@@ -1,4 +1,4 @@
 import { request, useInitialPayload } from 'near-social-bridge';
 import type { ReactElement } from 'react';
 import type { Method, Event } from '@/pages/api/generateCode';
 
@@ -38,7 +38,7 @@
 
 declare const monaco: any;
 const INDEXER_TAB_NAME = 'indexer.js';
 const SCHEMA_TAB_NAME = 'schema.sql';
 const originalSQLCode = formatSQL(defaultSchema);
 const originalIndexingCode = formatIndexingCode(defaultCode);
 const pgSchemaTypeGen = new PgSchemaTypeGen();
@@ -53,6 +53,30 @@
   return request<WizardResponse>('launchpad-create-indexer', req);
 };
 
+const fetchGeneratedCode = async (contractFilter: string, selectedMethods: Method[], selectedEvents?: Event[]) => {
+  try {
+    const response = await fetch('/api/generateCode', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ contractFilter, selectedMethods, selectedEvents }),
+    });
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    const data = await response.json();
+
+    if (!data.hasOwnProperty('jsCode') || !data.hasOwnProperty('sqlCode')) {
+      throw new Error('No code was returned from the server with properties jsCode and sqlCode');
+    }
+
+    return data;
+  } catch (error) {
+    throw error;
+  }
+};
+
 const Editor: React.FC = (): ReactElement => {
   const { indexerDetails, isCreateNewIndexer } = useContext(IndexerDetailsContext);
 
@@ -82,7 +106,7 @@
   const [heights, setHeights] = useState<number[]>(initialHeights);
 
   const [diffView, setDiffView] = useState<boolean>(false);
   const [blockView, setBlockView] = useState<boolean>(false);
 
   const [launchPadDefaultCode, setLaunchPadDefaultCode] = useState<string>('');
   const [launchPadDefaultSchema, setLaunchPadDefaultSchema] = useState<string>('');
@@ -131,38 +155,13 @@
     return;
   };
 
-  const generateCode = async (contractFilter: string, selectedMethods: Method[], selectedEvents?: Event[]) => {
-    try {
-      const response = await fetch('/api/generateCode', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ contractFilter, selectedMethods, selectedEvents }),
-      });
-      if (!response.ok) {
-        throw new Error('Network response was not ok');
-      }
-      const data = await response.json();
-
-      if (!data.hasOwnProperty('jsCode') || !data.hasOwnProperty('sqlCode')) {
-        throw new Error('No code was returned from the server with properties jsCode and sqlCode');
-      }
-
-      return data;
-    } catch (error) {
-      throw error;
-    }
-  };
-
   useEffect(() => {
     (async () => {
       try {
         const { wizardContractFilter, wizardMethods, wizardEvents } = await fetchWizardData('');
 
         if (wizardContractFilter === 'noFilter') return;
-
-        const { jsCode, sqlCode } = await generateCode(wizardContractFilter, wizardMethods, wizardEvents);
+        const { jsCode, sqlCode } = await fetchGeneratedCode(wizardContractFilter, wizardMethods, wizardEvents);
         const wrappedIndexingCode = wrapCode(jsCode) ? wrapCode(jsCode) : jsCode;
         const { validatedCode, validatedSchema } = reformatAll(wrappedIndexingCode, sqlCode);
 
@@ -173,7 +172,7 @@
         console.error(error);
       }
     })();
   }, []);
 
   useEffect(() => {
     //* Load saved code from local storage if it exists else load code from context
@@ -191,7 +190,7 @@
       monacoEditorRef.current.setPosition(savedCursorPosition || { lineNumber: 1, column: 1 });
       monacoEditorRef.current.focus();
     }
   }, [indexerDetails.code]);
 
   useEffect(() => {
     //* Load saved schema from local storage if it exists else load code from context
@@ -202,24 +201,23 @@
       schemaErrorHandler(schemaError);
       formattedSchema && setSchema(formattedSchema);
     }
   }, [indexerDetails.schema]);
 
   useEffect(() => {
     const { error: schemaError } = validateSQLSchema(schema);
     const { error: codeError } = validateJSCode(indexingCode);
-
     if (schemaError || codeError) {
       if (schemaError) schemaErrorHandler(schemaError);
       if (codeError) indexerErrorHandler(codeError);
       return;
     }
 
     handleCodeGen();
-  }, [fileName]);
+  }, [fileName, launchPadDefaultSchema]);
 
   useEffect(() => {
     cacheToLocal();
   }, [indexingCode, schema]);
 
   useEffect(() => {
     if (!monacoEditorRef.current) return;
@@ -230,12 +228,12 @@
     return () => {
       editorInstance.dispose();
     };
   }, [monacoEditorRef.current]);
 
   useEffect(() => {
     storageManager?.setSchemaTypes(schemaTypes);
     handleCodeGen();
   }, [schemaTypes, monacoMount]);
 
   useEffect(() => {
     storageManager?.setDebugList(heights);

frontend/src/components/Editor/EditorComponents/ResizableLayoutEditor.jsx

@@ -161,8 +161,10 @@ export default function ResizableLayoutEditor({
     sizeThresholdFirst: 60,
     sizeThresholdSecond: 20,
   });
+
   const defaultCode = launchPadDefaultCode ? launchPadDefaultCode : contextCode ? contextCode : originalIndexingCode;
   const defaultSchema = launchPadDefaultSchema ? launchPadDefaultSchema : contextSchema ? contextSchema : originalSQLCode;
+
   return (
     <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
       {/* Code Editor */}