fix: use i18n.translateDynamic for tranlsating dynamic i18n keys in Hilla views (#10)

* fix: use i18n.translateDynamic for tranlsating dynamic i18n keys in Hilla views

* chore: update package[-lock].json

Author: platosha

package-lock.json

@@ -3,7 +3,7 @@ import {Button} from "@vaadin/react-components/Button";
 import {ValidationError} from "@vaadin/hilla-lit-form";
 import {EndpointError} from "@vaadin/hilla-frontend";
 import {KeyboardEvent, useEffect, useRef} from "react";
-import {key, translate} from "@vaadin/hilla-react-i18n";
+import {i18n, key, translate} from "@vaadin/hilla-react-i18n";
 
 export function handleKeyDown(event: KeyboardEvent, submit: any) {
     if (event.key === 'Enter') {
@@ -51,7 +51,7 @@ export default function ValidationErrors({errors}: ValidationErrorsProps) {
                                                 if (inputElement && (inputElement instanceof HTMLElement)) {
                                                     inputElement.focus();
                                                 }
-                                            }}>{valueError.validatorMessage ? translate(key`valueError.validatorMessage`) : translate(key`valueError.message`)}
+                                            }}>{valueError.validatorMessage ? i18n.translateDynamic(valueError.validatorMessage) : i18n.translateDynamic(valueError.message)}
                                     </Button>
                                 </li>
                             ))}

src/main/frontend/ValidationErrors.tsx

@@ -1,7 +1,7 @@
 import { ViewConfig } from '@vaadin/hilla-file-router/types.js';
 import { useSignal } from '@vaadin/hilla-react-signals';
 import {VerticalLayout} from "@vaadin/react-components";
-import {translate} from "@vaadin/hilla-react-i18n";
+import {key, translate} from "@vaadin/hilla-react-i18n";
 
 export const config: ViewConfig = {
   menu: { order: 0, icon: 'vaadin:home' },
@@ -15,7 +15,7 @@ export default function HomeView() {
       <>
           <VerticalLayout theme="padding spacing"
                           className="w-full items-center justify-center">
-              <h2>{'welcome'}</h2>
+              <h2>{translate(key`welcome`)}</h2>
               <img src="./images/pets.png" alt="Pets" />
           </VerticalLayout>
       </>

src/main/frontend/views/@index.tsx

@@ -12,7 +12,7 @@ import { Suspense, useEffect } from 'react';
 import { Outlet, useLocation, useNavigate } from 'react-router';
 import {HorizontalLayout} from "@vaadin/react-components/HorizontalLayout.js";
 import '@vaadin/icons';
-import {key, translate} from "@vaadin/hilla-react-i18n";
+import {key, translate, i18n} from "@vaadin/hilla-react-i18n";
 
 import { ErrorBoundary } from "react-error-boundary";
 
@@ -32,7 +32,7 @@ function Fallback({ error, resetErrorBoundary }) {
 }
 
 export default function MainLayout() {
-  const currentTitle = (useViewConfig()?.title) ? (translate(key`useViewConfig()?.title!`)+ " - Spring PetClinic"):  defaultTitle;
+  const currentTitle = (useViewConfig()?.title) ? (i18n.translateDynamic(useViewConfig()?.title) + " — Spring PetClinic"):  defaultTitle;
   const navigate = useNavigate();
   const location = useLocation();
 
@@ -51,7 +51,7 @@ export default function MainLayout() {
                           <SideNavItem path={to} key={to}>
                               {icon ?
                                   <Icon icon={icon} slot="prefix"></Icon> : <></>}
-                              {translate(key`title!`)}
+                              {i18n.translateDynamic(title)}
                           </SideNavItem>
                       ))}
                   </SideNav>