import React, { Component } from "react"
import { Button, Modal } from "react-bootstrap"
import AvatarComponent from "components/AvatarComponent"
import PropTypes from "prop-types"

class AvatarEditModal extends Component {
  constructor(props) {
    super(props)
    this.state = {
      showModal: false,
      currentPreview: null
    }
  }

  static propTypes = {
    title: PropTypes.string.isRequired,
    onAvatarUpdate: PropTypes.func.isRequired,
    size: PropTypes.string
  }

  close = () => {
    this.setState({ showModal: false })
  }

  save = () => {
    const updatedAvatar = this.state.currentPreview.substring(
      "data:image/jpeg;base64,".length - 1
    )
    this.props.onAvatarUpdate(updatedAvatar)
    this.close()
  }

  open = e => {
    e.preventDefault()
    this.setState({ showModal: true })
  }

  updateAvatarPreview = preview => {
    this.setState({ currentPreview: preview })
  }

  render() {
    return (
      <div>
        <button onClick={this.open}>{this.props.title}</button>

        <Modal
          bsSize={this.props.size}
          show={this.state.showModal}
          onHide={this.close}
        >
          <Modal.Header closeButton>
            <Modal.Title>{this.props.title}</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <AvatarComponent onChangePreview={this.updateAvatarPreview} />
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={this.save}>Save</Button>
          </Modal.Footer>
        </Modal>
      </div>
    )
  }
}

export default AvatarEditModal

@@ -1,93 +1,4 @@
-import React, %7B Component %7D from %22react%22%0Aimport %7B Button, Modal %7D from %22react-bootstrap%22%0A
 impo
@@ -89,760 +89,274 @@
 es%22%0A
-%0Aclass AvatarEditModal extends Component %7B%0A  constructor(props) %7B%0A    super(props)%0A    this.state = %7B%0A      showModal: false,%0A      currentPreview: null%0A    %7D%0A  %7D%0A%0A  static propTypes = %7B%0A    title: PropTypes.string.isRequired,%0A    onAvatarUpdate: PropTypes.func.isRequired,%0A    size: PropTypes.string%0A  %7D%0A%0A  close = () =%3E %7B%0A    this.setState(%7B showModal: false %7D)%0A  %7D%0A%0A  save = () =%3E %7B%0A 
+import React, %7B useState %7D from %22react%22%0Aimport %7B Button, Modal %7D from %22react-bootstrap%22%0A%0Aconst AvatarEditModal = (%7B title, onAvatarUpdate, size %7D) =%3E %7B%0A  const %5BshowModal, setShowModal%5D = useState(false)%0A
   
- 
 const 
-updatedAvatar = this.state.currentPreview.substring(%0A      %22data:image/jpeg;base64,%22.length - 1%0A    )%0A    this.props.onAvatarUpdate(updatedAvatar)%0A    this.close()%0A  %7D%0A%0A  open = e =%3E %7B%0A    e.preventDefault()%0A    this.setState(%7B showModal: true %7D)%0A  %7D%0A%0A  updateAvatarPreview = preview =%3E %7B%0A    this.
+%5BcurrentPreview, setCurrentPreview%5D = u
 se
-t
 State(
-%7B currentPreview: preview %7D)%0A  %7D%0A%0A  render() %7B%0A  
+null)%0A%0A
   re
@@ -370,18 +370,14 @@
     
- 
- 
 %3Cdiv%3E%0A
-  
     
@@ -399,31 +399,15 @@
 ck=%7B
-this.
 open%7D%3E%7B
-this.props.
 titl
@@ -429,99 +429,45 @@
     
-  
 %3CModal
-%0A          bsSize=%7Bthis.props.size%7D%0A          show=%7Bthis.state.showModal%7D%0A         
+ bsSize=%7Bsize%7D show=%7BshowModal%7D
  onH
@@ -475,32 +475,16 @@
 de=%7B
-this.
 close%7D
+%3E
 %0A
-        %3E%0A  
     
@@ -520,26 +520,24 @@
 %3E%0A          
-  
 %3CModal.Title
@@ -542,19 +542,8 @@
 le%3E%7B
-this.props.
 titl
@@ -559,18 +559,16 @@
 .Title%3E%0A
-  
         
@@ -587,26 +587,24 @@
 er%3E%0A        
-  
 %3CModal.Body%3E
@@ -596,34 +596,32 @@
    %3CModal.Body%3E%0A
-  
           %3CAvata
@@ -648,21 +648,16 @@
 review=%7B
-this.
 updateAv
@@ -672,34 +672,32 @@
 iew%7D /%3E%0A        
-  
 %3C/Modal.Body%3E%0A  
@@ -698,26 +698,24 @@
 dy%3E%0A        
- 
- 
 %3CModal.Foote
@@ -713,26 +713,24 @@
 dal.Footer%3E%0A
-  
           %3CB
@@ -748,13 +748,8 @@
 ck=%7B
-this.
 save
@@ -756,34 +756,32 @@
 %7D%3ESave%3C/Button%3E%0A
-  
         %3C/Modal.
@@ -798,41 +798,543 @@
     
-  %3C/Modal%3E%0A      %3C/div%3E%0A    )%0A  %7D
+%3C/Modal%3E%0A    %3C/div%3E%0A  )%0A%0A  function close() %7B%0A    setShowModal(false)%0A  %7D%0A%0A  function save() %7B%0A    const updatedAvatar = currentPreview.substring(%0A      %22data:image/jpeg;base64,%22.length - 1%0A    )%0A    onAvatarUpdate(updatedAvatar)%0A    close()%0A  %7D%0A%0A  function open(e) %7B%0A    e.preventDefault()%0A    setShowModal(true)%0A  %7D%0A%0A  function updateAvatarPreview(preview) %7B%0A    setCurrentPreview(preview)%0A  %7D%0A%7D%0AAvatarEditModal.propTypes = %7B%0A  title: PropTypes.string.isRequired,%0A  onAvatarUpdate: PropTypes.func.isRequired,%0A  size: PropTypes.string
 %0A%7D%0A%0A

Make AvatarEditModal a functional component