 
 bn = 'beatmap-list'
 
-BeatmapDiscussions.BeatmapList = React.createClass
-  mixins: [React.addons.PureRenderMixin]
+class BeatmapDiscussions.BeatmapList extends React.PureComponent
+  constructor: (props) ->
+    super props
+
+    @state =
+      showingSelector: false
 
 
-  getInitialState: ->
-    showingSelector: false
-
-
-  componentDidMount: ->
+  componentDidMount: =>
     $(document).on 'click.beatmapList', @hideSelector
 
 
-  componentWillUnmount: ->
+  componentWillUnmount: =>
     $(document).off '.beatmapList'
 
 
-  render: ->
+  render: =>
     div
       className: "#{bn} #{"#{bn}--selecting" if @state.showingSelector}"
       a

    @setState showingSelector: state


  selectBeatmap: (e) ->
    e.preventDefault()

    $.publish 'beatmap:select', id: parseInt(e.currentTarget.dataset.id, 10)


  toggleSelector: (e) ->
    e.preventDefault()

    @setSelector !@state.showingSelector

      el BeatmapDiscussions.BeatmapListItem, beatmap: beatmap, mode: 'version'


  hideSelector: (e) =>
    return unless @state.showingSelector
    return if $(e.target).closest('.js-beatmap-list-selector').length

    @setSelector false


  setSelector: (state) =>
    return if @state.showingSelector == state

    Blackout.toggle(state)
