Merge branch 'create-versions-dropdown' of https://github.com/fergarrui/ethereum-graph-debugger into create-versions-dropdown

Author: Swolfeyes

cfg

@@ -1,9 +1,10 @@
-import { Route, Controller, Get, Path, Query } from 'tsoa'
+import { Route, Controller, Get, Path, Query, Post, Body } from 'tsoa'
 import { provideSingleton, inject } from '../../../inversify/ioc'
 import { ContractFile } from '../bean/ContractFile'
 import { TYPES } from '../../../inversify/types'
 import { FileService } from '../service/FileService'
 import { logger } from '../../../Logger'
+import { SaveFileRequest } from '../request/SaveFileRequest';
 
 @Route('files')
 @provideSingleton(FileController)
@@ -25,4 +26,14 @@ export class FileController extends Controller {
       throw new Error(err.message)
     }
   }
+
+  @Post()
+  async saveFile(@Body() saveFileRequest: SaveFileRequest) {
+    try {
+      await this.fileService.saveFile(saveFileRequest.path, saveFileRequest.name, saveFileRequest.content)
+    } catch (err) {
+      logger.error(err)
+      throw new Error(err.message)
+    }
+  }
 }

src/api/service/controller/FileController.ts

@@ -0,0 +1,5 @@
+export interface SaveFileRequest {
+  path: string
+  name: string
+  content: string
+}

src/api/service/request/SaveFileRequest.ts

@@ -2,4 +2,5 @@ import { ContractFile } from '../bean/ContractFile'
 
 export interface FileService {
   findContractssWithExtension(dir: string, extension: string): Promise<ContractFile[]>
+  saveFile(dir: string, name: string, content: string)
 }

src/api/service/service/FileService.ts

@@ -22,4 +22,9 @@ export class FileServiceDefault implements FileService {
       })
       .sort((a, b) => (a.name > b.name ? 1 : -1))
   }
+
+  async saveFile(dir: string, name: string, content: string) {
+    const filePath = path.join(dir, name)
+    return fs.writeFileSync(filePath, content)
+  }
 }

src/api/service/service/FileServiceDefault.ts

@@ -22,29 +22,29 @@ class ConnectedCodeEditor extends React.Component {
         setReadOnly,
         setValue,
         theme,
+        path,
+        name,
         mode,
         setUseWorker,
         index,
         selectedLines
       } = this.props;
-
       require(`brace/mode/${mode}`);
       require(`brace/theme/${theme}`);
       const editor = ace.edit(`ace-editor-${index}`);
       this.editor = editor;
       editor.getSession().setMode(`ace/mode/${mode}`);
       editor.getSession().setUseWorker(setUseWorker);
       editor.setTheme(`ace/theme/${theme}`);
-      editor.on('change', e => onChange(editor.getValue(), e));
+      editor.on('change', e => onChange(editor.getValue(),path,name, e));
       editor.setReadOnly(setReadOnly);
       editor.setValue(setValue);
       this.selectLines(selectedLines);
     }
   }
 
   componentDidUpdate() {
-    const { selectedLines } = this.props;
-
+    const { selectedLines, path } = this.props;
     this.selectLines(selectedLines);
   }
 

src/client/components/Editor/AceEditor/AceEditor.js

@@ -2,20 +2,44 @@ import React from 'react';
 
 import CodeEditor from './AceEditor/AceEditor';
 
-const Editor = ({ code, index }) => {
 
+const Editor = ({ code, path, name, index, changeCode }) => {
   return (
     <CodeEditor
       index={index}
+      name={name}
       mode='javascript'
       theme='twilight'
-      setReadOnly={true}
+      path={path}
+      setReadOnly={false}
       style={{ height: '500px', width: '100%' }}
       setValue={code}
       setUseWorker={false}
+      onChange={onChange}
     >
     </CodeEditor>
   );
 }
 
+let timeout = null
+
+const onChange = (code, path, name, event) => {
+  
+  clearTimeout(timeout)
+
+  timeout = setTimeout(() => {
+    fetch(`http://localhost:9090/files`,{
+      body: JSON.stringify({
+        path: path,
+        name: name,
+        content: code
+      }),
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+  }, 1000)
+}
+
 export default Editor;

src/client/components/Editor/Editor.js

@@ -12,7 +12,6 @@ const TabPanel = ({ children, active }) => {
     'tab-panel': true,
     'tab-panel--active': !!active,
   });
-
   return (
     <div className={tabPanelClasses}>
       {children}

src/client/components/Tab/TabPanel/TabPanel.js

@@ -47,6 +47,12 @@ const models: TsoaRoute.Models = {
             "path": { "dataType": "string", "required": true },
         },
     },
+    "SaveFileRequest": {
+        "properties": {
+            "path": { "dataType": "string", "required": true },
+            "content": { "dataType": "string", "required": true },
+        },
+    },
     "DisassembledContractResponse": {
         "properties": {
             "hasConstructor": { "dataType": "boolean", "required": true },
@@ -167,6 +173,28 @@ export function RegisterRoutes(app: express.Express) {
             const promise = controller.findContractsInDir.apply(controller, validatedArgs as any);
             promiseHandler(controller, promise, response, next);
         });
+    app.post('/files',
+        function(request: any, response: any, next: any) {
+            const args = {
+                saveFileRequest: { "in": "body", "name": "saveFileRequest", "required": true, "ref": "SaveFileRequest" },
+            };
+
+            let validatedArgs: any[] = [];
+            try {
+                validatedArgs = getValidatedArgs(args, request);
+            } catch (err) {
+                return next(err);
+            }
+
+            const controller = iocContainer.get<FileController>(FileController);
+            if (typeof controller['setStatus'] === 'function') {
+                (<any>controller).setStatus(undefined);
+            }
+
+
+            const promise = controller.saveFile.apply(controller, validatedArgs as any);
+            promiseHandler(controller, promise, response, next);
+        });
     app.post('/disassemble',
         function(request: any, response: any, next: any) {
             const args = {