Refactor countries page and use getStaticProps (#927)

ooni · Apr 11, 2024 · e3ab23a · e3ab23a
1 parent d81656a
commit e3ab23a
Show file tree

Hide file tree

Showing 5 changed files with 235 additions and 234 deletions.
diff --git a/components/CountryBox.js b/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}
         />
         ))
       }

diff --git a/package.json b/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",

diff --git a/pages/as/[probe_asn].js b/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,
         }))
       )
 

diff --git a/pages/countries.js b/pages/countries.js
@@ -3,7 +3,7 @@ import debounce from 'lodash.debounce'
 import Head from 'next/head'
 import {
   Box,
-  Container, Flex, Heading, Input, Link, Text
+  Container, Flex, Heading, Input, Text
 } from 'ooni-components'
 import React, { useMemo, useState } from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
@@ -14,23 +14,6 @@ import { StyledStickySubMenu } from 'components/SharedStyledComponents'
 import countryUtil from 'country-util'
 import { getLocalisedRegionName } from 'utils/i18nCountries'
 
-const CountryLink = styled(Link)`
-  color: ${props => props.theme.colors.black};
-  text-decoration: none;
-  &:hover {
-    color: ${props => props.theme.colors.blue5};
-  }
-`
-
-const StyledCountryCard = styled(Box)`
-  border: 1px solid ${props => props.theme.colors.gray3};
-`
-
-const Divider = styled.div`
-  border: 1px solid ${props => props.theme.colors.gray3};
-  margin-bottom: 12px;
-`
-
 // To compenstate for the sticky navigation bar
 // :target selector applies only the element with id that matches
 // the current URL fragment (e.g '/#Africa')
@@ -53,21 +36,31 @@ const RegionHeaderAnchor = styled.div`
   }
 `
 
+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()
-
-  countries = countries
-    .map((c) => ({...c, localisedName: getLocalisedRegionName(c.alpha_2, intl.locale)}))
-    .sort((a, b) => (new Intl.Collator(intl.locale).compare(a.localisedName, b.localisedName)))
-
-  const regionName = getLocalisedRegionName(regionCode, intl.locale)
-  // Select countries in the region where we have measuremennts from
-  const measuredCountriesInRegion = countryUtil.regions[regionCode].countries.filter((countryCode) => (
-    countries.find((item) => item.alpha_2 === countryCode)
-  ))
-
+  const regionName = useMemo(() => (getLocalisedRegionName(regionCode, intl.locale)), [regionCode, intl])
+
   // When there are no measurements from the region
-  if (measuredCountriesInRegion.length === 0) {
+  if (countries.length === 0) {
     return null
   }
 
@@ -76,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,29 +109,35 @@ const NoCountriesFound = ({ searchTerm }) => (
   </Flex>
 )
 
-export const getServerSideProps = async () => {
+export const getStaticProps = async () => {
   const client = axios.create({baseURL: process.env.NEXT_PUBLIC_OONI_API}) // eslint-disable-line
-    const result = await client.get('/api/_/countries')
-    const responseUrl = result?.request?.res?.responseUrl
+  const result = await client.get('/api/_/countries')
 
-    return {
-      props: {
-        countries: result.data.countries,
-      }  
-    }
+  return {
+    props: {
+      countries: result.data.countries,
+    }  
+  }
 }
 
-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)
@@ -188,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>
     </>