import PropTypes from 'prop-types'
import React, {Component} from 'react'
import onClickOutside from 'react-onclickoutside'
import {cleanString} from 'helpers/stringHelpers'

class EditTitleForm extends Component {
  static propTypes = {
    onClickOutSide: PropTypes.func.isRequired,
    onEditSubmit: PropTypes.func.isRequired,
    title: PropTypes.string.isRequired
  }

  handleClickOutside = (event) => {
    this.props.onClickOutSide()
  }

  constructor(props) {
    super()
    this.state = {
      title: cleanString(props.title)
    }
  }

  render() {
    const {title} = this.state
    return (
      <form onSubmit={event => this.onEditSubmit(event, title)}>
        <input
          {...this.props}
          ref="editTitleInput"
          type="text"
          className="form-control"
          placeholder="Enter Title..."
          value={title}
          onChange={event => this.setState({title: event.target.value})}
        />
      </form>
    )
  }

  onEditSubmit(event, title) {
    event.preventDefault()
    this.props.onEditSubmit(title)
  }
}

export default onClickOutside(EditTitleForm)

@@ -136,16 +136,41 @@
 anString
+, addEmoji, finalizeEmoji
 %7D from '
@@ -955,16 +955,98 @@
 alue%7D)%7D%0A
+          onKeyUp=%7Bevent =%3E this.setState(%7Btitle: addEmoji(event.target.value)%7D)%7D%0A
         
@@ -1159,22 +1159,37 @@
 tSubmit(
+finalizeEmoji(
 title)
+)
 %0A  %7D%0A%7D%0A%0A

add emoji feature to title change inputs