flags optimized

Vizzuality · Dec 18, 2024 · 527d183 · 527d183
1 parent b6b7756
commit 527d183
Show file tree

Hide file tree

Showing 10 changed files with 98 additions and 16 deletions.
diff --git a/client/package.json b/client/package.json
@@ -49,6 +49,7 @@
     "class-variance-authority": "^0.6.0",
     "clsx": "^1.2.1",
     "cmdk": "0.2.1",
+    "country-iso-3-to-2": "^1.1.1",
     "d3-array": "3.2.4",
     "deck.gl": "8.9.19",
     "eslint": "8.42.0",

diff --git a/client/src/components/flag/index.tsx b/client/src/components/flag/index.tsx
@@ -0,0 +1,44 @@
+import Image from 'next/image';
+
+const DEFAULT_CDN_URL = 'https://cdn.jsdelivr.net/gh/lipis/flag-icons/flags/4x3/';
+const DEFAULT_CDN_SUFFIX = 'svg';
+
+interface ImgProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  cdnSuffix?: string;
+  cdnUrl?: string;
+  countryCode: string;
+  width?: number;
+  height?: number;
+  svg?: true;
+}
+
+export type CountryFlagProps = ImgProps;
+
+export const CountryFlag = ({
+  cdnSuffix = DEFAULT_CDN_SUFFIX,
+  cdnUrl = DEFAULT_CDN_URL,
+  countryCode,
+  height = 26.66,
+  width = 40,
+  svg = true,
+  className,
+}: CountryFlagProps) => {
+  if (typeof countryCode !== 'string') {
+    return null;
+  }
+  if (svg) {
+    const flagUrl = `${cdnUrl}${countryCode.toLowerCase()}.${cdnSuffix}`;
+
+    return (
+      <Image
+        alt={'Flag of ' + countryCode}
+        src={flagUrl}
+        width={width}
+        height={height}
+        className={className}
+      />
+    );
+  }
+};
+
+export default CountryFlag;
diff --git a/client/src/containers/countries/detail/panel.tsx b/client/src/containers/countries/detail/panel.tsx
@@ -3,12 +3,12 @@
 import { useEffect } from 'react';
 
 import Markdown from 'react-markdown';
-import Flag from 'react-world-flags';
 
 import Image from 'next/image';
 import Link from 'next/link';
 import { notFound, useParams } from 'next/navigation';
 
+import getCountryIso2 from 'country-iso-3-to-2';
 import { useSetAtom } from 'jotai';
 import { X } from 'lucide-react';
 import { ArrowLeft, Download, ExternalLink, Info } from 'lucide-react';
@@ -37,6 +37,7 @@ import { usefulLinksCountry } from '@/containers/countries/detail/constants';
 import { COLUMNS, CSV_COLUMNS_ORDER } from '@/containers/countries/detail/constants';
 import Share from '@/containers/share';
 
+import CountryFlag from '@/components/flag';
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogClose, DialogContent, DialogTrigger } from '@/components/ui/dialog';
 import ContentLoader from '@/components/ui/loader';
@@ -195,11 +196,13 @@ export default function CountryDetailPanel() {
             <ScrollArea className="h-full px-5">
               <div className="mt-16 flex items-center space-x-3 pt-7">
                 {data?.data?.attributes?.iso && (
-                  <Flag
-                    code={data?.data?.attributes.iso}
-                    height="40"
-                    width="48"
+                  <CountryFlag
+                    alt={data.data?.attributes.iso}
+                    countryCode={getCountryIso2(data.data?.attributes.iso || '') || ''}
+                    key={`${data.data?.attributes.iso}`}
                     className="rounded"
+                    width={48}
+                    height={32}
                   />
                 )}
                 <h2 className="text-xl" data-cy="country-detail-name">
@@ -220,11 +223,13 @@ export default function CountryDetailPanel() {
                   <div className="flex flex-col space-y-8 px-4">
                     <div className="mt-4 flex space-x-2">
                       {data?.data?.attributes?.iso && (
-                        <Flag
-                          code={data?.data?.attributes.iso}
-                          height="32"
-                          width="40"
+                        <CountryFlag
+                          alt={data.data?.attributes.iso}
+                          countryCode={getCountryIso2(data.data?.attributes.iso || '') || ''}
+                          key={`${data.data?.attributes.iso}`}
                           className="rounded"
+                          width={48}
+                          height={32}
                         />
                       )}
                       <p>{data?.data?.attributes?.name}</p>

diff --git a/client/src/containers/countries/item.tsx b/client/src/containers/countries/item.tsx
@@ -1,14 +1,16 @@
 'use client';
 
-import Flag from 'react-world-flags';
-
 import Link from 'next/link';
 
+import getCountryIso2 from 'country-iso-3-to-2';
+
 import { useGetCountryIndicatorFields } from '@/types/generated/country-indicator-field';
 import { CountryListResponseDataItem } from '@/types/generated/strapi.schemas';
 
 import { useSyncQueryParams } from '@/hooks/datasets';
 
+import CountryFlag from '@/components/flag';
+
 export default function CountryItem({ data }: { data: CountryListResponseDataItem }) {
   const queryParams = useSyncQueryParams({ bbox: true });
 
@@ -35,7 +37,15 @@ export default function CountryItem({ data }: { data: CountryListResponseDataIte
     >
       <div className="flex items-center space-x-4">
         {data.attributes?.iso && (
-          <Flag code={data.attributes.iso} height="32" width="40" className="rounded" />
+          <CountryFlag
+            alt={data.attributes.iso}
+            countryCode={getCountryIso2(data.attributes.iso || '') || ''}
+            key={`${data.attributes.iso}`}
+            className="rounded"
+            style={{
+              fontSize: '3em',
+            }}
+          />
         )}
 
         <h3>{data.attributes?.name}</h3>

diff --git a/client/src/containers/countries/list.tsx b/client/src/containers/countries/list.tsx
@@ -3,16 +3,16 @@
 // import { useState } from 'react';
 
 // import { Search, X } from 'lucide-react';
+import { ExternalLink } from 'lucide-react';
 
 import { useGetCountries } from '@/types/generated/country';
 
-import CountryItem from '@/containers/countries/item';
 import { usefulLinksCountriesList } from '@/containers/countries/detail/constants';
+import CountryItem from '@/containers/countries/item';
 
 // import { Input } from '@/components/ui/input';
 import ContentLoader from '@/components/ui/loader';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { ExternalLink } from 'lucide-react';
 
 export default function CountriesList() {
   // const [searchValue, setSearchValue] = useState<string | null>(null);

diff --git a/client/src/containers/projects/stats.tsx b/client/src/containers/projects/stats.tsx
@@ -41,7 +41,7 @@ export default function Stats() {
       },
     }
   );
-  console.log(data);
+
   return (
     <ContentLoader
       data={data}

diff --git a/client/src/types/flags.ts b/client/src/types/flags.ts
@@ -0,0 +1,3 @@
+declare module 'country-iso-3-to-2' {
+  export default function iso3ToIso2(iso3: string): string | undefined;
+}
diff --git a/client/tsconfig.json b/client/tsconfig.json
@@ -24,6 +24,12 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/app/not-found.js"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "src/app/not-found.js"
+  ],
   "exclude": ["node_modules"]
 }
diff --git a/package.json b/package.json
@@ -15,5 +15,8 @@
   },
   "engines": {
     "node": ">= 18.17"
+  },
+  "dependencies": {
+    "country-iso-3-to-2": "^1.1.1"
   }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -51,6 +51,7 @@ __metadata:
     class-variance-authority: ^0.6.0
     clsx: ^1.2.1
     cmdk: 0.2.1
+    country-iso-3-to-2: ^1.1.1
     cypress: 13.6.4
     d3-array: 3.2.4
     deck.gl: 8.9.19
@@ -7306,6 +7307,8 @@ __metadata:
 "afoco@workspace:.":
   version: 0.0.0-use.local
   resolution: "afoco@workspace:."
+  dependencies:
+    country-iso-3-to-2: ^1.1.1
   languageName: unknown
   linkType: soft
 
@@ -9388,6 +9391,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"country-iso-3-to-2@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "country-iso-3-to-2@npm:1.1.1"
+  checksum: 2fca9f7beb384cbfa1eb68a8b7dabae03356456a33d15ba899475fb7f73e92e71cfa6907f57d552f47230bba25e053f4f0300d6fab9ccf2a95363f340b6bb925
+  languageName: node
+  linkType: hard
+
 "crc@npm:^3.8.0":
   version: 3.8.0
   resolution: "crc@npm:3.8.0"