Refactory country page

components/CountryBox.js

@@ -1,11 +1,8 @@
-import { Box, Flex, Text } from 'ooni-components'
-import { useIntl } from 'react-intl'
-import { getLocalisedRegionName } from 'utils/i18nCountries'
 import Flag from 'components/Flag'
 import { GridBox } from 'components/VirtualizedGrid'
+import { Box, Flex, Text } from 'ooni-components'
 
 const CountryList = ({ countries, itemsPerRow = 6, gridGap = 3 }) => {
- const intl = useIntl()
  const gridTemplateColumns = ['1fr 1fr', '1fr 1fr', '1fr 1fr 1fr 1fr', [...Array(itemsPerRow)].map((i) => ('1fr')).join(' ')]
 
  return (
@@ -16,15 +13,15 @@ const CountryList = ({ countries, itemsPerRow = 6, gridGap = 3 }) => {
  }}>
  {countries.map((c) => (
  <GridBox
- key={c.country}
- href={`/country/${c.country}`}
+ key={c.alpha_2}
+ href={`/country/${c.alpha_2}`}
  title={
  <Flex mb={2} alignItems='center'>
- <Box alignSelf='start'><Flag countryCode={c.country} size={22} border /></Box>
- <Text fontSize={1} fontWeight='bold' ml={2} lineHeight='24px'>{getLocalisedRegionName(c.country, intl.locale)}</Text>
+ <Box alignSelf='start'><Flag countryCode={c.alpha_2} size={22} border /></Box>
+ <Text fontSize={1} fontWeight='bold' ml={2} lineHeight='24px'>{c.localisedName}</Text>
  </Flex>
  }
- count={c.measurements}
+ count={c.count}
  />
  ))
  }

package.json

@@ -15,7 +15,7 @@
  "@nivo/heatmap": "^0.80.0",
  "@nivo/line": "^0.80.0",
  "@nivo/tooltip": "0.80.0",
- "@sentry/nextjs": "^7.104.0",
+ "@sentry/nextjs": "^7.109.0",
  "@tanstack/react-table": "^8.11.6",
  "axios": "^1.6.7",
  "buffer-from": "^1.1.2",
@@ -28,7 +28,7 @@
  "lodash.debounce": "^4.0.8",
  "lru-cache": "^10.1.0",
  "markdown-to-jsx": "^7.4.0",
- "next": "^14.1.3",
+ "next": "^14.1.4",
  "nprogress": "^0.2.0",
  "ooni-components": "^0.6.0-alpha.5",
  "pretty-ms": "^8.0.0",

pages/as/[probe_asn].js

@@ -19,6 +19,7 @@ import dayjs from 'services/dayjs'
 import { fetcherWithPreprocessing, simpleFetcher } from 'services/fetchers'
 import styled from 'styled-components'
 import useSWR from 'swr'
+import { getLocalisedRegionName } from 'utils/i18nCountries'
 import { toCompactNumberUnit } from '../../utils'
 import TestGroupBadge from '/components/Badge'
 
@@ -44,7 +45,6 @@ const messagingTestNames = ['signal', 'telegram', 'whatsapp', 'facebook_messenge
 const circumventionTestNames = ['psiphon', 'tor', 'torsf']
 
 const ChartsContainer = () => {
- const intl = useIntl()
  const router = useRouter()
  const {
  query: { since, until, probe_asn, probe_cc },
@@ -182,7 +182,14 @@ const Summary = ({ measurementsTotal, firstMeasurement, lastMeasurement }) => {
 }
 
 const CountriesList = ({ countriesData }) => {
- const sortedCountries = countriesData.sort((a, b) => b.measurements - a.measurements)
+ const { locale } = useIntl()
+
+ const sortedCountries = useMemo(() => (
+ countriesData
+ .sort((a, b) => b.measurements - a.measurements)
+ .map((c) => ({...c, localisedName: getLocalisedRegionName(c.alpha_2, locale)}))
+ ))
+
  const numberOfCountries = countriesData.length
 
  return (
@@ -327,8 +334,8 @@ export const getServerSideProps = async (context) => {
  })
  .then((response) =>
  response.data.result.map((res) => ({
- country: res.probe_cc,
- measurements: res.measurement_count,
+ alpha_2: res.probe_cc,
+ count: res.measurement_count,
  }))
  )
 

pages/countries.js

@@ -36,27 +36,31 @@ const RegionHeaderAnchor = styled.div`
  }
 `
 
-const RegionBlock = ({regionCode, countries}) => {
- const intl = useIntl()
-
- const sortedCountries = useMemo(() => (countries
- .map((c) => ({...c, localisedName: getLocalisedRegionName(c.alpha_2, intl.locale)}))
- .sort((a, b) => (new Intl.Collator(intl.locale).compare(a.localisedName, b.localisedName)))
- ), 
- [intl, countries]
+const Regions = ({ regions, countries}) => {
+ return (
+ regions.map((regionCode, index) => {
+
+ const measuredCountriesInRegion = countryUtil.regions[regionCode].countries.filter((countryCode) => (
+ countries.find((item) => item.alpha_2 === countryCode)
+ ))
+
+ return (
+ <RegionBlock 
+ key={index}
+ regionCode={regionCode}
+ countries={countries.filter((c => ( measuredCountriesInRegion.indexOf(c.alpha_2) > -1 )))}
+ />
+ )
+ })
  )
+}
 
+const RegionBlock = ({regionCode, countries}) => {
+ const intl = useIntl()
  const regionName = useMemo(() => (getLocalisedRegionName(regionCode, intl.locale)), [regionCode, intl])
- // Select countries in the region where we have measuremennts from
- const measuredCountriesInRegion = useMemo(() => (
- countryUtil.regions[regionCode].countries.filter((countryCode) => (
- sortedCountries.find((item) => item.alpha_2 === countryCode)
- ),
- [sortedCountries])
- ))
-
+
  // When there are no measurements from the region
- if (measuredCountriesInRegion.length === 0) {
+ if (countries.length === 0) {
  return null
  }
 
@@ -65,7 +69,7 @@ const RegionBlock = ({regionCode, countries}) => {
  <RegionHeaderAnchor id={regionName} />
  <Heading h={1} center py={2}>{regionName}</Heading>
  <CountryList 
- countries={countries.filter((c => ( measuredCountriesInRegion.indexOf(c.alpha_2) > -1 ))).map((c) => ({country: c.alpha_2, measurements: c.count}))}
+ countries={countries}
  itemsPerRow={4}
  />
  </Box>
@@ -116,17 +120,24 @@ export const getStaticProps = async () => {
  }
 }
 
-const Countries = ({countries}) => {
+const Countries = ({ countries }) => {
  const intl = useIntl()
  const [searchInput, setSearchInput] = useState('')
 
- let filteredCountries = countries
+ const sortedCountries = useMemo(() => (countries
+ .map((c) => ({...c, localisedName: getLocalisedRegionName(c.alpha_2, intl.locale)}))
+ .sort((a, b) => (new Intl.Collator(intl.locale).compare(a.localisedName, b.localisedName)))
+ ), 
+ [intl, countries]
+ )
 
- if (searchInput !== '') {
- filteredCountries = countries.filter((country) => (
- country.name.toLowerCase().indexOf(searchInput.toLowerCase()) > -1
- ))
- }
+ const filteredCountries = useMemo(() => (
+ searchInput !== '' ?
+ sortedCountries.filter((country) => (
+ country.name.toLowerCase().indexOf(searchInput.toLowerCase()) > -1
+ )) :
+ sortedCountries
+ ), [searchInput])
 
  const searchHandler = (searchTerm) => {
  setSearchInput(searchTerm)
@@ -176,9 +187,7 @@ const Countries = ({countries}) => {
  // Show a message when there are no countries to show, when search is empty
  (filteredCountries.length === 0)
  ? <NoCountriesFound searchTerm={searchInput} />
- : regions.map((regionCode, index) => (
- <RegionBlock key={index} regionCode={regionCode} countries={filteredCountries} />
- ))
+ : <Regions regions={regions} countries={filteredCountries} />
  }
  </Container>
  </>