Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React, { useState } from "react"
import ReactDOM from "react-dom"
import Select from "react-select"
import { countries } from "../clientUtils/countries"
import { sortBy } from "../clientUtils/Util"
import { countryProfileSpecs } from "../site/countryProfileProjects"
import { SiteAnalytics } from "./SiteAnalytics"
interface CountrySelectOption {
label: string
value: string
}
const analytics = new SiteAnalytics()
const SearchCountry = (props: { countryProfileRootPath: string }) => {
const [isLoading, setIsLoading] = useState(false)
const sorted = sortBy(countries, "name")
return (
<Select
options={sorted.map((c) => {
return { label: c.name, value: c.slug }
})}
onChange={(selected: CountrySelectOption | null) => {
if (selected) {
analytics.logCovidCountryProfileSearch(selected.value)
setIsLoading(true)
window.location.href = `${props.countryProfileRootPath}/${selected.value}`
}
}}
isLoading={isLoading}
placeholder="Search for a country..."
/>
)
}
export function runSearchCountry() {
const searchElements = document.querySelectorAll(
".wp-block-search-country-profile"
)
searchElements.forEach((element) => {
const project = element.getAttribute("data-project")
if (project) {
const profileSpec = countryProfileSpecs.find(
(spec) => spec.project === project
)
if (profileSpec) {
ReactDOM.render(
<SearchCountry
countryProfileRootPath={profileSpec.rootPath}
/>,
element
)
}
}
})
}
export default SearchCountry
|