Make the actual retrieving of data work

MantasJa · Jul 20, 2017 · 781eb96 · 781eb96
1 parent 5ad2786
commit 781eb96
Show file tree

Hide file tree

Showing 7 changed files with 119 additions and 59 deletions.
diff --git a/README.md b/README.md
@@ -33,9 +33,20 @@ Run the development server for React.
 npm start
 ```
 
-For production build, simply run on *react-src* folder.
+To make a production build, simply run on *react-src* folder.
 ```
 npm run build
 ```
 
 It will create a folder named *public* on the root directory. This is where the production-ready front-end of the web application will reside.
+
+## Features You Can Manually Add
+
+* Front-end validation. Pure back-end validation is expensive.
+
+## To Do
+
+- [x] Create
+- [x] Read
+- [ ] Update
+- [ ] Delete
diff --git a/react-src/public/index.html b/react-src/public/index.html
@@ -26,7 +26,7 @@
     <title>MERN CRUD Starter Kit</title>
   </head>
   <body>
-    <a href="https://github.com/cefjoeii/mern-crud" target="blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
+    <a href="https://github.com/cefjoeii/mern-crud" target="blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
 
     <noscript>
       You need to enable JavaScript to run this app.

diff --git a/react-src/src/components/App/App.js b/react-src/src/components/App/App.js
@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
 import { Container } from 'semantic-ui-react';
+import axios from 'axios';
+
 import TableData from '../TableData/TableData';
 import ModalAdd from '../ModalAdd/ModalAdd';
 
@@ -8,22 +10,53 @@ import './App.css';
 
 class App extends Component {
 
-  // Pass this as a property
+  // Pass this as a prop
   server = 'http://localhost:3000'; // http://localhost:3000
 
+  constructor() {
+    super();
+
+    this.state = {
+      users: []
+    }
+
+    this.handleUsersListChange = this.handleUsersListChange.bind(this);
+  }
+
+  componentDidMount() {
+    axios.get(`${this.server}/api/users/`)
+    .then((response) => {
+      this.setState({ users: response.data });
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+  }
+
+  handleUsersListChange(addedUser) {
+    const users = this.state.users.slice();
+    users.push(addedUser);
+    this.setState({
+      users: users
+    });
+  }
+
   render() {
     return (
       <div>
         <div className="App">
           <div className="App-header">
             <img src={logo} className="App-logo" alt="logo" />
             <h2>MERN CRUD Starter Kit</h2>
+            <p>A Create, Read, Update, and Delete starter kit using MongoDB, Express.js, React.js, and Node.js</p>
+            <p>Semantic UI React was used for the UI.</p>
           </div>
         </div>
         <Container>
-          <ModalAdd server={this.server} />
-          <TableData />
+          <ModalAdd onUsersListChange={this.handleUsersListChange} server={this.server} />
+          <TableData users={this.state.users} />
         </Container>
+        <br/>
       </div>
     );
   }

diff --git a/react-src/src/components/FormAdd/FormAdd.js b/react-src/src/components/FormAdd/FormAdd.js
@@ -3,8 +3,8 @@ import { Message, 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' },
+  { key: 'm', text: 'Male', value: 'm' },
+  { key: 'f', text: 'Female', value: 'f' },
 ]
 
 class FormAdd extends Component {
@@ -17,6 +17,7 @@ class FormAdd extends Component {
       age: '',
       gender: '',
       formClassName: '',
+      formSuccessMessage: '',
       formErrorMessage: ''
     }
 
@@ -40,7 +41,7 @@ class FormAdd extends Component {
   handleSubmit(e) {
     e.preventDefault();
 
-    let newUser = {
+    const newUser = {
       name: this.state.name,
       email: this.state.email,
       age: parseInt(this.state.age, 10),
@@ -53,14 +54,16 @@ class FormAdd extends Component {
       url: `${this.props.server}/api/users/`,
       data: newUser
     })
-    .then((res) => {
+    .then((response) => {
       this.setState({
         name: '',
         email: '',
         age: '',
         gender: '',
         formClassName: 'success',
+        formSuccessMessage: response.data.msg
       });
+      this.props.onUsersListChange(response.data.addedUser);
     })
     .catch((err) => {
       if (err.response) {
@@ -82,8 +85,9 @@ class FormAdd extends Component {
 
   render() {
 
-    let formClassName = this.state.formClassName;
-    let formErrorMessage = this.state.formErrorMessage;
+    const formClassName = this.state.formClassName;
+    const formSuccessMessage = this.state.formSuccessMessage;
+    const formErrorMessage = this.state.formErrorMessage;
 
     return (
       <Form className={formClassName} onSubmit={this.handleSubmit}>
@@ -126,17 +130,17 @@ class FormAdd extends Component {
         <Message
           success
           color='green'
-          header='Success!'
-          content='The user has been added.'
+          header='Nice one!'
+          content={formSuccessMessage}
         />
         <Message
           warning
           color='yellow'
-          header='Ooops...'
+          header='Woah!'
           content={formErrorMessage}
         />
         <Button color='green' floated='right'>Add</Button>
-        <br /><br />
+        <br /><br /> {/* Yikes! */}
       </Form>
     );
   }

diff --git a/react-src/src/components/ModalAdd/ModalAdd.js b/react-src/src/components/ModalAdd/ModalAdd.js
@@ -23,12 +23,12 @@ class ModalFormAdd extends Component {
       <div>
         <Button onClick={this.show('tiny')} positive>Add New</Button>
 
-        <Modal size={size} open={open} onClose={this.close}>
+        <Modal size={size} open={open} onClose={this.close} closeIcon='close'>
           <Modal.Header>
             Add User
           </Modal.Header>
           <Modal.Content>
-            <FormAdd server={this.props.server} />
+            <FormAdd onUsersListChange={this.props.onUsersListChange} server={this.props.server} />
           </Modal.Content>
         </Modal>
       </div>

diff --git a/react-src/src/components/TableData/TableData.js b/react-src/src/components/TableData/TableData.js
@@ -1,51 +1,47 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { Button, Table } from 'semantic-ui-react';
 
 const ButtonAction = () => (
   <div>
-    <Button>Edit</Button>
-    <Button secondary>Delete</Button>
+    <Button color='blue'>Edit</Button>
+    <Button color='black'>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>
+class TableData extends Component {
 
-      <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>
-  );
+  render() {
+    const users = this.props.users;
+
+    let user = users.map((user) =>
+      <Table.Row key={user._id}>
+        <Table.Cell>{user.name}</Table.Cell>
+        <Table.Cell>{user.email}</Table.Cell>
+        <Table.Cell>{user.age}</Table.Cell>
+        <Table.Cell>{user.gender}</Table.Cell>
+        <Table.Cell><ButtonAction /></Table.Cell>
+      </Table.Row>
+    );
+
+    user =  [...user].reverse();
+
+    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>
+          {user}
+        </Table.Body>
+      </Table>
+    );
+  }
 }
 
 export default TableData;
diff --git a/routes/users.js b/routes/users.js
@@ -3,6 +3,12 @@ const router = express.Router();
 const config = require('../config/db');
 const User = require('../models/user');
 
+router.get('/', (req, res) => {
+  User.find({}).then((data) => {
+    res.json(data);
+  });
+});
+
 router.post('/', (req, res) => {
 
   let newUser = new User({
@@ -12,7 +18,7 @@ router.post('/', (req, res) => {
     gender: req.body.gender
   });
 
-  newUser.save((err) => {
+  newUser.save((err, addedUser) => {
 
     if(err) {
       if (err.errors) {
@@ -43,7 +49,17 @@ router.post('/', (req, res) => {
     }
 
     else {
-      res.json({ success: true, msg: 'User successfully registered.' });
+      res.json({
+        success: true,
+        msg: 'Successfully added!',
+        addedUser: {
+          _id: addedUser._id,
+          name: addedUser.name,
+          email: addedUser.email,
+          age: addedUser.age,
+          gender: addedUser.gender
+        }
+      });
     }
   });
 });