Skip to content

#153187580 Enable admin users modify centers #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Iyke09 wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

#153187580 Enable admin users modify centers #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 35 additions & 1 deletion client/src/Sagax/saga.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 });
Expand All @@ -120,14 +123,45 @@ 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 [
watchAddUser(),
watchSignUser(),
watchGetCenters(),
watchGetSingle(),
watchAddCenter()
watchAddCenter(),
watchUpdateCenter()

];
}
8 changes: 8 additions & 0 deletions client/src/actions/actionCreators.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,14 @@ export function getCenters(index) {
};
}

export function updateCenter(payload, index) {
return {
type: 'UPDATE_CENTER',
payload,
index
};
}


export function getSingle(index) {
return {
Expand Down
69 changes: 46 additions & 23 deletions client/src/components/Edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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(){
Expand All @@ -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">
Expand All @@ -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>
Expand All @@ -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">
Expand All @@ -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">
Expand All @@ -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>
Expand Down
25 changes: 22 additions & 3 deletions client/src/components/admin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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(){
Expand All @@ -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);
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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 ?
Expand Down