Get translated location (superdesk#2065)

* Get translated location * Type improvements
thecalcc · Aug 22, 2024 · 9a0e1f2 · 9a0e1f2
1 parent a2698bd
commit 9a0e1f2
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 60 deletions.
diff --git a/client/components/GeoLookupInput/AddGeoLookupInput.tsx b/client/components/GeoLookupInput/AddGeoLookupInput.tsx
@@ -297,6 +297,7 @@ export class AddGeoLookupInput extends React.Component<IProps, IState> {
 
                 {this.state.openSuggestsPopUp && (
                     <AddGeoLookupResultsPopUp
+                        languageCode={this.props.language}
                         localSuggests={this.state.localSearchResults}
                         suggests={this.state.searchResults}
                         onCancel={this.closeSuggestsPopUp}

diff --git a/client/components/GeoLookupInput/AddGeoLookupResultsPopUp.tsx b/client/components/GeoLookupInput/AddGeoLookupResultsPopUp.tsx
@@ -27,6 +27,7 @@ interface IProps {
     onAddNewLocation(): void;
     onPopupOpen?(): void;
     onPopupClose?(): void;
+    languageCode?: string;
 }
 
 enum TAB_INDEX {
@@ -194,6 +195,7 @@ export class AddGeoLookupResultsPopUp extends React.Component<IProps, IState> {
                                     <LocationLookupResultItem
                                         key={index}
                                         location={suggest}
+                                        languageCode={this.props.languageCode}
                                         onClick={this.props.onChange.bind(null, suggest)}
                                         active={index === this.state.activeOptionIndex}
                                     />

diff --git a/client/components/GeoLookupInput/LocationLookupResultItem.tsx b/client/components/GeoLookupInput/LocationLookupResultItem.tsx
@@ -9,6 +9,7 @@ interface IProps {
     onClick?(): void;
     active?: boolean;
     location: Partial<ILocation>;
+    languageCode?: string;
 }
 
 export class LocationLookupResultItem extends React.PureComponent<IProps> {
@@ -23,7 +24,7 @@ export class LocationLookupResultItem extends React.PureComponent<IProps> {
                 )}
             >
                 <span className="sd-overflow-ellipsis">
-                    {getLocationsShortName(this.props.location)}
+                    {getLocationsShortName(this.props.location, this.props.languageCode)}
                 </span>
             </li>
         );

diff --git a/client/components/GeoLookupInput/index.tsx b/client/components/GeoLookupInput/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {AddGeoLookupInput, GeoLookupInputComponent} from './AddGeoLookupInput';
+import {AddGeoLookupInput} from './AddGeoLookupInput';
 
 import {LineInput, Label} from '../UI/Form';
 import {ILocation} from '../../interfaces';
@@ -17,14 +17,14 @@ interface IProps {
     readOnly?: boolean;
     boxed?: boolean;
     noMargin?: boolean;
-    refNode?: React.RefObject<GeoLookupInputComponent>;
+    refNode?: React.RefObject<any>;
     language?: string;
     onChange(field: string, value?: Partial<ILocation>): void;
     onFocus?(): void;
     popupContainer?(): HTMLElement;
     onPopupOpen?(): void;
     onPopupClose?(): void;
-    showAddLocationForm(props: any): void;
+    showAddLocationForm?(props: any): Promise<ILocation | undefined>;
 }
 
 export class GeoLookupInput extends React.PureComponent<IProps> {

diff --git a/client/components/UI/Form/LineInput.tsx b/client/components/UI/Form/LineInput.tsx
@@ -2,13 +2,32 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+interface IProps {
+    required?: boolean;
+    invalid?: boolean;
+    readOnly?: boolean;
+    boxed?: boolean;
+    isSelect?: boolean;
+    noMargin?: boolean;
+    noLabel?: boolean;
+    withButton?: boolean;
+    labelLeft?: boolean;
+    labelLeftAuto?: boolean;
+    hint?: string;
+    message?: string;
+    borderBottom?: boolean;
+    onClick?: (e: any) => void;
+    halfWidth?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+}
+
 /**
  * @ngdoc react
  * @name LineInput
  * @description Component to style input component in a line-input style
  */
 export const LineInput = ({
-    children,
     required,
     invalid,
     readOnly,
@@ -19,13 +38,14 @@ export const LineInput = ({
     withButton,
     labelLeft,
     labelLeftAuto,
+    borderBottom = true,
+    halfWidth,
+    children,
     hint,
     message,
     className,
-    borderBottom,
     onClick,
-    halfWidth,
-}) => (
+}: IProps): JSX.Element => (
     <div
         className={classNames(
             'sd-line-input',
@@ -52,44 +72,3 @@ export const LineInput = ({
         {message && <div className="sd-line-input__message">{message}</div>}
     </div>
 );
-
-export const LineInputProps = {
-    required: PropTypes.bool,
-    invalid: PropTypes.bool,
-    readOnly: PropTypes.bool,
-    boxed: PropTypes.bool,
-    isSelect: PropTypes.bool,
-    noMargin: PropTypes.bool,
-    noLabel: PropTypes.bool,
-    withButton: PropTypes.bool,
-    labelLeft: PropTypes.bool,
-    labelLeftAuto: PropTypes.bool,
-    hint: PropTypes.string,
-    message: PropTypes.string,
-    borderBottom: PropTypes.bool,
-    onClick: PropTypes.func,
-    halfWidth: PropTypes.bool,
-};
-
-export const LineInputDefaultProps = {
-    required: false,
-    invalid: false,
-    readOnly: false,
-    boxed: false,
-    isSelect: false,
-    noMargin: false,
-    noLabel: false,
-    withButton: false,
-    labelLeft: false,
-    labelLeftAuto: false,
-    borderBottom: true,
-    halfWidth: false,
-};
-
-LineInput.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    ...LineInputProps,
-};
-
-LineInput.defaultProps = {...LineInputDefaultProps};
diff --git a/client/components/UI/Popup/Content.tsx b/client/components/UI/Popup/Content.tsx
@@ -2,12 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+interface IProps {
+    children?: React.ReactNode;
+    className?: string;
+    noPadding?: boolean;
+}
 /**
  * @ngdoc react
  * @name Content
  * @description Component to hold contents of a popup
  */
-const Content = ({children, className, noPadding}) => (
+const Content = ({children, className, noPadding}: IProps) => (
     <div
         className={classNames(
             'popup__menu-content',
@@ -19,12 +24,4 @@ const Content = ({children, className, noPadding}) => (
     </div>
 );
 
-Content.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    noPadding: PropTypes.bool,
-};
-
-Content.defaultProps = {noPadding: false};
-
 export default Content;
diff --git a/client/utils/locations.ts b/client/utils/locations.ts
@@ -137,9 +137,9 @@ export function formatLocationToAddress(item: Partial<ILocation> | IEventLocatio
         formattedAddress;
 }
 
-export function getLocationsShortName(location: Partial<ILocation>) {
+export function getLocationsShortName(location: Partial<ILocation>, languageCode?: string) {
     const formattedAddress = formatLocationToAddress(location);
-    const title = location.address?.title ?? location.name;
+    const title = location.translations?.name?.[`name:${languageCode}`] ?? location.address?.title ?? location.name;
 
     return title ?
         `${title}, ${formattedAddress}` :