-
-
Notifications
You must be signed in to change notification settings - Fork 229
/
SearchCountry.tsx
58 lines (53 loc) · 1.8 KB
/
SearchCountry.tsx
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
import React, { useState } from "react"
import ReactDOM from "react-dom"
import Select from "react-select"
import { countries, sortBy } from "@ourworldindata/utils"
import { countryProfileSpecs } from "../site/countryProfileProjects.js"
import { SiteAnalytics } from "./SiteAnalytics.js"
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.logCountryProfileSearch(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