🆙 Init V3

src/components/achievements/AchievementCategoryView.tsx

@@ -0,0 +1,42 @@
+import { FC, useEffect } from 'react';
+import { AchievementCategory } from '../../api';
+import { Column } from '../../common';
+import { useAchievements } from '../../hooks';
+import { AchievementDetailsView } from './AchievementDetailsView';
+import { AchievementListView } from './achievement-list';
+
+interface AchievementCategoryViewProps {
+    category: AchievementCategory;
+}
+
+export const AchievementCategoryView: FC<AchievementCategoryViewProps> = (
+    props,
+) =>
+{
+    const { category = null } = props;
+    const { selectedAchievement = null, setSelectedAchievementId = null } =
+        useAchievements();
+
+    useEffect(() =>
+    {
+        if(!category) return;
+
+        if(!selectedAchievement)
+        {
+            setSelectedAchievementId(
+                category?.achievements?.[0]?.achievementId,
+            );
+        }
+    }, [category, selectedAchievement, setSelectedAchievementId]);
+
+    if(!category) return null;
+
+    return (
+        <Column fullHeight justifyContent="between">
+            <AchievementListView achievements={category.achievements} />
+            {!!selectedAchievement && (
+                <AchievementDetailsView achievement={selectedAchievement} />
+            )}
+        </Column>
+    );
+};