feat(achievement): sync initial tab

app/Platform/Controllers/AchievementController.php

@@ -19,6 +19,7 @@
 use App\Platform\Data\AchievementShowPagePropsData;
 use App\Platform\Data\GameAchievementSetData;
 use App\Platform\Data\GameData;
+use App\Platform\Enums\AchievementPageTab;
 use App\Platform\Enums\AchievementSetType;
 use Illuminate\Http\Request;
 use Illuminate\Support\Collection;
@@ -67,6 +68,8 @@ public function show(Request $request, Achievement $achievement): InertiaRespons
 
         [$proximityAchievements, $promotedAchievementCount] = $this->buildProximityAchievements($achievement, $user);
 
+        $initialTab = AchievementPageTab::tryFrom($request->query('tab', '')) ?? AchievementPageTab::Comments;
+
         $subscriptionService = new SubscriptionService();
 
         $props = new AchievementShowPagePropsData(
@@ -108,6 +111,7 @@ public function show(Request $request, Achievement $achievement): InertiaRespons
                 : null,
             proximityAchievements: $proximityAchievements,
             promotedAchievementCount: $promotedAchievementCount,
+            initialTab: $initialTab,
         );
 
         return Inertia::render('achievement/[achievement]', $props);

app/Platform/Data/AchievementShowPagePropsData.php

@@ -6,6 +6,7 @@
 
 use App\Community\Data\CommentData;
 use App\Data\UserPermissionsData;
+use App\Platform\Enums\AchievementPageTab;
 use Illuminate\Support\Collection;
 use Spatie\LaravelData\Data;
 use Spatie\TypeScriptTransformer\Attributes\TypeScript;
@@ -27,6 +28,7 @@ public function __construct(
         public ?GameAchievementSetData $gameAchievementSet = null,
         public ?array $proximityAchievements = null,
         public int $promotedAchievementCount = 0,
+        public AchievementPageTab $initialTab = AchievementPageTab::Comments,
     ) {
     }
 }

app/Platform/Enums/AchievementPageTab.php

@@ -0,0 +1,16 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Platform\Enums;
+
+use Spatie\TypeScriptTransformer\Attributes\TypeScript;
+
+#[TypeScript]
+enum AchievementPageTab: string
+{
+    case Changelog = 'changelog';
+    case Comments = 'comments';
+    case Tips = 'tips';
+    case Unlocks = 'unlocks';
+}

resources/js/features/achievements/hooks/useAchievementShowTabs.ts

@@ -2,28 +2,29 @@ import { useCallback } from 'react';
 
 import { useShowPageTabs } from '@/common/hooks/useShowPageTabs';
 
-import type { AchievementShowTab } from '../models';
 import { currentTabAtom } from '../state/achievements.atoms';
 import { useAnimatedTabIndicator } from './useAnimatedTabIndicator';
 
-const tabValues: AchievementShowTab[] = ['comments', 'unlocks', 'changelog'];
+type AchievementTab = App.Platform.Enums.AchievementPageTab;
+
+const tabValues: AchievementTab[] = ['comments', 'unlocks', 'changelog'];
 
 export function useAchievementShowTabs() {
   const { currentTab, setCurrentTab } = useShowPageTabs(currentTabAtom, 'comments');
 
-  const initialIndex = tabValues.indexOf(currentTab as AchievementShowTab);
+  const initialIndex = tabValues.indexOf(currentTab);
 
   const { activeIndex, setActiveIndex, setHoveredIndex, ...animation } =
     useAnimatedTabIndicator(initialIndex);
 
   const handleValueChange = useCallback(
     (value: string) => {
-      const index = tabValues.indexOf(value as AchievementShowTab);
+      const index = tabValues.indexOf(value as AchievementTab);
       if (index !== -1) {
         setActiveIndex(index);
       }
 
-      setCurrentTab(value as AchievementShowTab);
+      setCurrentTab(value as AchievementTab);
     },
     [setActiveIndex, setCurrentTab],
   );

resources/js/features/achievements/models/index.ts

@@ -1,2 +1 @@
-export * from './achievement-show-tab.model';
 export * from './tab-config.model';

resources/js/features/achievements/models/tab-config.model.ts

@@ -1,8 +1,6 @@
 import type { ReactNode } from 'react';
 
-import type { AchievementShowTab } from './achievement-show-tab.model';
-
 export interface TabConfig {
-  value: AchievementShowTab;
+  value: App.Platform.Enums.AchievementPageTab;
   label: ReactNode;
 }

resources/js/features/achievements/state/achievements.atoms.ts

@@ -1,5 +1,3 @@
 import { atom } from 'jotai';
 
-import type { AchievementShowTab } from '../models';
-
-export const currentTabAtom = atom<AchievementShowTab>('comments');
+export const currentTabAtom = atom<App.Platform.Enums.AchievementPageTab>('comments');

resources/js/features/search/components/ForumCommentResultDisplay/ForumCommentResultDisplay.test.tsx

@@ -72,7 +72,10 @@ describe('Component: ForumCommentResultDisplay', () => {
 
   it('given the comment has no forum topic, does not display a topic section', () => {
     // ARRANGE
-    const forumComment = createForumTopicComment({ forumTopic: undefined });
+    const forumComment = createForumTopicComment({
+      forumTopic: undefined,
+      body: 'Some post text.',
+    });
 
     render(<ForumCommentResultDisplay forumComment={forumComment} />);
 
@@ -82,7 +85,7 @@ describe('Component: ForumCommentResultDisplay', () => {
 
   it('displays when the comment was posted', () => {
     // ARRANGE
-    const forumComment = createForumTopicComment();
+    const forumComment = createForumTopicComment({ body: 'Some post text.' });
 
     render(<ForumCommentResultDisplay forumComment={forumComment} />);
 

resources/js/pages/achievement/[achievement].tsx

@@ -1,10 +1,13 @@
+import { useHydrateAtoms } from 'jotai/utils';
+
 import { SEO } from '@/common/components/SEO';
 import { usePageProps } from '@/common/hooks/usePageProps';
 import { AppLayout } from '@/common/layouts/AppLayout';
 import type { AppPage } from '@/common/models';
 import { AchievementShowRoot } from '@/features/achievements/components/+show';
 import { AchievementShowSidebarRoot } from '@/features/achievements/components/+show-sidebar';
 import { useAchievementMetaDescription } from '@/features/achievements/hooks/useAchievementMetaDescription';
+import { currentTabAtom } from '@/features/achievements/state/achievements.atoms';
 import type { TranslatedString } from '@/types/i18next';
 
 // The server always provides these fields on this page, but the generated
@@ -18,7 +21,12 @@ type HydratedAchievement = App.Platform.Data.Achievement & {
 };
 
 const AchievementShow: AppPage = () => {
-  const { achievement } = usePageProps<App.Platform.Data.AchievementShowPageProps>();
+  const { achievement, initialTab } = usePageProps<App.Platform.Data.AchievementShowPageProps>();
+
+  useHydrateAtoms([
+    [currentTabAtom, initialTab],
+    //
+  ]);
 
   const hydratedAchievement = achievement as HydratedAchievement;
 

resources/js/types/generated.d.ts

@@ -667,6 +667,7 @@ declare namespace App.Platform.Data {
     gameAchievementSet: App.Platform.Data.GameAchievementSet | null;
     proximityAchievements: Array<App.Platform.Data.Achievement> | null;
     promotedAchievementCount: number;
+    initialTab: App.Platform.Enums.AchievementPageTab;
   };
   export type AggregateAchievementSetCredits = {
     achievementsAuthors: Array<App.Platform.Data.UserCredits>;
@@ -1212,6 +1213,7 @@ declare namespace App.Platform.Data {
 declare namespace App.Platform.Enums {
   export type UnlockMode = 0 | 1;
   export type AchievementAuthorTask = 'artwork' | 'design' | 'logic' | 'testing' | 'writing';
+  export type AchievementPageTab = 'changelog' | 'comments' | 'tips' | 'unlocks';
   export type AchievementSetAuthorTask = 'artwork' | 'banner';
   export type AchievementSetType =
     | 'core'