Skip to content

Commit 4cd556e

Browse files
Sebastiano-BertolinmarcobottaroCopilotMarcoPonchia
authored
[DEV-3564][DEV-3565] Fix links with missing locale (#1988)
* Add locale to link with missing locale and change param name from currentLocale to locale * Add changeset * Apply suggestions from code review Co-authored-by: marcobottaro <39835990+marcobottaro@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update apps/nextjs-website/src/app/[locale]/page.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Use useParms to retrieve path params in client pages * Fix tests * Update apps/nextjs-website/src/app/[locale]/auth/confirmation/page.tsx Co-authored-by: Marco Ponchia <ponchia.marco1994@gmail.com> --------- Co-authored-by: marcobottaro <39835990+marcobottaro@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Marco Ponchia <ponchia.marco1994@gmail.com>
1 parent ca49e7f commit 4cd556e

File tree

29 files changed

+138
-95
lines changed

29 files changed

+138
-95
lines changed

‎.changeset/funny-pianos-brake.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"nextjs-website": patch
3+
---
4+
5+
Fix links with missing locale and change prop names from 'currentLocale' to 'locale' for consistency

‎apps/nextjs-website/src/app/[locale]/[productSlug]/guides/[...productGuidePage]/page.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export async function generateMetadata(props0: {
8181

8282
const Page = async (props0: { params: Promise<Params> }) => {
8383
const params = await props0.params;
84-
const currentLocale = params.locale;
84+
const locale = params.locale;
8585
const [guideProps, urlReplaceMap] = await Promise.all([
8686
getGuidePage(params?.productGuidePage ?? [''], params?.productSlug),
8787
getUrlReplaceMapProps(),
@@ -118,10 +118,10 @@ const Page = async (props0: { params: Promise<Params> }) => {
118118

119119
const structuredData = generateStructuredDataScripts({
120120
breadcrumbsItems: [
121-
productToBreadcrumb(currentLocale, props.product),
121+
productToBreadcrumb(locale, props.product),
122122
{
123123
name: seo?.metaTitle || page.title,
124-
item: breadcrumbItemByProduct(currentLocale, props.product, [
124+
item: breadcrumbItemByProduct(locale, props.product, [
125125
'guides',
126126
...(params?.productGuidePage || []),
127127
]),
@@ -132,13 +132,13 @@ const Page = async (props0: { params: Promise<Params> }) => {
132132
});
133133

134134
const initialBreadcrumbs = [
135-
...productPageToBreadcrumbs(currentLocale, props.product, [
135+
...productPageToBreadcrumbs(locale, props.product, [
136136
{
137137
translate: true,
138138
name: 'devPortal.productHeader.guides',
139139
path: props.product.hasGuideListPage
140-
? `/${currentLocale}/${props.product.slug}/guides`
141-
: `/${currentLocale}`,
140+
? `/${locale}/${props.product.slug}/guides`
141+
: `/${locale}`,
142142
},
143143
{ name: props.guide.name, path: props.guide.path },
144144
]),

‎apps/nextjs-website/src/app/[locale]/auth/confirmation/page.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { Button } from '@mui/material';
33
import PageNotFound from '@/app/[locale]/not-found';
44
import { Auth } from 'aws-amplify';
5-
import { useSearchParams, useRouter } from 'next/navigation';
5+
import { useSearchParams, useRouter, useParams } from 'next/navigation';
66
import { useCallback, useEffect, useState, Suspense } from 'react';
77
import Spinner from '@/components/atoms/Spinner/Spinner';
88
import { useTranslations } from 'next-intl';
@@ -20,6 +20,7 @@ enum State {
2020
}
2121

2222
const ConfirmationContent = () => {
23+
const { locale } = useParams<{ locale: string }>();
2324
const searchParams = useSearchParams();
2425
const router = useRouter();
2526
const username = searchParams.get('username');
@@ -34,7 +35,7 @@ const ConfirmationContent = () => {
3435
Auth.confirmSignUp(username, code)
3536
.then(() => {
3637
// eslint-disable-next-line functional/immutable-data
37-
router.push('/auth/account-activated');
38+
router.push(`/${locale}/auth/account-activated`);
3839
})
3940
.catch((error) => {
4041
// TODO: remove console warn and handle errors: [CodeMismatchException, ExpiredCodeException, InternalErrorException, LimitExceededException]
@@ -56,7 +57,7 @@ const ConfirmationContent = () => {
5657
} else {
5758
setState(State.error);
5859
}
59-
}, [username, code, router]);
60+
}, [username, code, router, locale]);
6061

6162
const onResendEmail = useCallback(async () => {
6263
setSubmitting(true);
@@ -77,7 +78,7 @@ const ConfirmationContent = () => {
7778
case State.error:
7879
return <PageNotFound />;
7980
case State.alreadyConfirmed:
80-
return <AccountAlreadyConfirmed />;
81+
return <AccountAlreadyConfirmed locale={locale} />;
8182
case State.resendCode:
8283
return (
8384
<PageBackgroundWrapper>

‎apps/nextjs-website/src/app/[locale]/auth/email-confirmation/page.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22
import PageNotFound from '@/app/[locale]/not-found';
33
import { Auth } from 'aws-amplify';
4-
import { useRouter, useSearchParams } from 'next/navigation';
4+
import { useParams, useRouter, useSearchParams } from 'next/navigation';
55
import { useEffect, useState, Suspense } from 'react';
66
import Spinner from '@/components/atoms/Spinner/Spinner';
77
import ExpiredCode from '@/app/[locale]/auth/expired-code/page';
@@ -12,7 +12,7 @@ enum State {
1212
error = 'error',
1313
}
1414

15-
const EmailConfirmationContent = () => {
15+
const EmailConfirmationContent = ({ locale }: { locale: string }) => {
1616
const searchParams = useSearchParams();
1717
const router = useRouter();
1818
const code = searchParams.get('code');
@@ -24,7 +24,7 @@ const EmailConfirmationContent = () => {
2424
Auth.verifyCurrentUserAttributeSubmit('email', code)
2525
.then(() => {
2626
// eslint-disable-next-line functional/immutable-data
27-
router.push('/auth/account-activated');
27+
router.push(`/${locale}/auth/account-activated`);
2828
Auth.signOut();
2929
})
3030
.catch((error) => {
@@ -43,7 +43,7 @@ const EmailConfirmationContent = () => {
4343
} else {
4444
setState(State.error);
4545
}
46-
}, [code, router]);
46+
}, [code, router, locale]);
4747

4848
switch (state) {
4949
case State.error:
@@ -56,9 +56,10 @@ const EmailConfirmationContent = () => {
5656
};
5757

5858
const EmailConfirmation = () => {
59+
const { locale } = useParams<{ locale: string }>();
5960
return (
6061
<Suspense fallback={<Spinner />}>
61-
<EmailConfirmationContent />
62+
<EmailConfirmationContent locale={locale} />
6263
</Suspense>
6364
);
6465
};

‎apps/nextjs-website/src/app/[locale]/auth/expired-code/page.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,10 @@ import { useTranslations } from 'next-intl';
55
import PageBackgroundWrapper from '@/components/atoms/PageBackgroundWrapper/PageBackgroundWrapper';
66
import SingleCard from '@/components/atoms/SingleCard/SingleCard';
77
import { ErrorOutline as ErrorOutlineIcon } from '@mui/icons-material';
8+
import { useParams } from 'next/navigation';
89

910
const ExpiredCode = () => {
11+
const { locale } = useParams<{ locale: string }>();
1012
const t = useTranslations('auth');
1113

1214
return (
@@ -18,7 +20,7 @@ const ExpiredCode = () => {
1820
<Button
1921
variant='contained'
2022
component={Link}
21-
href='/profile/personal-data'
23+
href={`/${locale}/profile/personal-data`}
2224
>
2325
{t('expiredCode.goToProfile')}
2426
</Button>

‎apps/nextjs-website/src/app/[locale]/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ export default async function RootLayout({
144144
/>
145145
<AuthProvider>
146146
<ChatbotProvider isChatbotVisible={isChatbotActive}>
147-
<SiteHeader currentLocale={locale} products={products} />
147+
<SiteHeader locale={locale} products={products} />
148148
<ErrorBoundary errorComponent={Error}>
149149
<main>
150150
<Box sx={{ marginTop: `${SITE_HEADER_HEIGHT}px` }}>

‎apps/nextjs-website/src/app/[locale]/page.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,8 @@ export async function generateMetadata(props: {
7777
});
7878
}
7979

80-
const Home = async () => {
80+
const Home = async ({ params }: { params: Promise<{ locale: string }> }) => {
81+
const { locale } = await params;
8182
const {
8283
webinars,
8384
hero,
@@ -96,7 +97,7 @@ const Home = async () => {
9697
<>
9798
{structuredData}
9899
<ContentWrapper>
99-
<WebinarHeaderBanner webinars={[...webinars]} />
100+
<WebinarHeaderBanner locale={locale} webinars={[...webinars]} />
100101

101102
<HeroSwiper
102103
cards={hero.map((itemProp, index) => ({

‎apps/nextjs-website/src/components/atoms/DesktopUserInfo/DesktopUserInfo.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import { useTranslations } from 'next-intl';
1919
import { useRouter, usePathname } from 'next/navigation';
2020
import { flushChatQueriesFromLocalStorage } from '@/helpers/chatbot.helper';
2121

22-
const DesktopUserInfo: FC<{ currentLocale: string }> = ({ currentLocale }) => {
22+
const DesktopUserInfo: FC<{ locale: string }> = ({ locale }) => {
2323
const t = useTranslations();
2424
const router = useRouter();
2525
const pathname = usePathname();
@@ -40,7 +40,7 @@ const DesktopUserInfo: FC<{ currentLocale: string }> = ({ currentLocale }) => {
4040

4141
// Check if the user in an auth only page
4242
if (['/auth', '/profile'].some((path) => pathname.match(path))) {
43-
router.replace('/');
43+
router.replace(`/${locale}/`);
4444
} else {
4545
// router.refresh(); is not enough beacuse it will not clean current state of components
4646
if (typeof window !== 'undefined') {
@@ -49,14 +49,15 @@ const DesktopUserInfo: FC<{ currentLocale: string }> = ({ currentLocale }) => {
4949
}
5050

5151
handleClose();
52-
}, [pathname, router]);
53-
52+
}, [pathname, router, locale]);
5453
const handleClick = useCallback((event: React.MouseEvent<HTMLElement>) => {
5554
setMenu(event.currentTarget);
5655
}, []);
5756

5857
const loginHref =
59-
pathname !== '/' ? `/auth/login?redirect=${btoa(pathname)}` : '/auth/login';
58+
pathname !== `/${locale}`
59+
? `auth/login?redirect=${btoa(pathname)}`
60+
: 'auth/login';
6061

6162
return (
6263
<Stack
@@ -68,7 +69,7 @@ const DesktopUserInfo: FC<{ currentLocale: string }> = ({ currentLocale }) => {
6869
>
6970
{!user && !loading && (
7071
<MuiLink
71-
href={`/${currentLocale}${loginHref}`}
72+
href={`/${locale}/${loginHref}`}
7273
component={Link}
7374
sx={{
7475
display: 'flex',
@@ -150,7 +151,7 @@ const DesktopUserInfo: FC<{ currentLocale: string }> = ({ currentLocale }) => {
150151
>
151152
<MuiLink
152153
component={Link}
153-
href={`/${currentLocale}/profile/personal-data`}
154+
href={`/${locale}/profile/personal-data`}
154155
sx={{
155156
alignSelf: 'stretch',
156157
textDecoration: 'none',

‎apps/nextjs-website/src/components/atoms/GuideMenu/Menu.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import GuideVersionSelector, {
1414
} from './GuideVersionSelector';
1515
import { Typography } from '@mui/material';
1616
import { GitBookContentData } from '@/lib/types/gitBookContent';
17+
import { useParams } from 'next/navigation';
1718

1819
const StyledTreeItem = styled(TreeItem)(({ theme }) => ({
1920
[`&`]: {
@@ -121,6 +122,7 @@ const GuideMenuItems = ({
121122
versions,
122123
onGuideNavigate,
123124
}: GuideMenuItemsProps) => {
125+
const { locale } = useParams<{ locale: string }>();
124126
const components: RenderingComponents<React.ReactNode> = useMemo(
125127
() => ({
126128
Item: ({ href, title, children }) => {
@@ -131,7 +133,7 @@ const GuideMenuItems = ({
131133
e.currentTarget.classList.add('custom-mui-focused');
132134
const cleanHref = href.split('#')[0];
133135
const parts = cleanHref.split('/').filter(Boolean);
134-
const apiPath = `/api/${parts.join('/')}`;
136+
const apiPath = `/${locale}/api/${parts.join('/')}`;
135137
fetch(apiPath, { headers: { Accept: 'application/json' } })
136138
.then((res) => (res.ok ? res.json() : undefined))
137139
.then((data) => {
@@ -188,7 +190,7 @@ const GuideMenuItems = ({
188190
</Typography>
189191
),
190192
}),
191-
[currentPath, onGuideNavigate]
193+
[currentPath, onGuideNavigate, locale]
192194
);
193195

194196
const children = useMemo(() => {

‎apps/nextjs-website/src/components/atoms/MobileUserInfo/MobileUserInfo.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import React, { useCallback } from 'react';
66
import { useUser } from '@/helpers/user.helper';
77
import Link from 'next/link';
88
import { useTranslations } from 'next-intl';
9-
import { usePathname, useRouter } from 'next/navigation';
9+
import { useParams, usePathname, useRouter } from 'next/navigation';
1010
import { MobileSiteHeaderStyledTreeItem } from '@/components/molecules/MobileSiteHeader/MobileSiteHeader';
1111
import { flushChatQueriesFromLocalStorage } from '@/helpers/chatbot.helper';
1212

@@ -16,6 +16,7 @@ type MobileUserInfoProps = {
1616
};
1717

1818
const MobileUserInfo = ({ onClick }: MobileUserInfoProps) => {
19+
const { locale } = useParams<{ locale: string }>();
1920
const t = useTranslations();
2021
const router = useRouter();
2122
const pathname = usePathname();
@@ -31,20 +32,20 @@ const MobileUserInfo = ({ onClick }: MobileUserInfoProps) => {
3132

3233
// Check if the user in an auth only page
3334
if (['/auth', '/profile'].some((path) => pathname.match(path))) {
34-
router.replace('/');
35+
router.replace(`/${locale}/`);
3536
} else {
3637
// router.refresh(); is not enough beacuse it will not clean current state of components
3738
if (typeof window !== 'undefined') {
3839
window.location.reload();
3940
}
4041
}
41-
}, [pathname, router, onClick]);
42+
}, [pathname, router, onClick, locale]);
4243

4344
return (
4445
<>
4546
{!user && !loading && (
4647
<MuiLink
47-
href='/auth/login'
48+
href={`/${locale}/auth/login`}
4849
component={Link}
4950
onClick={onClick}
5051
sx={{
@@ -109,7 +110,7 @@ const MobileUserInfo = ({ onClick }: MobileUserInfoProps) => {
109110
variant='body1'
110111
component={Link}
111112
onClick={onClick}
112-
href={'/profile/personal-data'}
113+
href={`/${locale}/profile/personal-data`}
113114
style={{
114115
color: palette.primary.dark,
115116
display: 'block',
@@ -119,7 +120,7 @@ const MobileUserInfo = ({ onClick }: MobileUserInfoProps) => {
119120
{t('shared.yourData')}
120121
</Typography>
121122
<MuiLink
122-
href='/auth/login'
123+
href={`/${locale}/auth/login`}
123124
component={Link}
124125
onClick={signOut}
125126
sx={{

0 commit comments

Comments
 (0)