feat: save achievements cache

src/main/events/catalogue/get-game-achievements.ts

@@ -2,7 +2,7 @@ import type { GameShop } from "@types";
 
 import { registerEvent } from "../register-event";
 import { HydraApi } from "@main/services";
-import { gameRepository } from "@main/repository";
+import { gameAchievementRepository, gameRepository } from "@main/repository";
 import { GameAchievement } from "@main/entity";
 
 const getGameAchievements = async (
@@ -16,31 +16,60 @@ const getGameAchievements = async (
       achievements: true,
     },
   });
-  const gameAchievements = await HydraApi.get(
+
+  const cachedAchievements = game?.achievements?.achievements;
+
+  const apiAchievement = HydraApi.get(
     "/games/achievements",
     { objectId, shop },
     { needsAuth: false }
-  );
+  )
+    .then((achievements) => {
+      if (game) {
+        gameAchievementRepository.upsert(
+          {
+            game: { id: game.id },
+            achievements: JSON.stringify(achievements),
+          },
+          ["game"]
+        );
+      }
+
+      return achievements;
+    })
+    .catch(() => []);
+
+  const gameAchievements = cachedAchievements
+    ? JSON.parse(cachedAchievements)
+    : await apiAchievement;
 
   const unlockedAchievements = JSON.parse(
     game?.achievements?.unlockedAchievements || "[]"
   ) as { name: string; unlockTime: number }[];
 
-  return gameAchievements.map((achievement) => {
+  return gameAchievements
-    const unlockedAchiement = unlockedAchievements.find((localAchievement) => {
+    .map((achievement) => {
-      return localAchievement.name == achievement.name;
+      const unlockedAchiement = unlockedAchievements.find(
+        (localAchievement) => {
+          return localAchievement.name == achievement.name;
+        }
+      );
+
+      if (unlockedAchiement) {
+        return {
+          ...achievement,
+          unlocked: true,
+          unlockTime: unlockedAchiement.unlockTime * 1000,
+        };
+      }
+
+      return { ...achievement, unlocked: false, unlockTime: null };
+    })
+    .sort((a, b) => {
+      if (a.unlocked && !b.unlocked) return -1;
+      if (!a.unlocked && b.unlocked) return 1;
+      return b.unlockTime - a.unlockTime;
     });
-
-    if (unlockedAchiement) {
-      return {
-        ...achievement,
-        unlocked: true,
-        unlockTime: unlockedAchiement.unlockTime * 1000,
-      };
-    }
-
-    return { ...achievement, unlocked: false, unlockTime: null };
-  });
 };
 
 registerEvent("getGameAchievements", getGameAchievements);

src/main/services/achievements/services/save-all-local-steam-achivements.ts

@@ -48,7 +48,6 @@ export const saveAllLocalSteamAchivements = async () => {
       );
 
       console.log(achievementFile.filePath);
-      console.log(localAchievementFile);
 
       for (const a of Object.keys(localAchievementFile)) {
         // TODO: use checkUnlockedAchievements after refactoring it to be generic

src/renderer/src/hooks/use-date.ts

@@ -1,4 +1,4 @@
-import { formatDistance, subMilliseconds } from "date-fns";
+import { format, formatDistance, subMilliseconds } from "date-fns";
 import type { FormatDistanceOptions } from "date-fns";
 import {
   ptBR,
@@ -67,5 +67,10 @@ export function useDate() {
         return "";
       }
     },
+
+    format: (timestamp: number): string => {
+      const locale = getDateLocale();
+      return format(timestamp, locale == enUS ? "MM/dd/yyyy - HH:mm" : "dd/MM/yyyy - HH:mm");
+    },
   };
 }

src/renderer/src/pages/game-details/sidebar/sidebar.tsx

@@ -5,8 +5,9 @@ import { Button } from "@renderer/components";
 
 import * as styles from "./sidebar.css";
 import { gameDetailsContext } from "@renderer/context";
-import { useFormat } from "@renderer/hooks";
+import { useDate, useFormat } from "@renderer/hooks";
 import { DownloadIcon, PeopleIcon } from "@primer/octicons-react";
+import { SPACING_UNIT, vars } from "@renderer/theme.css";
 
 export function Sidebar() {
   const [_howLongToBeat, _setHowLongToBeat] = useState<{
@@ -21,6 +22,7 @@ export function Sidebar() {
     useContext(gameDetailsContext);
 
   const { t } = useTranslation("game_details");
+  const { format } = useDate();
 
   const { numberFormatter } = useFormat();
 
@@ -46,16 +48,42 @@ export function Sidebar() {
         isLoading={howLongToBeat.isLoading}
       /> */}
 
-      {achievements.map((achievement, index) => (
+      {achievements.length && (
-        <div key={index}>
+        <div
-          <img
+          style={{
-            src={achievement.unlocked ? achievement.icon : achievement.icongray}
+            display: "flex",
-          />
+            flexDirection: "column",
-          <p>{achievement.displayName}</p>
+            gap: `${SPACING_UNIT}px`,
-          {achievement.unlockTime &&
+            padding: `${SPACING_UNIT}px`,
-            new Date(achievement.unlockTime).toDateString()}
+          }}
+        >
+          {achievements.map((achievement, index) => (
+            <div
+              key={index}
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "center",
+                gap: `${SPACING_UNIT}px`,
+              }}
+              title={achievement.description}
+            >
+              <img
+                style={{
+                  height: "72px",
+                }}
+                src={
+                  achievement.unlocked ? achievement.icon : achievement.icongray
+                }
+              />
+              <div>
+                <p>{achievement.displayName}</p>
+                {achievement.unlockTime && format(achievement.unlockTime)}
+              </div>
+            </div>
+          ))}
         </div>
-      ))}
+      )}
 
       {stats && (
         <>