From 4f558492d72196d3cfaad1527aa391b2e380146f Mon Sep 17 00:00:00 2001 From: kevin Date: Thu, 8 Aug 2024 15:27:31 -0400 Subject: [PATCH 1/5] feat: wrap generate code --- .../Editor/EditorComponents/Editor.tsx | 27 +++++++++++-------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/frontend/src/components/Editor/EditorComponents/Editor.tsx b/frontend/src/components/Editor/EditorComponents/Editor.tsx index 6247e04c..1ca0de9c 100644 --- a/frontend/src/components/Editor/EditorComponents/Editor.tsx +++ b/frontend/src/components/Editor/EditorComponents/Editor.tsx @@ -15,7 +15,14 @@ import { } from '@/constants/Strings'; import { IndexerDetailsContext } from '@/contexts/IndexerDetailsContext'; import { useModal } from '@/contexts/ModalContext'; -import { defaultCode, defaultSchema, defaultSchemaTypes, formatIndexingCode, formatSQL } from '@/utils/formatters'; +import { + defaultCode, + defaultSchema, + defaultSchemaTypes, + formatIndexingCode, + formatSQL, + wrapCode, +} from '@/utils/formatters'; import { getLatestBlockHeight } from '@/utils/getLatestBlockHeight'; import IndexerRunner from '@/utils/indexerRunner'; import { PgSchemaTypeGen } from '@/utils/pgSchemaTypeGen'; @@ -141,25 +148,23 @@ const Editor: React.FC = (): ReactElement => { }; useEffect(() => { - const fetchData = async () => { + (async () => { try { - const response = await fetchWizardData(''); - const { wizardContractFilter, wizardMethods, wizardEvents } = response; + const { wizardContractFilter, wizardMethods, wizardEvents } = await fetchWizardData(''); - if (wizardContractFilter === 'noFilter') { - return; - } + if (wizardContractFilter === 'noFilter') return; + + const { jsCode, sqlCode } = await generateCode(wizardContractFilter, wizardMethods, wizardEvents); + const wrappedIndexingCode = wrapCode(jsCode) ? wrapCode(jsCode) : jsCode; + const { validatedCode, validatedSchema } = reformatAll(wrappedIndexingCode, sqlCode); - const codeResponse = await generateCode(wizardContractFilter, wizardMethods, wizardEvents); - const { validatedCode, validatedSchema } = reformatAll(codeResponse.jsCode, codeResponse.sqlCode); validatedCode && setIndexingCode(validatedCode); validatedSchema && setSchema(validatedSchema); } catch (error: unknown) { //todo: figure out best course of action for user if api fails console.error(error); } - }; - fetchData(); + })(); }, []); useEffect(() => { From 1744bbd3a4bda807ec212eb8e42b34f53535a358 Mon Sep 17 00:00:00 2001 From: kevin Date: Thu, 8 Aug 2024 16:17:45 -0400 Subject: [PATCH 2/5] feat: diff editor is now aware of launchpad --- .../components/Editor/EditorComponents/Editor.tsx | 11 +++++++++-- .../EditorComponents/ResizableLayoutEditor.jsx | 13 +++++++++---- 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/Editor/EditorComponents/Editor.tsx b/frontend/src/components/Editor/EditorComponents/Editor.tsx index 1ca0de9c..e7987b3d 100644 --- a/frontend/src/components/Editor/EditorComponents/Editor.tsx +++ b/frontend/src/components/Editor/EditorComponents/Editor.tsx @@ -42,6 +42,7 @@ const SCHEMA_TAB_NAME = 'schema.sql'; const originalSQLCode = formatSQL(defaultSchema); const originalIndexingCode = formatIndexingCode(defaultCode); const pgSchemaTypeGen = new PgSchemaTypeGen(); + interface WizardResponse { wizardContractFilter: string; wizardMethods: Method[]; @@ -79,6 +80,10 @@ const Editor: React.FC = (): ReactElement => { const [diffView, setDiffView] = useState(false); const [blockView, setBlockView] = useState(false); + + const [launchPadDefaultCode, setLaunchPadDefaultCode] = useState(''); + const [launchPadDefaultSchema, setLaunchPadDefaultSchema] = useState(''); + const { showModal } = useModal(); const [isExecutingIndexerFunction, setIsExecutingIndexerFunction] = useState(false); @@ -158,8 +163,8 @@ const Editor: React.FC = (): ReactElement => { const wrappedIndexingCode = wrapCode(jsCode) ? wrapCode(jsCode) : jsCode; const { validatedCode, validatedSchema } = reformatAll(wrappedIndexingCode, sqlCode); - validatedCode && setIndexingCode(validatedCode); - validatedSchema && setSchema(validatedSchema); + validatedCode && (setIndexingCode(validatedCode), setLaunchPadDefaultCode(validatedCode)); + validatedSchema && (setSchema(validatedSchema), setLaunchPadDefaultSchema(validatedSchema)); } catch (error: unknown) { //todo: figure out best course of action for user if api fails console.error(error); @@ -471,6 +476,8 @@ const Editor: React.FC = (): ReactElement => { schema={schema} isCreateNewIndexer={isCreateNewIndexer} onMount={handleEditorWillMount} + launchPadDefaultCode={launchPadDefaultCode} + launchPadDefaultSchema={launchPadDefaultSchema} /> diff --git a/frontend/src/components/Editor/EditorComponents/ResizableLayoutEditor.jsx b/frontend/src/components/Editor/EditorComponents/ResizableLayoutEditor.jsx index f9c60ba9..7bd3b144 100644 --- a/frontend/src/components/Editor/EditorComponents/ResizableLayoutEditor.jsx +++ b/frontend/src/components/Editor/EditorComponents/ResizableLayoutEditor.jsx @@ -8,7 +8,7 @@ const containerStyle = { display: 'flex', flexDirection: 'row', width: '100%', - height: '100%', + height: '100vh', }; const editorContainerStyle = { @@ -145,6 +145,8 @@ export default function ResizableLayoutEditor({ indexingCode, onMount, isCreateNewIndexer, + launchPadDefaultCode, + launchPadDefaultSchema, }) { const { dragBarRef: dragBarRefConsole, @@ -158,6 +160,9 @@ export default function ResizableLayoutEditor({ sizeThresholdSecond: 20, }); + const defaultCode = launchPadDefaultCode ? launchPadDefaultCode : originalIndexingCode; + const defaultSchema = launchPadDefaultSchema ? launchPadDefaultSchema : originalSQLCode; + return (
{/* Code Editor */} @@ -165,15 +170,15 @@ export default function ResizableLayoutEditor({
From e18f9d7815c7a22da3fb093c2858f0b76ac117ac Mon Sep 17 00:00:00 2001 From: kevin Date: Thu, 8 Aug 2024 17:21:55 -0400 Subject: [PATCH 3/5] feat: types generated on launchpad generate code --- .../Editor/EditorComponents/Editor.tsx | 51 +++++++++---------- 1 file changed, 25 insertions(+), 26 deletions(-) diff --git a/frontend/src/components/Editor/EditorComponents/Editor.tsx b/frontend/src/components/Editor/EditorComponents/Editor.tsx index e7987b3d..6e2f63d6 100644 --- a/frontend/src/components/Editor/EditorComponents/Editor.tsx +++ b/frontend/src/components/Editor/EditorComponents/Editor.tsx @@ -53,6 +53,30 @@ const fetchWizardData = (req: string): Promise => { return request('launchpad-create-indexer', req); }; +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; + } +}; + const Editor: React.FC = (): ReactElement => { const { indexerDetails, isCreateNewIndexer } = useContext(IndexerDetailsContext); @@ -128,30 +152,6 @@ const Editor: React.FC = (): ReactElement => { 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 { @@ -204,7 +204,6 @@ const Editor: React.FC = (): ReactElement => { useEffect(() => { const { error: schemaError } = validateSQLSchema(schema); const { error: codeError } = validateJSCode(indexingCode); - if (schemaError || codeError) { if (schemaError) schemaErrorHandler(schemaError); if (codeError) indexerErrorHandler(codeError); @@ -212,7 +211,7 @@ const Editor: React.FC = (): ReactElement => { } handleCodeGen(); - }, [fileName]); + }, [fileName, launchPadDefaultCode, launchPadDefaultSchema, schema, indexingCode]); useEffect(() => { cacheToLocal(); From 19df1c8d8715f33a5ecd6a5bf82f2dd092bb4f63 Mon Sep 17 00:00:00 2001 From: kevin Date: Fri, 9 Aug 2024 16:20:18 -0400 Subject: [PATCH 4/5] fix: remove dependency on indexingcode, schema --- frontend/src/components/Editor/EditorComponents/Editor.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/Editor/EditorComponents/Editor.tsx b/frontend/src/components/Editor/EditorComponents/Editor.tsx index 9155a8a1..90d12938 100644 --- a/frontend/src/components/Editor/EditorComponents/Editor.tsx +++ b/frontend/src/components/Editor/EditorComponents/Editor.tsx @@ -210,7 +210,7 @@ const Editor: React.FC = (): ReactElement => { } handleCodeGen(); - }, [fileName, launchPadDefaultCode, launchPadDefaultSchema, schema, indexingCode]); + }, [fileName, launchPadDefaultSchema]); useEffect(() => { cacheToLocal(); From 08c80f23e3eff9926e003ff760faca920022424e Mon Sep 17 00:00:00 2001 From: kevin Date: Mon, 12 Aug 2024 13:51:21 -0400 Subject: [PATCH 5/5] chore: renamed generateCode on Editor to fetchGenerateCode --- frontend/src/components/Editor/EditorComponents/Editor.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/Editor/EditorComponents/Editor.tsx b/frontend/src/components/Editor/EditorComponents/Editor.tsx index 3de005f2..9d7d949c 100644 --- a/frontend/src/components/Editor/EditorComponents/Editor.tsx +++ b/frontend/src/components/Editor/EditorComponents/Editor.tsx @@ -53,7 +53,7 @@ const fetchWizardData = (req: string): Promise => { return request('launchpad-create-indexer', req); }; -const generateCode = async (contractFilter: string, selectedMethods: Method[], selectedEvents?: Event[]) => { +const fetchGeneratedCode = async (contractFilter: string, selectedMethods: Method[], selectedEvents?: Event[]) => { try { const response = await fetch('/api/generateCode', { method: 'POST', @@ -161,7 +161,7 @@ const Editor: React.FC = (): ReactElement => { 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);