From 0be4a9b41654bdad34603a6aba704b459683fb5f Mon Sep 17 00:00:00 2001
From: Maxime-J <Maxime-J@users.noreply.github.com>
Date: Sat, 10 Feb 2024 12:47:02 +0000
Subject: [PATCH] Render correct OS names globally.

---
 src/components/hooks/useFormat.ts  | 22 ++++++++++++++--------
 src/components/metrics/OSTable.tsx | 10 +++-------
 src/lib/constants.ts               |  8 ++++++++
 3 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/components/hooks/useFormat.ts b/src/components/hooks/useFormat.ts
index 06585e49..2b4d0200 100644
--- a/src/components/hooks/useFormat.ts
+++ b/src/components/hooks/useFormat.ts
@@ -1,5 +1,5 @@
 import useMessages from './useMessages';
-import { BROWSERS } from 'lib/constants';
+import { BROWSERS, OS_NAMES } from 'lib/constants';
 import useLocale from './useLocale';
 import useCountryNames from './useCountryNames';
 import regions from 'public/iso-3166-2.json';
@@ -9,10 +9,18 @@ export function useFormat() {
   const { locale } = useLocale();
   const countryNames = useCountryNames(locale);
 
+  const formatOS = (value: string): string => {
+    return OS_NAMES[value] || value;
+  };
+
   const formatBrowser = (value: string): string => {
     return BROWSERS[value] || value;
   };
 
+  const formatDevice = (value: string): string => {
+    return formatMessage(labels[value] || labels.unknown);
+  };
+
   const formatCountry = (value: string): string => {
     return countryNames[value] || value;
   };
@@ -26,28 +34,26 @@ export function useFormat() {
     return `${value}, ${countryNames[country]}`;
   };
 
-  const formatDevice = (value: string): string => {
-    return formatMessage(labels[value] || labels.unknown);
-  };
-
   const formatValue = (value: string, type: string, data?: { [key: string]: any }): string => {
     switch (type) {
+      case 'os':
+        return formatOS(value);
       case 'browser':
         return formatBrowser(value);
+      case 'device':
+        return formatDevice(value);
       case 'country':
         return formatCountry(value);
       case 'region':
         return formatRegion(value);
       case 'city':
         return formatCity(value, data?.country);
-      case 'device':
-        return formatDevice(value);
       default:
         return value;
     }
   };
 
-  return { formatBrowser, formatCountry, formatRegion, formatDevice, formatValue };
+  return { formatOS, formatBrowser, formatDevice, formatCountry, formatRegion, formatValue };
 }
 
 export default useFormat;
diff --git a/src/components/metrics/OSTable.tsx b/src/components/metrics/OSTable.tsx
index 102bafd3..d262c36a 100644
--- a/src/components/metrics/OSTable.tsx
+++ b/src/components/metrics/OSTable.tsx
@@ -1,19 +1,15 @@
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
 import FilterLink from 'components/common/FilterLink';
 import useMessages from 'components/hooks/useMessages';
-
-const names = {
-  'Mac OS': 'macOS',
-  'Chrome OS': 'ChromeOS',
-  'Sun OS': 'SunOS',
-};
+import useFormat from 'components/hooks/useFormat';
 
 export function OSTable(props: MetricsTableProps) {
   const { formatMessage, labels } = useMessages();
+  const { formatOS } = useFormat();
 
   function renderLink({ x: os }) {
     return (
-      <FilterLink id="os" value={names[os] || os}>
+      <FilterLink id="os" value={os} label={formatOS(os)}>
         <img
           src={`${process.env.basePath || ''}/images/os/${
             os?.toLowerCase().replaceAll(/\W/g, '-') || 'unknown'
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 0c894634..e7ab9ae5 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -236,6 +236,14 @@ export const DESKTOP_OS = [
 
 export const MOBILE_OS = ['Amazon OS', 'Android OS', 'BlackBerry OS', 'iOS', 'Windows Mobile'];
 
+export const OS_NAMES = {
+  'Android OS': 'Android',
+  'Chrome OS': 'ChromeOS',
+  'Mac OS': 'macOS',
+  'Sun OS': 'SunOS',
+  'Windows 10': 'Windows 10/11',
+};
+
 export const BROWSERS = {
   android: 'Android',
   aol: 'AOL',