fix: fix footer language not changing when language is changed #3722
Conversation
Fixes asyncapi#3720 Add language support to the footer section to address the issue of the footer text not changing when the language is switched. * **Footer Component (`components/footer/Footer.tsx`)** - Import `useTranslation` hook from `next-i18next`. - Use `useTranslation` hook to get the `t` function. - Replace hardcoded text with `t` function calls for translation. - Add `currentLanguage` prop to the `Footer` component. - Use `currentLanguage` prop to determine the language for translations. * **Next-i18next Configuration (`next-i18next.config.js`)** - Add `footer` to the `namespaces` array. * **App Component (`pages/_app.tsx`)** - Pass the current language as a prop to the `Footer` component. * **Translation Files** - Add English translations for the footer section in `public/locales/en/footer.json`. - Add German translations for the footer section in `public/locales/de/footer.json`.
Recxsmacx
requested review from
derberg,
akshatnema,
anshgoyalevil,
Mayaleeeee and
asyncapi-bot-eve
as code owners
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
Recxsmacx
changed the title
|
@anshgoyalevil @sambhavgupta0705 @devilkiller-ag @derberg @Mayaleeeee please review this one! |
|
this is the final output |
There was a problem hiding this comment.
Hi @Recxsmacx, Can you check why the deploy preview is failing and fix it?
WalkthroughThe pull request integrates internationalization into the Footer component. The Footer now accepts a new required prop ( Changes
Sequence Diagram(s)sequenceDiagram
participant Browser as Browser
participant Router as Router
participant App as _app.tsx
participant Footer as Footer Component
participant i18n as next-i18next
Browser->>Router: Request page with locale
Router->>App: Provide locale information
App->>Footer: Pass `currentLanguage` prop (locale)
Footer->>i18n: Call useTranslation (with footer namespace)
i18n-->>Footer: Return localized strings
Footer-->>Browser: Render translated footer content
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
|
@devilkiller-ag its solved now ! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
components/footer/Footer.tsx (1)
39-41: Fix Tailwind CSS class order.The class order in several elements needs to be fixed according to the Tailwind CSS convention.
-<Heading typeStyle={HeadingTypeStyle.smSemibold} className='text-white mb-2'> +<Heading typeStyle={HeadingTypeStyle.smSemibold} className='mb-2 text-white'>Also applies to: 57-59, 71-73, 90-92
🧰 Tools
🪛 GitHub Actions: PR testing - if Node project
[warning] 39-39: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
components/footer/Footer.tsx(2 hunks)next-i18next.config.js(1 hunks)pages/_app.tsx(2 hunks)public/locales/de/footer.json(1 hunks)public/locales/en/footer.json(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- public/locales/en/footer.json
- public/locales/de/footer.json
🧰 Additional context used
🪛 ESLint
components/footer/Footer.tsx
[error] 3-3: 'useRouter' is defined but never used.
(unused-imports/no-unused-imports)
[error] 3-3: 'useRouter' is defined but never used.
(no-unused-vars)
[error] 16-16: 'currentLanguage' is defined but never used. Allowed unused args must match /^_/u.
(unused-imports/no-unused-vars)
[error] 16-16: 'currentLanguage' is defined but never used.
(no-unused-vars)
[error] 77-77: Replace ·href={link.url}·target='_blank'·rel='noopener·noreferrer'·className='flex·items-center·gap-2·text-cool-gray·transition·hover:text-white' with ⏎······················href={link.url}⏎······················target='_blank'⏎······················rel='noopener·noreferrer'⏎······················className='flex·items-center·gap-2·text-cool-gray·transition·hover:text-white'⏎····················
(prettier/prettier)
[error] 95-95: Trailing spaces not allowed.
(no-trailing-spaces)
[error] 95-98: Replace ⏎············href='https://netlify.com'·⏎············target='_blank'⏎············ with href='https://netlify.com'·target='_blank'
(prettier/prettier)
[error] 96-96: Trailing spaces not allowed.
(no-trailing-spaces)
[error] 99-99: Insert ··
(prettier/prettier)
[error] 100-100: Insert ···
(prettier/prettier)
[error] 101-101: Insert ··
(prettier/prettier)
[error] 102-102: Insert ·
(prettier/prettier)
[error] 103-103: Replace ················/>·········· with ··············/>
(prettier/prettier)
[error] 103-103: Trailing spaces not allowed.
(no-trailing-spaces)
[error] 104-104: Delete ······
(prettier/prettier)
🪛 GitHub Actions: PR testing - if Node project
components/footer/Footer.tsx
[error] 1-1: Run autofix to sort these imports! simple-import-sort/imports
[error] 3-3: 'useRouter' is defined but never used. unused-imports/no-unused-imports
[error] 3-3: 'useRouter' is defined but never used. no-unused-vars
[warning] 16-16: Missing JSDoc comment. require-jsdoc
[error] 16-16: 'currentLanguage' is defined but never used. Allowed unused args must match /^_/u. unused-imports/no-unused-vars
[error] 16-16: 'currentLanguage' is defined but never used. no-unused-vars
[warning] 39-39: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
[warning] 57-57: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
[warning] 71-71: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
[error] 77-77: Replace ·href={link.url}·target='_blank'·rel='noopener·noreferrer'·className='flex·items-center·gap-2·text-cool-gray·transition·hover:text-white' with ⏎······················href={link.url}⏎······················target='_blank'⏎······················rel='noopener·noreferrer'⏎······················className='flex·items-center·gap-2·text-cool-gray·transition·hover:text-white'⏎···················· prettier/prettier
[warning] 90-90: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
[error] 95-95: Trailing spaces not allowed. no-trailing-spaces
[error] 95-95: Replace ⏎············href='https://netlify.com'·⏎············target='_blank'⏎············ with href='https://netlify.com'·target='_blank' prettier/prettier
[error] 96-96: Trailing spaces not allowed. no-trailing-spaces
[error] 99-99: Insert ·· prettier/prettier
[error] 100-100: Insert ··· prettier/prettier
[error] 101-101: Insert ·· prettier/prettier
[error] 102-102: Insert · prettier/prettier
[error] 103-103: Replace ················/>·········· with ··············/> prettier/prettier
[error] 103-103: Trailing spaces not allowed. no-trailing-spaces
[error] 104-104: Delete ······ prettier/prettier
🔇 Additional comments (3)
next-i18next.config.js (1)
5-5: LGTM! Configuration updated correctly for footer translations.The addition of the 'footer' namespace to the configuration is necessary for supporting the footer translations.
pages/_app.tsx (1)
21-21: LGTM! Language context properly integrated.The locale is correctly extracted from the router and passed to the Footer component, enabling language-aware rendering.
Also applies to: 40-40
components/footer/Footer.tsx (1)
16-109: LGTM! Footer internationalization implemented correctly.The implementation correctly uses the translation hook and keys to render the footer content in different languages. The component structure and styling are well-organized.
🧰 Tools
🪛 ESLint
[error] 16-16: 'currentLanguage' is defined but never used. Allowed unused args must match /^_/u.
(unused-imports/no-unused-vars)
[error] 16-16: 'currentLanguage' is defined but never used.
(no-unused-vars)
[error] 77-77: Replace
·href={link.url}·target='_blank'·rel='noopener·noreferrer'·className='flex·items-center·gap-2·text-cool-gray·transition·hover:text-white'with⏎······················href={link.url}⏎······················target='_blank'⏎······················rel='noopener·noreferrer'⏎······················className='flex·items-center·gap-2·text-cool-gray·transition·hover:text-white'⏎····················(prettier/prettier)
[error] 95-95: Trailing spaces not allowed.
(no-trailing-spaces)
[error] 95-98: Replace
⏎············href='https://netlify.com'·⏎············target='_blank'⏎············withhref='https://netlify.com'·target='_blank'(prettier/prettier)
[error] 96-96: Trailing spaces not allowed.
(no-trailing-spaces)
[error] 99-99: Insert
··(prettier/prettier)
[error] 100-100: Insert
···(prettier/prettier)
[error] 101-101: Insert
··(prettier/prettier)
[error] 102-102: Insert
·(prettier/prettier)
[error] 103-103: Replace
················/>··········with··············/>(prettier/prettier)
[error] 103-103: Trailing spaces not allowed.
(no-trailing-spaces)
[error] 104-104: Delete
······(prettier/prettier)
🪛 GitHub Actions: PR testing - if Node project
[warning] 16-16: Missing JSDoc comment. require-jsdoc
[error] 16-16: 'currentLanguage' is defined but never used. Allowed unused args must match /^_/u. unused-imports/no-unused-vars
[error] 16-16: 'currentLanguage' is defined but never used. no-unused-vars
[warning] 39-39: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
[warning] 57-57: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
[warning] 71-71: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
[error] 77-77: Replace
·href={link.url}·target='_blank'·rel='noopener·noreferrer'·className='flex·items-center·gap-2·text-cool-gray·transition·hover:text-white'with⏎······················href={link.url}⏎······················target='_blank'⏎······················rel='noopener·noreferrer'⏎······················className='flex·items-center·gap-2·text-cool-gray·transition·hover:text-white'⏎····················prettier/prettier
[warning] 90-90: Invalid Tailwind CSS classnames order tailwindcss/classnames-order
[error] 95-95: Trailing spaces not allowed. no-trailing-spaces
[error] 95-95: Replace
⏎············href='https://netlify.com'·⏎············target='_blank'⏎············withhref='https://netlify.com'·target='_blank'prettier/prettier
[error] 96-96: Trailing spaces not allowed. no-trailing-spaces
[error] 99-99: Insert
··prettier/prettier
[error] 100-100: Insert
···prettier/prettier
[error] 101-101: Insert
··prettier/prettier
[error] 102-102: Insert
·prettier/prettier
[error] 103-103: Replace
················/>··········with··············/>prettier/prettier
[error] 103-103: Trailing spaces not allowed. no-trailing-spaces
[error] 104-104: Delete
······prettier/prettier
Fixes #3720
Add language support to the footer section to address the issue of the footer text not changing when the language is switched.
Footer Component (
components/footer/Footer.tsx)useTranslationhook fromnext-i18next.useTranslationhook to get thetfunction.tfunction calls for translation.currentLanguageprop to theFootercomponent.currentLanguageprop to determine the language for translations.Next-i18next Configuration (
next-i18next.config.js)footerto thenamespacesarray.App Component (
pages/_app.tsx)Footercomponent.Translation Files
public/locales/en/footer.json.public/locales/de/footer.json.Summary by CodeRabbit
New Features
Refactor
Chore