Skip to content

Commit 5c0aa1d

Browse files
marcinkrasowskimarcinkrasowski
authored
fix(frontend): fixed alternative urls for pages not working when changing locale (#22)
1 parent 705392f commit 5c0aa1d

File tree

7 files changed

+59
-9
lines changed

7 files changed

+59
-9
lines changed

‎.changeset/chilled-pears-crash.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@o2s/frontend': patch
3+
---
4+
5+
fixed alternative urls for pages not working when changing locale

‎apps/frontend/src/app/[locale]/[[...slug]]/page.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { generateSeo } from '@/utils/seo';
1212

1313
import { auth, signIn } from '@/auth';
1414

15+
import { Client } from '@/components/Client';
1516
import { PageTemplate } from '@/components/PageTemplate/PageTemplate';
1617

1718
interface Props {
@@ -85,6 +86,8 @@ export default async function Page({ params }: Props) {
8586

8687
return (
8788
<main className="flex flex-col gap-6 row-start-2 items-center sm:items-start">
89+
<Client page={data} />
90+
8891
{!data.hasOwnTitle && (
8992
<div className="flex flex-col gap-6 w-full">
9093
<Typography variant="h1" asChild>

‎apps/frontend/src/app/[locale]/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export default async function RootLayout({ children, params }: Props) {
5454
<html lang={locale} className={inter.className}>
5555
<body>
5656
{/*@see https://github.com/nextauthjs/next-auth/issues/9504#issuecomment-2516665386*/}
57-
<SessionProvider key={session?.user?.id} session={session}>
57+
<SessionProvider key={session?.user?.id} session={session} refetchOnWindowFocus={false}>
5858
<GlobalProvider config={init} locale={locale}>
5959
<div className="flex flex-col min-h-dvh">
6060
<Header headerData={init.common.header} />

‎apps/frontend/src/components/Auth/Toolbar/LocaleSwitcher.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,17 @@ import { useGlobalContext } from '@/providers/GlobalProvider';
1313

1414
import { ToolbarProps } from './Toolbar.types';
1515

16-
export const LocaleSwitcher: React.FC<ToolbarProps> = ({ alternativeUrls, label = 'Language' }) => {
16+
export const LocaleSwitcher: React.FC<ToolbarProps> = ({ label = 'Language' }) => {
1717
const pathname = usePathname();
1818
const searchParams = useSearchParams();
1919
const router = useRouter();
2020

21-
const { config } = useGlobalContext();
21+
const { config, alternativeUrls } = useGlobalContext();
2222

2323
const currentLocale = useLocale();
2424

2525
const handleLocaleChange = (locale: string) => {
26-
const alternative = alternativeUrls?.[locale];
26+
const alternative = alternativeUrls.values?.[locale];
2727
const url = alternative || pathname;
2828

2929
router.push(

‎apps/frontend/src/components/Auth/Toolbar/Toolbar.types.ts‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
11
export interface ToolbarProps {
2-
alternativeUrls?: {
3-
[key: string]: string;
4-
};
52
label: string;
63
}

‎apps/frontend/src/components/Client.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
'use client';
2+
3+
import { Modules } from '@o2s/api-harmonization';
4+
import React, { useEffect } from 'react';
5+
6+
import { useGlobalContext } from '@/providers/GlobalProvider';
7+
8+
interface ClientProps {
9+
page?: Modules.Page.Model.PageData;
10+
}
11+
12+
export const Client: React.FC<ClientProps> = ({ page }) => {
13+
const { alternativeUrls } = useGlobalContext();
14+
15+
// since locale switcher is placed inside the layout, we cannot access page-specific data there,
16+
// so pasing of alternative urls has to be done on client side (because layouts are not re-rendered on route change)
17+
useEffect(() => {
18+
page && alternativeUrls.set(page.alternativeUrls);
19+
}, [alternativeUrls, page]);
20+
21+
return null;
22+
};

‎apps/frontend/src/providers/GlobalProvider.tsx‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22

33
import { Modules } from '@o2s/api-harmonization';
4-
import React, { ReactNode, createContext, useContext } from 'react';
4+
import React, { ReactNode, createContext, useContext, useState } from 'react';
55

66
import { PriceService, usePriceService } from '@/hooks/usePriceService';
77

@@ -14,14 +14,37 @@ interface GlobalProviderProps {
1414
export interface GlobalContextType {
1515
config: Modules.Page.Model.Init;
1616
priceService: PriceService;
17+
alternativeUrls: {
18+
values: {
19+
[key: string]: string;
20+
};
21+
set: (values: { [key: string]: string }) => void;
22+
};
1723
}
1824

1925
export const GlobalContext = createContext({} as GlobalContextType);
2026

2127
export const GlobalProvider = ({ config, locale, children }: GlobalProviderProps) => {
28+
const [alternativeUrls, setAlternativeUrls] = useState<{
29+
[key: string]: string;
30+
}>({});
31+
2232
const priceService = usePriceService(locale);
2333

24-
return <GlobalContext.Provider value={{ config, priceService }}>{children}</GlobalContext.Provider>;
34+
return (
35+
<GlobalContext.Provider
36+
value={{
37+
config,
38+
priceService,
39+
alternativeUrls: {
40+
values: alternativeUrls,
41+
set: setAlternativeUrls,
42+
},
43+
}}
44+
>
45+
{children}
46+
</GlobalContext.Provider>
47+
);
2548
};
2649

2750
export const useGlobalContext = () => useContext(GlobalContext);

0 commit comments

Comments
 (0)