feat(openalex): Add flag emojis for countries in ROR components

dataesr · Nov 25, 2024 · a594e39 · a594e39
1 parent 38abae1
commit a594e39
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/client/src/pages/openalex-ror/components/ror-name.jsx b/client/src/pages/openalex-ror/components/ror-name.jsx
@@ -1,5 +1,6 @@
 import { Badge } from '@dataesr/dsfr-plus';
 import PropTypes from 'prop-types';
+import getFlagEmoji from '../../../utils/flags';
 
 export default function RorName({ isRemoved, ror }) {
   return (
@@ -23,10 +24,7 @@ export default function RorName({ isRemoved, ror }) {
           ror.rorName
         )}
       </span>
-      <img
-        alt={`${ror.rorCountry} flag`}
-        src={`https://flagsapi.com/${ror.rorCountry}/flat/16.png`}
-      />
+      {getFlagEmoji(ror.rorCountry)}
       {isRemoved && (
         <Badge
           className="fr-ml-1w"

diff --git a/client/src/pages/openalex-ror/results/views-selector.jsx b/client/src/pages/openalex-ror/results/views-selector.jsx
@@ -13,6 +13,7 @@ import { isRor } from '../../../utils/ror';
 
 import ListView from './list-view';
 import DataTableView from './datatable-view';
+import getFlagEmoji from '../../../utils/flags';
 
 export default function OpenalexView({
   allAffiliations,
@@ -234,7 +235,11 @@ export default function OpenalexView({
                   [...new Set(allAffiliations.flatMap((affiliation) => affiliation.rors.map((ror) => ror.rorCountry)))]
                     .sort((a, b) => allAffiliations.filter((aff) => aff.rors.some((r) => r.rorCountry === b)).length - allAffiliations.filter((aff) => aff.rors.some((r) => r.rorCountry === a)).length)
                     .map((country) => (
-                      <option key={country} value={country}>
+                      <option
+                        key={country}
+                        value={country}
+                      >
+                        {getFlagEmoji(country)}
                         {` ${new Intl.DisplayNames(['en'], { type: 'region' }).of(country)} (${allAffiliations.filter((aff) => aff.rors.some((r) => r.rorCountry === country)).length})`}
                       </option>
                     ))

diff --git a/client/src/utils/flags.jsx b/client/src/utils/flags.jsx
@@ -0,0 +1,7 @@
+export default function getFlagEmoji(countryCode) {
+  const codePoints = countryCode
+    .toUpperCase()
+    .split('')
+    .map((char) => 127397 + char.charCodeAt());
+  return String.fromCodePoint(...codePoints);
+}