Intl: add all translations

.prettierrc

@@ -3,5 +3,13 @@
   "printWidth": 80,
   "singleQuote": true,
   "tabWidth": 2,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "overrides": [
+    {
+      "files": "src/locales/**/*.js",
+      "options": {
+        "printWidth": 150
+      }
+    }
+  ]
 }

src/components/FeaturePanel/EditDialog/EditDialog.tsx

@@ -27,6 +27,7 @@ import { SuccessContent } from './SuccessContent';
 import { icons } from '../../../assets/icons';
 import { editOsmFeature } from '../../../services/osmApiAuth';
 import { useOsmAuthContext } from '../../utils/OsmAuthContext';
+import { t, Translation } from '../../../services/intl';
 
 const useIsFullScreen = () => {
   const theme = useTheme();
@@ -54,30 +55,27 @@ const OsmLogin = () => {
     <Typography variant="body2" color="textSecondary" paragraph>
       {loggedIn ? (
         <>
-          Jste přihlášeni jako <b>{osmUser}</b>, změny se ihned projeví v mapě.
-          (
+          <Translation id="editdialog.loggedInMessage" values={{ osmUser }} /> (
           <button
             type="button"
             className="linkLikeButton"
             onClick={handleLogout}
           >
-            odhlásit
+            {t('editdialog.logout')}
           </button>
           )
         </>
       ) : (
         <>
-          Vkládáte <b>anonymní</b> poznámku do mapy.
-          <br />
-          Pokud se{' '}
+          <Translation id="editdialog.anonymousMessage1" />{' '}
           <button
             type="button"
             className="linkLikeButton"
             onClick={handleLogin}
           >
-            přihlásíte do OpenStreetMap
+            {t('editdialog.anonymousMessage2_login')}
           </button>
-          , změny se ihned projeví v mapě.
+          <Translation id="editdialog.anonymousMessage3" />
         </>
       )}
     </Typography>
@@ -122,7 +120,7 @@ export const EditDialog = ({ feature, open, handleClose, focusTag }: Props) => {
     );
     if (noteText == null) {
       // eslint-disable-next-line no-alert
-      alert('Proveďte, prosím, požadované změny.');
+      alert(t('editdialog.changes_needed'));
       return;
     }
 
@@ -153,7 +151,9 @@ export const EditDialog = ({ feature, open, handleClose, focusTag }: Props) => {
           width={16}
           height={16}
         />{' '}
-        {loggedIn ? 'Upravit: ' : 'Navrhnout úpravu: '}
+        {loggedIn
+          ? t('editdialog.edit_heading')
+          : t('editdialog.suggest_heading')}{' '}
         {feature.tags.name || feature.properties.subclass}
       </DialogTitle>
       {successInfo ? (
@@ -170,7 +170,9 @@ export const EditDialog = ({ feature, open, handleClose, focusTag }: Props) => {
 
               {!loggedIn && (
                 <>
-                  <DialogHeading>Možnosti</DialogHeading>
+                  <DialogHeading>
+                    {t('editdialog.options_heading')}
+                  </DialogHeading>
                   <PlaceCancelledToggle
                     cancelled={cancelled}
                     toggle={toggleCancelled}
@@ -197,10 +199,10 @@ export const EditDialog = ({ feature, open, handleClose, focusTag }: Props) => {
           <DialogActions>
             {loading && <CircularProgress />}
             <Button onClick={onClose} color="primary">
-              Zrušit
+              {t('editdialog.cancel_button')}
             </Button>
             <Button onClick={saveDialog} color="primary" variant="contained">
-              Uložit
+              {t('editdialog.save_button')}
             </Button>
           </DialogActions>
         </>

src/components/FeaturePanel/EditDialog/MajorKeysEditor.tsx

@@ -2,12 +2,13 @@ import React, { useEffect } from 'react';
 import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
+import { t } from '../../../services/intl';
 
 const majorKeysNames = {
-  name: 'Název',
-  website: 'Web',
-  phone: 'Telefon',
-  opening_hours: 'Otevírací doba',
+  name: t('tags.name'),
+  website: t('tags.website'),
+  phone: t('tags.phone'),
+  opening_hours: t('tags.opening_hours'),
 };
 
 export const majorKeys = ['name', 'website', 'phone', 'opening_hours'];
@@ -48,7 +49,7 @@ export const MajorKeysEditor = ({ tags, setTag, focusTag }) => {
       {!!inactiveMajorKeys.length && (
         <>
           <Typography variant="body1" component="span" color="textSecondary">
-            Přidat:
+            {t('editdialog.add_major_tag')}:
           </Typography>
           {inactiveMajorKeys.map((k) => (
             <React.Fragment key={k}>

src/components/FeaturePanel/EditDialog/OtherTagsEditor.tsx

@@ -6,6 +6,7 @@ import Typography from '@material-ui/core/Typography';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { majorKeys } from './MajorKeysEditor';
 import { isString } from '../../helpers';
+import { t } from '../../../services/intl';
 
 const Table = styled.table`
   width: calc(100% - 20px);
@@ -45,7 +46,7 @@ const NewTagRow = ({ setTag }) => {
           onChange={(e) => setNewKey(e.target.value)}
           variant="outlined"
           size="small"
-          placeholder="new key"
+          placeholder={t('editdialog.other_tags.new_key')}
         />
       </th>
       <td>
@@ -56,7 +57,7 @@ const NewTagRow = ({ setTag }) => {
           size="small"
         />{' '}
         <Button variant="contained" disableElevation onClick={handleAdd}>
-          Add
+          {t('editdialog.other_tags.add')}
         </Button>
       </td>
     </tr>
@@ -75,7 +76,7 @@ const KeyValueRow = ({ k, v, setTag, focusTag }) => (
         variant="outlined"
         size="small"
         autoFocus={focusTag === k}
-        placeholder="will be deleted"
+        placeholder={t('editdialog.other_tags.will_be_deleted')}
       />
     </td>
   </tr>
@@ -107,7 +108,7 @@ export const OtherTagsEditor = ({ tags, setTag, focusTag }) => {
           disableElevation
           onClick={() => setShowTags(!showTags)}
         >
-          Další vlastnosti – tagy
+          {t('editdialog.other_tags')}
           <ExpandMoreIcon fontSize="small" />
         </Button>
       )}
@@ -120,7 +121,7 @@ export const OtherTagsEditor = ({ tags, setTag, focusTag }) => {
             color="textSecondary"
             style={{ position: 'relative' }}
           >
-            Další vlastnosti – tagy
+            {t('editdialog.other_tags')}
           </Typography>
           <Table>
             <tbody>

src/components/FeaturePanel/EditDialog/SuccessContent.tsx

@@ -9,6 +9,7 @@ import Typography from '@material-ui/core/Typography';
 import { Box, Tooltip } from '@material-ui/core';
 import IconButton from '@material-ui/core/IconButton';
 import { nl2br } from '../../utils/nl2br';
+import { t, Translation } from '../../../services/intl';
 
 const StyledCheckCircleIcon = styled(CheckCircleIcon)`
   color: #4b912e;
@@ -54,21 +55,18 @@ export const SuccessContent = ({ successInfo, handleClose }) => {
   const texts =
     successInfo.type === 'note'
       ? {
-          heading: 'Děkujeme za Váš návrh!',
-          subheading:
-            'Dobrovolnící z komunity OpenStreetMap ho časem zpracují.',
-          body: `Celý proces obvykle trvá několik dní. Ovšem v místech, kde není aktivní komunita, to může trvat i velmi dlouho.`,
-          urlLabel: `Doplnit informace či sledovat vývoj můžete zde:`,
-          textLabel: 'Text poznámky',
+          heading: t('editsuccess.note.heading'),
+          subheading: t('editsuccess.note.subheading'),
+          body: <Translation id="editsuccess.note.body" />,
+          urlLabel: t('editsuccess.note.urlLabel'),
+          textLabel: t('editsuccess.note.textLabel'),
         }
       : {
-          heading: 'Děkujeme za Vaši editaci!',
-          subheading: 'Již nyní se začíná objevovat v mapách po celém světě.',
-          body: `V databázi OSM již je uložena. V řádu několika minut ji uvidíte na mapě "OSM Mapnik". Zdejší mapa a různé jiné aplikace se obnovují cca 1x za měsíc.
-
-          Pokud se jedná o omyl, můžete hodnoty ručně vrátit zpět a znovu je uložit.`,
-          urlLabel: `Vaše změny:`,
-          textLabel: 'Poznámka ke změně',
+          heading: t('editsuccess.edit.heading'),
+          subheading: t('editsuccess.edit.subheading'),
+          body: <Translation id="editsuccess.edit.body" />,
+          urlLabel: t('editsuccess.edit.urlLabel'),
+          textLabel: t('editsuccess.edit.textLabel'),
         };
 
   return (
@@ -84,11 +82,11 @@ export const SuccessContent = ({ successInfo, handleClose }) => {
         </CenterText>
 
         <Typography variant="body2" paragraph>
-          {nl2br(texts.body)}
+          {texts.body}
         </Typography>
 
         <Typography variant="body2" paragraph>
-          {nl2br(texts.urlLabel)}
+          {texts.urlLabel}
           <br />
           <a href={successInfo.url} rel="noopener nofollow">
             {successInfo.url}
@@ -106,7 +104,7 @@ export const SuccessContent = ({ successInfo, handleClose }) => {
       </DialogContent>
       <DialogActions>
         <Button onClick={handleClose} color="primary">
-          Zavřít
+          {t('editsuccess.close_button')}
         </Button>
       </DialogActions>
     </>

src/components/FeaturePanel/EditDialog/components.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 import Typography from '@material-ui/core/Typography';
 import { Box } from '@material-ui/core';
 import { useToggleState } from '../../helpers';
+import { t, Translation } from '../../../services/intl';
 
 export const DialogHeading = ({ children }) => (
   <Typography variant="overline" display="block" color="textSecondary">
@@ -21,14 +22,14 @@ export const ChangeLocationEditor = ({ location, setLocation }) => {
         control={
           <Checkbox checked={showLocation} onChange={toggleShowLocation} />
         }
-        label="Zadat novou polohu"
+        label={t('editdialog.location_checkbox')}
       />
       {showLocation && (
         <div style={{ marginLeft: 30 }}>
           <TextField
             value={location}
             onChange={(e) => setLocation(e.target.value)}
-            placeholder="např. naproti přes ulici"
+            placeholder={t('editdialog.location_placeholder')}
             InputLabelProps={{
               shrink: true,
             }}
@@ -47,7 +48,7 @@ export const PlaceCancelledToggle = ({ cancelled, toggle }) => (
   <>
     <FormControlLabel
       control={<Checkbox checked={cancelled} onChange={toggle} />}
-      label="Místo zrušeno či trvale zavřeno"
+      label={t('editdialog.place_cancelled')}
     />
     <br />
   </>
@@ -57,30 +58,22 @@ export const ContributionInfoBox = ({ loggedIn }) =>
   loggedIn ? (
     <Box mt={4} mb={4}>
       <Typography variant="body1" color="textSecondary" paragraph>
-        Vaše úprava bude ihned uložena do databáze OpenStreetMap. Prosíme,
-        vkládejte pouze informace z vlastních nebo ověřených zdrojů. Je zakázano
-        kopírovat data krytá autorským zákonem (např. Google Maps).{' '}
-        <a href="https://wiki.openstreetmap.org/wiki/Cs:Jak_mapujeme">
-          Více informací
-        </a>
+        <Translation id="editdialog.info_edit" />
       </Typography>
     </Box>
   ) : (
     <Box mt={4} mb={4}>
       <Typography variant="body1" color="textSecondary" paragraph>
-        Váš návrh budou zpracovávat dobrovolníci OpenStreetMap. Zde pro ně
-        můžete přidat doplňující poznámku, nebo popsat např. úpravu polohy.
-        Vhodné je též podložit váš příspěvek odkazem na zdroj informace (web,
-        foto atd.).
+        <Translation id="editdialog.info_note" />
       </Typography>
     </Box>
   );
 
 export const NoteField = ({ note, setNote }) => (
   <>
     <TextField
-      label="Poznámka (nepovinné)"
-      placeholder="odkaz na zdroj informace apod."
+      label={t('editdialog.comment')}
+      placeholder={t('editdialog.comment_placeholder')}
       InputLabelProps={{
         shrink: true,
       }}

src/components/FeaturePanel/EditIconButton.tsx

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 import IconButton from '@material-ui/core/IconButton';
 import Edit from '@material-ui/icons/Edit';
 import React from 'react';
+import { t } from '../../services/intl';
 
 const StyledIconButton = styled(IconButton)`
   position: absolute !important; /* TODO mui styles takes precendence, why? */
@@ -18,6 +19,6 @@ const StyledIconButton = styled(IconButton)`
 
 export const EditIconButton = ({ onClick }) => (
   <StyledIconButton className="show-on-hover" onClick={onClick}>
-    <Edit titleAccess="Upravit v databázi OpenStreetMap" />
+    <Edit titleAccess={t('featurepanel.inline_edit_title')} />
   </StyledIconButton>
 );

src/components/FeaturePanel/FeatureImage.tsx

@@ -5,6 +5,7 @@ import Head from 'next/head';
 import { getFeatureImage, LOADING } from '../../services/images';
 import { Feature } from '../../services/types';
 import { InlineSpinner } from './FeatureImage/InlineSpinner';
+import { t } from '../../services/intl';
 
 const Wrapper = styled.div`
   position: relative;
@@ -103,7 +104,7 @@ const FeatureImage = ({ feature, ico, children }: Props) => {
   const { source, link, thumb, username, portrait } = image ?? {};
   const uncertainImage = source === 'Mapillary';
   const uncertainTitle = uncertainImage
-    ? '\nThis is the closest street view image. It may show different object.'
+    ? `\n${  t('featurepanel.uncertain_image')}`
     : '';
 
   return (