Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Fix] Dates should be translated when switching to other languages #8469

Merged
merged 7 commits into from
Oct 23, 2024

Conversation

samuelmbabhazi
Copy link
Contributor

@samuelmbabhazi samuelmbabhazi commented Oct 21, 2024

PR

Please note: we will close your PR without comment if you do not check the boxes above and provide ALL requested information.


Summary by CodeRabbit

  • New Features

    • Enhanced date formatting functionality to support user-specific language settings.
    • Introduced a locale property that adapts date formats based on the user's preferred language.
  • Bug Fixes

    • Improved logic for determining the locale when formatting dates, ensuring it prioritizes user preferences.
    • Added validation checks for date inputs to prevent formatting errors.

@samuelmbabhazi samuelmbabhazi self-assigned this Oct 21, 2024
@samuelmbabhazi
Copy link
Contributor Author

@samuelmbabhazi samuelmbabhazi marked this pull request as ready for review October 21, 2024 10:53
Copy link
Contributor

coderabbitai bot commented Oct 21, 2024

Caution

Review failed

The pull request is closed.

Walkthrough

The changes involve modifications to the DateFormatPipe class in the date-format.pipe.ts file, enhancing locale handling. A new locale property is introduced to store the user's preferred language. The constructor subscribes to a preferredLanguage$ observable, updating the locale when a preferred language is emitted. The transform method's logic is adjusted to prioritize the locale over a default region code when formatting dates, improving the adaptability of date formatting to user preferences.

Changes

File Path Change Summary
packages/ui-core/shared/src/lib/pipes/date-format.pipe.ts Added locale property and modified constructor to subscribe to preferredLanguage$. Updated transform method to use locale for date formatting.

Possibly related PRs

Poem

In the land of code where rabbits play,
A pipe now knows what users say.
With languages bright, it hops with glee,
Formatting dates as sweet as can be!
So let’s celebrate this change so fine,
A leap for locales, a joyful design! 🐇✨


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
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, 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 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 for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (1)
packages/ui-core/shared/src/lib/components/date-range-title/date-range-title.component.ts (1)

61-65: LGTM: Date formatting now respects language preference.

The changes correctly implement language-based date formatting by using the preferred language from ThemeLanguageSelectorService. This aligns with the PR objective of translating dates when switching languages.

Consider adding a comment explaining the purpose of the language constant for better code readability:

// Get the user's preferred language for date formatting
const language = this._themeLanguageService.preferredLanguage;
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between c100170 and d9b6b54.

📒 Files selected for processing (1)
  • packages/ui-core/shared/src/lib/components/date-range-title/date-range-title.component.ts (3 hunks)
🧰 Additional context used
🔇 Additional comments (3)
packages/ui-core/shared/src/lib/components/date-range-title/date-range-title.component.ts (3)

5-5: LGTM: New service import added correctly.

The import statement for ThemeLanguageSelectorService is properly formatted and consistent with the existing import style.


47-48: LGTM: Constructor updated with new service injection.

The ThemeLanguageSelectorService is correctly injected into the constructor using dependency injection. The parameter is appropriately marked as private and readonly.


Line range hint 1-70: Summary: Successful implementation of language-based date translation.

The changes in this file successfully implement the functionality to translate dates when switching languages. Key points:

  1. The ThemeLanguageSelectorService is properly imported and injected.
  2. The title getter now uses the user's preferred language for date formatting.
  3. These changes align with the PR objective and should resolve the issue described.

The implementation is clean and follows Angular best practices. Great job on improving the internationalization support of the application!

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Outside diff range and nitpick comments (2)
packages/ui-core/shared/src/lib/pipes/date-format.pipe.ts (2)

32-41: Approved: Good use of RxJS operators and memory leak prevention

The subscription to preferredLanguage$ is well-implemented with appropriate use of RxJS operators and the untilDestroyed operator for preventing memory leaks.

Consider adding error handling to the subscription:

 this.store.preferredLanguage$
   .pipe(
     distinctUntilChange(),
     filter((preferredLanguage: string) => !!preferredLanguage),
     tap((preferredLanguage: string) => {
       this.locale = preferredLanguage;
     }),
+    catchError((error) => {
+      console.error('Error in preferredLanguage$ subscription:', error);
+      return EMPTY;
+    }),
     untilDestroyed(this)
   )
   .subscribe();

This will ensure that any errors in the subscription are logged and don't break the application.


67-67: Approved: Correct implementation of locale prioritization

The change correctly prioritizes this.locale when no specific locale is provided, which aligns with the PR objective of translating dates when switching languages.

For improved clarity, consider adding a comment explaining the locale prioritization:

 if (isEmpty(locale)) {
+  // Use the user's preferred language if no specific locale is provided
   locale = this.locale;
 }

This comment helps future developers understand the reasoning behind this prioritization.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between d9b6b54 and b4e63c5.

📒 Files selected for processing (1)
  • packages/ui-core/shared/src/lib/pipes/date-format.pipe.ts (3 hunks)
🧰 Additional context used
🔇 Additional comments (1)
packages/ui-core/shared/src/lib/pipes/date-format.pipe.ts (1)

Line range hint 1-83: Approved: Successfully implements date translation with good practices

The changes successfully address the PR objective of translating dates when switching languages. The implementation is clean, maintains backwards compatibility, and follows good Angular practices.

To ensure the robustness of these changes, please add unit tests covering the new functionality, particularly:

  1. The behavior of the transform method with different locale settings.
  2. The preferredLanguage$ subscription in the constructor.

Here's a script to check for existing tests:

If no tests are found, consider adding them to ensure the new functionality is properly covered.

packages/ui-core/shared/src/lib/pipes/date-format.pipe.ts Outdated Show resolved Hide resolved
Copy link

nx-cloud bot commented Oct 21, 2024

☁️ Nx Cloud Report

CI is running/has finished running commands for commit ba27118. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution


🟥 Failed Commands
nx build desktop --prod --base-href ./
nx build gauzy -c=production --prod --verbose
✅ Successfully ran 1 target

Sent with 💌 from NxCloud.

@rahul-rocket rahul-rocket merged commit 901cdf9 into develop Oct 23, 2024
11 of 17 checks passed
@rahul-rocket rahul-rocket deleted the fix/7175-date-translation branch October 23, 2024 06:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[feat] Dates should be translated when switching to other languages
2 participants