fix(UnlockableAchievementAvatar): swap t() for <Trans /> (#3063)

RetroAchievements · Jan 17, 2025 · bfac07e · bfac07e
1 parent b6aa4a8
commit bfac07e
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 19 deletions.
diff --git a/lang/en_US.json b/lang/en_US.json
@@ -136,7 +136,6 @@
     "Forum Index": "Forum Index",
     "Forum Posts": "Forum Posts",
     "Forum Posts - {{user}}": "Forum Posts - {{user}}",
-    "from": "from",
     "Game": "Game",
     "Game Details": "Game Details",
     "Games": "Games",
@@ -626,5 +625,6 @@
     "Similar masteries": "Similar masteries",
     "Beaten by players of": "Beaten by players of",
     "Mastered by players of": "Mastered by players of",
-    "Roll again": "Roll again"
+    "Roll again": "Roll again",
+    "<1>{{achievementTitle}}</1> from <2>{{gameTitle}}</2>": "<1>{{achievementTitle}}</1> from <2>{{gameTitle}}</2>"
 }
diff --git a/resources/js/features/achievements/components/AchievementGroup/AchievementGroup.test.tsx b/resources/js/features/achievements/components/AchievementGroup/AchievementGroup.test.tsx
@@ -68,12 +68,14 @@ describe('Component: AchievementGroup', () => {
     render(<AchievementGroup group={group} showGame={true} />);
 
     // ASSERT
-    expect(screen.getByText(/First Achievement/)).toBeVisible();
-    expect(screen.getByText(/First Game/)).toBeVisible();
+    expect(screen.getAllByText(/First Achievement/)[0]).toBeVisible();
+    expect(screen.getAllByText(/First Game/)[0]).toBeVisible();
     expect(screen.getByText(/Do the first thing/)).toBeVisible();
-    expect(screen.getByText(/Second Achievement/)).toBeVisible();
+
+    expect(screen.getAllByText(/Second Achievement/)[0]).toBeVisible();
     expect(screen.getByText(/Do the second thing/)).toBeVisible();
-    expect(screen.getByText(/Third Achievement/)).toBeVisible();
+
+    expect(screen.getAllByText(/Third Achievement/)[0]).toBeVisible();
     expect(screen.getByText(/Do the third thing/)).toBeVisible();
   });
 });
diff --git a/.../achievements/components/UnlockableAchievementAvatar/UnlockableAchievementAvatar.test.tsx b/.../achievements/components/UnlockableAchievementAvatar/UnlockableAchievementAvatar.test.tsx
@@ -106,8 +106,8 @@ describe('Component: UnlockableAchievementAvatar', () => {
     expect(img).toBeVisible();
     expect(img.src).toContain(achievement.badgeLockedUrl);
 
-    expect(screen.getByText(/Creative Name/)).toBeVisible();
-    expect(screen.getByText(/Container Set/)).toBeVisible();
+    expect(screen.getAllByText(/Creative Name/)[0]).toBeVisible();
+    expect(screen.getAllByText(/Container Set/)[0]).toBeVisible();
     expect(screen.getByText(/Do the thing/)).toBeVisible();
     expect(screen.queryByText(/unlocked/i)).toBeNull();
   });

diff --git a/...tures/achievements/components/UnlockableAchievementAvatar/UnlockableAchievementAvatar.tsx b/...tures/achievements/components/UnlockableAchievementAvatar/UnlockableAchievementAvatar.tsx
@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans } from 'react-i18next';
 
 import { AchievementAvatar } from '@/common/components/AchievementAvatar';
 import { GameAvatar } from '@/common/components/GameAvatar';
@@ -17,8 +17,6 @@ export const UnlockableAchievementAvatar: FC<UnlockableAchievementAvatarProps> =
   showGame = false,
   imageSize = 48,
 }) => {
-  const { t } = useTranslation();
-
   const badgeUrl =
     !achievement.unlockedAt && !achievement.unlockedHardcoreAt
       ? achievement.badgeLockedUrl
@@ -30,21 +28,26 @@ export const UnlockableAchievementAvatar: FC<UnlockableAchievementAvatarProps> =
         {...achievement}
         showHardcoreUnlockBorder={!!achievement.unlockedHardcoreAt}
         badgeUnlockedUrl={badgeUrl}
-        // TODO: showPointsInTitle={true}
         showLabel={false}
         size={imageSize}
       />
 
       <div>
         <div className="flex items-center gap-2">
-          <AchievementAvatar {...achievement} showImage={false} />
-
           {showGame && achievement.game ? (
-            <>
-              <span>{t('from')}</span>
-              <GameAvatar {...achievement.game} showImage={false} />
-            </>
-          ) : null}
+            <Trans
+              i18nKey="<1>{{achievementTitle}}</1> from <2>{{gameTitle}}</2>"
+              components={{
+                1: (
+                  <AchievementAvatar {...achievement} showImage={false} showPointsInTitle={true} />
+                ),
+                2: <GameAvatar {...achievement.game} showImage={false} />,
+              }}
+              values={{ achievementTitle: achievement.title, gameTitle: achievement.game.title }}
+            />
+          ) : (
+            <AchievementAvatar {...achievement} showImage={false} showPointsInTitle={true} />
+          )}
         </div>
 
         <span>{achievement.description}</span>