Merge pull request #34 from hydralauncher/feat/adding-cache-for-how-l…

…ong-to-beat

feat: adding cache for howlongtobeat

package.json

@@ -44,7 +44,6 @@
     "@typescript-eslint/parser": "^7.3.1",
     "@vanilla-extract/webpack-plugin": "^2.3.7",
     "@vercel/webpack-asset-relocator-loader": "1.7.3",
-    "@vitejs/plugin-react-swc": "^3.6.0",
     "css-loader": "^6.0.0",
     "dotenv-webpack": "^8.1.0",
     "electron": "29.1.4",
@@ -58,11 +57,8 @@
     "style-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "ts-node": "^10.0.0",
-    "tsconfig-paths": "^4.2.0",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
-    "typescript": "^5.4.3",
-    "vite-plugin-svgr": "^4.2.0",
-    "vite-tsconfig-paths": "^4.3.2"
+    "typescript": "^5.4.3"
   },
   "keywords": [],
   "license": "MIT",
@@ -73,7 +69,6 @@
     "@reduxjs/toolkit": "^2.2.2",
     "@vanilla-extract/css": "^1.14.1",
     "@vanilla-extract/recipes": "^0.5.2",
-    "@vanilla-extract/vite-plugin": "^4.0.6",
     "axios": "^1.6.8",
     "check-disk-space": "^3.4.0",
     "classnames": "^2.5.1",

src/locales/en/translation.json

@@ -42,7 +42,7 @@
     "pause": "Pause",
     "cancel": "Cancel",
     "remove": "Remove",
-    "remove_from_list": "Remove from list",
+    "remove_from_list": "Remove",
     "space_left_on_disk": "{{space}} left on disk",
     "eta": "Conclusion {{eta}}",
     "downloading_metadata": "Downloading metadata…",
@@ -66,7 +66,8 @@
     "add_to_library": "Add to library",
     "remove_from_library": "Remove from library",
     "delete_modal_title": "Are you sure?",
-    "delete_modal_description": "This will remove all game files from your system"
+    "delete_modal_description": "This will remove all game files from your system",
+    "no_downloads": "No downloads available"
   },
   "activation": {
     "title": "Activate Hydra",
@@ -94,7 +95,8 @@
     "checking_files": "Checking files…",
     "starting_download": "Starting download…",
     "deleting": "Deleting files…",
-    "delete": "Remove all files"
+    "delete": "Remove all files",
+    "remove_from_list": "Remove"
   },
   "settings": {
     "downloads_path": "Downloads path",

src/locales/es/translation.json

@@ -42,7 +42,7 @@
     "pause": "Pausa",
     "cancel": "Cancelar",
     "remove": "Eliminar",
-    "remove_from_list": "Quitar de la lista",
+    "remove_from_list": "Quitar",
     "space_left_on_disk": "{{space}} restantes en el disco",
     "eta": "Finalizando {{eta}}",
     "downloading_metadata": "Descargando metadatos…",
@@ -66,7 +66,8 @@
     "delete_modal_title": "¿Estás seguro de esto?",
     "delete_modal_description": "Esto eliminará todos los archivos del juego de tu sistema",
     "add_to_library": "Agregar a la biblioteca",
-    "remove_from_library": "Eliminar de la biblioteca"
+    "remove_from_library": "Eliminar de la biblioteca",
+    "no_downloads": "No hay descargas disponibles"
   },
   "activation": {
     "title": "Activar Hydra",
@@ -94,7 +95,8 @@
     "checking_files": "Verificando archivos…",
     "starting_download": "Iniciando descarga…",
     "deleting": "Eliminando archivos…",
-    "delete": "Eliminar todos los archivos"
+    "delete": "Eliminar todos los archivos",
+    "remove_from_list": "Eliminar"
   },
   "settings": {
     "downloads_path": "Ruta de descarga",

src/locales/fr/translation.json

@@ -42,7 +42,7 @@
     "pause": "Pause",
     "cancel": "Annuler",
     "remove": "Supprimer",
-    "remove_from_list": "Retirer de la liste",
+    "remove_from_list": "Retirer",
     "space_left_on_disk": "{{space}} restant sur le disque",
     "eta": "Conclusion dans {{eta}}",
     "downloading_metadata": "Téléchargement des métadonnées en cours…",
@@ -66,7 +66,8 @@
     "add_to_library": "Ajouter à la bibliothèque",
     "delete_modal_title": "Êtes-vous sûr de cela?",
     "delete_modal_description": "Cela effacera tous les fichiers de jeu de votre système",
-    "remove_from_library": "Supprimer de la bibliothèque"
+    "remove_from_library": "Supprimer de la bibliothèque",
+    "no_downloads": "Aucun téléchargement disponible"
   },
   "activation": {
     "title": "Activer Hydra",
@@ -94,7 +95,8 @@
     "checking_files": "Vérification des fichiers…",
     "starting_download": "Démarrage du téléchargement…",
     "deleting": "Suppression des fichiers…",
-    "delete": "Supprimer tous les fichiers"
+    "delete": "Supprimer tous les fichiers",
+    "remove_from_list": "Retirer"
   },
   "settings": {
     "downloads_path": "Chemin des téléchargements",

src/locales/pt/translation.json

@@ -42,7 +42,7 @@
     "pause": "Pausar",
     "cancel": "Cancelar",
     "remove": "Remover",
-    "remove_from_list": "Remover da lista",
+    "remove_from_list": "Remover",
     "space_left_on_disk": "{{space}} livres em disco",
     "eta": "Conclusão {{eta}}",
     "downloading_metadata": "Baixando metadados…",
@@ -66,7 +66,8 @@
     "add_to_library": "Adicionar à biblioteca",
     "remove_from_library": "Remover da biblioteca",
     "delete_modal_title": "Tem certeza disso?",
-    "delete_modal_description": "Isso apagará todos os arquivos do jogo do seu sistema"
+    "delete_modal_description": "Isso apagará todos os arquivos do jogo do seu sistema",
+    "no_downloads": "Nenhum download disponível"
   },
   "activation": {
     "title": "Ativação",
@@ -94,7 +95,8 @@
     "checking_files": "Verificando arquivos…",
     "starting_download": "Iniciando download…",
     "deleting": "Removendo arquivos…",
-    "delete": "Apagar arquivos"
+    "delete": "Apagar arquivos",
+    "remove_from_list": "Remover"
   },
   "settings": {
     "downloads_path": "Diretório dos downloads",

src/main/entity/game-shop-cache.entity.ts

@@ -15,9 +15,12 @@ export class GameShopCache {
   @Column("text")
   shop: GameShop;
 
-  @Column("text")
+  @Column("text", { nullable: true })
   serializedData: string;
 
+  @Column("text", { nullable: true })
+  howLongToBeatSerializedData: string;
+
   @Column("text", { nullable: true })
   language: string;
 

src/main/events/catalogue/get-game-shop-details.ts

@@ -39,14 +39,14 @@ const getGameShopDetails = async (
       return [appDetails, localizedAppDetails];
     });
 
-    if (cachedData) {
-      const cachedDetails = JSON.parse(
-        cachedData.serializedData
-      ) as SteamAppDetails;
+    const cachedGame = cachedData?.serializedData
+      ? (JSON.parse(cachedData?.serializedData) as SteamAppDetails)
+      : null;
 
+    if (cachedGame) {
       return {
-        ...cachedDetails,
-        repacks: searchRepacks(cachedDetails.name),
+        ...cachedGame,
+        repacks: searchRepacks(cachedGame.name),
         objectID,
       } as ShopDetails;
     }

src/main/events/catalogue/get-how-long-to-beat.ts

@@ -2,21 +2,44 @@ import type { GameShop, HowLongToBeatCategory } from "@types";
 import { getHowLongToBeatGame, searchHowLongToBeat } from "@main/services";
 
 import { registerEvent } from "../register-event";
+import { gameShopCacheRepository } from "@main/repository";
 
 const getHowLongToBeat = async (
   _event: Electron.IpcMainInvokeEvent,
   objectID: string,
-  _shop: GameShop,
+  shop: GameShop,
   title: string
 ): Promise<HowLongToBeatCategory[] | null> => {
-  const response = await searchHowLongToBeat(title);
-  const game = response.data.find(
-    (game) => game.profile_steam === Number(objectID)
-  );
-
-  if (!game) return null;
-  const howLongToBeat = await getHowLongToBeatGame(String(game.game_id));
-  return howLongToBeat;
+  const searchHowLongToBeatPromise = searchHowLongToBeat(title);
+
+  const gameShopCache = await gameShopCacheRepository.findOne({
+    where: { objectID, shop },
+  });
+
+  const howLongToBeatCachedData = gameShopCache?.howLongToBeatSerializedData
+    ? JSON.parse(gameShopCache?.howLongToBeatSerializedData)
+    : null;
+  if (howLongToBeatCachedData) return howLongToBeatCachedData;
+
+  return searchHowLongToBeatPromise.then(async (response) => {
+    const game = response.data.find(
+      (game) => game.profile_steam === Number(objectID)
+    );
+
+    if (!game) return null;
+    const howLongToBeat = await getHowLongToBeatGame(String(game.game_id));
+
+    gameShopCacheRepository.upsert(
+      {
+        objectID,
+        shop,
+        howLongToBeatSerializedData: JSON.stringify(howLongToBeat),
+      },
+      ["objectID"]
+    );
+
+    return howLongToBeat;
+  });
 };
 
 registerEvent(getHowLongToBeat, {

src/renderer/app.tsx

@@ -91,7 +91,7 @@ export function App() {
 
   useEffect(() => {
     if (contentRef.current) contentRef.current.scrollTop = 0;
-  }, [location.pathname]);
+  }, [location.pathname, location.search]);
 
   return (
     <>

src/renderer/components/hero/hero.css.ts

@@ -27,6 +27,12 @@ export const heroMedia = style({
   zIndex: "-1",
   width: "100%",
   height: "100%",
+  transition: "all ease 0.2s",
+  selectors: {
+    [`${hero}:hover &`]: {
+      transform: "scale(1.05)",
+    },
+  },
 });
 
 export const backdrop = style({

src/renderer/pages/downloads/downloads.tsx

@@ -7,7 +7,7 @@ import { formatDownloadProgress, steamUrlBuilder } from "@renderer/helpers";
 import { useDownload, useLibrary } from "@renderer/hooks";
 import type { Game } from "@types";
 
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { BinaryNotFoundModal } from "../shared-modals/binary-not-found-modal";
 import * as styles from "./downloads.css";
 
@@ -34,10 +34,14 @@ export function Downloads() {
     isGameDeleting,
   } = useDownload();
 
-  useEffect(() => {
-    setFilteredLibrary(library);
+  const libraryWithDownloadedGamesOnly = useMemo(() => {
+    return library.filter((game) => game.status);
   }, [library]);
 
+  useEffect(() => {
+    setFilteredLibrary(libraryWithDownloadedGamesOnly);
+  }, [libraryWithDownloadedGamesOnly]);
+
   const openGame = (gameId: number) =>
     window.electron.openGame(gameId).then((isBinaryInPath) => {
       if (!isBinaryInPath) setShowBinaryNotFoundModal(true);
@@ -182,6 +186,7 @@ export function Downloads() {
         >
           {t("download_again")}
         </Button>
+
         <Button
           onClick={() => removeGame(game.id)}
           theme="outline"
@@ -195,7 +200,7 @@ export function Downloads() {
 
   const handleFilter: React.ChangeEventHandler<HTMLInputElement> = (event) => {
     setFilteredLibrary(
-      library.filter((game) =>
+      libraryWithDownloadedGamesOnly.filter((game) =>
         game.title
           .toLowerCase()
           .includes(event.target.value.toLocaleLowerCase())

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

@@ -18,15 +18,6 @@ export function GameDetailsSkeleton() {
           <Skeleton width={155} />
           <Skeleton width={135} />
         </section>
-
-        <div className={styles.heroFooterButtonsSkeleton}>
-          <Button theme="outline" disabled>
-            {t("add_to_library")}
-          </Button>
-          <Button theme="outline" disabled>
-            {t("open_download_options")}
-          </Button>
-        </div>
       </div>
       <div className={styles.descriptionContainer}>
         <div className={styles.descriptionContent}>

src/renderer/pages/game-details/game-details.css.ts

@@ -34,12 +34,6 @@ export const heroBackdrop = style({
   justifyContent: "space-between",
 });
 
-export const heroFooterButtonsSkeleton = style({
-  display: "flex",
-  flexDirection: "row",
-  gap: `${SPACING_UNIT}px`,
-});
-
 export const heroImage = style({
   width: "100%",
   height: "100%",