make MapPage translatable, translate MapPage into Polish and English

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';
 

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',

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>
   );

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:{' '}

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

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,

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;

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,

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;