Update digitransit-autosuggest, typescript, i18next, react-i18next and fixed typing

hjvuor · hjvuor · commit 6fd8ecc23ef3 · 2025-10-22T15:52:15.000+03:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.5.5",
-    "@digitransit-component/digitransit-component-autosuggest": "2.0.8",
+    "@digitransit-component/digitransit-component-autosuggest": "6.0.0",
     "@habx/apollo-multi-endpoint-link": "^2.5.0",
     "@hsl-fi/modal": "^0.3.2",
     "@hsl-fi/site-header": "4.5.0",
@@ -27,22 +27,24 @@
     "graphql": "^16.8.1",
     "graphql-tag": "^2.12.6",
     "http-proxy-middleware": "^2.0.7",
-    "i18next": "^19.9.2",
+    "i18next": "^22.5.1",
     "leaflet": "^1.9.3",
     "lodash": "4.17.21",
     "lodash-es": "4.17.21",
-    "luxon": "^1.28.1",
+    "luxon": "^3.6.1",
     "mqtt": "^4.3.7",
     "node-fetch": "^3.3.2",
+    "nth-check": "^2.1.1",
     "object-hash": "^2.2.0",
     "patch-package": "^6.5.0",
     "pbf": "^3.2.1",
     "react": "^16.14.0",
+    "react-animate-height": "^3.2.3",
     "react-autosuggest": "^10.0.0",
     "react-burger-menu": "^3.0.6",
     "react-dom": "^16.14.0",
     "react-helmet": "^6.1.0",
-    "react-i18next": "^11.17.0",
+    "react-i18next": "^12.3.1",
     "react-modal": "^3.11.2",
     "react-promise": "^2.1.0",
     "react-router-dom": "^5.2.0",
@@ -52,9 +54,7 @@
     "sass": "^1.49.9",
     "suncalc": "1.8.0",
     "url": "^0.11.0",
-    "uuid": "^8.3.2",
-    "nth-check": "^2.1.1",
-    "react-animate-height": "^3.2.3"
+    "uuid": "^8.3.2"
   },
   "scripts": {
     "start-prod": "cd server && npm start",
@@ -71,8 +71,6 @@
     "lint-scss-test": "stylelint src/**/*.{scss,sass} --quiet"
   },
   "devDependencies": {
-    "prettier": "^2.3.0",
-    "husky": "^7.0.0",
     "@babel/core": "^7.21.3",
     "@graphql-codegen/cli": "^5.0.2",
     "@graphql-codegen/typed-document-node": "^2.3.3",
@@ -96,10 +94,12 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-sonarjs": "^0.14.0",
+    "husky": "^7.0.0",
     "npm-run-all": "^4.1.5",
+    "prettier": "^2.3.0",
     "stylelint": "^16.0.2",
     "stylelint-config-standard-scss": "12.0.0",
-    "typescript": "^3.9.9"
+    "typescript": "^4.9.5"
   },
   "jest": {
     "moduleNameMapper": {
diff --git a/src/i18n.ts b/src/i18n.ts
diff --git a/src/ui/BurgerMenu.tsx b/src/ui/BurgerMenu.tsx
@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import Icon from './Icon';
 import Modal from 'react-modal';
 import { ConfigContext, UserContext } from '../contexts';
+import { SupportedLanguage } from '../i18n';
 
 if (process.env.NODE_ENV !== 'test') Modal.setAppElement('#root');
 interface Props {
@@ -23,7 +24,7 @@ const BurgerMenu: FC<Props> = ({ createStatic, isOpen, onClose }) => {
     }
   };
 
-  const languageCodes = ['fi', 'sv', 'en'];
+  const languageCodes: Array<SupportedLanguage> = ['fi', 'sv', 'en'];
 
   const languageElements = () => {
     const retValue = [];
diff --git a/src/ui/CreateViewPage.tsx b/src/ui/CreateViewPage.tsx
@@ -11,6 +11,7 @@ import { getParams } from '../util/queryUtils';
 import Modal from '@hsl-fi/modal';
 import { useTranslation } from 'react-i18next';
 import { IMonitor } from '../util/Interfaces';
+import { SupportedLanguage } from '../i18n';
 
 interface Location {
   pathname: string;
@@ -28,7 +29,7 @@ const CreateViewPage = () => {
   const [stopCardList, setStopCardList] = useState(
     location?.state?.view ? location.state.view.cards : null,
   );
-  const [languages, setLanguages] = useState(['fi']);
+  const [languages, setLanguages] = useState<SupportedLanguage[]>(['fi']);
   const [staticMonitorProperties, setStaticMonitorProperties] = useState(null);
   const [loading, setLoading] = useState(true);
   const [noMonitorFound, setNoMonitorFound] = useState(false);
diff --git a/src/ui/DisplaySettings.tsx b/src/ui/DisplaySettings.tsx
@@ -5,6 +5,7 @@ import cx from 'classnames';
 import Checkbox from './CheckBox';
 import { ConfigContext } from '../contexts';
 import Toggle from './Toggle';
+import { SupportedLanguage } from '../i18n';
 
 interface IProps {
   languages: Array<string>;
@@ -27,7 +28,7 @@ const DisplaySettings: FC<IProps> = ({
 }) => {
   const config = useContext(ConfigContext);
   const [t] = useTranslation();
-  const options = ['fi', 'sv', 'en'];
+  const options: Array<SupportedLanguage> = ['fi', 'sv', 'en'];
   const isChecked = (option: string) => {
     return languages.includes(option);
   };
diff --git a/src/ui/Dropdown.tsx b/src/ui/Dropdown.tsx
@@ -68,7 +68,7 @@ const Dropdown: FC<IProps> = ({
       inputId={uuid()}
       name={name}
       options={options}
-      placeholder={placeholder ? placeholder : t('dropdownPlaceHolder')}
+      placeholder={placeholder ? placeholder : '--'}
       tabIndex="0"
       onChange={handleChange}
     />
diff --git a/src/ui/InputWithEditIcon.tsx b/src/ui/InputWithEditIcon.tsx
@@ -36,7 +36,7 @@ const InputWithEditIcon: FC<IProps> = ({
       />
       {!focus && (
         <button
-          aria-label={ariaLabelEdit || t('edit')}
+          aria-label={ariaLabelEdit || 'edit'}
           onClick={() => focusToInput(id)}
         >
           <Icon img="edit" color={config.colors.primary} />
diff --git a/src/ui/LargeModal.tsx b/src/ui/LargeModal.tsx
@@ -6,7 +6,7 @@ import { ConfigContext } from '../contexts';
 
 interface IProps {
   onRequestClose: () => void;
-  header: string;
+  header: 'import-monitor' | 'layoutModalHeader';
   isOpen?: boolean;
   portalClassName?: string;
   ariaHideApp?: boolean;
diff --git a/src/ui/LayoutAndTimeContainer.tsx b/src/ui/LayoutAndTimeContainer.tsx
@@ -94,7 +94,7 @@ const LayoutAndTimeContainer: FC<IProps> = ({
       </div>
       <LayoutModal
         allowInformationDisplay={allowInformationDisplay}
-        orientation={orientation}
+        orientation={orientation as 'vertical' | 'horizontal'}
         option={layout}
         open={open}
         onClose={() => setOpen(false)}
diff --git a/src/ui/LayoutModal.tsx b/src/ui/LayoutModal.tsx
@@ -47,7 +47,7 @@ const LayoutModal: FC<Props> = ({
     }
   }, [option, open]);
 
-  const layouts =
+  const layouts: typeof horizontalLayouts | typeof verticalLayouts =
     orientation === 'horizontal' ? horizontalLayouts : verticalLayouts;
   return (
     <LargeModal
@@ -90,9 +90,9 @@ const LayoutModal: FC<Props> = ({
                         id={`layoutBtn-${option.value}`}
                         key={`button_${option.value}`}
                         role="button"
-                        aria-label={`${t(orientation)} ${t(l.label)} ${
-                          option.rows
-                        } ${t('rows')}`}
+                        aria-label={`${t(
+                          orientation as 'horizontal' | 'vertical',
+                        )} ${t(l.label)} ${option.rows} ${t('rows')}`}
                       >
                         {option.label}
                       </button>
diff --git a/src/ui/Layouts.tsx b/src/ui/Layouts.tsx
@@ -152,7 +152,7 @@ export const horizontalLayouts = [
       },
     ],
   },
-];
+] as const;
 
 export const verticalLayouts = [
   {
@@ -243,4 +243,4 @@ export const verticalLayouts = [
       },
     ],
   },
-];
+] as const;
diff --git a/src/ui/MapCardRow.tsx b/src/ui/MapCardRow.tsx
@@ -8,6 +8,7 @@ import { ICardInfo, IMapSettings } from '../util/Interfaces';
 import Icon from './Icon';
 import Toggle from './Toggle';
 import LayoutAndTimeContainer from './LayoutAndTimeContainer';
+import { SupportedLanguage } from '../i18n';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface IProps {
@@ -21,7 +22,7 @@ interface IProps {
     value: string,
     lang?: string,
   ) => void;
-  languages: Array<string>;
+  languages: Array<SupportedLanguage>;
   mapSettings: IMapSettings;
   updateMapSettings: (settings: IMapSettings) => void;
   openModal: () => void;
@@ -213,7 +214,7 @@ const mapCardRow: FunctionComponent<IProps> = ({
               {t('edit-map')}
             </span>
             <LayoutAndTimeContainer
-              orientation={orientation}
+              orientation={orientation as 'horizontal' | 'vertical'}
               cardInfo={richItem}
               updateCardInfo={updateCardInfo}
               updateLayout={null}
diff --git a/src/ui/MonitorOverlay.tsx b/src/ui/MonitorOverlay.tsx
@@ -8,7 +8,7 @@ import Loading from './Loading';
 
 interface IProps {
   show: boolean;
-  buttonTranslationKey?: string;
+  buttonTranslationKey?: 'quickDisplayCreate';
   createNew?: boolean;
 }
 const MonitorOverlay: FC<IProps> = ({
diff --git a/src/ui/MonitorRow.tsx b/src/ui/MonitorRow.tsx
@@ -193,12 +193,12 @@ const MonitorRow: FC<IProps> = ({
         )
       : '';
   }
-  if (departure.pickupType === 'NONE') {
+  /* if (departure.pickupType === 'NONE') {
     const lastStop = departure.trip?.stops?.slice(-1).pop().gtfsId;
     if (departure.stop.gtfsId === lastStop) {
       destination = `${t('endStopArrive')}/${t('endStopTerminus')}`;
     }
-  }
+  } */
 
   const line = processLine(departure.trip?.route.shortName);
   if (destination?.indexOf(' via') !== -1) {
diff --git a/src/ui/StopCardListContainer.tsx b/src/ui/StopCardListContainer.tsx
@@ -28,10 +28,11 @@ import { getConfig } from '../util/getConfig';
 import { useMergeState } from '../util/utilityHooks';
 import MapCardRow from './MapCardRow';
 import MapModal from './MapModal';
+import { SupportedLanguage } from '../i18n';
 
 interface IProps {
   stopCards: any;
-  languages: Array<string>;
+  languages: Array<SupportedLanguage>;
   loading?: boolean;
   vertical?: boolean;
   staticMonitor?: any;
@@ -322,7 +323,7 @@ const StopCardListContainer: FC<IProps> = ({
     }
   };
 
-  const handleLanguageChange = (language: string) => {
+  const handleLanguageChange = language => {
     if (!languages.includes(language)) {
       setLanguages(languages.concat(language));
     } else {
@@ -403,7 +404,9 @@ const StopCardListContainer: FC<IProps> = ({
     }
     const newCard: IMonitor = {
       cards: cards,
-      languages: languageArray.filter(lan => languages.includes(lan)),
+      languages: languageArray.filter(lan =>
+        languages.includes(lan as 'fi' | 'sv' | 'en'),
+      ),
       contenthash: '',
       mapSettings: mapProps,
     };
diff --git a/src/ui/StopCardListDataContainer.tsx b/src/ui/StopCardListDataContainer.tsx
@@ -5,12 +5,13 @@ import StopCardListContainer from './StopCardListContainer';
 import { sortBy } from 'lodash';
 import { stringifyPattern } from '../util/monitorUtils';
 import { IMapSettings } from '../util/Interfaces';
+import { SupportedLanguage } from '../i18n';
 
 interface IProps {
   stopCardList: any;
   stopIds: Array<string>;
   stationIds: Array<string>;
-  languages: Array<string>;
+  languages: Array<SupportedLanguage>;
   loading: boolean;
   staticMonitor?: any;
   mapSettings?: IMapSettings;
diff --git a/src/ui/StopCardRow.tsx b/src/ui/StopCardRow.tsx
@@ -24,6 +24,7 @@ import cx from 'classnames';
 import { isKeyboardSelectionEvent } from '../util/browser';
 import { ConfigContext, FavouritesContext } from '../contexts';
 import { IResult, PropertiesLayer } from '../types';
+import { SupportedLanguage } from '../i18n';
 
 const getGTFSId = (id: string): string | undefined => {
   if (id && typeof id.indexOf === 'function' && id.indexOf('GTFS:') === 0) {
@@ -83,7 +84,7 @@ const StopCardRow: FC<IProps> = ({
   const config = useContext(ConfigContext);
   const favourites = useContext(FavouritesContext);
   const [t] = useTranslation();
-  const lang: string = t('languageCode');
+  const lang = t('languageCode');
   const [timeOfStopSelection, setTimeOfStopSelection] = useState<number | null>(
     null,
   );
@@ -287,7 +288,7 @@ const StopCardRow: FC<IProps> = ({
                       key={`lan-${lan}`}
                       card={item}
                       updateCardInfo={updateCardInfo}
-                      lang={lan}
+                      lang={lan as SupportedLanguage}
                     />
                   )
                 );
@@ -422,7 +423,7 @@ const StopCardRow: FC<IProps> = ({
               searchContext={searchContext}
               icon="search"
               id={'search'}
-              placeholder={'autosuggestPlaceHolder'}
+              placeholder={t('autosuggestPlaceHolder')}
               value=""
               onSelect={onSelect}
               filterResults={filterSearchResults}
@@ -437,7 +438,7 @@ const StopCardRow: FC<IProps> = ({
             />
           </div>
           <LayoutAndTimeContainer
-            orientation={orientation}
+            orientation={orientation as 'horizontal' | 'vertical'}
             cardInfo={item}
             updateCardInfo={updateCardInfo}
             updateLayout={updateLayout}
diff --git a/src/ui/StopListTitleInput.tsx b/src/ui/StopListTitleInput.tsx
@@ -11,7 +11,7 @@ interface IProps {
     lang?: string,
   ) => void;
   cardInfoId: number;
-  side: string;
+  side: 'left' | 'right';
   value: ITitle;
 }
 const StopListTitleInput: FC<IProps> = ({
diff --git a/src/ui/StopRoutesModal.tsx b/src/ui/StopRoutesModal.tsx
@@ -211,7 +211,7 @@ const StopRoutesModal: FC<Props> = props => {
     'showStopNumber',
     'showEndOfLine',
     'showVia',
-  ];
+  ] as const;
 
   return (
     <Modal
diff --git a/src/ui/StopViewTitleEditor.tsx b/src/ui/StopViewTitleEditor.tsx
@@ -8,6 +8,7 @@ import { isKeyboardSelectionEvent } from '../util/browser';
 import { ConfigContext } from '../contexts';
 
 import InputWithEditIcon from './InputWithEditIcon';
+import { SupportedLanguage } from '../i18n';
 
 interface IProps {
   card: ICardInfo;
@@ -17,7 +18,7 @@ interface IProps {
     value: string,
     lang?: string,
   ) => void;
-  lang: string;
+  lang: SupportedLanguage;
   isMap?: boolean;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@ const InputWithEditIcon: FC<IProps> = ({`
`36`	`36`	`/>`
`37`	`37`	`{!focus && (`
`38`	`38`	`<button`
`39`		`- aria-label={ariaLabelEdit \|\| t('edit')}`
	`39`	`+ aria-label={ariaLabelEdit \|\| 'edit'}`
`40`	`40`	`onClick={() => focusToInput(id)}`
`41`	`41`	`>`
`42`	`42`	`<Icon img="edit" color={config.colors.primary} />`