WIP: feat: add plain schema editor

package.json

@@ -35,6 +35,7 @@
     "promise": "8.0.1",
     "raf": "3.4.0",
     "react": "^16.6.3",
+    "react-codemirror2": "^6.0.0",
     "react-dev-utils": "^5.0.2",
     "react-dom": "^16.6.3",
     "react-json-view": "^1.19.1",

src/components/CtypeEditor/CtypeEditor.tsx

@@ -1,40 +1,37 @@
-import { CTypeInputModel } from '@kiltprotocol/prototype-sdk'
+import { CTypeInputModel, CTypeWrapperModel } from '@kiltprotocol/prototype-sdk'
 import * as React from 'react'
 
 import * as common from 'schema-based-json-editor'
+import PlainSchemaEditor from '../PlainSchemaEditor/PlainSchemaEditor'
 import SchemaEditor from '../SchemaEditor/SchemaEditor'
 
 import './CtypeEditor.scss'
 
 type Props = {
-  // input
   connected: boolean
   cType: string
   isValid: boolean
-  // output
-  cancel: () => void
-  submit: () => void
-  updateCType: (cType: any, isValid: boolean) => void
+
+  onCancel: () => void
+  onSubmit: () => void
+  onUpdateCType: (cType: any) => void
 }
 
 const CTypeEditor = (props: Props) => {
-  const { cancel, connected, isValid, submit, cType, updateCType } = props
+  const { onCancel, connected, isValid, onSubmit, cType, onUpdateCType } = props
 
   return (
     <section className="CTypeEditor">
-      <SchemaEditor
-        schema={CTypeInputModel as common.Schema}
-        initialValue={cType}
-        updateValue={updateCType}
-      />
+      {/*<SchemaEditor onUpdateValue={onUpdateCType} />*/}
+      {/*<PlainSchemaEditor schema={CTypeWrapperModel as common.Schema} />*/}
       <div className="actions">
-        <button className="cancel-cType" onClick={cancel}>
+        <button className="cancel-cType" onClick={onCancel}>
           Cancel
         </button>
         <button
           className="submit-cType"
           disabled={!connected || !isValid}
-          onClick={submit}
+          onClick={onSubmit}
         >
           Submit
         </button>

src/components/MyClaimCreateView/MyClaimCreateView.tsx

@@ -106,7 +106,7 @@ class MyClaimCreateView extends Component<Props, State> {
                 sdk.CTypeUtils.getClaimInputModel(cType!) as common.Schema
               }
               initialValue={contents}
-              updateValue={this.updateClaim}
+              onUpdateSchema={this.updateClaim}
             />
 
             <div className="actions">

src/components/PlainSchemaEditor/PlainSchemaEditor.scss

@@ -0,0 +1,3 @@
+.PlainSchemaEditor {
+
+}

src/components/PlainSchemaEditor/PlainSchemaEditor.tsx

@@ -0,0 +1,109 @@
+import { CTypeInputModel } from '@kiltprotocol/prototype-sdk'
+import * as React from 'react'
+import Ajv, { ErrorObject } from 'ajv'
+import * as codemirror from 'codemirror'
+import { UnControlled as CodeMirror } from 'react-codemirror2'
+import { js as beautify } from 'js-beautify'
+
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/mode/javascript/javascript.js'
+
+// import './codemirror.css'
+
+type Props = {
+  schema: string
+
+  onUpdateSchema: (schema: string) => void
+}
+
+type State = {
+  errors: Array<ErrorObject | Error>
+  valid: boolean
+}
+
+class PlainSchemaEditor extends React.Component<Props, State> {
+  private ajv: any
+
+  constructor(props: Props) {
+    super(props)
+    this.state = {
+      errors: [],
+      valid: true,
+    }
+
+    const schema = CTypeInputModel
+
+    this.ajv = new Ajv({
+      meta: false,
+    })
+    this.ajv.addMetaSchema(schema)
+  }
+
+  public render() {
+    return (
+      <section className="PlainSchemaEditor">
+        <div>
+          <CodeMirror
+            value={this.props.schema}
+            options={{
+              indentUnit: 4,
+              lineNumbers: true,
+              mode: { name: 'javascript', json: true },
+            }}
+            onChange={this.onChange}
+          />
+        </div>
+        <button onClick={this.autoformat}>Autoformat</button>
+        <div className="errors">
+          {this.state.errors.map(error => (
+            <div>{error}</div>
+          ))}
+        </div>
+      </section>
+    )
+  }
+
+  private onChange = (
+    editor: codemirror.Editor,
+    data: codemirror.EditorChange,
+    value: string
+  ) => {
+    const { errors } = this.state
+    let validate = ''
+    try {
+      validate = this.ajv.validateSchema(JSON.parse(value))
+    } catch (e) {
+      this.setState({
+        valid: false,
+        errors: [...errors, new Error('Invalid JSON')],
+      })
+      return
+    }
+    if (!validate) {
+      this.setState({
+        errors: [...errors, ...this.ajv.errors],
+        valid: false,
+      })
+    } else {
+      this.setState({
+        errors: [],
+        valid: true,
+      })
+    }
+  }
+
+  private changeSchema = (
+    editor: codemirror.Editor,
+    data: codemirror.EditorChange,
+    value: string
+  ) => {
+    this.props.onUpdateSchema(value)
+  }
+
+  private autoformat = () => {
+    const formatted = beautify(this.props.schema)
+    this.props.onUpdateSchema(formatted)
+  }
+}
+
+export default PlainSchemaEditor

src/components/SchemaEditor/SchemaEditor.tsx

@@ -5,18 +5,19 @@ import * as common from 'schema-based-json-editor'
 import './SchemaEditor.scss'
 
 type Props = {
-  schema: common.Schema
   initialValue: common.ValueType
-  updateValue: (value: common.ValueType, _isValid: boolean) => void
+  schema: common.Schema
+  // output
+  onUpdateSchema: (value: common.ValueType, isValid: boolean) => void
 }
 
-const SchemaEditor = ({ schema, initialValue, updateValue }: Props) => {
+const SchemaEditor = ({ initialValue, schema, onUpdateSchema }: Props) => {
   return (
     <div className="schema-based-json-editor">
       <JSONEditor
         schema={schema}
         initialValue={initialValue}
-        updateValue={updateValue}
+        updateValue={onUpdateSchema}
         icon="fontawesome5"
       />
     </div>

src/containers/CtypeCreate/CtypeCreate.tsx

@@ -2,7 +2,10 @@ import * as sdk from '@kiltprotocol/prototype-sdk'
 import * as React from 'react'
 import { connect } from 'react-redux'
 import { RouteComponentProps, withRouter } from 'react-router'
-import CTypeEditor from '../../components/CtypeEditor/CtypeEditor'
+import * as common from 'schema-based-json-editor'
+import PlainSchemaEditor from '../../components/PlainSchemaEditor/PlainSchemaEditor'
+
+import SchemaEditor from '../../components/SchemaEditor/SchemaEditor'
 import CTypeRepository from '../../services/CtypeRepository'
 import errorService from '../../services/ErrorService'
 import FeedbackService, {
@@ -13,52 +16,59 @@ import * as Wallet from '../../state/ducks/Wallet'
 import { State as ReduxState } from '../../state/PersistentStore'
 import { ICType } from '../../types/Ctype'
 import { BlockUi } from '../../types/UserFeedback'
+
 import './CtypeCreate.scss'
 
 type Props = RouteComponentProps<{}> & {
   selectedIdentity?: Wallet.Entry
 }
 
 type State = {
-  connected: boolean
-  cType: any
   isValid: boolean
+
+  cType?: Partial<sdk.ICType>
 }
 
 class CTypeCreate extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props)
 
     this.state = {
-      cType: { title: '' },
-      connected: false,
       isValid: false,
     }
 
     this.submit = this.submit.bind(this)
     this.cancel = this.cancel.bind(this)
   }
 
-  public componentDidMount() {
-    this.connect()
-  }
+  public render() {
+    return (
+      <section className="CTypeCreate">
+        <h1 className="App-title">Create CTYPE</h1>
+        <SchemaEditor
+          schema={sdk.CTypeInputModel as common.Schema}
+          initialValue={{}}
+          onUpdateSchema={this.onUpdateSchemaBySchemaEditor}
+        />
+        <PlainSchemaEditor
+          schema={JSON.stringify(sdk.CTypeInputModel)}
+          onUpdateSchema={this.onUpdateSchemaByPlainSchemaEditor}
+        />
 
-  public async connect() {
-    // TODO: test unmount and host change
-    // TODO: test error handling
-    const blockUi: BlockUi = FeedbackService.addBlockUi({
-      headline: 'Connecting to block chain',
-    })
-    this.setState({ connected: true })
-    blockUi.remove()
+        {/*<CTypeEditor*/}
+        {/*cType={this.state.cType}*/}
+        {/*onUpdateCType={this.updateCType}*/}
+        {/*onSubmit={this.submit}*/}
+        {/*onCancel={this.cancel}*/}
+        {/*connected={this.state.connected}*/}
+        {/*isValid={this.state.isValid}*/}
+        {/*/>*/}
+      </section>
+    )
   }
 
-  public async submit() {
-    if (
-      this.props.selectedIdentity &&
-      this.state.connected &&
-      this.state.isValid
-    ) {
+  private async submit() {
+    if (this.props.selectedIdentity && this.state.isValid) {
       const { selectedIdentity, history } = this.props
       let cType: sdk.CType
 
@@ -68,7 +78,7 @@ class CTypeCreate extends React.Component<Props, State> {
         errorService.log({
           error,
           message: 'could not create CTYPE from Input Model',
-          origin: 'CTypeCreate.submit()',
+          origin: 'CTypeCreate.onSubmit()',
         })
         return
       }
@@ -101,42 +111,34 @@ class CTypeCreate extends React.Component<Props, State> {
         .catch(error => {
           errorService.log({
             error,
-            message: 'Could not submit CTYPE',
-            origin: 'CTypeCreate.submit()',
+            message: 'Could not onSubmit CTYPE',
+            origin: 'CTypeCreate.onSubmit()',
           })
           notifyError(error)
           blockUi.remove()
         })
     }
   }
 
-  public render() {
-    return (
-      <section className="CTypeCreate">
-        <h1 className="App-title">Create CTYPE</h1>
-        <CTypeEditor
-          cType={this.state.cType}
-          updateCType={this.updateCType}
-          submit={this.submit}
-          cancel={this.cancel}
-          connected={this.state.connected}
-          isValid={this.state.isValid}
-        />
-      </section>
-    )
-  }
-
   private cancel() {
     // TODO: goto CTYPE list or previous screen?
     this.props.history.push('/cType')
   }
 
-  private updateCType = (cType: string, isValid: boolean) => {
-    this.setState({
-      cType,
-      isValid,
-    })
+  private onUpdateSchemaBySchemaEditor(schema: common.ValueType) {
+    console.log('schema', schema)
   }
+
+  private onUpdateSchemaByPlainSchemaEditor(schema: string) {
+    console.log('schema', schema)
+  }
+
+  // private updateCType = (cType: string, isValid: boolean) => {
+  //   this.setState({
+  //     cType,
+  //     isValid,
+  //   })
+  // }
 }
 
 const mapStateToProps = (state: ReduxState) => ({

src/containers/Tasks/SubmitLegitimations/SubmitLegitimations.tsx

@@ -122,7 +122,7 @@ class SubmitLegitimations extends React.Component<Props, State> {
           <SchemaEditor
             schema={sdk.CTypeUtils.getClaimInputModel(cType) as common.Schema}
             initialValue={undefined}
-            updateValue={this.updateClaim}
+            onUpdateSchema={this.updateClaim}
           />
         </>
       )

yarn.lock

@@ -7695,6 +7695,11 @@ react-base16-styling@^0.6.0:
     lodash.flow "^3.3.0"
     pure-color "^1.2.0"
 
+react-codemirror2@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/react-codemirror2/-/react-codemirror2-6.0.0.tgz#180065df57a64026026cde569a9708fdf7656525"
+  integrity sha512-D7y9qZ05FbUh9blqECaJMdDwKluQiO3A9xB+fssd5jKM7YAXucRuEOlX32mJQumUvHUkHRHqXIPBjm6g0FW0Ag==
+
 react-copy-to-clipboard@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.1.tgz#8eae107bb400be73132ed3b6a7b4fb156090208e"