Make the add to database form connect

react-src/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "autoprefixer": "7.1.1",
+    "axios": "^0.16.2",
     "babel-core": "6.25.0",
     "babel-eslint": "7.2.3",
     "babel-jest": "20.0.3",

react-src/scripts/start.js

@@ -40,7 +40,7 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 }
 
 // Tools like Cloud9 rely on this.
-const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
+const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 4200;
 const HOST = process.env.HOST || '0.0.0.0';
 
 // We attempt to use the default port but if it is busy, we offer the user to

react-src/src/components/App/App.js

@@ -1,10 +1,16 @@
 import React, { Component } from 'react';
-import TableData from '../Table/Table';
+import { Container } from 'semantic-ui-react';
+import TableData from '../TableData/TableData';
+import ModalAdd from '../ModalAdd/ModalAdd';
 
 import logo from '../../logo.svg';
 import './App.css';
 
 class App extends Component {
+
+  // Pass this as a property
+  server = 'http://localhost:3000'; // http://localhost:3000
+
   render() {
     return (
       <div>
@@ -14,7 +20,10 @@ class App extends Component {
             <h2>MERN CRUD Starter Kit</h2>
           </div>
         </div>
-        <TableData />
+        <Container>
+          <ModalAdd server={this.server} />
+          <TableData />
+        </Container>
       </div>
     );
   }

react-src/src/components/FormAdd/FormAdd.js

@@ -0,0 +1,108 @@
+import React, { Component } from 'react';
+import { Button, Form, Select } from 'semantic-ui-react';
+import axios from 'axios';
+
+const genderOptions = [
+  { key: 'm', text: 'Male', value: 'male' },
+  { key: 'f', text: 'Female', value: 'female' },
+]
+
+class FormAdd extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: '',
+      email: '',
+      age: '',
+      gender: ''
+    }
+
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleSelectChange = this.handleSelectChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleInputChange(e) {
+    const target = e.target;
+    const value = target.type === 'checkbox' ? target.checked : target.value;
+    const name = target.name;
+
+    this.setState({ [name]: value });
+  }
+
+  handleSelectChange(e, data) {
+    this.setState({ gender: data.value });
+  }
+
+  handleSubmit(e) {
+    e.preventDefault();
+
+    const newUser = {
+      name: this.state.name,
+      email: this.state.email,
+      age: parseInt(this.state.age, 10),
+      gender: this.state.gender
+    }
+
+    axios({
+      method: 'post',
+      responseType: 'json',
+      url: `${this.props.server}/api/users/`,
+      data: newUser
+    })
+    .then((res) => {
+      alert('Successfully added!');
+    })
+    .catch((err) => {
+      alert(err.response.data.msg);
+    });
+  }
+
+  render() {
+    return (
+      <Form warning onSubmit={this.handleSubmit}>
+        <Form.Input
+          label='Name'
+          type='text'
+          placeholder='Elon Musk'
+          name='name'
+          value={this.state.name}
+          onChange={this.handleInputChange}
+        />
+        <Form.Input
+          label='Email'
+          type='email'
+          placeholder='[email protected]'
+          name='email'
+          value={this.state.email}
+          onChange={this.handleInputChange}
+        />
+        <Form.Group widths='equal'>
+          <Form.Input
+            label='Age'
+            type='number'
+            placeholder='18'
+            min={0}
+            max={120}
+            name='age'
+            value={this.state.age}
+            onChange={this.handleInputChange}
+          />
+          <Form.Field
+            control={Select}
+            label='Gender'
+            options={genderOptions}
+            placeholder='Gender'
+            value={this.state.gender}
+            onChange={this.handleSelectChange}
+          />
+        </Form.Group>
+        <Button primary floated='right'>Add</Button>
+        <br /><br />
+      </Form>
+    );
+  }
+}
+
+export default FormAdd;

react-src/src/components/ModalAdd/ModalAdd.js

@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import { Button, Modal } from 'semantic-ui-react';
+
+import FormAdd from '../FormAdd/FormAdd';
+
+class ModalFormAdd extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      open: false
+    };
+  }
+
+  show = (size) => () => this.setState({ size, open: true });
+  close = () => this.setState({ open: false });
+
+  render() {
+    const { open, size } = this.state;
+
+    return (
+      <div>
+        <Button onClick={this.show('tiny')} primary>Add New</Button>
+
+        <Modal size={size} open={open} onClose={this.close}>
+          <Modal.Header>
+            Add User
+          </Modal.Header>
+          <Modal.Content>
+            <FormAdd server={this.props.server} />
+          </Modal.Content>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+export default ModalFormAdd;

react-src/src/components/TableData/TableData.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Button, Table } from 'semantic-ui-react';
+
+const ButtonAction = () => (
+  <div>
+    <Button secondary>Edit</Button>
+    <Button>Delete</Button>
+  </div>
+)
+
+const TableData = () => {
+  return (
+    <Table singleLine>
+      <Table.Header>
+        <Table.Row>
+          <Table.HeaderCell>Name</Table.HeaderCell>
+          <Table.HeaderCell>Email</Table.HeaderCell>
+          <Table.HeaderCell>Age</Table.HeaderCell>
+          <Table.HeaderCell>Gender</Table.HeaderCell>
+          <Table.HeaderCell>Actions</Table.HeaderCell>
+        </Table.Row>
+      </Table.Header>
+
+      <Table.Body>
+        <Table.Row>
+          <Table.Cell>John Lilki</Table.Cell>
+          <Table.Cell>[email protected]</Table.Cell>
+          <Table.Cell>21</Table.Cell>
+          <Table.Cell>M</Table.Cell>
+          <Table.Cell><ButtonAction /></Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>Jamie Harington</Table.Cell>
+          <Table.Cell>[email protected]</Table.Cell>
+          <Table.Cell>25</Table.Cell>
+          <Table.Cell>F</Table.Cell>
+          <Table.Cell><ButtonAction /></Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>Jill Lewis</Table.Cell>
+          <Table.Cell>[email protected]</Table.Cell>
+          <Table.Cell>12</Table.Cell>
+          <Table.Cell>F</Table.Cell>
+          <Table.Cell><ButtonAction /></Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  );
+}
+
+export default TableData;