[NEW] Delete Feature

client/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "axios": "^0.17.1",
+    "axios": "^0.16.2",
     "material-ui": "^1.0.0-beta.32",
     "material-ui-icons": "^1.0.0-beta.17",
     "react": "^16.2.0",

client/src/components/AddList.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import axios from 'axios';
-import { Link } from 'react-router-dom';
 import ButtonBack from './ButtonBack';
 
 class AddList extends Component {
@@ -31,21 +30,45 @@ class AddList extends Component {
     return (
       <div>
         <ButtonBack/>
-        <h1>Add List</h1>
+        <h1>
+          Add List
+        </h1>
         <form onSubmit={this.onSubmit.bind(this)}>
           <div className="input-field">
-            <input type="text" name="property_a" ref="property_a" />
-            <label htmlFor="property_a">Property A *</label>
+            <input
+              type="text"
+              name="property_a"
+              ref="property_a"
+            />
+            <label htmlFor="property_a">
+              Property A *
+            </label>
           </div>
           <div className="input-field">
-            <input type="text" name="property_b" ref="property_b" />
-            <label htmlFor="property_b">Property B *</label>
+            <input
+              type="text"
+              name="property_b"
+              ref="property_b"
+            />
+            <label htmlFor="property_b">
+              Property B *
+            </label>
           </div>
           <div className="input-field">
-            <input type="text" name="property_c" ref="property_c" />
-            <label htmlFor="property_c">Property C</label>
+            <input
+              type="text"
+              name="property_c"
+              ref="property_c"
+            />
+            <label htmlFor="property_c">
+              Property C
+            </label>
           </div>
-          <input type="submit" value="Save" className="btn" />
+          <input
+            type="submit"
+            value="Save"
+            className="btn"
+          />
         </form>
       </div>
     )

client/src/components/EditList.js

@@ -0,0 +1,126 @@
+import React, { Component } from 'react';
+import axios from 'axios';
+import ButtonBack from './ButtonBack';
+
+class EditList extends Component {
+
+  constructor (props) {
+    super(props);
+    this.state = {
+      id: '',
+      property_a: '',
+      property_b: '',
+      property_c: ''
+    }
+    this.handleInputChange = this.handleInputChange.bind(this);
+  }
+
+  componentWillMount () {
+    this.getListDetails();
+  }
+
+  getListDetails () {
+    let listId = this.props.match.params.id;
+    axios.get(`http://localhost:3000/api/rrrlm_models/${listId}`)
+    .then(response => {
+      this.setState({
+        id: response.data.id,
+        property_a: response.data.property_a,
+        property_b: response.data.property_b,
+        property_c: response.data.property_c,
+      }, () => {
+        console.log(this.state);
+      });
+    })
+    .catch(err => console.log(err));
+  }
+
+  editList (newList) {
+    axios.request({
+      method: 'put',
+      url: `http://localhost:3000/api/rrrlm_models/${this.state.id}`,
+      data: newList
+    })
+    .then(response => {
+      this.props.history.push('/');
+    })
+    .catch(err => console.log(err));
+  }
+
+  onSubmit (e) {
+    const newList = {
+      property_a: this.refs.property_a.value,
+      property_b: this.refs.property_b.value,
+      property_c: this.refs.property_c.value
+    }
+    this.editList(newList);
+    e.preventDefault();
+  }
+
+  handleInputChange (e) {
+    const target = e.target;
+    const value = target.value;
+    const name = target.name;
+
+    this.setState({
+      [name]: value
+    });
+  }
+
+  render () {
+    return (
+      <div>
+        <ButtonBack/>
+        <h1>
+          Edit List
+        </h1>
+        <form onSubmit={this.onSubmit.bind(this)}>
+          <div className="input-field">
+            <input
+              type="text"
+              name="property_a"
+              ref="property_a"
+              value={this.state.property_a}
+              onChange={this.handleInputChange.bind(this)}
+            />
+            <label htmlFor="property_a" className="active">
+              Property A *
+            </label>
+          </div>
+          <div className="input-field">
+            <input
+              type="text"
+              name="property_b"
+              ref="property_b"
+              value={this.state.property_b}
+              onChange={this.handleInputChange.bind(this)}
+            />
+            <label htmlFor="property_b" className="active">
+              Property B *
+            </label>
+          </div>
+          <div className="input-field">
+            <input
+              type="text"
+              name="property_c"
+              ref="property_c"
+              value={this.state.property_c}
+              onChange={this.handleInputChange.bind(this)}
+            />
+            <label htmlFor="property_c" className="active">
+              Property C
+            </label>
+          </div>
+          <input
+            type="submit"
+            value="Save"
+            className="btn"
+          />
+        </form>
+      </div>
+    )
+  }
+
+}
+
+export default EditList;

client/src/components/ListDetails.js

@@ -17,10 +17,11 @@ class ListDetails extends Component {
   }
 
   getList () {
-
-    let listId = this.props.match.params.id
-
-    axios.get(`http://localhost:3000/api/rrrlm_models/${listId}`)
+    let listId = this.props.match.params.id;
+    console.log("Get List ID: " + listId);
+    const url = `http://localhost:3000/api/rrrlm_models/${listId}`;
+    console.log("Assigned to Get URL: " + url);
+    axios.get(url)
     .then(response => {
       this.setState({details: response.data}, () => {
         console.log(this.state);
@@ -29,6 +30,20 @@ class ListDetails extends Component {
     .catch(err => console.log(err));
   }
 
+  onDelete () {
+    let listId = this.state.details.id;
+    console.log("Delete List ID: " + listId);
+    const url = `http://localhost:3000/api/rrrlm_models/${listId}`;
+    console.log("Assigned to Delete URL: " + url);
+    axios.delete(url)
+    .then(response => {
+      console.log("Inside Response URL: " + url);
+      console.log("Pushing History of: " + this.props.history.push('/'));
+      this.props.history.push('/');
+    })
+    .catch(err => console.log(err));
+  }
+
   render () {
     return (
       <div>
@@ -47,7 +62,7 @@ class ListDetails extends Component {
         <Link className="btn" to={`/lists/edit/${this.state.details.id}`}>
           Edit
         </Link>
-        <button className="btn red right">
+        <button onClick={this.onDelete.bind(this)} className="btn red right">
           Delete
         </button>
       </div>

client/src/components/Lists.js

@@ -19,7 +19,7 @@ class Lists extends Component {
     axios.get('http://localhost:3000/api/rrrlm_models')
       .then(response => {
         this.setState({lists: response.data}, () =>{
-          console.log(this.state);
+          //console.log(this.state);
         })
       })
       .catch(err => console.log(err));

client/src/components/Main.js

@@ -4,14 +4,36 @@ import Lists from './Lists.js';
 import About from './About.js';
 import ListDetails from './ListDetails.js';
 import AddList from './AddList';
+import EditList from './EditList';
 
 const Main = () => (
   <main>
     <Switch>
-      <Route exact path='/' component={Lists} />
-      <Route exact path='/about' component={About} />
-      <Route exact path='/lists/add' component={AddList} />
-      <Route exact path='/lists/:id' component={ListDetails} />
+      <Route
+        exact
+        path='/'
+        component={Lists}
+      />
+      <Route
+        exact
+        path='/about'
+        component={About}
+      />
+      <Route
+        exact
+        path='/lists/add'
+        component={AddList}
+      />
+      <Route
+        exact
+        path='/lists/edit/:id'
+        component={EditList}
+      />
+      <Route
+        exact
+        path='/lists/:id'
+        component={ListDetails}
+      />
     </Switch>
   </main>
 )