Transform countryCode to countryName

package.json

@@ -20,6 +20,7 @@
     "@sentry/node": "^5.24.2",
     "core-js": "^3.6.5",
     "cssnano": "^4.1.10",
+    "i18n-iso-countries": "^6.2.2",
     "leaflet": "^1.7.1",
     "leaflet.markercluster": "^1.4.1",
     "mobx": "^5.15.7",

templates/data-providers/index.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useLayoutEffect } from 'react'
 import { Button } from '@oacore/design'
+import { countries } from 'i18n-iso-countries/langs/en.json'
 
 import styles from './styles.module.css'
 import DataProvidersSelect from './search'
@@ -10,6 +11,11 @@ import { formatNumber } from 'utils/format-number'
 import Search from 'modules/search-layout'
 import RepositoriesMap from 'modules/repositories-map'
 
+const getCountryName = (code) => {
+  const countryName = countries[String(code).toUpperCase()]
+  return Array.isArray(countryName) ? countryName[0] : countryName
+}
+
 const useIsomorphicLayoutEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect
 
@@ -37,19 +43,15 @@ const SearchResults = ({
 
   return (
     <Search.Results>
-      {results.slice(0, dataProvidersSize).map((el) => {
-        console.log(JSON.stringify(el))
-
-        return (
-          <ResultCard
-            key={el.id}
-            repoId={el.id}
-            title={el.name}
-            homePage={el.urlHomepage}
-            country={el.dataProviderLocation?.countryName || 'unknown location'}
-          />
-        )
-      })}
+      {results.slice(0, dataProvidersSize).map((el) => (
+        <ResultCard
+          key={el.id}
+          repoId={el.id}
+          title={el.name}
+          homePage={el.urlHomepage}
+          country={getCountryName(el.dataProviderLocation?.countryCode)}
+        />
+      ))}
       {dataProvidersSize < results.length && (
         <Button
           onClick={() => {

templates/data-providers/result-card.jsx

@@ -31,7 +31,7 @@ const ResultCard = ({
           {homePage}
         </Link>
       </li>
-      <li>{country}</li>
+      {country && <li>{country}</li>}
     </ul>
   </Search.Result>
 )