just-paja/radio-drama-queen

import Add from '@material-ui/icons/Add'
import Delete from '@material-ui/icons/Delete'
import PropTypes from 'prop-types'
import React from 'react'
import TextFields from '@material-ui/icons/TextFields'

import { CategoryRenameDialog } from './CategoryRenameDialog'
import { categoryRoutines } from '../actions'
import { connect } from 'react-redux'
import { ContextMenuUncontrolled, ContextMenuItem } from '../../components'
import { SoundAddDialog } from './SoundAddDialog'

class CategoryContextMenuComponent extends React.Component {
  constructor () {
    super()
    this.handleAddSound = this.handleAddSound.bind(this)
    this.handleRemove = this.handleRemove.bind(this)
    this.handleRename = this.handleRename.bind(this)
  }

  handleAddSound () {
    this.props.onSoundAdd({
      board: this.props.boardUuid,
      category: this.props.uuid
    })
  }

  handleRemove () {
    this.props.onRemove(this.props.uuid)
  }

  handleRename () {
    this.props.onRename(this.props.uuid)
  }

  render () {
    return (
      <ContextMenuUncontrolled>
        <ContextMenuItem icon={Add} label='Add sounds' onClick={this.handleAddSound} />
        <ContextMenuItem icon={TextFields} label='Rename' onClick={this.handleRename} />
        <ContextMenuItem icon={Delete} label='Remove' onClick={this.handleRemove} />
      </ContextMenuUncontrolled>
    )
  }
}

CategoryContextMenuComponent.propTypes = {
  boardUuid: PropTypes.string.isRequired,
  onRemove: PropTypes.func.isRequired,
  onRename: PropTypes.func.isRequired,
  onSoundAdd: PropTypes.func.isRequired,
  uuid: PropTypes.string.isRequired
}

const mapDispatchToProps = {
  onRemove: categoryRoutines.remove,
  onRename: CategoryRenameDialog.open,
  onSoundAdd: SoundAddDialog.open
}

export const CategoryContextMenu = connect(
  undefined,
  mapDispatchToProps
)(CategoryContextMenuComponent)