import React from 'react'

import Page from './Page'
import Incident from './Incident'
import { strictFetch } from '../util'
import { domain as DOMAIN } from '../config.json'

export default class Incidents extends React.Component {
  state = {
    incidents: null,
    page: 0,
  }

  componentDidMount() {
    this.fetchIncidents()
  }

  async fetchIncidents() {
    const resp = await strictFetch(`${DOMAIN}/api/incidents/${this.state.page}`)
    this.setState({ incidents: await resp.json() })
  }

  renderIncidents() {
    if (!this.state.incidents) {
      return null
    }

    return this.state.incidents.map((incident) => (
      <Incident key={incident.id} incident={incident} />
    ))
  }

  render() {
    return (
      <Page>
        <h1>Incidents</h1>
        {this.renderIncidents()}
      </Page>
    )
  }
}