From 7c195db007b7a922cb5092781625a9a337a17d4c Mon Sep 17 00:00:00 2001
From: Emma Paris <iykay33@gmail.com>
Date: Mon, 27 Nov 2017 23:53:46 +0100
Subject: [PATCH] ft: enable admin users modify centers

---
 client/src/Sagax/saga.js             | 36 ++++++++++++++-
 client/src/actions/actionCreators.js |  8 ++++
 client/src/components/Edit.js        | 69 ++++++++++++++++++----------
 client/src/components/admin.js       | 25 ++++++++--
 4 files changed, 111 insertions(+), 27 deletions(-)

diff --git a/client/src/Sagax/saga.js b/client/src/Sagax/saga.js
index 457e705..9397ce8 100644
--- a/client/src/Sagax/saga.js
+++ b/client/src/Sagax/saga.js
@@ -105,9 +105,12 @@ export function* addCenter(action) {
       });
       yield put({ type: 'SET_CENTER', response: response.data });
       yield put({ type: 'ERROR', error: '' });
+      yield delay(3000);
+      yield put({ type: 'UNLOAD' });
       yield put({ type: 'SUCCESS', message: 'Successfully added to centers' });
 
   }catch(e){
+      yield put({ type: 'UNLOAD' });
       const error = e.response.data.message;
       console.log(error);
       yield put({ type: 'ERROR', error });
@@ -120,6 +123,36 @@ export function* watchAddCenter() {
 }
 
 
+export function* updateCenter(action) {
+  try{
+      const token = localStorage.getItem('token');
+      const response = yield call(axios.put, `${centerUrl}/${action.index}?token=${token}`, {
+        name: action.payload.name,
+        description: action.payload.description,
+        capacity: action.payload.capacity,
+        location: action.payload.location,
+        image: action.payload.image,
+        price: action.payload.price
+      });
+      yield put({ type: 'ERROR', error: '' });
+      yield delay(5000);
+      yield put({ type: 'UNLOAD' });
+      yield put({ type: 'SUCCESS', message: 'Centers successfully updated' });
+
+  }catch(e){
+      yield put({ type: 'UNLOAD' });
+      const error = e.response.data.message;
+      console.log(error);
+      yield delay(1000);
+      yield put({ type: 'ERROR', error });
+  }
+}
+// Our watcher Saga: spawn a new incrementAsync task on each INCREMENT_ASYNC
+export function* watchUpdateCenter() {
+    yield takeEvery('UPDATE_CENTER', updateCenter);
+}
+
+
 
 export default function* rootSaga() {
   yield [
@@ -127,7 +160,8 @@ export default function* rootSaga() {
     watchSignUser(),
     watchGetCenters(),
     watchGetSingle(),
-    watchAddCenter()
+    watchAddCenter(),
+    watchUpdateCenter()
 
   ];
 }
diff --git a/client/src/actions/actionCreators.js b/client/src/actions/actionCreators.js
index 2189243..fce9732 100644
--- a/client/src/actions/actionCreators.js
+++ b/client/src/actions/actionCreators.js
@@ -19,6 +19,14 @@ export function getCenters(index) {
   };
 }
 
+export function updateCenter(payload, index) {
+  return {
+    type: 'UPDATE_CENTER',
+    payload,
+    index
+  };
+}
+
 
 export function getSingle(index) {
   return {
diff --git a/client/src/components/Edit.js b/client/src/components/Edit.js
index 0adae28..739c053 100644
--- a/client/src/components/Edit.js
+++ b/client/src/components/Edit.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router';
+import store from '../store';
 
 class Admin extends Component {
   constructor(){
@@ -20,16 +21,28 @@ class Admin extends Component {
   componentWillMount(){
     this.props.getSingle(this.props.params.id);
   }
+
+  componentWillReceiveProps(newProps) {
+    if(newProps.single) {
+      this.setState(newProps.single);
+    }
+  }
+
   onChange(e){
     this.setState({ [e.target.name]: e.target.value });
   }
+
   handleSubmit(e) {
     e.preventDefault();
-    // this.props.addCenter(this.state);
+    store.dispatch({type: 'LOAD'});
+    console.log(this.state);
+    const index = this.props.params.id;
+    this.props.updateCenter(this.state, index);
     // document.getElementById("add-form").reset();
   }
   render() {
-    const { error, single, loader, success } = this.props;
+    const { error, single,loader, success } = this.props;
+    console.log(single);
     return (
       <div className="Admin">
         <div className="row">
@@ -47,7 +60,13 @@ class Admin extends Component {
               <li><a className="white-text" href="#!">ID:3456565646JD</a></li>
               <li><div className="divider" /></li>
               <li><a className="waves-effect white-text" href="./index.html"><i className="fa fa-home grey-text" />HOME</a></li>
-              <li><a className="waves-effect white-text" href="#!"> <i className="fa fa-plus grey-text" /> Add Center</a></li>
+              <Link to={`/user/admin`}>
+              <li>
+                  <a className="waves-effect white-text">
+                  <i className="fa fa-plus grey-text" /> Add Center
+                  </a>
+              </li>
+              </Link>
               <li><a className="waves-effect white-text" href="#!"><i className="fa fa-envelope grey-text" />Messages</a></li>
             </ul>
             <a href="#" data-activates="slide-out" className="button-collapse"><i className="material-icons">menu</i></a>
@@ -64,9 +83,18 @@ class Admin extends Component {
                     </div> : ''
                   }
                 <form className="row" id="add-form" onSubmit={this.handleSubmit}>
-                { loader ?
-                  <div className="preloader-wrapper center big active" id="loads">
-                    <div className="spinner-layer spinner-blue">
+                { success ?
+                  <div className="w3-panel w3-red w3-display-container">
+                    <span onClick="this.parentElement.style.display='none'"
+                    className="w3-button w3-red w3-large w3-display-topright">&times;</span>
+                    <p><i className=" fa fa-thumbs-up"
+                      style={{paddingRight:5}} aria-hidden="true" />
+                      {success}</p>
+                  </div> : ''
+                  }
+                  { loader ?
+                  <div className="preloader-wrapper active" id="loads">
+                    <div className="spinner-layer spinner-red-only">
                       <div className="circle-clipper left">
                         <div className="circle" />
                       </div><div className="gap-patch">
@@ -76,14 +104,6 @@ class Admin extends Component {
                       </div>
                     </div>
                   </div> : ''
-                }
-                { success ?
-                    <div className="w3-panel w3-card-2 w3-small w3-green w3-display-container hyper">
-                      <span onClick={this.onHit}
-                      className="w3-button w3-green w3-small w3-display-topright">&times;</span>
-                      <p className=""><i className=" fa fa-thumbs-up"
-                      style={{paddingRight:5}} aria-hidden="true" /> {success}</p>
-                    </div> : ''
                   }
                   <h4 className="col s12 center light">Edit Center!</h4>
                   <small className="col s12 center light font3">
@@ -92,41 +112,44 @@ class Admin extends Component {
                     <div className="input-field col s12">
                       <i className="material-icons prefix">home</i>
                       <input id="icon_telephone" type="tel"
-                      onChange={this.onChange} defaultValue={single.name}
+                      onChange={this.onChange}
+                      value={this.state.name}
                       name="name" className="validate" placeholder="" required/>
                     </div>
                     <div className="input-field col s12">
                       <i className="material-icons prefix">add_a_photo</i>
-                      <input id="icon_telephone" name="image" type="text" onChange={this.onChange}
+                      <input id="icon_telephone" name="image" type="text"
+                       value={this.state.image} onChange={this.onChange}
                        className="validate" placeholder="Image_URL" />
                     </div>
                     <div className="input-field col s12">
                       <i className="material-icons prefix">add_location</i>
-                      <input id="icon_telephone" name="location" type="text"
-                      onChange={this.onChange} defaultValue={single.location}
+                      <input id="icon_telephone"
+                      value={this.state.location} name="location" type="text"
+                      onChange={this.onChange}
                        className="validate" placeholder="" required/>
                     </div>
                     <div className="row">
                       <div className="col s6">
                         <div className="input-field col s12">
                           <i className="material-icons prefix">attach_money</i>
-                          <input id="icon_telephone" name="price" type="number"
-                          onChange={this.onChange} defaultValue={single.price}
+                          <input id="icon_telephone" value={this.state.price} name="price" type="number"
+                          onChange={this.onChange}
                             className="validate" placeholder="" />
                         </div>
                       </div>
                       <div className="col s6">
                         <div className="input-field col s12">
                           <i className="material-icons prefix">people</i>
-                          <input id="icon_telephone" name="capacity" type="number"
-                          onChange={this.onChange} defaultValue={single.capacity}
+                          <input id="icon_telephone" value={this.state.capacity} name="capacity" type="number"
+                          onChange={this.onChange}
                            className="validate" placeholder="" required/>
                         </div>
                       </div>
                     </div>
                     <div className="input-field col s12">
                       <i className="material-icons prefix">mode_edit</i>
-                      <textarea id="icon_prefix2" onChange={this.onChange} defaultValue={single.description}
+                      <textarea id="icon_prefix2" value={this.state.description} onChange={this.onChange}
                       name="description"
                       className="materialize-textarea" required/>
                     </div>
diff --git a/client/src/components/admin.js b/client/src/components/admin.js
index cc96561..51823b6 100644
--- a/client/src/components/admin.js
+++ b/client/src/components/admin.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router';
+import store from '../store';
 
 class Admin extends Component {
   constructor(){
@@ -15,20 +16,28 @@ class Admin extends Component {
     };
 
     this.onChange = this.onChange.bind(this);
+    this.getSingle = this.getSingle.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
   }
   componentWillMount(){
     this.props.getCenters(3);
   }
+  getSingle(index){
+    this.props.getSingle(index);
+  }
   onChange(e){
     this.setState({ [e.target.name]: e.target.value });
   }
   handleSubmit(e) {
     e.preventDefault();
+    store.dispatch({type: 'LOAD'});
     console.log(this.state);
     this.props.addCenter(this.state);
     document.getElementById("add-form").reset();
   }
+  getMore(index){
+    this.props.getCenters(index);
+  }
   render() {
     const { centers, error, loader, success } = this.props;
     console.log(error);
@@ -49,7 +58,13 @@ class Admin extends Component {
               <li><a className="white-text" href="#!">ID:3456565646JD</a></li>
               <li><div className="divider" /></li>
               <li><a className="waves-effect white-text" href="./index.html"><i className="fa fa-home grey-text" />HOME</a></li>
-              <li><a className="waves-effect white-text" href="#!"> <i className="fa fa-plus grey-text" /> Add Center</a></li>
+              <Link to={`/user/admin`}>
+              <li>
+                  <a className="waves-effect white-text">
+                  <i className="fa fa-plus grey-text" /> Add Center
+                  </a>
+              </li>
+              </Link>
               <li><a className="waves-effect white-text" href="#!"><i className="fa fa-envelope grey-text" />Messages</a></li>
             </ul>
             <a href="#" data-activates="slide-out" className="button-collapse"><i className="material-icons">menu</i></a>
@@ -65,7 +80,7 @@ class Admin extends Component {
                         src={center.image}/>
                         <div className="update" id="minor-l">
                           <Link to={`/user/admin/edit/${center.id}`}>
-                            <span className="fa-stack fa-lg ">
+                            <span className="fa-stack fa-lg " onClick={() => this.getSingle(center.id)}>
                               <i className="fa fa-circle fa-stack-2x" />
                               <i className="fa fa-edit fa-stack-1x fa-inverse" />
                             </span>
@@ -87,7 +102,11 @@ class Admin extends Component {
                   </div>
                 );
               })}
-            </div>  <br/><br/><br/><br/>
+            </div><br/><br/>
+            <div onClick={(e) => this.getMore(centers.length + 3)} className="col s12 center">
+              <button className="btn red">More centers </button>
+            </div>
+              <br/><br/><br/><br/>
             <div className="card " style={{backgroundColor: '#FBFCFC'}}>
               <div className="card-content ">
                   { error ?