Feat/implement translations

[KevinLatino]

Pull Request Overview

📝 Summary

This PR implements the functionality for multilingual support, enabling users to switch between different languages dynamically. (es / en are the lenguages added)

🪧 Related Issues

• Closes #12

🏁 Type of Change

Mark with an x all the checkboxes that apply (like [x]).

• [ ] 📝 Documentation (updates to README, docs, or comments)
• [ ] 🐛 Bug fix (non-breaking change which fixes an issue)
• [x] 👌 Enhancement (non-breaking change which adds functionality)
• [ ] 💥 Breaking change (fix or feature that would cause existing functionality to change)

🔄 Changes Made

Refactored Project Structure

• All files related to localization were moved into a [locale] folder inside the app directory.
• This ensures that the main route includes the language as part of the URL (e.g., localhost:3001/en).

Added i18n Folder

• Introduced an i18n folder to centralize and organize localization logic:
  • routing: Defines supported languages and their respective routes.
  • request: Manages locale-specific requests to ensure consistent behavior.

Added Messages Folder

• Created a messages directory containing JSON files for each supported language.
• This structure simplifies the process of managing translations and keeps them modular.

Implemented Middleware for Locale Detection

• A middleware was added to automatically handle language detection and redirection:
  • Redirects users to the appropriate language route (e.g., /en, /de).
  • If no language is specified, the user is redirected to the default locale (/en).

Added Language Store

• Created a store to manage language preferences across the application:
  • The store allows easy access and updating of the current language.
  • Language preferences are persisted using localStorage, ensuring users' choices are retained across sessions.
  • The store integrates seamlessly with the LanguageSwitcher component and other parts of the app requiring localization.

Integrated LanguageSwitcher Component

• Added a LanguageSwitcher component to the application, enabling users to dynamically switch between supported languages.
  • The LanguageSwitcher updates the language in the store and redirects the user to the appropriate localized route.
  • Provides a user-friendly UI with visual cues, such as an emoji and highlighted selection, to indicate the active language.
  • Integrated into the Header component for accessibility across the site.

Additional Updates

• Updated the RootLayout to dynamically load translation messages based on the selected language.
• Improved user experience by allowing dynamic language switching without requiring a page reload.

🚀 Implementation Details

• Utilized next-intl for managing translations and locale-based messages.
• Modified routing logic to prepend the language to URLs dynamically.
• Language preference is stored in localStorage for persistence. (using Zustanf)

🛠 Technical Notes

• Added JSON files for supported languages under messages/.
• The current implementation supports dynamic imports for language files to minimize initial load size.
• The language switcher component handles edge cases where the language is changed mid-navigation.

✅ Tests Results

• Verified language toggle updates the UI without a page reload.
• Confirmed language persistence works across sessions.
• Ensured URLs are correctly prefixed with the selected language code.

Test Coverage

• [ ] ✅ Unit Tests
• [ ] ✅ Integration Tests
• [ x] ✅ Manual Testing

📸 Evidence

🔍 Testing Notes

• No testing notes

🔜 Next Steps

• Add support for additional languages as needed.

Summary by CodeRabbit

Release Notes

• New Features

  • Introduced support for English and Spanish languages throughout the application, enhancing accessibility for users.
  • Added forms for initializing and claiming escrow earnings, now fully localized.
  • Implemented a LanguageSwitcher component for easy language selection.

• Bug Fixes

  • Improved handling of mobile menu interactions and language state management.

• Documentation

  • Enhanced messaging and structured forms for escrow management to guide users effectively.

• Chores

  • Updated dependencies to support internationalization features.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
revolutionary-farmers	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 25, 2024 0:30am

[coderabbitai[bot]]

📝 Walkthrough

## Walkthrough The pull request introduces internationalization support for a Next.js application, enabling English and Spanish translations. Key changes include the addition of JSON files for localized messages, middleware for language handling, and a language switcher component. The application structure is updated to utilize the `next-intl` library for dynamic translations, including modifications to forms and headers to support localization. The routing configuration is also enhanced to manage language prefixes in URLs, ensuring a seamless user experience across different languages. ## Changes | File | Change Summary | |-------------------------------------|----------------------------------------------------------------------------------------------------| | `web/messages/en.json` | New JSON file for English messages related to escrow functionality, including structured sections. | | `web/messages/es.json` | New JSON file for Spanish translations, covering similar sections as the English file. | | `web/middleware.ts` | Introduced middleware for handling requests and locale redirection based on user preferences. | | `web/next.config.mjs` | Updated Next.js configuration to include internationalization support via `createNextIntlPlugin`. | | `web/package.json` | Added `next-intl` dependency for internationalization. | | `web/src/app/[locale]/layout.tsx` | New `RootLayout` component for managing localization context and rendering children components. | | `web/src/app/[locale]/page.tsx` | Updated to utilize `useTranslations` for dynamic text rendering based on selected locale. | | `web/src/app/layout.tsx` | Deleted existing layout file that contained the previous structure. | | `web/src/components/header/Header.tsx` | Modified to include language support and improved mobile menu management. | | `web/src/components/header/ItemsHeader.tsx` | Updated to use `useTranslations` for localized navigation links. | | `web/src/components/modules/escrow/ClaimEscrowEarningsForm.tsx` | Integrated `useTranslations` for dynamic text in the form. | | `web/src/components/modules/escrow/InitializeEscrowForm.tsx` | Updated to replace static text with translatable keys using `useTranslations`. | | `web/src/i18n/request.ts` | New file for managing request configurations with localization support. | | `web/src/i18n/routing.ts` | Introduced routing configuration for internationalization with defined locales. | | `web/src/store/languageStore/index.ts` | Re-exported all entities from the store module for easier access. | | `web/src/store/languageStore/store.ts` | New Zustand store for managing language state with persistence. | | `web/src/components/header/LanguageSwitcher.tsx` | New component for switching languages, integrated with the language store. | ## Assessment against linked issues | Objective | Addressed | Explanation | |-----------------------------------------------------------------------------------------------------|-----------|----------------------------------------------------| | Create a comprehensive internationalization strategy (12) | ✅ | | | Implement language switching functionality (12) | ✅ | | | Ensure seamless translation management (12) | ✅ | | | Optimize performance for multilingual content (12) | ✅ | | | Configure language-based routing (12) | ✅ | |

---

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?

❤️ Share

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

🪧 Tips

### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit , please review it.` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` 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) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. ### Other keywords and placeholders - Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. - Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description. - Add `@coderabbitai` anywhere in the PR title to generate the title automatically. ### CodeRabbit Configuration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit. - Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.