Merge pull request #2502 from Maxime-J/os-names

Render correct OS names globally.
This commit is contained in:
Mike Cao 2024-02-15 12:56:06 -08:00 committed by GitHub
commit 45d77ac70a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 25 additions and 16 deletions

View File

@ -1,5 +1,5 @@
import useMessages from './useMessages'; import useMessages from './useMessages';
import { BROWSERS } from 'lib/constants'; import { BROWSERS, OS_NAMES } from 'lib/constants';
import useLocale from './useLocale'; import useLocale from './useLocale';
import useCountryNames from './useCountryNames'; import useCountryNames from './useCountryNames';
import regions from '../../../public/iso-3166-2.json'; import regions from '../../../public/iso-3166-2.json';
@ -9,10 +9,18 @@ export function useFormat() {
const { locale } = useLocale(); const { locale } = useLocale();
const countryNames = useCountryNames(locale); const countryNames = useCountryNames(locale);
const formatOS = (value: string): string => {
return OS_NAMES[value] || value;
};
const formatBrowser = (value: string): string => { const formatBrowser = (value: string): string => {
return BROWSERS[value] || value; return BROWSERS[value] || value;
}; };
const formatDevice = (value: string): string => {
return formatMessage(labels[value] || labels.unknown);
};
const formatCountry = (value: string): string => { const formatCountry = (value: string): string => {
return countryNames[value] || value; return countryNames[value] || value;
}; };
@ -26,28 +34,26 @@ export function useFormat() {
return countryNames[country] ? `${value}, ${countryNames[country]}` : value; return countryNames[country] ? `${value}, ${countryNames[country]}` : value;
}; };
const formatDevice = (value: string): string => {
return formatMessage(labels[value] || labels.unknown);
};
const formatValue = (value: string, type: string, data?: { [key: string]: any }): string => { const formatValue = (value: string, type: string, data?: { [key: string]: any }): string => {
switch (type) { switch (type) {
case 'os':
return formatOS(value);
case 'browser': case 'browser':
return formatBrowser(value); return formatBrowser(value);
case 'device':
return formatDevice(value);
case 'country': case 'country':
return formatCountry(value); return formatCountry(value);
case 'region': case 'region':
return formatRegion(value); return formatRegion(value);
case 'city': case 'city':
return formatCity(value, data?.country); return formatCity(value, data?.country);
case 'device':
return formatDevice(value);
default: default:
return value; return value;
} }
}; };
return { formatBrowser, formatCountry, formatRegion, formatDevice, formatValue }; return { formatOS, formatBrowser, formatDevice, formatCountry, formatRegion, formatValue };
} }
export default useFormat; export default useFormat;

View File

@ -1,19 +1,14 @@
import MetricsTable, { MetricsTableProps } from './MetricsTable'; import MetricsTable, { MetricsTableProps } from './MetricsTable';
import FilterLink from 'components/common/FilterLink'; import FilterLink from 'components/common/FilterLink';
import { useMessages } from 'components/hooks'; import { useMessages, useFormat } from 'components/hooks';
const names = {
'Mac OS': 'macOS',
'Chrome OS': 'ChromeOS',
'Sun OS': 'SunOS',
};
export function OSTable(props: MetricsTableProps) { export function OSTable(props: MetricsTableProps) {
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const { formatOS } = useFormat();
function renderLink({ x: os }) { function renderLink({ x: os }) {
return ( return (
<FilterLink id="os" value={names[os] || os}> <FilterLink id="os" value={os} label={formatOS(os)}>
<img <img
src={`${process.env.basePath || ''}/images/os/${ src={`${process.env.basePath || ''}/images/os/${
os?.toLowerCase().replaceAll(/\W/g, '-') || 'unknown' os?.toLowerCase().replaceAll(/\W/g, '-') || 'unknown'

View File

@ -249,6 +249,14 @@ export const DESKTOP_OS = [
export const MOBILE_OS = ['Amazon OS', 'Android OS', 'BlackBerry OS', 'iOS', 'Windows Mobile']; 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 = { export const BROWSERS = {
android: 'Android', android: 'Android',
aol: 'AOL', aol: 'AOL',