climbing: add locale to link at Homepage, Area and Crag (#579)

zbycz · Sep 22, 2024 · 180d97e · 180d97e
1 parent e18b00d
commit 180d97e
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 15 deletions.
diff --git a/src/components/FeaturePanel/CragsInArea.tsx b/src/components/FeaturePanel/CragsInArea.tsx
@@ -12,6 +12,8 @@ import { getLabel } from '../../helpers/featureLabel';
 import { Slider, Wrapper } from './ImagePane/FeatureImages';
 import { Image } from './ImagePane/Image/Image';
 import { getInstantImage } from '../../services/images/getImageDefs';
+import { intl } from '../../services/intl';
+import Link from 'next/link';
 
 const ArrowIcon = styled(ArrowForwardIosIcon)`
   opacity: 0.2;
@@ -44,7 +46,7 @@ const CragList = styled.div`
   flex-direction: column;
   gap: 12px;
 `;
-const Link = styled.a`
+const StyledLink = styled(Link)`
   text-decoration: none !important;
 `;
 const Content = styled.div`
@@ -119,8 +121,9 @@ const CragItem = ({ feature }: { feature: Feature }) => {
     })) ?? [];
 
   return (
-    <Link
+    <StyledLink
       href={`/${getUrlOsmId(feature.osmMeta)}`}
+      locale={intl.lang}
       onClick={getOnClickWithHash(feature.osmMeta)}
       onMouseEnter={mobileMode ? undefined : handleHover}
       onMouseLeave={() => setPreview(null)}
@@ -133,7 +136,7 @@ const CragItem = ({ feature }: { feature: Feature }) => {
         />
         {images.length ? <Gallery images={images} /> : null}
       </Container>
-    </Link>
+    </StyledLink>
   );
 };
 

diff --git a/src/components/FeaturePanel/MemberFeatures/ClimbingItem.tsx b/src/components/FeaturePanel/MemberFeatures/ClimbingItem.tsx
@@ -13,7 +13,7 @@ import { isTicked, onTickAdd } from '../../../services/ticks';
 import { useFeatureContext } from '../../utils/FeatureContext';
 import { getOsmappLink, getShortId } from '../../../services/helpers';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
-import { t } from '../../../services/intl';
+import { intl, t } from '../../../services/intl';
 import { IconButton, Menu, MenuItem } from '@mui/material';
 import Router from 'next/router';
 import { useMobileMode } from '../../helpers';
@@ -32,7 +32,7 @@ const RouteName = styled.div<{ opacity: number }>`
 
 const RouteGrade = styled.div``;
 
-const Container = styled.a`
+const Container = styled(Link)`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -106,6 +106,7 @@ export const ClimbingItem = ({
   const routeDetailUrl = `${getOsmappLink(feature)}${typeof window !== 'undefined' ? window.location.hash : ''}`;
 
   const handleClickItem = (event) => {
+    if (event.ctrlKey || event.metaKey) return;
     event.preventDefault();
     event.stopPropagation();
     const cragFeatureLink = getOsmappLink(cragFeature);
@@ -131,8 +132,9 @@ export const ClimbingItem = ({
 
   return (
     <Container
-      onClick={handleClickItem}
+      locale={intl.lang}
       href={routeDetailUrl}
+      onClick={handleClickItem}
       onMouseEnter={mobileMode ? undefined : handleHover}
       onMouseLeave={() => setPreview(null)}
     >
@@ -161,6 +163,7 @@ export const ClimbingItem = ({
         <MenuItem
           component={Link}
           href={routeDetailUrl}
+          locale={intl.lang}
           onClick={handleShowRouteDetail}
         >
           {t('climbingpanel.show_route_detail')}

diff --git a/src/components/HomepagePanel/Homepage.tsx b/src/components/HomepagePanel/Homepage.tsx
@@ -16,7 +16,7 @@ import {
   PROJECT_ID,
   PROJECT_NAME,
 } from '../../services/project';
-import { t, Translation } from '../../services/intl';
+import { intl, t, Translation } from '../../services/intl';
 import { nl2br } from '../utils/nl2br';
 import GithubIcon from '../../assets/GithubIcon';
 import { SEARCH_BOX_HEIGHT } from '../SearchBox/consts';
@@ -44,20 +44,40 @@ const Spacer = styled.div`
 const Examples = () => (
   <>
     {t('homepage.examples.eg')}{' '}
-    <Link href="/way/34633854">Empire State Building</Link> •{' '}
-    <Link href="/way/119016167">
+    <Link href="/way/34633854" locale={intl.lang}>
+      Empire State Building
+    </Link>{' '}
+    •{' '}
+    <Link href="/way/119016167" locale={intl.lang}>
       {t('homepage.examples.charles_bridge_statues')}
     </Link>
   </>
 );
 const ExamplesClimbing = () => (
   <>
-    <Link href="/climbing-areas">{t('climbingareas.link')}</Link>,{' '}
-    {t('homepage.examples.eg')} <Link href="/relation/17262675">Hlubočepy</Link>{' '}
-    • <Link href="/relation/17130099">Roviště</Link> •{' '}
-    <Link href="/relation/17142287">Lomy nad Velkou</Link> •{' '}
-    <Link href="/relation/17400318">Lom Kobyla</Link> •{' '}
-    <Link href="/relation/17222859">Prokopák</Link>
+    <Link href="/climbing-areas" locale={intl.lang}>
+      {t('climbingareas.link')}
+    </Link>
+    , {t('homepage.examples.eg')}{' '}
+    <Link href="/relation/17262675" locale={intl.lang}>
+      Hlubočepy
+    </Link>{' '}
+    •{' '}
+    <Link href="/relation/17130099" locale={intl.lang}>
+      Roviště
+    </Link>{' '}
+    •{' '}
+    <Link href="/relation/17142287" locale={intl.lang}>
+      Lomy nad Velkou
+    </Link>{' '}
+    •{' '}
+    <Link href="/relation/17400318" locale={intl.lang}>
+      Lom Kobyla
+    </Link>{' '}
+    •{' '}
+    <Link href="/relation/17222859" locale={intl.lang}>
+      Prokopák
+    </Link>
   </>
 );