Updated the "New Project" flow to first select a template

src/components/newdapp/index.js

@@ -16,38 +16,39 @@
 
 import { h, Component } from 'preact';
 import Proptypes from 'prop-types';
-import Step1 from './step1';
-import Step2 from './step2';
+import SelectedTemplate from './selectTemplate';
+import ProjectDetails from './projectDetails';
 import Templates from '../templates';
 
 export default class NewDapp extends Component {
 
     state = {
-        projectInfo: null,
+        selectedTemplate: null,
         currentStep: 1,
     }
 
-    onStep1DoneHandle = (projectInfo) => {
-        this.setState({
-            currentStep: 2,
-            projectInfo: projectInfo
-        });
-    }
-
     onCloseClickHandle = () => {
         this.closeModal();
     }
 
     onTemplateSelectedHandle = (selectedTemplate) => {
-        var dappfile = selectedTemplate.dappfile;
+        this.setState({
+            currentStep: 2,
+            selectedTemplate: selectedTemplate
+        })
+    }
+
+    onProjectDetailsDone = (projectInfo) => {
+        var dappfile = this.state.selectedTemplate.dappfile;
 
         // Make sure we include the info of the current project in the dappFile, in order to do not break anything in the app...
-        const project = { info: this.state.projectInfo }
+        const project = { info: projectInfo }
         dappfile.project = project;
 
-        const files = selectedTemplate.files;
+        const files = this.state.selectedTemplate.files;
+
+        this.props.backend.saveProject(projectInfo.name, { dappfile: dappfile }, o => this.props.cb(o.status, o.code), true, files);
 
-        this.props.backend.saveProject(this.state.projectInfo.name, { dappfile: dappfile }, o => this.props.cb(o.status, o.code), true, files);
         this.closeModal();
     }
 
@@ -65,22 +66,23 @@ export default class NewDapp extends Component {
         let step;
         switch (this.state.currentStep) {
             case 1:
-                step = <Step1
-                            projectName={this.state.projectInfo ? this.state.projectInfo.name : ""}
-                            projectTitle={this.state.projectInfo ? this.state.projectInfo.title : ""}
-                            onStep1Done={this.onStep1DoneHandle}
-                            onCloseClickHandle={this.onCloseClickHandle}/>;
-                break;
-            case 2:
-                step = <Step2
+                step = <SelectedTemplate
                             categories={Templates.categories}
                             templates={Templates.templates}
                             onTemplateSelected={this.onTemplateSelectedHandle}
-                            onBackPress={this.pop}
-                            onCloseClickHandle={this.onCloseClickHandle}/>;
+                            onBackPress={this.closeModal}
+                            onCloseClick={this.onCloseClickHandle}/>;
+                break;
+            case 2:
+                step = <ProjectDetails
+                            projectName={this.state.projectInfo ? this.state.projectInfo.name : ""}
+                            projectTitle={this.state.projectInfo ? this.state.projectInfo.title : ""}
+                            onProjectDetailsDone={this.onProjectDetailsDone}
+                            onCloseClick={this.onCloseClickHandle}
+                            onBackClick={this.pop}/>;
                 break;
             default:
-                step = <Step1 onStep1Done={this.onStep1DoneHandle}/>;
+                step = <AddProjectDetails onStep1Done={this.onStep1DoneHandle}/>;
                 break;
         }
 

src/components/newdapp/step1/index.js → src/components/newdapp/projectDetails/index.js

@@ -20,7 +20,7 @@ import classNames from 'classnames';
 import style from '../style';
 import { IconClose } from '../../icons';
 
-export default class Step1 extends Component {
+export default class ProjectDetails extends Component {
 
     constructor(props) {
         super(props);
@@ -61,12 +61,16 @@ export default class Step1 extends Component {
         }
 
         if (this.validateInputs()) {
-            this.props.onStep1Done({ name: this.state.projectName, title: this.state.projectTitle });
+            this.props.onProjectDetailsDone({ name: this.state.projectName, title: this.state.projectTitle });
         }
     };
 
     onCloseClickHandle = () => {
-        this.props.onCloseClickHandle();
+        this.props.onCloseClick();
+    };
+
+    onBackClickHandle = () => {
+        this.props.onBackClick();
     };
 
     handleNameChange = changeEvent => {
@@ -118,16 +122,17 @@ export default class Step1 extends Component {
                         </div>
                     </div>
                     <div class={style.footer}>
-                        <button onClick={this.onCloseClickHandle} class="btn2 noBg mr-2">Cancel</button>
-                        <button onClick={this.onNextClickHandle} class="btn2">Next</button>
+                        <button onClick={this.onBackClickHandle} class="btn2 noBg mr-2">Back</button>
+                        <button onClick={this.onNextClickHandle} class="btn2">Create Project</button>
                     </div>
                 </div>
             </div>
         );
     }
 }
 
-Step1.propTypes = {
-    onStep1Done: Proptypes.func.isRequired,
-    onCloseClickHandle: Proptypes.func.isRequired
+ProjectDetails.propTypes = {
+    onProjectDetailsDone: Proptypes.func.isRequired,
+    onCloseClick: Proptypes.func.isRequired,
+    onBackClick: Proptypes.func.isRequired
 }

src/components/newdapp/step2/index.js → src/components/newdapp/selectTemplate/index.js

@@ -56,7 +56,7 @@ TemplateLayout.propTypes = {
     onTemplateSelected: Proptypes.func.isRequired
 }
 
-export default class Step2 extends Component {
+export default class SelectTemplate extends Component {
 
     state = {
         categorySelectedId: 0,
@@ -67,8 +67,8 @@ export default class Step2 extends Component {
         this.props.onTemplateSelected(this.state.templateSelected);
     }
 
-    back = () => {
-        this.props.onBackPress();
+    onCancelClickHandle = () => {
+        this.props.onCloseClick();
     }
 
     onCategorySelected(id) {
@@ -84,7 +84,7 @@ export default class Step2 extends Component {
     }
 
     onCloseClickHandle = () => {
-        this.props.onCloseClickHandle();
+        this.props.onCloseClick();
     };
 
     render() {
@@ -124,19 +124,18 @@ export default class Step2 extends Component {
                         </div>
                     </div>
                     <div class={style.footer}>
-                        <button onClick={this.back} class="btn2 noBg mr-2">Back</button>
-                        <button onClick={this.onCreateProjectHandle} disabled={!templateSelected} class="btn2">Create Project</button>
+                        <button onClick={this.onCancelClickHandle} class="btn2 noBg mr-2">Cancel</button>
+                        <button onClick={this.onCreateProjectHandle} disabled={!templateSelected} class="btn2">Select Template</button>
                     </div>
                 </div>
             </div>
         );
     }
 }
 
-Step2.proptypes = {
+SelectTemplate.proptypes = {
     categories: Proptypes.array.isRequired,
     templates: Proptypes.array.isRequired,
     onTemplateSelected: Proptypes.func.isRequired,
-    onBackPress: Proptypes.func.isRequired,
-    onCloseClicked: Proptypes.func.isRequired
+    onCloseClick: Proptypes.func.isRequired
 }