feat: refactor component

src/renderer/src/pages/achievements/achievement-list.tsx

@@ -0,0 +1,40 @@
+import { useDate } from "@renderer/hooks";
+import type { UserAchievement } from "@types";
+import { useTranslation } from "react-i18next";
+import * as styles from "./achievements.css";
+
+interface AchievementListProps {
+  achievements: UserAchievement[];
+}
+
+export function AchievementList({ achievements }: AchievementListProps) {
+  const { t } = useTranslation("achievement");
+  const { formatDateTime } = useDate();
+
+  return (
+    <ul className={styles.list}>
+      {achievements.map((achievement, index) => (
+        <li key={index} className={styles.listItem} style={{ display: "flex" }}>
+          <img
+            className={styles.listItemImage({
+              unlocked: achievement.unlocked,
+            })}
+            src={achievement.icon}
+            alt={achievement.displayName}
+            loading="lazy"
+          />
+          <div style={{ flex: 1 }}>
+            <h4>{achievement.displayName}</h4>
+            <p>{achievement.description}</p>
+          </div>
+          {achievement.unlockTime && (
+            <div style={{ whiteSpace: "nowrap" }}>
+              <small>{t("unlocked_at")}</small>
+              <p>{formatDateTime(achievement.unlockTime)}</p>
+            </div>
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+}

src/renderer/src/pages/achievements/achievements-content.tsx

@@ -1,9 +1,8 @@
 import { setHeaderTitle } from "@renderer/features";
-import { useAppDispatch, useDate, useUserDetails } from "@renderer/hooks";
+import { useAppDispatch, useUserDetails } from "@renderer/hooks";
 import { steamUrlBuilder } from "@shared";
 import { useContext, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import * as styles from "./achievements.css";
 import {
   buildGameDetailsPath,
   formatDownloadProgress,
@@ -11,11 +10,13 @@ import {
 import { LockIcon, PersonIcon, TrophyIcon } from "@primer/octicons-react";
 import { SPACING_UNIT, vars } from "@renderer/theme.css";
 import { gameDetailsContext } from "@renderer/context";
-import type { ComparedAchievements, UserAchievement } from "@types";
+import type { ComparedAchievements } from "@types";
 import { average } from "color.js";
 import Color from "color";
 import { Link } from "@renderer/components";
 import { ComparedAchievementList } from "./compared-achievement-list";
+import * as styles from "./achievements.css";
+import { AchievementList } from "./achievement-list";
 
 interface UserInfo {
   id: string;
@@ -30,10 +31,6 @@ interface AchievementsContentProps {
   comparedAchievements: ComparedAchievements | null;
 }
 
-interface AchievementListProps {
-  achievements: UserAchievement[];
-}
-
 interface AchievementSummaryProps {
   user: UserInfo;
   isComparison?: boolean;
@@ -171,38 +168,6 @@ function AchievementSummary({ user, isComparison }: AchievementSummaryProps) {
   );
 }
 
-function AchievementList({ achievements }: AchievementListProps) {
-  const { t } = useTranslation("achievement");
-  const { formatDateTime } = useDate();
-
-  return (
-    <ul className={styles.list}>
-      {achievements.map((achievement, index) => (
-        <li key={index} className={styles.listItem} style={{ display: "flex" }}>
-          <img
-            className={styles.listItemImage({
-              unlocked: achievement.unlocked,
-            })}
-            src={achievement.icon}
-            alt={achievement.displayName}
-            loading="lazy"
-          />
-          <div style={{ flex: 1 }}>
-            <h4>{achievement.displayName}</h4>
-            <p>{achievement.description}</p>
-          </div>
-          {achievement.unlockTime && (
-            <div style={{ whiteSpace: "nowrap" }}>
-              <small>{t("unlocked_at")}</small>
-              <p>{formatDateTime(achievement.unlockTime)}</p>
-            </div>
-          )}
-        </li>
-      ))}
-    </ul>
-  );
-}
-
 export function AchievementsContent({
   otherUser,
   comparedAchievements,

src/types/index.ts

@@ -35,6 +35,7 @@ export interface AchievementData {
   icon: string;
   icongray: string;
   hidden: boolean;
+  points?: number;
 }
 
 export interface UserAchievement {