From e5e8d2176557daf87fb0700c79ce616ea788572c Mon Sep 17 00:00:00 2001
From: Richard Ramos <info@richardramos.me>
Date: Fri, 5 Oct 2018 16:54:02 -0400
Subject: [PATCH] Installing react packages automatically

---
 cmd/cmd_controller.js                         |  2 -
 lib/cmds/scaffolding.js                       |  6 +-
 lib/modules/scaffolding-react/index.js        | 60 +++++++++++--------
 .../scaffolding-react/templates/dapp.js.tpl   | 12 +---
 4 files changed, 41 insertions(+), 39 deletions(-)

diff --git a/cmd/cmd_controller.js b/cmd/cmd_controller.js
index 4ab2ce08..9a1e7367 100644
--- a/cmd/cmd_controller.js
+++ b/cmd/cmd_controller.js
@@ -463,7 +463,6 @@ class EmbarkController {
         engine.startService("pipeline");
         engine.startService("deployment", {onlyCompile: true});
         engine.startService("web3");
-        engine.startService("codeGenerator");
 
         engine.events.request('deploy:contracts', callback);
       }
@@ -474,7 +473,6 @@ class EmbarkController {
       } else {
         let scaffold = new Scaffolding(engine, options);
         scaffold.generate(options.contract, options.overwrite);
-        process.exit();
       }
     });
   }
diff --git a/lib/cmds/scaffolding.js b/lib/cmds/scaffolding.js
index d92e34a1..a2ca765f 100644
--- a/lib/cmds/scaffolding.js
+++ b/lib/cmds/scaffolding.js
@@ -39,8 +39,10 @@ class Scaffolding {
 
             const contract = contractsList.find(x => x.className === contractName);
             try {
-                build(contract, overwrite);
-                this.engine.logger.info(__("finished generating the UI").underline);
+                build(contract, overwrite, () => {
+                    this.engine.logger.info(__("finished generating the UI").underline);
+                    process.exit();
+                });
             } catch(err){
                 this.engine.logger.error(err.message);
             }
diff --git a/lib/modules/scaffolding-react/index.js b/lib/modules/scaffolding-react/index.js
index c11d744e..73db137d 100644
--- a/lib/modules/scaffolding-react/index.js
+++ b/lib/modules/scaffolding-react/index.js
@@ -1,6 +1,8 @@
 
 const Handlebars = require('handlebars');
 const fs = require('../../core/fs');
+let utils = require('../../utils/utils.js');
+
 
 Handlebars.registerHelper('capitalize', function(word) {
     return word.charAt(0).toUpperCase() + word.slice(1);
@@ -64,34 +66,42 @@ class ScaffoldingReact {
         fs.writeFileSync(filePath, result);
     }
 
-    build(contract, overwrite){
-        const filename = contract.className.toLowerCase();
+    build(contract, overwrite, cb){
+        const packageInstallCmd = 'npm install react react-bootstrap react-dom';
+        utils.runCmd(packageInstallCmd, null, (err) => {
+            if (err) {
+                this.embark.logger.error(err.message);
+                process.exit(1);
+            }
 
-        this._generateFile(contract, 'index.html.tpl', 'html',
-        {
-            'title': contract.className, 
-            filename
-        }, overwrite);
+            const filename = contract.className.toLowerCase();
 
-        this._generateFile(contract, 'dapp.js.tpl', 'js',         
-        {
-            'title': contract.className,
-            'contractName': contract.className,
-            'functions': contract.abiDefinition.filter(x => x.type === 'function')
-        }, overwrite);
-
-
-        // Update config
-        const contents = fs.readFileSync("./embark.json");
-        let embarkJson = JSON.parse(contents);
-        embarkJson.app["js/" + filename + ".js"] = "app/" + filename + '.js';
-        embarkJson.app[filename + ".html"] = "app/" + filename + '.html';
-
-        fs.writeFileSync("./embark.json", JSON.stringify(embarkJson, null, 4));
-
-        this.embark.logger.info(filename + ".html generated");
-        this.embark.logger.info(filename + ".js generated");
+            this._generateFile(contract, 'index.html.tpl', 'html',
+            {
+                'title': contract.className, 
+                filename
+            }, overwrite);
+    
+            this._generateFile(contract, 'dapp.js.tpl', 'js',         
+            {
+                'title': contract.className,
+                'contractName': contract.className,
+                'functions': contract.abiDefinition.filter(x => x.type === 'function')
+            }, overwrite);
+    
+            // Update config
+            const contents = fs.readFileSync("./embark.json");
+            let embarkJson = JSON.parse(contents);
+            embarkJson.app["js/" + filename + ".js"] = "app/" + filename + '.js';
+            embarkJson.app[filename + ".html"] = "app/" + filename + '.html';
+    
+            fs.writeFileSync("./embark.json", JSON.stringify(embarkJson, null, 4));
+    
+            this.embark.logger.info(filename + ".html generated");
+            this.embark.logger.info(filename + ".js generated");    
 
+            cb();
+        });
     }
 }
 
diff --git a/lib/modules/scaffolding-react/templates/dapp.js.tpl b/lib/modules/scaffolding-react/templates/dapp.js.tpl
index ff9fcd2d..2ff2c285 100644
--- a/lib/modules/scaffolding-react/templates/dapp.js.tpl
+++ b/lib/modules/scaffolding-react/templates/dapp.js.tpl
@@ -160,21 +160,13 @@ class {{capitalize name}}Form{{@index}} extends Component {
 
 {{/each}}
 
-class {{contractName}}UI extends Component {
-    constructor (props) {
-        super(props);
-            this.state = {
-        };
-    }
-
-    render(){
-        return (<div>
+function {{contractName}}UI(props) {
+    return (<div>
             <h1>{{title}}</h1>
             {{#each functions}}
             <{{capitalize name}}Form{{@index}} />
             {{/each}}
         </div>);
-    }
 }