make MapPage translatable, translate MapPage into Polish and English

2020-12-20 19:57:06 +01:00 · 2020-12-20 19:57:06 +01:00 · 7bcd69b40e
commit 7bcd69b40e
parent 8dd4b1e1bf
9 changed files with 101 additions and 21 deletions
--- a/src/config/app.ts
+++ b/src/config/app.ts
@ -1,4 +1,4 @@
-export const DEFAULT_LANGUAGE = process.env.REACT_APP_DEFAULT_LANGUAGE ?? 'en';
+export const DEFAULT_LANGUAGE = process.env.REACT_APP_DEFAULT_LANGUAGE ?? 'pl';

 export const NAME = 'TWHelp';

--- a/src/config/namespaces.ts
+++ b/src/config/namespaces.ts
@ -6,6 +6,7 @@ export const NOT_FOUND_PAGE = 'not-found-page';
 export const SERVER_PAGE = {
  COMMON: 'server-page/common',
  INDEX_PAGE: 'server-page/index-page',
+  MAP_PAGE: 'server-page/map-page',
  PLAYER_PAGE: {
    COMMON: 'server-page/player-page/common',
    INDEX_PAGE: 'server-page/player-page/index-page',
--- a/src/features/ServerPage/features/MapPage/MapPage.tsx
+++ b/src/features/ServerPage/features/MapPage/MapPage.tsx
@ -1,9 +1,12 @@
 import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useApolloClient } from '@apollo/client';
 import { useDebouncedCallback } from 'use-debounce';
+import useTitle from '@libs/useTitle';
 import useServer from '../../libs/ServerContext/useServer';
 import useMarkers from './useMarkers';
 import { MAP_SERVICE } from '@config/app';
+import { SERVER_PAGE } from '@config/namespaces';
 import { PLAYERS, TRIBES } from './queries';

 import { makeStyles } from '@material-ui/core/styles';
@ -66,6 +69,8 @@ function MapPage() {
  const { key } = useServer();
  const classes = useStyles();
  const client = useApolloClient();
+  const { t } = useTranslation(SERVER_PAGE.MAP_PAGE);
+  useTitle(t('title', { key }));

  const handleSettingsChange = (
    e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
@ -178,11 +183,11 @@ function MapPage() {
                align="center"
                gutterBottom
              >
-                Settings
+                {t('sections.settings')}
              </Typography>
              <div className={classes.formGroup}>
                <TextField
-                  label="Zoom level"
+                  label={t('inputLabels.zoomLevel')}
                  type="number"
                  name="scale"
                  value={settings.scale}
@ -196,7 +201,7 @@ function MapPage() {
                  }}
                />
                <TextField
-                  label="Center X"
+                  label={t('inputLabels.centerX')}
                  type="number"
                  name="centerX"
                  value={settings.centerX}
@ -210,7 +215,7 @@ function MapPage() {
                  }}
                />
                <TextField
-                  label="Center Y"
+                  label={t('inputLabels.centerY')}
                  type="number"
                  name="centerY"
                  value={settings.centerY}
@ -224,7 +229,7 @@ function MapPage() {
                  }}
                />
                <TextField
-                  label="Background color"
+                  label={t('inputLabels.backgroundColor')}
                  name="backgroundColor"
                  onChange={callDebouncedHandleSettingsChange}
                  fullWidth
@ -232,8 +237,8 @@ function MapPage() {
                  variant="standard"
                />
                <TextField
-                  label="Grid line color"
                  name="gridLineColor"
+                  label={t('inputLabels.gridLineColor')}
                  onChange={callDebouncedHandleSettingsChange}
                  defaultValue={settings.gridLineColor}
                  fullWidth
@ -241,8 +246,8 @@ function MapPage() {
                  type="color"
                />
                <TextField
-                  label="Continent number color"
                  name="continentNumberColor"
+                  label={t('inputLabels.continentNumberColor')}
                  onChange={callDebouncedHandleSettingsChange}
                  defaultValue={settings.continentNumberColor}
                  fullWidth
@ -250,7 +255,7 @@ function MapPage() {
                  type="color"
                />
                <FormControlLabel
-                  label="Markers only"
+                  label={t('inputLabels.markersOnly')}
                  control={
                    <Checkbox
                      name="markersOnly"
@ -260,7 +265,7 @@ function MapPage() {
                  }
                />
                <FormControlLabel
-                  label="Show barbarian villages"
+                  label={t('inputLabels.showBarbarianVillages')}
                  control={
                    <Checkbox
                      name="showBarbarian"
@ -270,7 +275,7 @@ function MapPage() {
                  }
                />
                <FormControlLabel
-                  label="Larger markers"
+                  label={t('inputLabels.largerMarkers')}
                  control={
                    <Checkbox
                      name="largerMarkers"
@ -280,7 +285,7 @@ function MapPage() {
                  }
                />
                <FormControlLabel
-                  label="Continent grid"
+                  label={t('inputLabels.continentGrid')}
                  control={
                    <Checkbox
                      name="showGrid"
@ -290,7 +295,7 @@ function MapPage() {
                  }
                />
                <FormControlLabel
-                  label="Continent numbers"
+                  label={t('inputLabels.continentNumbers')}
                  control={
                    <Checkbox
                      name="showContinentNumbers"
@ -308,7 +313,7 @@ function MapPage() {
                align="center"
                gutterBottom
              >
-                Tribe markers
+                {t('sections.tribeMarkers')}
              </Typography>
              <div className={classes.formGroup}>
                {tribeMarkers.map(marker => {
@ -320,6 +325,7 @@ function MapPage() {
                      onChangeColor={createUpdateTribeMarkerColorHandler(
                        marker.id
                      )}
+                      loadingText={t('loading')}
                      loadSuggestions={searchTribes}
                      getOptionLabel={tribeGetOptionLabel}
                      getOptionSelected={tribeGetOptionSelected}
@ -333,7 +339,7 @@ function MapPage() {
                  onClick={handleAddTribeMarker}
                  disabled={tribeMarkers.length >= 100}
                >
-                  Add marker
+                  {t('buttons.addMarker')}
                </Button>
              </div>
            </Grid>
@ -344,7 +350,7 @@ function MapPage() {
                align="center"
                gutterBottom
              >
-                Player markers
+                {t('sections.playerMarkers')}
              </Typography>
              <div className={classes.formGroup}>
                {playerMarkers.map(marker => {
@ -369,7 +375,7 @@ function MapPage() {
                  onClick={handleAddPlayerMarker}
                  disabled={playerMarkers.length >= 100}
                >
-                  Add marker
+                  {t('buttons.addMarker')}
                </Button>
              </div>
            </Grid>
@ -381,13 +387,15 @@ function MapPage() {
                  color="secondary"
                  variant="contained"
                >
-                  Generate new map
+                  {t('buttons.generateNewMap')}
                </Button>
              </Typography>
            </Grid>
          </Grid>
        </form>
-        {mapURL && <Map src={mapURL} alt={key} />}
+        {mapURL && (
+          <Map src={mapURL} alt={key} loadingInfo={t('infoWhileGenerating')} />
+        )}
      </Container>
    </ServerPageLayout>
  );
--- a/src/features/ServerPage/features/MapPage/components/Map/Map.tsx
+++ b/src/features/ServerPage/features/MapPage/components/Map/Map.tsx
@ -9,9 +9,15 @@ export interface Props {
  src: string;
  alt: string;
  maxWidth?: number;
+  loadingInfo?: string;
 }

-function Map({ src = '', alt = 'Map', maxWidth = 1000 }: Props) {
+function Map({
+  src = '',
+  alt = 'Map',
+  maxWidth = 1000,
+  loadingInfo = 'It may take a while to generate a map!',
+}: Props) {
  const [loading, setLoading] = useState(true);
  const classes = useStyles();

@ -22,7 +28,7 @@ function Map({ src = '', alt = 'Map', maxWidth = 1000 }: Props) {
  return (
    <div className={classes.container}>
      {loading ? (
-        <Alert severity="warning">It may take a while to generate a map!</Alert>
+        <Alert severity="warning">{loadingInfo}</Alert>
      ) : (
        <Alert severity="info">
          URL:{' '}
--- a/src/features/ServerPage/features/MapPage/components/MarkerField/MarkerField.tsx
+++ b/src/features/ServerPage/features/MapPage/components/MarkerField/MarkerField.tsx
@ -15,6 +15,7 @@ export interface Props<T> {
  getOptionLabel: (opt: T) => string;
  getOptionSelected: (opt: T, value: T) => boolean;
  loadSuggestions: (value: string) => Promise<T[]>;
+  loadingText?: string;
 }

 function MarkerField<T extends object>({
@ -24,6 +25,7 @@ function MarkerField<T extends object>({
  onChangeColor,
  getOptionSelected,
  getOptionLabel,
+  loadingText,
 }: Props<T>) {
  const [searchValue, setSearchValue] = useState<string>('');
  const [suggestions, setSuggestions] = useState<T[]>([]);
@ -59,6 +61,7 @@ function MarkerField<T extends object>({
        loading={loading}
        getOptionSelected={getOptionSelected}
        onChange={onChange}
+        loadingText={loadingText}
        renderInput={params => {
          return (
            <TextField
--- a/src/libs/i18n/en/server-page/index.ts
+++ b/src/libs/i18n/en/server-page/index.ts
@ -5,11 +5,13 @@ import playerPage from './player-page';
 import tribePage from './tribe-page';
 import villagePage from './village-page';
 import rankingPage from './ranking-page';
+import mapPage from './map-page';

 const translations = {
  [NAMESPACES.SERVER_PAGE.COMMON]: common,
  [NAMESPACES.SERVER_PAGE.INDEX_PAGE]: indexPage,
  [NAMESPACES.SERVER_PAGE.VILLAGE_PAGE.INDEX_PAGE]: villagePage,
+  [NAMESPACES.SERVER_PAGE.MAP_PAGE]: mapPage,
  ...playerPage,
  ...tribePage,
  ...rankingPage,
--- a/src/libs/i18n/en/server-page/map-page.ts
+++ b/src/libs/i18n/en/server-page/map-page.ts
@ -0,0 +1,29 @@
+const translations = {
+  title: 'Map tool - {{key}}',
+  sections: {
+    settings: 'Settings',
+    tribeMarkers: 'Tribe markers',
+    playerMarkers: 'Player markers',
+  },
+  inputLabels: {
+    zoomLevel: 'Zoom level',
+    centerX: 'Center X',
+    centerY: 'Center Y',
+    backgroundColor: 'Background color',
+    gridLineColor: 'Grid line color',
+    continentNumberColor: 'Continent number color',
+    markersOnly: 'Markers only',
+    showBarbarianVillages: 'Show barbarian villages',
+    largerMarkers: 'Larger markers',
+    continentGrid: 'Continent grid',
+    continentNumbers: 'Continent numbers',
+  },
+  buttons: {
+    addMarker: 'Add marker',
+    generateNewMap: 'Generate new map',
+  },
+  loading: 'Loading',
+  infoWhileGenerating: 'It may take a while to generate a map!',
+};
+
+export default translations;
--- a/src/libs/i18n/pl/server-page/index.ts
+++ b/src/libs/i18n/pl/server-page/index.ts
@ -5,11 +5,13 @@ import playerPage from './player-page';
 import tribePage from './tribe-page';
 import villagePage from './village-page';
 import rankingPage from './ranking-page';
+import mapPage from './map-page';

 const translations = {
  [NAMESPACES.SERVER_PAGE.COMMON]: common,
  [NAMESPACES.SERVER_PAGE.INDEX_PAGE]: indexPage,
  [NAMESPACES.SERVER_PAGE.VILLAGE_PAGE.INDEX_PAGE]: villagePage,
+  [NAMESPACES.SERVER_PAGE.MAP_PAGE]: mapPage,
  ...playerPage,
  ...tribePage,
  ...rankingPage,
--- a/src/libs/i18n/pl/server-page/map-page.ts
+++ b/src/libs/i18n/pl/server-page/map-page.ts
@ -0,0 +1,29 @@
+const translations = {
+  title: 'Narzędzie mapy - {{key}}',
+  sections: {
+    settings: 'Ustawienia',
+    tribeMarkers: 'Oznaczenia plemion',
+    playerMarkers: 'Oznaczenia graczy',
+  },
+  inputLabels: {
+    zoomLevel: 'Poziom przybliżenia',
+    centerX: 'Wyśrodkuj X',
+    centerY: 'Wyśrodkuj Y',
+    backgroundColor: 'Kolor tła',
+    gridLineColor: 'Kolor linii',
+    continentNumberColor: 'Kolor numeru kontynentu',
+    markersOnly: 'Tylko oznaczenia',
+    showBarbarianVillages: 'Pokaż opuszczone',
+    largerMarkers: 'Większe znaczniki',
+    continentGrid: 'Granice kontynentów',
+    continentNumbers: 'Numery kontynentów',
+  },
+  buttons: {
+    addMarker: 'Dodaj marker',
+    generateNewMap: 'Wygeneruj mapę',
+  },
+  loading: 'Ładowanie',
+  infoWhileGenerating: 'To może zająć chwilę!',
+};
+
+export default translations;