Add timeout timer to close error message after five seconds. Resolves #51

[jason00111]

No description provided.

[jaredatron]

this is a good start. But we want to make sure we dont remove the error sooner than 5 seconds. Imagine the scenario:
0. user doest something that causes an error
0. we show the error and schedule the error removal for 5 seconds from now
0. 3 seconds go by
0. user doest something that causes another error
0. the error will be removed too quickly.

To solve this lets make sure that when an error occurs we use clearTimeout to disable any previously scheduled error removal timeoutes.

[jaredatron]

rename startErrorTimeout toscheduleErrorRemoval

[jaredatron]

you do not need the window. part. setTimeout and clearTimeout are global variables.

[jaredatron]

Looks good. For what it's worth I could have written it like this.

import React, { Component, PropTypes } from 'react'
import moment from 'moment'
import Link from '../../atoms/Link'
import Button from '../../atoms/Button'
import PrrrsTable from '../PrrrsTable'
import ErrorMessage from '../../atoms/ErrorMessage'
import claimPrrr from '../../../actions/claimPrrr'

const ERROR_DISPLAY_DURATION = 5000

export default class PendingPrrrs extends Component {
  static propTypes = {
    currentUser: PropTypes.object.isRequired,
    prrrs: PropTypes.array.isRequired,
  }

  constructor(props){
    super(props)
    this.state = {
      error: null,
      errorTimeoutId: null
    }
    this.clearError = this.clearError.bind(this)
  }

  claimPrrr(prrr){
    claimPrrr(prrr.id)
      .then(_ => {
        const url = `https://github.com/${prrr.owner}/${prrr.repo}/pull/${prrr.number}`
        const popup = window.open(url, '_blank')
        if (popup) popup.focus()
      })
      .catch(error => {
        this.reportError(error)
      })
  }

  reportError(error) {
    if (this.state.errorTimeoutId) {
      clearTimeout(this.state.errorTimeoutId)
    }
    const errorTimeoutId = setTimeout(this.clearError, ERROR_DISPLAY_DURATION)
    this.setState({error, errorTimeoutId})
  }

  clearError(){
    this.setState({error: null})
  }

  renderAdditionalHeaders(){
    return [
      <th key="actions">Actions</th>,
    ]
  }

  renderAdditionalCells = (prrr) => {
    const { currentUser } = this.props
    const disabled = prrr.requested_by === currentUser.github_username
    return [
      <td key="actions">
        <Button onClick={_ => this.claimPrrr(prrr)} disabled={disabled}>
          Claim
        </Button>
      </td>,
    ]
  }

  render(){
    const prrrs = this.props.prrrs
      .filter(prrr => !prrr.claimed_by)
      .sort((a, b) =>
        moment(a.created_at).valueOf() -
        moment(b.created_at).valueOf()
      )

    return <div>
      {this.state.error ? <ErrorMessage error={this.state.error} /> : null}
      <PrrrsTable
        className="PendingPrrrs"
        currentUser={this.props.currentUser}
        prrrs={prrrs}
        renderAdditionalHeaders={this.renderAdditionalHeaders}
        renderAdditionalCells={this.renderAdditionalCells}
      />
    </div>
  }
}