       diff: diff
 
   render: =>
-    diff = @diff(@state.deadline) / 1000
+    diff = @state.diff / 1000
 
     fields =
-      'days': Math.floor(diff / (60 * 60 * 24))
-      'hours': Math.floor((diff / (60 * 60)) % 24)
-      'minutes': Math.floor((diff / 60) % 60)
-      'seconds': Math.floor(diff % 60)
-
-    divs = []
-    _.each fields, (value, field) ->
-      divs.push div key: field, className: "#{bn}__field",
-        div className: "#{bn}__digit",
-          if value < 10 then "0#{value}" else value
-        div className: "#{bn}__label", field
+      days: Math.floor(diff / (60 * 60 * 24))
+      hours: Math.floor((diff / (60 * 60)) % 24)
+      minutes: Math.floor((diff / 60) % 60)
+      seconds: Math.floor(diff % 60)
 
     div className: bn,
       div className: "#{bn}__header", "#{osu.trans('common.time.remaining')}:"
-      divs
+      for field, value of fields
+        div key: field, className: "#{bn}__field",
+          div className: "#{bn}__digit",
+            if value < 10 then "0#{value}" else value
+          div className: "#{bn}__label", field
+

class @CountdownTimer extends React.Component
  constructor: (props) ->
    super props
    @state =
      deadline: @props.deadline
      diff: @diff(@props.deadline)

  componentDidMount: ->
    @timer = setInterval @updateTimer, 1000

  componentWillUnmount: ->
    clearInterval @timer

  updateTimer: =>
    diff = Math.max(@state.deadline.diff(), 0)

    clearInterval @timer if diff == 0

