\n {name.endsWith('_teams') ? (\n \n ) : (\n \n )}\n \n );\n }\n if (f.type === 'map') {\n return (\n \n )\n }\n >\n \n \n );\n }\n };\n render() {\n return (\n \n
\n Basic\n
\n {filtersData\n .slice(0, 5)\n .map((f: Object, k) => this.renderFilters(f, k))}\n \n OSM Features\n
\n {filtersData\n .slice(5, 6)\n .map((f: Object, k) => this.renderFilters(f, k))}\n \n \n Flags\n
\n {filtersData\n .slice(6, 8)\n .map((f: Object, k) => this.renderFilters(f, k))}\n \n\n \n Review\n
\n {filtersData\n .slice(8, 12)\n .map((f: Object, k) => this.renderFilters(f, k))}\n \n\n \n Users & Teams\n
\n {filtersData\n .slice(12, 19)\n .map((f: Object, k) => this.renderFilters(f, k))}\n \n\n \n Changeset Details\n
\n {filtersData.slice(19).map((f: Object, k) => this.renderFilters(f, k))}\n \n \n );\n }\n}\nFiltersList = loadingEnhancer(FiltersList);\nexport { FiltersList };\n","// @flow\nimport React from 'react';\nimport { connect } from 'react-redux';\nimport { Link } from 'react-router-dom';\nimport { push } from 'react-router-redux';\n\nimport { cancelablePromise } from '../../utils/promise';\nimport { fetchAllAOIs } from '../../network/aoi';\nimport { Button } from '../button';\nimport { Dropdown } from '../dropdown';\nimport { API_URL } from '../../config';\n\nclass SaveAOI extends React.PureComponent {\n constructor(props) {\n super(props);\n this.state = {\n editing: false,\n value: props.name\n };\n }\n ref;\n clicked = false;\n onClick = event => {\n this.clicked = true;\n this.setState({ editing: true, value: this.props.name });\n };\n onChange = (event: any) => {\n this.setState({ value: event.target.value });\n };\n onKeyDown = event => {\n if (event.keyCode === 13) {\n this.handleSubmit(event);\n } else if (event.keyCode === 27) {\n this.setState({\n editing: false,\n value: this.props.name\n });\n this.clicked = false;\n }\n };\n handleSubmit = event => {\n this.setState({\n editing: false\n });\n const aoiList = this.props.aoiList.filter(\n aoi => aoi.value === this.props.aoiId\n );\n if (this.props.aoiId && aoiList.length) {\n this.props.updateAOI(this.props.aoiId, this.state.value);\n } else {\n this.props.createAOI(this.state.value);\n }\n };\n // handleFocus = event => {\n // event.target.select();\n // };\n render() {\n return (\n \n {this.state.editing ? (\n \n {\n if (this.clicked) {\n r.select();\n this.clicked = false;\n }\n }}\n value={this.state.value}\n onChange={this.onChange}\n onKeyDown={this.onKeyDown}\n />\n \n \n ) : (\n \n )}\n \n );\n }\n}\n\ntype filterProps = {\n createAOI: string => void,\n updateAOI: string => void,\n removeAOI: string => void,\n loading: boolean,\n search: string,\n token?: string,\n aoiName?: string,\n aoiId?: string,\n handleApply: () => void,\n handleClear: () => void,\n loadAoiId: string => void,\n location: Object,\n push: any => any\n};\n\nclass FiltersHeader extends React.Component {\n getAoisPromise;\n state = {\n aoiList: []\n };\n\n componentDidMount() {\n this.getAois();\n }\n\n componentWillUnmount() {\n this.getAoisPromise && this.getAoisPromise.cancel();\n }\n\n getAois() {\n if (this.props.token) {\n this.getAoisPromise = cancelablePromise(fetchAllAOIs(this.props.token));\n this.getAoisPromise.promise\n .then(r => {\n let aoiList = r.features.map(aoi => {\n return { label: aoi.properties.name, value: aoi.id };\n });\n this.setState({ aoiList: aoiList });\n })\n .catch(e => console.log(e));\n }\n }\n\n renderRssLink() {\n if (this.props.aoiId) {\n return (\n \n \n \n );\n }\n }\n\n renderAoiLink() {\n if (this.props.aoiId) {\n return (\n \n navigator.clipboard.writeText(\n `${API_URL.replace('/api/v1', '')}/?aoi=${this.props.aoiId}`\n )\n }\n title=\"Copy filter URL\"\n >\n \n \n );\n }\n }\n\n onAoiSelect = (arr: Array