Merge pull request #949 from hydralauncher/feat/get-trending-games-from-api

feat: get trending games from api

src/main/events/catalogue/get-trending-games.ts

@@ -0,0 +1,22 @@
+import { registerEvent } from "../register-event";
+import { HydraApi } from "@main/services";
+import { userPreferencesRepository } from "@main/repository";
+import { TrendingGame } from "@types";
+
+const getTrendingGames = async (_event: Electron.IpcMainInvokeEvent) => {
+  const userPreferences = await userPreferencesRepository.findOne({
+    where: { id: 1 },
+  });
+
+  const language = userPreferences?.language || "en";
+
+  const trendingGames = await HydraApi.get<TrendingGame[]>(
+    "/games/trending",
+    { language },
+    { needsAuth: false }
+  ).catch(() => []);
+
+  return trendingGames;
+};
+
+registerEvent("getTrendingGames", getTrendingGames);

src/main/events/index.ts

@@ -8,6 +8,7 @@ import "./catalogue/get-how-long-to-beat";
 import "./catalogue/get-random-game";
 import "./catalogue/search-games";
 import "./catalogue/search-game-repacks";
+import "./catalogue/get-trending-games";
 import "./hardware/get-disk-free-space";
 import "./library/add-game-to-library";
 import "./library/create-game-shortcut";

src/preload/index.ts

@@ -44,6 +44,7 @@ contextBridge.exposeInMainWorld("electron", {
     ipcRenderer.invoke("getGames", take, prevCursor),
   searchGameRepacks: (query: string) =>
     ipcRenderer.invoke("searchGameRepacks", query),
+  getTrendingGames: () => ipcRenderer.invoke("getTrendingGames"),
 
   /* User preferences */
   getUserPreferences: () => ipcRenderer.invoke("getUserPreferences"),

src/renderer/src/components/hero/hero.tsx

@@ -1,20 +1,14 @@
 import { useNavigate } from "react-router-dom";
 import * as styles from "./hero.css";
 import { useEffect, useState } from "react";
-import { ShopDetails } from "@types";
-import {
-  buildGameDetailsPath,
-  getSteamLanguage,
-  steamUrlBuilder,
-} from "@renderer/helpers";
+import { TrendingGame } from "@types";
 import { useTranslation } from "react-i18next";
-
-const FEATURED_GAME_TITLE = "ELDEN RING";
-const FEATURED_GAME_ID = "1245620";
+import Skeleton from "react-loading-skeleton";
 
 export function Hero() {
-  const [featuredGameDetails, setFeaturedGameDetails] =
-    useState<ShopDetails | null>(null);
+  const [featuredGameDetails, setFeaturedGameDetails] = useState<
+    TrendingGame[] | null
+  >(null);
   const [isLoading, setIsLoading] = useState(false);
 
   const { i18n } = useTranslation();
@@ -25,11 +19,7 @@ export function Hero() {
     setIsLoading(true);
 
     window.electron
-      .getGameShopDetails(
-        FEATURED_GAME_ID,
-        "steam",
-        getSteamLanguage(i18n.language)
-      )
+      .getTrendingGames()
       .then((result) => {
         setFeaturedGameDetails(result);
       })
@@ -38,41 +28,32 @@ export function Hero() {
       });
   }, [i18n.language]);
 
-  return (
-    <button
-      type="button"
-      onClick={() =>
-        navigate(
-          buildGameDetailsPath({
-            title: FEATURED_GAME_TITLE,
-            objectID: FEATURED_GAME_ID,
-            shop: "steam",
-          })
-        )
-      }
-      className={styles.hero}
-    >
-      <div className={styles.backdrop}>
-        <img
-          src="https://cdn2.steamgriddb.com/hero/95eb39b541856d43649b208b65b6ca9f.jpg"
-          alt={FEATURED_GAME_TITLE}
-          className={styles.heroMedia}
-        />
+  if (isLoading) {
+    return <Skeleton className={styles.hero} />;
+  }
 
-        <div className={styles.content}>
+  if (featuredGameDetails?.length) {
+    return featuredGameDetails.map((game, index) => (
+      <button
+        type="button"
+        onClick={() => navigate(game.uri)}
+        className={styles.hero}
+        key={index}
+      >
+        <div className={styles.backdrop}>
           <img
-            src={steamUrlBuilder.logo(FEATURED_GAME_ID)}
-            width="250px"
-            alt={FEATURED_GAME_TITLE}
+            src={game.background}
+            alt={game.description}
+            className={styles.heroMedia}
           />
 
-          {!isLoading && featuredGameDetails && (
-            <p className={styles.description}>
-              {featuredGameDetails?.short_description}
-            </p>
-          )}
+          <div className={styles.content}>
+            <p className={styles.description}>{game.description}</p>
+          </div>
         </div>
-      </div>
-    </button>
-  );
+      </button>
+    ));
+  }
+
+  return null;
 }

src/renderer/src/declaration.d.ts

@@ -18,6 +18,7 @@ import type {
   FriendRequestAction,
   UserFriends,
   UserBlocks,
+  TrendingGame,
 } from "@types";
 import type { DiskSpace } from "check-disk-space";
 
@@ -56,6 +57,7 @@ declare global {
       prevCursor?: number
     ) => Promise<{ results: CatalogueEntry[]; cursor: number }>;
     searchGameRepacks: (query: string) => Promise<GameRepack[]>;
+    getTrendingGames: () => Promise<TrendingGame[]>;
 
     /* Library */
     addGameToLibrary: (

src/types/index.ts

@@ -339,3 +339,9 @@ export interface DownloadSource {
   createdAt: Date;
   updatedAt: Date;
 }
+
+export interface TrendingGame {
+  uri: string;
+  description: string;
+  background: string;
+}