diff --git a/frontend/package-lock.json b/frontend/package-lock.json index d3f4c449..72ea96a9 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -15,6 +15,7 @@ "@near-lake/primitives": "0.5.0", "bootstrap": "^5.2.3", "buffer": "^6.0.3", + "genson-js": "^0.0.8", "graphiql": "3.0.6", "graphql": "^16.8.1", "graphql-ws": "^5.16.0", @@ -7146,6 +7147,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/genson-js": { + "version": "0.0.8", + "resolved": "https://registry.npmjs.org/genson-js/-/genson-js-0.0.8.tgz", + "integrity": "sha512-4NUusDTwF+lzYh72uKV+Uvpky9iPO+YDIMpGImA5pbHfLV9HwgRCA4hYjGu78V4J4Cx2IZRTFfRERn9aUs74mw==", + "license": "Apache-2.0" + }, "node_modules/gensync": { "version": "1.0.0-beta.2", "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", diff --git a/frontend/package.json b/frontend/package.json index 98e5c4e1..c2480305 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -26,6 +26,7 @@ "@near-lake/primitives": "0.5.0", "bootstrap": "^5.2.3", "buffer": "^6.0.3", + "genson-js": "^0.0.8", "graphiql": "3.0.6", "graphql": "^16.8.1", "graphql-ws": "^5.16.0", diff --git a/frontend/src/components/Editor/EditorComponents/GenerateCode.jsx b/frontend/src/components/Editor/EditorComponents/GenerateCode.jsx deleted file mode 100644 index dedc6f63..00000000 --- a/frontend/src/components/Editor/EditorComponents/GenerateCode.jsx +++ /dev/null @@ -1,72 +0,0 @@ -//Dummy Component to generate code accessable accountId=test and indexerName=test and -import { useState } from 'react'; - -const GenerateCode = () => { - const [contractFilter, setContractFilter] = useState(''); - const [selectedMethods, setSelectedMethods] = useState([]); - const [selectedEvents, setSelectedEvents] = useState([]); - const [generatedCode, setGeneratedCode] = useState({ jsCode: '', sqlCode: '' }); - - const handleGenerateCode = async () => { - const response = await fetch('/api/generateCode', { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ contractFilter, selectedMethods, selectedEvents }), - }); - const data = await response.json(); - setGeneratedCode(data); - }; - - return ( -
-
-

Generate Code

-
- setContractFilter(e.target.value)} - className="w-full p-3 border border-gray-300 rounded-md" - /> -
-
- setSelectedMethods(e.target.value.split(','))} - className="w-full p-3 border border-gray-300 rounded-md" - /> -
-
- setSelectedEvents(e.target.value.split(','))} - className="w-full p-3 border border-gray-300 rounded-md" - /> -
- -
-

Generated JavaScript Code

-
{generatedCode.jsCode}
-
-
-

Generated SQL Code

-
{generatedCode.sqlCode}
-
-
-
- ); -}; - -export default GenerateCode; diff --git a/frontend/src/components/Editor/EditorComponents/GenerateCode.tsx b/frontend/src/components/Editor/EditorComponents/GenerateCode.tsx new file mode 100644 index 00000000..bf41fedb --- /dev/null +++ b/frontend/src/components/Editor/EditorComponents/GenerateCode.tsx @@ -0,0 +1,164 @@ +//Dummy component +import { useState } from 'react'; + +type Schema = { + type: string; + properties?: Record; + required?: string[]; +}; + +type Method = { + method_name: string; + schema: Schema; +}; + +type Event = { + event_name: string; + schema: Schema; +}; + +const GenerateCode = () => { + const [contractFilter, setContractFilter] = useState(''); + const [selectedMethods, setSelectedMethods] = useState([]); + const [selectedEvents, setSelectedEvents] = useState([]); + const [generatedCode, setGeneratedCode] = useState<{ jsCode: string; sqlCode: string }>({ jsCode: '', sqlCode: '' }); + + const handleGenerateCode = async () => { + const response = await fetch('/api/generateCode', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ contractFilter, selectedMethods, selectedEvents }), + }); + const data = await response.json(); + setGeneratedCode(data); + }; + + const handleMethodChange = (index: number, field: keyof Method, value: string) => { + const updatedMethods = [...selectedMethods]; + if (field === 'schema') { + try { + updatedMethods[index] = { ...updatedMethods[index], schema: JSON.parse(value) }; + } catch (e) { + console.error('Invalid JSON format'); + } + } else { + updatedMethods[index] = { ...updatedMethods[index], [field]: value }; + } + setSelectedMethods(updatedMethods); + }; + + const handleEventChange = (index: number, field: keyof Event, value: string) => { + const updatedEvents = [...selectedEvents]; + if (field === 'schema') { + try { + updatedEvents[index] = { ...updatedEvents[index], schema: JSON.parse(value) }; + } catch (e) { + console.error('Invalid JSON format'); + } + } else { + updatedEvents[index] = { ...updatedEvents[index], [field]: value }; + } + setSelectedEvents(updatedEvents); + }; + + const addMethod = () => { + setSelectedMethods([...selectedMethods, { method_name: '', schema: { type: 'object' } }]); + }; + + const addEvent = () => { + setSelectedEvents([...selectedEvents, { event_name: '', schema: { type: 'object' } }]); + }; + + return ( +
+
+

Generate Code

+ +
+ setContractFilter(e.target.value)} + className="w-full p-3 border border-gray-300 rounded-md" + /> +
+ +
+

Selected Methods

+ {selectedMethods.map((method, index) => ( +
+ handleMethodChange(index, 'method_name', e.target.value)} + className="w-full p-3 border border-gray-300 rounded-md mb-2" + /> +