85 lines
1.7 KiB
JavaScript
85 lines
1.7 KiB
JavaScript
// - Import react components
|
|
import React, {Component} from 'react'
|
|
import {connect} from 'react-redux'
|
|
import Faker from 'faker'
|
|
|
|
// - Import app components
|
|
|
|
// - Import actions
|
|
import * as commentActions from 'commentActions'
|
|
|
|
// - Define variable
|
|
const buttonStyle = {
|
|
marginTop: '5px'
|
|
}
|
|
|
|
// - Create CommentWrite component class
|
|
export class CommentWrite extends Component {
|
|
constructor(props) {
|
|
super(props)
|
|
|
|
this.state = {
|
|
inputValue:''
|
|
}
|
|
|
|
// Binding functions to `this`
|
|
this.handleRef = this.handleRef.bind(this)
|
|
this.focus = this.focus.bind(this)
|
|
this.handleAddComment = this.handleAddComment.bind(this)
|
|
this.handleOnChange = this.handleOnChange.bind(this)
|
|
|
|
}
|
|
|
|
handleOnChange = (evt) =>{
|
|
this.setState({inputValue:evt.target.value})
|
|
|
|
}
|
|
|
|
handleRef = c => {
|
|
this.inputRef = c
|
|
}
|
|
|
|
focus = () => {
|
|
this.inputRef.focus()
|
|
}
|
|
handleAddComment = (evt) => {
|
|
this.props.send(this.state.inputValue,this.props.postId,this.props.close)
|
|
|
|
}
|
|
|
|
// Render DOM
|
|
render() {
|
|
return (
|
|
<div>
|
|
<textarea autoFocus defaultValue={this.props.commentText} onChange={this.handleOnChange}/>
|
|
|
|
<Button basic style={buttonStyle} onClick={this.handleAddComment} color='teal'>Add Comment</Button>
|
|
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
// - Map dispatch to props
|
|
const mapDispatchToProps = (dispatch,ownProps) => {
|
|
return{
|
|
send: (text,postId,callBack) => {
|
|
dispatch(commentActions.dbAddComment(null,{
|
|
postId: postId,
|
|
text: text
|
|
},callBack))
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
// - Map state to props
|
|
const mapStateToProps = (state) => {
|
|
return{
|
|
|
|
}
|
|
}
|
|
|
|
// - Connect component to store
|
|
export default connect(mapStateToProps,mapDispatchToProps)(CommentWrite)
|