I am trying to retrieve the row info while i click on one of the buttons under the actions cell. currently i am not sure how should i implement the info extraction on react, there is some where a documentation about it?
import React, { Component } from 'react'
import { withRouter, Redirect } from 'react-router-dom'
import { MDBDataTable, MDBBtn, MDBIcon, Modal, ModalBody, ModalHeader, ModalFooter, Container, MDBRow, MDBCol } from 'mdbreact';
import { register, getUsersList } from './UserFunctions'
class Register extends Component {
constructor() {
super()
this.state = {
data: {
columns: [
{
label: 'First Name',
field: 'firstName',
sort: 'asc',
width: 150
},
{
label: 'Last Name',
field: 'lastName',
sort: 'asc',
width: 270
},
{
label: 'Email',
field: 'userName',
sort: 'asc',
width: 200
},
{
label: 'Actions',
field: 'actions',
width: 10
}
],
rows: []
},
modlaIsOpen: false,
fname: '',
lname: '',
email: '',
modalErrorIsOpen: false,
error: ''
}
this.onChange = this.onChange.bind(this)
this.onUserDelete = this.onUserDelete.bind(this)
}
onChange(e) {
this.setState({ [e.target.name]: e.target.value })
}
toggle = (expression) => {
switch (expression) {
case 'error':
this.setState({
modalErrorIsOpen: !this.state.modalErrorIsOpen
})
break;
case 'addUser':
this.setState({
modlaIsOpen: !this.state.modlaIsOpen
})
break;
default:
}
}
loadUsers() {
getUsersList().then(res => {
if (res) {
var resData = this.state.data
resData.rows = res.data
for (var i = 0; i < resData.rows.length; i++) {
resData.rows[i]['actions'] = this.buildUsersTableActions()
}
this.setState({
data: resData
})
}
this.setState({
error: res.error
});
}).catch(err => {
console.log(err)
})
}
onUserDelete(e) {
console.log(this.props)
console.log("delete!!!!!")
}
buildUsersTableActions() {
return (
<MDBRow>
<MDBBtn color="primary" size="sm"> <MDBIcon icon="pencil" size="lg" className="mr-2" />Edit</MDBBtn>
<MDBBtn color="danger" size="sm" onClick={this.onUserDelete}> <MDBIcon icon="trash" size="lg" className="mr-2" />Delete</MDBBtn>
</MDBRow>
)
}
onSubmit = (e) => {
e.preventDefault()
const user = {
firstName: this.state.fname,
lastName: this.state.lname,
userName: this.state.email
}
register(user).then(res => {
if (res) {
this.toggle('addUser')
if ('error' in res) {
this.setState({
error: res.error
});
this.toggle('error')
} else {
this.props.history.push('/register')
}
}
})
}
async componentWillMount() {
this.loadUsers()
}
render() {
if (!localStorage.usertoken) {
return (<Redirect to="/login"></Redirect>)
} else {
if (this.state.data.rows.length < 1) {
return <Container style={{ display: 'flex', justifyContent: 'center', marginTop: 300 }}>
<div className="loader center"></div>
</Container>
}
console.log(this.state.data)
return (
<Container style={{ marginTop: 80 }}>
<Modal isOpen={this.state.modlaIsOpen} toggle={() => this.toggle('addUser')}>
<ModalHeader toggle={() => this.toggle('addUser')}>Register new user</ModalHeader>
<ModalBody>
<Container>
<MDBRow>
<MDBCol md="12">
<form className='needs-validation'>
<label className="black-text">
First Name
</label>
<input
type="text"
name="fname"
className="form-control"
onChange={this.onChange}
required
/>
<div style={{ top: 'auto' }} className="invalid-tooltip">Please provide a valid state.</div>
<br />
<label className="black-text">
Last Name
</label>
<input
type="text"
name="lname"
className="form-control"
onChange={this.onChange}
required
/>
<div style={{ top: 'auto' }} className="invalid-tooltip">Please provide a valid state.</div>
<br />
<label className="black-text">
Your email
</label>
<input
type="email"
name="email"
className="form-control"
onChange={this.onChange}
required
/>
<div style={{ top: 'auto' }} className="invalid-tooltip">Please provide a valid state.</div>
<br />
</form>
</MDBCol>
</MDBRow>
</Container>
</ModalBody>
<ModalFooter>
<MDBBtn color="blue-grey" onClick={() => this.toggle('addUser')}>Close</MDBBtn>{' '}
<MDBBtn color="dark-green" onClick={this.onSubmit} >Register</MDBBtn>
</ModalFooter>
</Modal>
<Modal modalStyle="warning" isOpen={this.state.modalErrorIsOpen} toggle={() => this.toggle('error')} size="sm">
<ModalHeader toggle={() => this.toggle('error')}>Failed</ModalHeader>
<ModalBody className="font-weight-bold">
{this.state.error}
</ModalBody>
<ModalFooter>
<MDBBtn color="yellow" size="sm" onClick={() => this.toggle('error')}>Close</MDBBtn>
</ModalFooter>
</Modal>
<MDBBtn color="primary" onClick={() => this.toggle('addUser')} style={{ marginBottom: 10 }}>
<MDBIcon icon="plus" className="mr-1" /> Add User
</MDBBtn>
<MDBDataTable hover
striped
bordered
large="true"
data={this.state.data}
fixed
/>
</Container>
)
}
}
}
export default withRouter(Register)
