import React from 'react'; import Bar from './bar' import MoreLink from './more-link' import numberFormatter from '../number-formatter' import { eventName } from '../query' import * as api from '../api' export default class Pages extends React.Component { constructor(props) { super(props) this.state = { loading: true } } componentDidMount() { this.fetchPages() } componentDidUpdate(prevProps) { if (this.props.query !== prevProps.query) { this.setState({loading: true, pages: null}) this.fetchPages() } } fetchPages() { api.get(`/api/stats/${this.props.site.domain}/pages`, this.props.query) .then((res) => this.setState({loading: false, pages: res})) } renderPage(page) { return (
{page.name} {numberFormatter(page.count)}
) } render() { if (this.state.loading) { return (
) } else if (this.state.pages) { return (

Top Pages

by {eventName(this.props.query)}
{ this.state.pages.map(this.renderPage.bind(this)) }
) } } }