diff --git a/src/renderer/src/hooks/use-library.ts b/src/renderer/src/hooks/use-library.ts index 0edd29ba..f7310df0 100644 --- a/src/renderer/src/hooks/use-library.ts +++ b/src/renderer/src/hooks/use-library.ts @@ -7,25 +7,9 @@ export function useLibrary() { const library = useAppSelector((state) => state.library.value); const updateLibrary = useCallback(async () => { - return window.electron.getLibrary().then(async (updatedLibrary) => { - const libraryWithAchievements = await Promise.all( - updatedLibrary.map(async (game) => { - const unlockedAchievements = - await window.electron.getUnlockedAchievements( - game.objectId, - game.shop - ); - - return { - ...game, - unlockedAchievementCount: - game.unlockedAchievementCount || unlockedAchievements.length, - }; - }) - ); - - dispatch(setLibrary(libraryWithAchievements)); - }); + return window.electron + .getLibrary() + .then((updatedLibrary) => dispatch(setLibrary(updatedLibrary))); }, [dispatch]); return { library, updateLibrary }; diff --git a/src/renderer/src/pages/library/library-game-card-large.tsx b/src/renderer/src/pages/library/library-game-card-large.tsx index 292290ca..9aba4b08 100644 --- a/src/renderer/src/pages/library/library-game-card-large.tsx +++ b/src/renderer/src/pages/library/library-game-card-large.tsx @@ -1,7 +1,7 @@ import { LibraryGame } from "@types"; import { useGameCard } from "@renderer/hooks"; import { ClockIcon, AlertFillIcon, TrophyIcon } from "@primer/octicons-react"; -import { memo, useMemo } from "react"; +import { memo, useEffect, useMemo, useState } from "react"; import "./library-game-card-large.scss"; interface LibraryGameCardLargeProps { @@ -48,6 +48,20 @@ export const LibraryGameCardLarge = memo(function LibraryGameCardLarge({ ] ); + const [unlockedAchievementsCount, setUnlockedAchievementsCount] = useState( + game.unlockedAchievementCount ?? 0 + ); + + useEffect(() => { + if (game.unlockedAchievementCount) return; + + window.electron + .getUnlockedAchievements(game.objectId, game.shop) + .then((achievements) => { + setUnlockedAchievementsCount(achievements.length); + }); + }, [game]); + const backgroundStyle = useMemo( () => backgroundImage ? { backgroundImage: `url(${backgroundImage})` } : {}, @@ -56,9 +70,9 @@ export const LibraryGameCardLarge = memo(function LibraryGameCardLarge({ const achievementBarStyle = useMemo( () => ({ - width: `${((game.unlockedAchievementCount ?? 0) / (game.achievementCount ?? 1)) * 100}%`, + width: `${(unlockedAchievementsCount / (game.achievementCount ?? 1)) * 100}%`, }), - [game.unlockedAchievementCount, game.achievementCount] + [unlockedAchievementsCount, game.achievementCount] ); const logoImage = game.customLogoImageUrl ?? game.logoImageUrl; @@ -116,14 +130,12 @@ export const LibraryGameCardLarge = memo(function LibraryGameCardLarge({ className="library-game-card-large__achievement-trophy" /> - {game.unlockedAchievementCount ?? 0} /{" "} - {game.achievementCount ?? 0} + {unlockedAchievementsCount} / {game.achievementCount ?? 0} {Math.round( - ((game.unlockedAchievementCount ?? 0) / - (game.achievementCount ?? 1)) * + (unlockedAchievementsCount / (game.achievementCount ?? 1)) * 100 )} %