use Intl.displaynames for country display

FriendsOfFlarum · Sep 9, 2024 · 6ef88ba · 6ef88ba
1 parent d8b8c2a
commit 6ef88ba
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/js/src/forum/extenders/extendCommentPost.tsx b/js/src/forum/extenders/extendCommentPost.tsx
@@ -9,7 +9,6 @@ export default function extendCommentPost() {
   extend(CommentPost.prototype, 'headerItems', function (items: ItemList<Mithril.Children>) {
     if (app.forum.attribute<boolean>('fof-geoip.showFlag')) {
       const ipInfo = this.attrs.post.ip_info?.();
-      console.log(ipInfo);
       if (ipInfo) {
         const { image } = getIPData(ipInfo);
         if (image) {

diff --git a/js/src/forum/helpers/IPDataHelper.tsx b/js/src/forum/helpers/IPDataHelper.tsx
@@ -1,3 +1,4 @@
+import app from 'flarum/forum/app';
 import IPInfo from '../models/IPInfo';
 import getFlagEmojiUrl from '../util/getFlagEmojiUrl';
 import Tooltip from 'flarum/common/components/Tooltip';
@@ -13,10 +14,19 @@ export const getThreat = (ipInfo: IPInfo) => {
 export const getFlagImage = (ipInfo: IPInfo) => {
   if (ipInfo && ipInfo.countryCode() && ipInfo.countryCode().length > 1) {
     const url = getFlagEmojiUrl(ipInfo.countryCode());
+
+    const currentLocale = app.translator.getLocale() as string;
+
+    // Create an instance of Intl.DisplayNames for displaying full country names
+    const displayNames = new Intl.DisplayNames([currentLocale], { type: 'region' });
+
+    // Get the full country name using the country code
+    const countryName = displayNames.of(ipInfo.countryCode());
+
     if (url) {
       return (
-        <Tooltip text={ipInfo.countryCode()}>
-          <img src={url} alt={ipInfo.countryCode()} height="16" loading="lazy" />
+        <Tooltip text={countryName}>
+          <img src={url} alt={countryName} height="16" loading="lazy" />
         </Tooltip>
       );
     }