Feat/local links

src/app/[locale]/error.tsx

@@ -7,6 +7,7 @@ import { useCallback } from 'react'
 import { ErrorContent } from 'src/components/error-content'
 import { useTranslationClient } from 'src/helpers/hooks/useTranslationClient'
 import { ComponentErrorParams } from 'src/types/component'
+import { I18nLocale } from 'src/types/i18n'
 
 
 type HomeErrorProps = ComponentErrorParams
@@ -17,7 +18,7 @@ export const metadata: Metadata = {
 
 export default function HomeError({ reset }: HomeErrorProps) {
   const params = useParams()
-  const locale = params.locale as string
+  const locale = params.locale as I18nLocale
 
   const { t } = useTranslationClient({ locale, namespace: 'common' })
   const tPage = t('menu.home')

src/app/[locale]/layout.tsx

@@ -13,6 +13,7 @@ import { DialogProvider } from 'src/helpers/providers/dialog'
 import { getTranslationServer } from 'src/helpers/utils/getTranslationServer'
 import { isEnvironmentProduction } from 'src/helpers/utils/isEnvironment'
 import type { ComponentParams } from 'src/types/component'
+import { I18nLocale } from 'src/types/i18n'
 
 
 type HomeLayoutProps = {
@@ -32,7 +33,7 @@ export async function generateMetadata({ params: { locale } }: HomeLayoutProps):
       description: t('description'),
       url: META_SITE_BASE_URL,
       siteName: meta.siteName,
-      locale: locales_codes[locale],
+      locale: locales_codes[locale as I18nLocale],
       type: 'website',
     }
   }

src/app/[locale]/places/[placeId]/error.tsx

@@ -7,6 +7,7 @@ import { useCallback } from 'react'
 import { ErrorContent } from 'src/components/error-content'
 import { useTranslationClient } from 'src/helpers/hooks/useTranslationClient'
 import { ComponentErrorParams } from 'src/types/component'
+import { I18nLocale } from 'src/types/i18n'
 
 
 type PlaceErrorProps = ComponentErrorParams
@@ -17,7 +18,7 @@ export const metadata: Metadata = {
 
 export default function PlaceError({ reset }: PlaceErrorProps) {
   const params = useParams()
-  const locale = params.locale as string
+  const locale = params.locale as I18nLocale
 
   const { t } = useTranslationClient({ locale, namespace: 'common' })
   const tPage = t('menu.place')

src/app/[locale]/places/[placeId]/page.tsx

@@ -12,6 +12,7 @@ import { meta, META_SITE_BASE_URL } from 'src/helpers/config/meta'
 import { getTranslationServer } from 'src/helpers/utils/getTranslationServer'
 import { isImageSecure } from 'src/helpers/utils/isImageSecure'
 import type { ComponentParams } from 'src/types/component'
+import { I18nLocale } from 'src/types/i18n'
 
 
 type PlacePageProps = {
@@ -22,9 +23,11 @@ type PlacePageProps = {
 
 type PlaceMeta = FetchedMetadata | null
 
-export async function generateMetadata({ params }: PlacePageProps): Promise<Metadata | void> {
-  const { t } = await getTranslationServer({ locale: params.locale, namespace: 'common' })
-  const place = await getPlace(params.placeId)
+export async function generateMetadata(
+  { params: { placeId, locale } }: PlacePageProps
+): Promise<Metadata | void> {
+  const { t } = await getTranslationServer({ locale, namespace: 'common' })
+  const place = await getPlace(placeId)
   if (place === null) {
     return
   }
@@ -34,18 +37,20 @@ export async function generateMetadata({ params }: PlacePageProps): Promise<Meta
     openGraph: {
       title: `${meta.siteName} - ${t('menu.places')}`,
       description: t('description'),
-      url: `${META_SITE_BASE_URL}${params.locale}/places/${place.id}`,
+      url: `${META_SITE_BASE_URL}${locale}/places/${place.id}`,
       siteName: meta.siteName,
-      locale: locales_codes[params.locale],
+      locale: locales_codes[locale as I18nLocale],
       type: 'website',
     }
   }
 }
 
-export default async function PlacePage({ params }: PlacePageProps) {
-  const { t } = await getTranslationServer({ locale: params.locale, namespace: 'places' })
+export default async function PlacePage(
+  { params: { placeId, locale } }: PlacePageProps
+) {
+  const { t } = await getTranslationServer({ locale, namespace: 'places' })
 
-  const place = await getPlace(params.placeId)
+  const place = await getPlace(placeId)
   if (place === null) {
     notFound()
   }

src/app/[locale]/places/error.tsx

@@ -7,6 +7,7 @@ import { useCallback } from 'react'
 import { ErrorContent } from 'src/components/error-content'
 import { useTranslationClient } from 'src/helpers/hooks/useTranslationClient'
 import { ComponentErrorParams } from 'src/types/component'
+import { I18nLocale } from 'src/types/i18n'
 
 
 type PlacesErrorProps = ComponentErrorParams
@@ -17,7 +18,7 @@ export const metadata: Metadata = {
 
 export default function PlacesError({ reset }: PlacesErrorProps) {
   const params = useParams()
-  const locale = params.locale as string
+  const locale = params.locale as I18nLocale
 
   const { t } = useTranslationClient({ locale, namespace: 'common' })
   const tPage = t('menu.places')

src/app/[locale]/places/layout.tsx

@@ -5,6 +5,7 @@ import { locales_codes } from 'src/helpers/config/i18n'
 import { meta, META_SITE_BASE_URL } from 'src/helpers/config/meta'
 import { getTranslationServer } from 'src/helpers/utils/getTranslationServer'
 import type { ComponentParams } from 'src/types/component'
+import { I18nLocale } from 'src/types/i18n'
 
 
 type PlacesLayoutProps = {
@@ -24,7 +25,7 @@ export async function generateMetadata(
       description: t('description'),
       url: `${META_SITE_BASE_URL}${locale}/places`,
       siteName: meta.siteName,
-      locale: locales_codes[locale],
+      locale: locales_codes[locale as I18nLocale],
       type: 'website',
     }
   }

src/components/error-content/error-content.tsx

@@ -6,6 +6,7 @@ import type { FC } from 'react'
 
 import { useTranslationClient } from 'src/helpers/hooks/useTranslationClient'
 import { ComponentErrorParams } from 'src/types/component'
+import { I18nLocale } from 'src/types/i18n'
 
 
 type ErrorContentProps = {
@@ -15,7 +16,7 @@ type ErrorContentProps = {
 
 export const ErrorContent: FC<ErrorContentProps> = memo(({ page, onReset }) => {
   const params = useParams()
-  const locale = params.locale as string
+  const locale = params.locale as I18nLocale
 
   const { t } = useTranslationClient({ locale, namespace: 'common' })
 

src/components/header/header.tsx

@@ -9,11 +9,12 @@ import styles from './header.module.css'
 
 import { Menu } from 'src/components/menu'
 import { useTranslationClient } from 'src/helpers/hooks/useTranslationClient'
+import { I18nLocale } from 'src/types/i18n'
 
 
 export const Header: FC = () => {
   const params = useParams()
-  const locale = params.locale as string
+  const locale = params.locale as I18nLocale
   const { t } = useTranslationClient({ locale, namespace: 'common' })
 
   return (

src/components/hero-image/hero-image.tsx

@@ -7,11 +7,12 @@ import type { FC } from 'react'
 import styles from './hero-image.module.css'
 
 import { useTranslationClient } from 'src/helpers/hooks/useTranslationClient'
+import { I18nLocale } from 'src/types/i18n'
 
 
 export const HeroImage: FC = () => {
   const params = useParams()
-  const locale = params.locale as string
+  const locale = params.locale as I18nLocale
   const { t } = useTranslationClient({ locale, namespace: 'home' })
 
   return (

src/components/loading/loading.tsx

@@ -5,6 +5,7 @@ import { memo } from 'react'
 import type { FC } from 'react'
 
 import { useTranslationClient } from 'src/helpers/hooks/useTranslationClient'
+import { I18nLocale } from 'src/types/i18n'
 
 
 type LoadingProps = {
@@ -13,7 +14,7 @@ type LoadingProps = {
 
 export const Loading: FC<LoadingProps> = memo(({ text }) => {
   const params = useParams()
-  const locale = params.locale as string
+  const locale = params.locale as I18nLocale
   const { t } = useTranslationClient({ locale, namespace: 'common' })
 
   return <>{`${t('loading')} "${text}" ...`}</>

src/components/menu/menu.tsx

@@ -8,12 +8,17 @@ import type { FC } from 'react'
 import styles from './menu.module.css'
 
 import { locales } from 'src/helpers/config/i18n'
+import { useLocalesCurrentUrl } from 'src/helpers/hooks/useLocalesCurrentUrl'
 import { useTranslationClient } from 'src/helpers/hooks/useTranslationClient'
+import { I18nLocale } from 'src/types/i18n'
 
 
 export const Menu: FC = memo(() => {
   const params = useParams()
-  const locale = params.locale as string
+  const locale = params.locale as I18nLocale
+
+  const { urls } = useLocalesCurrentUrl({ currentLocale: locale })
+
   const { t } = useTranslationClient({ locale, namespace: 'common' })
 
   return (
@@ -38,7 +43,7 @@ export const Menu: FC = memo(() => {
         {locales.map((loc) => {
           return (
             <li role="none" key={loc}>
-              <Link href={`/${loc}`} lang={loc} role="menuitem" aria-label="language">
+              <Link href={urls[loc]} lang={loc} role="menuitem" aria-label="language">
                 {loc}
               </Link>
             </li>

src/components/not-found-content/not-found-content-client.tsx

@@ -3,11 +3,12 @@
 import { useParams } from 'next/navigation'
 
 import { useTranslationClient } from 'src/helpers/hooks/useTranslationClient'
+import { I18nLocale } from 'src/types/i18n'
 
 
 export const NotFoundContentClient = () => {
   const params = useParams()
-  const locale = params.locale as string
+  const locale = params.locale as I18nLocale
 
   const { t } = useTranslationClient({ locale, namespace: 'common' })
 

src/components/pagination/pagination-item.tsx

@@ -6,6 +6,7 @@ import type { FC } from 'react'
 import styles from './pagination-item.module.css'
 
 import { useTranslationClient } from 'src/helpers/hooks/useTranslationClient'
+import { I18nLocale } from 'src/types/i18n'
 
 
 type PaginationItemProps = {
@@ -14,7 +15,7 @@ type PaginationItemProps = {
 
 export const PaginationItem: FC<PaginationItemProps> = ({ indexPage }) => {
   const params = useParams()
-  const locale = params.locale as string
+  const locale = params.locale as I18nLocale
   const { t } = useTranslationClient({ locale, namespace: 'common' })
 
   const pathname = usePathname()

src/components/search-area/search-area-summary.tsx

@@ -8,6 +8,7 @@ import styles from './search-area-summary.module.css'
 
 import { useTranslationClient } from 'src/helpers/hooks/useTranslationClient'
 import { isObjectNull } from 'src/helpers/utils/isObjectNull'
+import { I18nLocale } from 'src/types/i18n'
 import { SearchPlacesFormInput, SearchPlacesFormInputOptions } from 'src/types/search'
 
 
@@ -27,7 +28,7 @@ export const SearchAreaSummary: FC<SearchAreaSummaryProps> = ({
   openDialogSearch
 }) => {
   const params = useParams()
-  const locale = params.locale as string
+  const locale = params.locale as I18nLocale
   const { t } = useTranslationClient({ locale, namespace: 'common' })
 
   return (

src/components/search-area/search-area.tsx

@@ -15,6 +15,7 @@ import { useTranslationClient } from 'src/helpers/hooks/useTranslationClient'
 import { filterObjectEmptyValues } from 'src/helpers/utils/filterObjectEmptyValues'
 import { isObjectNull } from 'src/helpers/utils/isObjectNull'
 import { CountryCode } from 'src/types/country'
+import { I18nLocale } from 'src/types/i18n'
 import { SearchPlacesFormInput } from 'src/types/search'
 
 
@@ -25,7 +26,7 @@ type SearchAreaProps = {
 
 export const SearchArea: FC<SearchAreaProps> = ({ countries, totalPlaces }) => {
   const params = useParams()
-  const locale = params.locale as string
+  const locale = params.locale as I18nLocale
   const { t } = useTranslationClient({ locale, namespace: 'common' })
 
   const id = 'search-places'

src/components/search-results/search-results.tsx

@@ -10,6 +10,7 @@ import styles from './search-results.module.css'
 
 import { useTranslationClient } from 'src/helpers/hooks/useTranslationClient'
 import type { CountryCode } from 'src/types/country'
+import { I18nLocale } from 'src/types/i18n'
 import type { Place } from 'src/types/place'
 
 
@@ -21,7 +22,7 @@ type SearchResultsProps = {
 
 export const SearchResults: FC<SearchResultsProps> = ({ places, totalPlaces, countryCodes }) => {
   const params = useParams()
-  const locale = params.locale as string
+  const locale = params.locale as I18nLocale
 
   const { t } = useTranslationClient({ locale, namespace: 'places' })
 

src/helpers/config/i18n.ts

@@ -1,8 +1,11 @@
+import { I18nLocale } from 'src/types/i18n'
+
+
 export const defaultLocale = 'en'
 
-export const locales = [defaultLocale, 'it']
+export const locales = [defaultLocale, 'it'] as const
 
-export const locales_codes: Record<string, string> = {
+export const locales_codes: Record<I18nLocale, string> = {
   en: 'en_GB',
   it: 'it_IT'
 }

src/helpers/hooks/useLocalesCurrentUrl.test.ts

@@ -0,0 +1,18 @@
+import { renderHook } from '@testing-library/react'
+import { expect, test, describe } from 'vitest'
+
+import { defaultLocale, locales } from '../config/i18n'
+
+import type { UseLocalesCurrentUrlParams } from './useLocalesCurrentUrl'
+import { useLocalesCurrentUrl  } from './useLocalesCurrentUrl'
+
+
+describe('Helpers > Hooks > useLocalesCurrentUrl', () => {
+  const data: UseLocalesCurrentUrlParams = { currentLocale: defaultLocale }
+
+  test('return total urls as total locales', () => {
+    const { result } = renderHook(() => useLocalesCurrentUrl(data))
+
+    expect(Object.entries(result.current.urls)).toHaveLength(locales.length)
+  })
+})

src/helpers/hooks/useLocalesCurrentUrl.ts

@@ -0,0 +1,45 @@
+'use client'
+
+import { usePathname, useSearchParams } from 'next/navigation'
+
+import { locales } from '../config/i18n'
+
+import { I18nLocale } from 'src/types/i18n'
+
+
+export type UseLocalesCurrentUrlParams = {
+  currentLocale: I18nLocale
+}
+
+type UseLocalesCurrentUrlResult = {
+  urls: Record<I18nLocale, string>
+}
+
+type UseLocalesCurrentUrlHook = (params: UseLocalesCurrentUrlParams) => UseLocalesCurrentUrlResult
+
+const setLocaleIntoCurrentUrl = (
+  currentLocale: I18nLocale,
+  currentUrl: string,
+  newLocale: I18nLocale
+): string => {
+  return currentUrl.replace(`/${currentLocale}`, `/${newLocale}`)
+}
+
+export const useLocalesCurrentUrl: UseLocalesCurrentUrlHook = (params) => {
+  const { currentLocale } = params
+
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const queryString = searchParams.toString()
+
+  const currentUrl = `${pathname}${queryString ? `?${queryString}` : ''}`
+
+  const localesCurrentUrl: Record<I18nLocale, string> = {} as Record<I18nLocale, string>
+  locales.forEach(locale => {
+    localesCurrentUrl[locale] = setLocaleIntoCurrentUrl(currentLocale, currentUrl, locale)
+  })
+
+  return {
+    urls: localesCurrentUrl
+  }
+}

src/helpers/hooks/useTranslationClient.test.ts

@@ -2,11 +2,12 @@ import { renderHook } from '@testing-library/react'
 import { changeLanguage, t } from 'i18next'
 import { expect, test, describe } from 'vitest'
 
+import type { UseTranslationClientParams } from './useTranslationClient'
 import { useTranslationClient } from './useTranslationClient'
 
 
 describe('Helpers > Hooks > useTranslationClient', () => {
-  const languageData = { locale: 'en', namespace: 'common' }
+  const languageData: UseTranslationClientParams = { locale: 'en', namespace: 'common' }
 
   test('return expected resolved language', () => {
     const { result } = renderHook(() => useTranslationClient(languageData))