import React from 'react'; import * as storage from '../../util/storage' import CountriesMap from './map' import * as api from '../../api' import {apiPath, sitePath} from '../../util/url' import ListReport from '../reports/list' import { VISITORS_METRIC, maybeWithCR } from '../reports/metrics'; function Countries({query, site, onClick}) { function fetchData() { return api.get(apiPath(site, '/countries'), query, {limit: 9}).then((res) => { return res.map(row => Object.assign({}, row, {percentage: undefined})) }) } function renderIcon(country) { return {country.flag} } function getFilterFor(listItem) { return { country: listItem['code'], country_labels: listItem['name'] } } return ( ) } function Regions({query, site, onClick}) { function fetchData() { return api.get(apiPath(site, '/regions'), query, {limit: 9}) } function renderIcon(region) { return {region.country_flag} } function getFilterFor(listItem) { return {region: listItem['code'], region_labels: listItem['name']} } return ( ) } function Cities({query, site}) { function fetchData() { return api.get(apiPath(site, '/cities'), query, {limit: 9}) } function renderIcon(city) { return {city.country_flag} } function getFilterFor(listItem) { return {city: listItem['code'], city_labels: listItem['name']} } return ( ) } const labelFor = { 'countries': 'Countries', 'regions': 'Regions', 'cities': 'Cities', } export default class Locations extends React.Component { constructor(props) { super(props) this.onCountryFilter = this.onCountryFilter.bind(this) this.onRegionFilter = this.onRegionFilter.bind(this) this.tabKey = `geoTab__${ props.site.domain}` const storedTab = storage.getItem(this.tabKey) this.state = { mode: storedTab || 'map' } } componentDidUpdate(prevProps) { const isRemovingFilter = (filterName) => { return prevProps.query.filters[filterName] && !this.props.query.filters[filterName] } if (this.state.mode === 'cities' && isRemovingFilter('region')) { this.setMode('regions')() } if (this.state.mode === 'regions' && isRemovingFilter('country')) { this.setMode(this.countriesRestoreMode || 'countries')() } } setMode(mode) { return () => { storage.setItem(this.tabKey, mode) this.setState({mode}) } } onCountryFilter(mode) { return () => { this.countriesRestoreMode = mode this.setMode('regions')() } } onRegionFilter() { this.setMode('cities')() } renderContent() { switch(this.state.mode) { case "cities": return case "regions": return case "countries": return case "map": default: return } } renderPill(name, mode) { const isActive = this.state.mode === mode if (isActive) { return ( {name} ) } return ( {name} ) } render() { return ( {labelFor[this.state.mode] || 'Locations'} { this.renderPill('Map', 'map') } { this.renderPill('Countries', 'countries') } { this.renderPill('Regions', 'regions') } { this.renderPill('Cities', 'cities') } {this.renderContent()} ) } }