diff --git a/src/common/Pagination/Pagination.tsx b/src/common/Pagination/Pagination.tsx index 7fb24e4..71a18d4 100644 --- a/src/common/Pagination/Pagination.tsx +++ b/src/common/Pagination/Pagination.tsx @@ -1,4 +1,6 @@ import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { COMMON } from '@config/namespaces'; import { Pagination as MaterialUIPagination, @@ -11,10 +13,31 @@ export type Props = PaginationProps & { }; function Pagination({ total, perPage, ...rest }: Props) { + const { t } = useTranslation(COMMON); + + const getItemAriaLabel = ( + type: 'page' | 'first' | 'last' | 'next' | 'previous', + page: number + ): string => { + switch (type) { + case 'page': + return `${t('pagination.page')} ${page}`; + case 'first': + return t('pagination.first'); + case 'last': + return t('pagination.last'); + case 'next': + return t('pagination.next'); + case 'previous': + return t('pagination.previous'); + } + return ''; + }; + if (total && perPage) { rest.count = total > 0 ? Math.ceil(total / perPage) : 1; } - return ; + return ; } export default Pagination; diff --git a/src/common/VersionSelector/VersionSelector.tsx b/src/common/VersionSelector/VersionSelector.tsx index eaabc51..4a0bcba 100644 --- a/src/common/VersionSelector/VersionSelector.tsx +++ b/src/common/VersionSelector/VersionSelector.tsx @@ -1,22 +1,24 @@ import React, { useState } from 'react'; import { useQuery } from '@apollo/client'; +import { useTranslation } from 'react-i18next'; +import { COMMON } from '@config/namespaces'; import { LANG_VERSIONS } from './queries'; import { LangVersionList } from './types'; import extractLangTagFromHostname from '@utils/extractLangTagFromHostname'; -import useStyles from './styles'; -import { Button, Menu, MenuItem, Link } from '@material-ui/core'; +import { Button, Menu, MenuItem, Link, Tooltip } from '@material-ui/core'; import { Language as LanguageIcon } from '@material-ui/icons'; function VersionSelector() { const [anchorEl, setAnchorEl] = useState(null); + const { t } = useTranslation(COMMON); const langTag = extractLangTagFromHostname(window.location.hostname); - const classes = useStyles(); const { data, loading } = useQuery(LANG_VERSIONS, { fetchPolicy: 'cache-first', variables: { filter: { sort: 'tag ASC', + tagNEQ: [langTag], }, }, }); @@ -41,12 +43,17 @@ function VersionSelector() { return (
- + + - {lv.tag} + {lv.host} ); })} diff --git a/src/common/VersionSelector/queries.ts b/src/common/VersionSelector/queries.ts index cf7f18c..41f28e6 100644 --- a/src/common/VersionSelector/queries.ts +++ b/src/common/VersionSelector/queries.ts @@ -5,6 +5,7 @@ export const LANG_VERSIONS = gql` langVersions(filter: $filter) { items { tag + host } } } diff --git a/src/common/VersionSelector/types.ts b/src/common/VersionSelector/types.ts index ae60dee..17e1528 100644 --- a/src/common/VersionSelector/types.ts +++ b/src/common/VersionSelector/types.ts @@ -2,6 +2,7 @@ import { List } from '@libs/graphql/types'; export type LangVersion = { tag: string; + host: string; }; export type LangVersionList = { diff --git a/src/config/app.ts b/src/config/app.ts index 30eda4d..c5e4c32 100644 --- a/src/config/app.ts +++ b/src/config/app.ts @@ -1,4 +1,4 @@ -export const DEFAULT_LANGUAGE = 'en'; +export const DEFAULT_LANGUAGE = process.env.DEFAULT_LANGUAGE ?? 'en'; export const SERVER_STATUS = { CLOSED: 'closed', diff --git a/src/config/namespaces.ts b/src/config/namespaces.ts new file mode 100644 index 0000000..eca242b --- /dev/null +++ b/src/config/namespaces.ts @@ -0,0 +1,2 @@ +export const COMMON = 'common'; +export const INDEX_PAGE = 'index-page'; diff --git a/src/features/IndexPage/components/Header/Header.tsx b/src/features/IndexPage/components/Header/Header.tsx index 19dfcf0..8b2ff76 100644 --- a/src/features/IndexPage/components/Header/Header.tsx +++ b/src/features/IndexPage/components/Header/Header.tsx @@ -1,7 +1,9 @@ import React from 'react'; import { useQueryParams, StringParam, withDefault } from 'use-query-params'; import { useDebouncedCallback } from 'use-debounce'; +import { useTranslation } from 'react-i18next'; import { TWHELP } from '@config/app'; +import * as NAMESPACES from '@config/namespaces'; import useStyles from './styles'; import { @@ -25,6 +27,7 @@ export default function Header() { value => setQuery({ q: value }), 1000 ); + const { t } = useTranslation(NAMESPACES.INDEX_PAGE); const classes = useStyles(); return ( @@ -35,7 +38,7 @@ export default function Header() { ('header.search')} defaultValue={query.q} size="small" onChange={e => { diff --git a/src/features/IndexPage/components/ServerSelection/ServerSelection.tsx b/src/features/IndexPage/components/ServerSelection/ServerSelection.tsx index ffe2b9b..0da3d90 100644 --- a/src/features/IndexPage/components/ServerSelection/ServerSelection.tsx +++ b/src/features/IndexPage/components/ServerSelection/ServerSelection.tsx @@ -6,10 +6,12 @@ import { NumberParam, withDefault, } from 'use-query-params'; +import { useTranslation } from 'react-i18next'; import formatDistanceToNow from '@libs/date/formatDistanceToNow'; import { Locale } from '@libs/date/locales'; import useLanguage from '@libs/i18n/useLanguage'; import { SERVER_STATUS } from '@config/app'; +import * as NAMESPACES from '@config/namespaces'; import { ServerList } from './types'; import { SERVERS } from './queries'; import extractLangTagFromHostname from '@utils/extractLangTagFromHostname'; @@ -28,6 +30,7 @@ export default function ServerSelection() { page: withDefault(NumberParam, 1), q: withDefault(StringParam, ''), }); + const { t } = useTranslation(NAMESPACES.INDEX_PAGE); const lang = useLanguage(); const { data, loading: loadingServers } = useQuery(SERVERS, { fetchPolicy: 'cache-and-network', @@ -97,18 +100,30 @@ export default function ServerSelection() { - {server.numberOfPlayers.toLocaleString()} players + {t('serverSelection.numberOfPlayers', { + count: server.numberOfPlayers, + num: server.numberOfPlayers.toLocaleString(), + })}
- {server.numberOfTribes.toLocaleString()} tribes + {t('serverSelection.numberOfTribes', { + count: server.numberOfTribes, + num: server.numberOfTribes.toLocaleString(), + })}
- {server.numberOfVillages.toLocaleString()} villages + {t('serverSelection.numberOfVillages', { + count: server.numberOfVillages, + num: server.numberOfVillages.toLocaleString(), + })}
- Updated{' '} + {t('serverSelection.updated')}{' '} {formatDistanceToNow(new Date(server.dataUpdatedAt), { locale: lang as Locale, addSuffix: true, diff --git a/src/libs/i18n/en/common.ts b/src/libs/i18n/en/common.ts new file mode 100644 index 0000000..7d98de0 --- /dev/null +++ b/src/libs/i18n/en/common.ts @@ -0,0 +1,18 @@ +const translations = { + versionSelector: { + changeVersion: 'Change version', + }, + pagination: { + page: 'Page', + first: 'Go to first page', + last: 'Go to last page', + next: 'Go to next page', + previous: 'Go to previous page', + }, + serverStatus: { + closed: 'Closed', + open: 'Open', + }, +}; + +export default translations; diff --git a/src/libs/i18n/en/index-page.ts b/src/libs/i18n/en/index-page.ts new file mode 100644 index 0000000..14a6f34 --- /dev/null +++ b/src/libs/i18n/en/index-page.ts @@ -0,0 +1,16 @@ +const translations = { + header: { + search: 'Search', + }, + serverSelection: { + numberOfPlayers: '{{num}} player', + numberOfPlayers_plural: '{{num}} players', + numberOfTribes: '{{num}} tribe', + numberOfTribes_plural: '{{num}} tribes', + numberOfVillages: '{{num}} village', + numberOfVillages_plural: '{{num}} villages', + updated: 'Updated', + }, +}; + +export default translations; diff --git a/src/libs/i18n/en/index.ts b/src/libs/i18n/en/index.ts index ff8b4c5..27769c1 100644 --- a/src/libs/i18n/en/index.ts +++ b/src/libs/i18n/en/index.ts @@ -1 +1,10 @@ -export default {}; +import * as NAMESPACES from '@config/namespaces'; +import common from './common'; +import indexPage from './index-page'; + +const translations = { + [NAMESPACES.COMMON]: common, + [NAMESPACES.INDEX_PAGE]: indexPage, +}; + +export default translations; diff --git a/src/libs/i18n/init.ts b/src/libs/i18n/init.ts index 8b43bf4..c5ddea5 100644 --- a/src/libs/i18n/init.ts +++ b/src/libs/i18n/init.ts @@ -4,6 +4,7 @@ import LanguageDetector from 'i18next-browser-languagedetector'; import pl from './pl'; import en from './en'; import { DEFAULT_LANGUAGE } from '@config/app'; +import { COMMON } from '@config/namespaces'; const init = (): i18nT => { i18n @@ -20,7 +21,7 @@ const init = (): i18nT => { en, pl, }, - defaultNS: 'common', + defaultNS: COMMON, react: { useSuspense: false, }, diff --git a/src/libs/i18n/pl/common.ts b/src/libs/i18n/pl/common.ts new file mode 100644 index 0000000..b7a33fc --- /dev/null +++ b/src/libs/i18n/pl/common.ts @@ -0,0 +1,18 @@ +const translations = { + versionSelector: { + changeVersion: 'Zmień wersję', + }, + pagination: { + page: 'Strona', + first: 'Przejdź do pierwszej strony', + last: 'Przejdź do ostatniej strony', + next: 'Przejdź do następnej strony', + previous: 'Przejdź do poprzedniej strony', + }, + serverStatus: { + closed: 'Zamknięty', + open: 'Otwarty', + }, +}; + +export default translations; diff --git a/src/libs/i18n/pl/index-page.ts b/src/libs/i18n/pl/index-page.ts new file mode 100644 index 0000000..c02bb6b --- /dev/null +++ b/src/libs/i18n/pl/index-page.ts @@ -0,0 +1,19 @@ +const translations = { + header: { + search: 'Szukaj', + }, + serverSelection: { + numberOfPlayers_0: '{{num}} gracz', + numberOfPlayers_1: '{{num}} graczy', + numberOfPlayers_2: '{{num}} graczy', + numberOfTribes_0: '{{num}} plemię', + numberOfTribes_1: '{{num}} plemiona', + numberOfTribes_2: '{{num}} plemion', + numberOfVillages_0: '{{num}} wioska', + numberOfVillages_1: '{{num}} wioski', + numberOfVillages_2: '{{num}} wiosek', + updated: 'Zaktualizowany', + }, +}; + +export default translations; diff --git a/src/libs/i18n/pl/index.ts b/src/libs/i18n/pl/index.ts index ff8b4c5..27769c1 100644 --- a/src/libs/i18n/pl/index.ts +++ b/src/libs/i18n/pl/index.ts @@ -1 +1,10 @@ -export default {}; +import * as NAMESPACES from '@config/namespaces'; +import common from './common'; +import indexPage from './index-page'; + +const translations = { + [NAMESPACES.COMMON]: common, + [NAMESPACES.INDEX_PAGE]: indexPage, +}; + +export default translations;