MapPage - refactor

src/features/ServerPage/features/MapPage/MapPage.tsx

@@ -255,56 +255,47 @@ function MapPage() {
                   variant="standard"
                   type="color"
                 />
-                <FormControlLabel
+                {[
-                  label={t('inputLabels.markersOnly')}
+                  {
-                  control={
+                    name: 'markersOnly',
-                    <Checkbox
+                    checked: settings.markersOnly,
-                      name="markersOnly"
+                    onChange: handleSettingsChange,
-                      checked={settings.markersOnly}
+                  },
-                      onChange={handleSettingsChange}
+                  {
+                    name: 'showBarbarian',
+                    checked: settings.showBarbarian,
+                    onChange: handleSettingsChange,
+                  },
+                  {
+                    name: 'largerMarkers',
+                    checked: settings.largerMarkers,
+                    onChange: handleSettingsChange,
+                  },
+                  {
+                    name: 'showGrid',
+                    checked: settings.showGrid,
+                    onChange: handleSettingsChange,
+                  },
+                  {
+                    name: 'showContinentNumbers',
+                    checked: settings.showContinentNumbers,
+                    onChange: handleSettingsChange,
+                  },
+                ].map(({ name, checked, onChange }) => {
+                  return (
+                    <FormControlLabel
+                      key={name}
+                      label={t('inputLabels.' + name)}
+                      control={
+                        <Checkbox
+                          name={name}
+                          checked={checked}
+                          onChange={onChange}
+                        />
+                      }
                     />
-                  }
+                  );
-                />
+                })}
-                <FormControlLabel
-                  label={t('inputLabels.showBarbarianVillages')}
-                  control={
-                    <Checkbox
-                      name="showBarbarian"
-                      checked={settings.showBarbarian}
-                      onChange={handleSettingsChange}
-                    />
-                  }
-                />
-                <FormControlLabel
-                  label={t('inputLabels.largerMarkers')}
-                  control={
-                    <Checkbox
-                      name="largerMarkers"
-                      checked={settings.largerMarkers}
-                      onChange={handleSettingsChange}
-                    />
-                  }
-                />
-                <FormControlLabel
-                  label={t('inputLabels.continentGrid')}
-                  control={
-                    <Checkbox
-                      name="showGrid"
-                      checked={settings.showGrid}
-                      onChange={handleSettingsChange}
-                    />
-                  }
-                />
-                <FormControlLabel
-                  label={t('inputLabels.continentNumbers')}
-                  control={
-                    <Checkbox
-                      name="showContinentNumbers"
-                      checked={settings.showContinentNumbers}
-                      onChange={handleSettingsChange}
-                    />
-                  }
-                />
               </div>
             </Card>
             <Card>

src/features/ServerPage/features/MapPage/components/Map/Map.tsx

@@ -27,22 +27,10 @@ function Map({
 
   return (
     <div className={classes.container}>
-      {loading ? (
+      {loading && (
         <Alert variant="filled" severity="warning">
           {loadingInfo}
         </Alert>
-      ) : (
-        <Alert variant="filled" severity="info">
-          URL:{' '}
-          <Link
-            color="inherit"
-            underline="always"
-            className={classes.link}
-            href={src}
-          >
-            {src}
-          </Link>
-        </Alert>
       )}
       <div
         className={classes.imageWrapper}
@@ -85,7 +73,7 @@ const useStyles = makeStyles(theme => {
       marginTop: theme.spacing(2),
     },
     imageWrapper: {
-      marginTop: theme.spacing(1),
+      marginTop: theme.spacing(2),
       margin: 'auto',
     },
   };

src/libs/i18n/en/server-page/map-page.ts

@@ -13,10 +13,10 @@ const translations = {
     gridLineColor: 'Grid line color',
     continentNumberColor: 'Continent number color',
     markersOnly: 'Markers only',
-    showBarbarianVillages: 'Show barbarian villages',
+    showBarbarian: 'Show barbarian villages',
     largerMarkers: 'Larger markers',
-    continentGrid: 'Continent grid',
+    showGrid: 'Continent grid',
-    continentNumbers: 'Continent numbers',
+    showContinentNumbers: 'Continent numbers',
   },
   buttons: {
     addMarker: 'Add marker',

src/libs/i18n/pl/server-page/map-page.ts

@@ -13,10 +13,10 @@ const translations = {
     gridLineColor: 'Kolor linii',
     continentNumberColor: 'Kolor numeru kontynentu',
     markersOnly: 'Tylko oznaczenia',
-    showBarbarianVillages: 'Pokaż opuszczone',
+    showBarbarian: 'Pokaż opuszczone',
     largerMarkers: 'Większe znaczniki',
-    continentGrid: 'Granice kontynentów',
+    showGrid: 'Granice kontynentów',
-    continentNumbers: 'Numery kontynentów',
+    showContinentNumbers: 'Numery kontynentów',
   },
   buttons: {
     addMarker: 'Dodaj marker',