FeaturePanel: Add a secondary label to prefer the users language (#608)

Co-authored-by: Pavel Zbytovský <[email protected]>
zbycz · Oct 7, 2024 · 7886506 · 7886506
1 parent d36528f
commit 7886506
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 9 deletions.
diff --git a/src/components/FeaturePanel/FeatureHeading.tsx b/src/components/FeaturePanel/FeatureHeading.tsx
@@ -5,7 +5,7 @@ import { IconButton, useMediaQuery } from '@mui/material';
 import { useEditDialogContext } from './helpers/EditDialogContext';
 import { PoiDescription } from './helpers/PoiDescription';
 import { StarButton } from './helpers/StarButton';
-import { getLabel } from '../../helpers/featureLabel';
+import { getLabel, getSecondaryLabel } from '../../helpers/featureLabel';
 import { useFeatureContext } from '../utils/FeatureContext';
 import { t } from '../../services/intl';
 import { isMobileDevice } from '../helpers';
@@ -57,17 +57,42 @@ const HeadingContainer = styled.div`
   }
 `;
 
+const HeadingsWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+
+const Headings = () => {
+  const { feature } = useFeatureContext();
+  const label = getLabel(feature);
+  const secondaryLabel = getSecondaryLabel(feature);
+  return (
+    <HeadingsWrapper>
+      <Heading $deleted={feature?.deleted}>{label}</Heading>
+      {secondaryLabel && (
+        <SecondaryHeading $deleted={feature?.deleted}>
+          {secondaryLabel}
+        </SecondaryHeading>
+      )}
+    </HeadingsWrapper>
+  );
+};
+
 const Heading = styled.h1<{ $deleted: boolean }>`
   font-size: 36px;
   line-height: 0.98;
   margin: 0;
   ${({ $deleted }) => $deleted && 'text-decoration: line-through;'}
 `;
+const SecondaryHeading = styled.h2<{ $deleted: boolean }>`
+  font-size: 24px;
+  line-height: 0.98;
+  margin: 0;
+  ${({ $deleted }) => $deleted && 'text-decoration: line-through;'}
+`;
 
 export const FeatureHeading = React.forwardRef<HTMLDivElement>((_, ref) => {
-  const { feature } = useFeatureContext();
-  const label = getLabel(feature);
-
   // thw pwa needs space at the bottom
   const isStandalone = useMediaQuery('(display-mode: standalone)');
 
@@ -76,7 +101,7 @@ export const FeatureHeading = React.forwardRef<HTMLDivElement>((_, ref) => {
       <PoiDescription />
       <HeadingContainer>
         <NameWithEdit>
-          <Heading $deleted={feature?.deleted}>{label}</Heading>
+          <Headings />
           {/* <YellowedBadge /> */}
           <EditNameButton />
         </NameWithEdit>

diff --git a/src/components/Map/behaviour/useOnMapClicked.tsx b/src/components/Map/behaviour/useOnMapClicked.tsx
@@ -1,4 +1,5 @@
 import { createMapEventHook, isMobileDevice } from '../../helpers';
+import pickBy from 'lodash/pickBy';
 import { addFeatureCenterToCache } from '../../../services/osmApi';
 import { getOsmappLink, getShortId } from '../../../services/helpers';
 import { publishDbgObject } from '../../../utils';
@@ -19,12 +20,15 @@ export const getSkeleton = (feature, clickCoords: LonLat) => {
     ? convertMapIdToOsmId(feature)
     : { type: feature.layer.id, id: feature.id };
 
+  const nameTags = pickBy(feature.properties, (_, key) =>
+    key.startsWith('name'),
+  );
   return {
     ...feature,
     geometry: feature.geometry,
     center: getCenter(feature.geometry) || clickCoords,
     osmMeta,
-    tags: { name: feature.properties?.name },
+    tags: nameTags,
     skeleton: true,
     nonOsmObject: !isOsmObject,
   };

diff --git a/src/components/SearchBox/AutocompleteInput.tsx b/src/components/SearchBox/AutocompleteInput.tsx
@@ -15,7 +15,17 @@ import { useGetOptions } from './useGetOptions';
 import { useInputValueState } from './options/geocoder';
 import { useRouter } from 'next/router';
 
-const SearchBoxInput = ({ params, setInputValue, autocompleteRef }) => {
+type SearchBoxInputProps = {
+  params: any;
+  setInputValue: (value: string) => void;
+  autocompleteRef: React.MutableRefObject<undefined>;
+};
+
+const SearchBoxInput = ({
+  params,
+  setInputValue,
+  autocompleteRef,
+}: SearchBoxInputProps) => {
   const inputRef = React.useRef<HTMLInputElement>(null);
 
   useKeyDown('/', (e) => {

diff --git a/src/helpers/featureLabel.ts b/src/helpers/featureLabel.ts
@@ -1,6 +1,6 @@
 import { Feature } from '../services/types';
 import { roundedToDeg } from '../utils';
-import { t } from '../services/intl';
+import { intl, t } from '../services/intl';
 import { buildAddress } from '../services/helpers';
 
 const getBuiltAddress = (feature: Feature) => {
@@ -16,7 +16,7 @@ export const getSubclass = ({ layer, osmMeta, properties, schema }: Feature) =>
 const getRefLabel = (feature: Feature) =>
   feature.tags.ref ? `${getSubclass(feature)} ${feature.tags.ref}` : '';
 
-const getName = ({ tags }: Feature) => tags.name; // TODO choose a name according to locale
+const getName = ({ tags }: Feature) => tags[`name:${intl.lang}`] || tags.name;
 
 export const hasName = (feature: Feature) =>
   feature.point || getName(feature) || getBuiltAddress(feature); // we dont want to show "No name" for point
@@ -38,6 +38,16 @@ export const getLabel = (feature: Feature) => {
   );
 };
 
+export const getSecondaryLabel = (feature: Feature) => {
+  const { point, tags } = feature;
+  if (point) {
+    return undefined;
+  }
+
+  const { name } = tags;
+  return name === getLabel(feature) ? undefined : name;
+};
+
 export const getParentLabel = (feature: Feature) => {
   const firstParentWithName = feature.parentFeatures?.find(hasName);
   const parent = firstParentWithName ?? feature.parentFeatures?.[0];