Skip to content

Commit

Permalink
finished the create and edit user function
Browse files Browse the repository at this point in the history
  • Loading branch information
realsoftdev committed Jul 21, 2017
1 parent bd60a16 commit 8672aeb
Show file tree
Hide file tree
Showing 7 changed files with 203 additions and 159 deletions.
4 changes: 3 additions & 1 deletion client/modules/Auth/AuthReducer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {

const initialState = {
isAuthenticated: false,
user: null,
user: {},
isShowLoginModal: false,
isShowSignupModal: false,
statusText: ''
Expand Down Expand Up @@ -56,4 +56,6 @@ export const isShowSignupModal = state => state.auth.isShowSignupModal;

export const isAuthenticated = state => state.auth.isAuthenticated;

export const getToken = state => state.auth.user.token

export default AuthReducer;
48 changes: 44 additions & 4 deletions client/modules/Users/UsersActions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,7 @@ export const ADD_USER = 'ADD_USER';
export const ADD_USERS = 'ADD_USERS';
export const DELETE_USER = 'DELETE_USER';
export const UPDATE_USER = 'UPDATE_USER';
export const SHOW_CREATE_USER_MODAL = 'SHOW_CREATE_USER_MODAL';
export const SHOW_EDIT_USER_MODAL = 'SHOW_EDIT_USER_MODAL';
export const HIDE_CREATE_USER_MODAL = 'HIDE_CREATE_USER_MODAL';
export const HIDE_EDIT_USER_MODAL = 'HIDE_EDIT_USER_MODAL';
export const SET_STATUS_TEXT = 'SET_STATUS_TEXT';

export function fetchUsers(token) {
return (dispatch) => {
Expand All @@ -25,3 +22,46 @@ export function addUsers(users) {
}
}

export function updateUser(user, token) {
return (dispatch) => {
return callApi('update_user', 'post', user, token).then(res => {
if (res.error) {
dispatch(setStatusText(res.error));
}
else dispatch(modifyUser(res.user));
})
}
}

export function modifyUser(user) {
return {
type: UPDATE_USER,
user
}
}

export function createUser(user, token) {
return (dispatch) => {
return callApi('add_user', 'post', user, token).then(res => {
if (res.error) {
dispatch(setStatusText(res.error));
}
else dispatch(addUser(res.user));
})
}
}

export function addUser(usr) {
return {
type: ADD_USER,
user
}
}

export function setStatusText(text) {
return {
type: SET_STATUS_TEXT,
statusText: text
}
}

30 changes: 5 additions & 25 deletions client/modules/Users/UsersReducer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,12 @@ import {
ADD_USER,
DELETE_USER,
UPDATE_USER,
SHOW_CREATE_USER_MODAL,
SHOW_EDIT_USER_MODAL,
HIDE_CREATE_USER_MODAL,
HIDE_EDIT_USER_MODAL,
ADD_USERS,
SET_STATUS_TEXT
} from './UsersActions'

const initialState = {
data: []
isShowCreateUserModal: false,
isShowEditUserModal: false,
statusText: ''
};

Expand All @@ -36,24 +32,6 @@ const AuthReducer = (state = initialState, action) => {
return user;
})
})
case SHOW_CREATE_USER_MODAL:
return Object.assign({}, state, {
isShowCreateUserModal: true
});
case SHOW_EDIT_USER_MODAL:
return Object.assign({}, state, {
isShowEditUserModal: true,
});
case HIDE_CREATE_USER_MODAL:
return Object.assign({}, state, {
isShowCreateUserModal: false,
statusText: ''
});
case HIDE_EDIT_USER_MODAL:
return Object.assign({}, state, {
isShowEditUserModal: false,
statusText: ''
});
case SET_STATUS_TEXT:
return Object.assign({}, state, {
statusText: action.statusText
Expand All @@ -63,4 +41,6 @@ const AuthReducer = (state = initialState, action) => {
}
};

export function getUsers = state => state.users.data
export function getUsers = state => state.users.data;

export function getStatusText = state => state.users.statusText;
95 changes: 50 additions & 45 deletions client/modules/Users/components/CreateUserModal.js
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,69 @@
import React, { Component, PropTypes } from 'react';
import Modal from 'react-bootstrap/lib/Modal'
import { connect } from 'react-redux';
import { createUser } from '../UsersActions';

import { hideLoginModal, login } from '../AuthActions';
export class CreateUserModal extends Component {

export class LoginModal extends Component {

hideModal = () => {
this.props.dispatch(hideLoginModal());
};

login = () => {
var email = this.refs.email;
var password = this.refs.password;
this.props.dispatch(login({
createUser = () => {
const first_name = this.refs.first_name;
const last_name = this.refs.last_name;
const email = this.refs.email;
const password = this.refs.password;
const admin = this.refs.admin;
this.props.dispatch(createUser({
first_name: first_name.value,
last_name: last_name.value,
email: email.value,
password: password.value,
}));
admin: admin.checked
}, this.props.token));
this.props.hideModal();
};

render() {
return (
<Modal
show={ this.props.isShowModal }
onHide={ this.hideModal }>
<Modal.Header closeButton>
<Modal.Title>Login</Modal.Title>
</Modal.Header>
<Modal.Body>
{
this.props.statusText != '' && <div className='alert alert-danger' role='alert'>{this.props.statusText}</div>
}
<div className='form-group'>
<Modal
show={ this.props.isShow }
onHide={this.props.hideModal}>
<Modal.Header closeButton>
<Modal.Title>Create User</Modal.Title>
</Modal.Header>
<Modal.Body>
<div className='form-group'>
<label htmlFor='#first_name'>First Name</label>
<input type='text' id='first_name' ref='first_name' className='form-control' />
</div>
<div className='form-group'>
<label htmlFor='#last_name'>Last Name</label>
<input type='text' id='last_name' ref='last_name' className='form-control' />
</div>
<div className='form-group'>
<label htmlFor='#email'>Email</label>
<input type='text' id='email' ref='email' className='form-control' />
</div>
<div className='form-group'>
<input type='text' id='email' ref='email' className='form-control' />
</div>
<div className='form-group'>
<label htmlFor='#password'>Password</label>
<input type='password' id='password' ref='password' className='form-control' />
<input type='password' id='password' ref='password' className='form-control' />
</div>
<div className='form-group'>
<label htmlFor='#admin'> Admin </label>
<input type='checkbox' id='admin' ref='admin' className='form-control' />
</div>
</Modal.Body>
<Modal.Footer>
<div className='form-group text-right'>
<button onClick={this.createUser} className='btn btn-primary'>Sign Up</button>
</div>
</Modal.Body>
<Modal.Footer>
<div className='form-group text-right'>
<button onClick={this.login} className='btn btn-primary'>Login</button>
</div>
</Modal.Footer>
</Modal>
</Modal.Footer>
</Modal>
);
}
}

LoginModal.propTypes = {
isShowModal: PropTypes.bool.isRequired,
CreateUserModal.propTypes = {
isShow: PropTypes.bool.isRequired,
hideModal: PropTypes.func.isRequired,
token: PropTypes.string.isRequired,
};

function mapStateToProps(state) {
return {
isShowModal: state.auth.isShowLoginModal,
statusText: state.auth.statusText
};
}

export default connect(mapStateToProps)(LoginModal);
export default CreateUserModal;
73 changes: 0 additions & 73 deletions client/modules/Users/components/EditModal.js
View file

This file was deleted.

70 changes: 70 additions & 0 deletions client/modules/Users/components/EditUserModal.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import React, { Component, PropTypes } from 'react';
import Modal from 'react-bootstrap/lib/Modal';
import { updateUser } from '../UsersActions';

export class EditUserModal extends Component {

updateUser = () => {
const first_name = this.refs.first_name;
const last_name = this.refs.last_name;
const email = this.refs.email;
const password = this.refs.password;
const admin= this.refs.admin;
this.props.dispatch(updateUser({
first_name: first_name.value,
last_name: last_name.value,
email: email.value,
password: password.value,
admin: admin.checked
}), token);
this.props.hideModal();
}

render() {
return (
<Modal
show={ this.props.isShow }
onHide={ this.props.hideModal }>
<Modal.Header closeButton>
<Modal.Title>Edit User</Modal.Title>
</Modal.Header>
<Modal.Body>
<div className='form-group'>
<label htmlFor='#first_name'>First Name</label>
<input type='text' id='first_name' ref='first_name' className='form-control' value={this.props.user.first_name}/>
</div>
<div className='form-group'>
<label htmlFor='#last_name'>Last Name</label>
<input type='text' id='last_name' ref='last_name' className='form-control' value={this.props.user.last_name}/>
</div>
<div className='form-group'>
<label htmlFor='#email'>Email</label>
<input type='text' id='email' ref='email' className='form-control' value={this.props.user.email} />
</div>
<div className='form-group'>
<label htmlFor='#password'>Password</label>
<input type='password' id='password' ref='password' className='form-control' />
</div>
<div className='form-group'>
<label htmlFor='#admin'> Admin </label>
<input type='checkbox' id='admin' ref='admin' className='form-control' checked={this.props.user.admin}/>
</div>
</Modal.Body>
<Modal.Footer>
<div className='form-group text-right'>
<button onClick={this.updateUser} className='btn btn-primary'>Login</button>
</div>
</Modal.Footer>
</Modal>
);
}
}

EditUserModal.propTypes = {
isShow: PropTypes.bool.isRequired,
hideModal: PropTypes.func.isRequired,
user: PropTypes.object.isRequired,
token: PropTypes.string.isRequired
};

export default EditUserModal;
Loading

0 comments on commit 8672aeb

Please sign in to comment.