Added in service logic.

Author: Direside

internal/ui/src/App.js

@@ -22,13 +22,7 @@ export default class App extends React.Component {
       frontend: 'react',
       region: 'us-east-1',
       profile: 'default',
-      services: [
-        {
-          name: "test service 1",
-          description: "Things.",
-          language: "go"
-        }
-      ]
+      services: []
     };
   }
 
@@ -56,16 +50,16 @@ export default class App extends React.Component {
     this.setState({ profile: v });
   }
 
-  addServices = (s) => {
-    let servicesArray = this.state.services.push(s);
-    this.setState({ services: servicesArray });
+  setServices = (s) => {
+    this.setState({services: s});
   }
 
   generate = () => {
     let self = this;
     axios.post('http://localhost:8080/v1/generate', {
       "projectName": self.state.projectName,
       "frontendFramework": self.state.frontend,
+      "services": self.state.services,
       "infrastructure": {
         "aws": {
           "region": self.state.region,
@@ -99,7 +93,7 @@ export default class App extends React.Component {
           setRegion={this.setRegion}
           setProfile={this.setProfile} />
         <Frontend frontend={this.state.frontend} setFrontend={this.setFrontend} />
-        <Services services={this.state.services} addService={this.addService} />
+        <Services services={this.state.services} setServices={this.setServices} />
         <Divider variant="middle" />
         <GenerateButton generate={this.generate} />
         {this.state.success !== null && <Complete success={this.state.success} />}

internal/ui/src/Service.js

@@ -1,23 +1,111 @@
 import React from 'react';
 import TextField from '@material-ui/core/TextField';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import MenuItem from '@material-ui/core/MenuItem';
+import Menu from '@material-ui/core/Menu';
+import { timeout } from 'q';
+import { timer } from 'rxjs';
 
-export default function Service() {
-  return (
-    <div className="service">
+export default class Service extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: "",
+      description: "",
+      language: "",
+      anchorEl: null,
+    }
+  }
+
+  updateName = (event) => {
+    this.setState({
+      name: event.target.value
+    }, () => {
+      this.props.update(this.props.serviceID, this.state);
+    })
+  }
+
+  updateDesc = (event) => {
+    this.setState({
+      description: event.target.value
+    }, () => {
+      this.props.update(this.props.serviceID, this.state);
+    })
+  }
+
+  languages = [
+    'go',
+    'scala',
+    'nodejs'
+  ];
+
+  setAnchorEl = element => {
+    this.setState({ anchorEl: element })
+  }
+
+  handleClickListItem = event => {
+    this.setAnchorEl(event.currentTarget);
+  };
+
+  handleMenuItemClick = (event, index) => {
+    this.setAnchorEl(null);
+    this.setState({ language: this.languages[index] }, () => {
+      this.props.update(this.props.serviceID, this.state);
+    });
+  };
+
+  handleClose = () => {
+    this.setAnchorEl(null);
+  };
+
+  render() {
+    return (
+      <div className="service">
         <TextField
           id="standard-basic"
           label="Name"
           margin="normal"
+          onChange={this.updateName}
         />
         <TextField
           id="standard-multiline-flexible"
           label="Description"
           multiline
           rowsMax="4"
-          value=""
-          onChange={null}
           margin="normal"
+          onChange={this.updateDesc}
         />
-    </div>
-  );
+        <List component="nav" aria-label="language">
+          <ListItem
+            button
+            aria-haspopup="true"
+            aria-controls="lock-menu"
+            aria-label="language"
+            onClick={this.handleClickListItem}
+          >
+            <ListItemText primary="Language" secondary={this.state.language} />
+          </ListItem>
+        </List>
+        <Menu
+          id="lock-menu"
+          anchorEl={this.state.anchorEl}
+          keepMounted
+          open={Boolean(this.state.anchorEl)}
+          onClose={this.handleClose}
+        >
+          {this.languages.map((language, index) => (
+            <MenuItem
+              key={language}
+              selected={index === this.state.selectedlanguage}
+              onClick={event => this.handleMenuItemClick(event, index)}
+            >
+              {language}
+            </MenuItem>
+          ))}
+        </Menu>
+      </div>
+    );
+  }
 }

internal/ui/src/Services.js

@@ -7,14 +7,27 @@ import Service from './Service.js';
 export default class Services extends React.Component {
   constructor(props) {
     super(props);
+    this.state = {
+      services: []
+    }
+  }
+
+  add = () => {
+    this.state.services.push({ name: "", description: ""});
+    this.props.setServices(this.state.services);
+  }
+
+  update = (index, data) => {
+    this.state.services[index] = data;
+    this.props.setServices(this.state.services);
   }
   render() {
     return (
       <div className="services">
         <h2>Services</h2>
         <Grid container spacing={2} direction="column" alignItems="center">
-          <Button variant="contained" color="default" onClick={event => this.props.addService}>+ Add Service</Button>
-          {this.props.services.map((s, i) => <Service key={i} />)}
+          <Button variant="contained" color="default" onClick={this.add}>+ Add Service</Button>
+          {this.props.services.map((s, i) => <Service key={i} serviceID={i} update={this.update} />)}
         </Grid>
       </div>
     );