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 }
+  );
+
+  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,15 @@
 import { useNavigate } from "react-router-dom";
 import * as styles from "./hero.css";
 import { useEffect, useState } from "react";
-import { ShopDetails } from "@types";
+import { TrendingGame } from "@types";
-import {
-  buildGameDetailsPath,
-  getSteamLanguage,
-  steamUrlBuilder,
-} from "@renderer/helpers";
 import { useTranslation } from "react-i18next";
-
+import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
-const FEATURED_GAME_TITLE = "ELDEN RING";
+import { vars } from "@renderer/theme.css";
-const FEATURED_GAME_ID = "1245620";
 
 export function Hero() {
-  const [featuredGameDetails, setFeaturedGameDetails] =
+  const [featuredGameDetails, setFeaturedGameDetails] = useState<
-    useState<ShopDetails | null>(null);
+    TrendingGame[] | null
+  >(null);
   const [isLoading, setIsLoading] = useState(false);
 
   const { i18n } = useTranslation();
@@ -25,11 +20,7 @@ export function Hero() {
     setIsLoading(true);
 
     window.electron
-      .getGameShopDetails(
+      .getTrendingGames()
-        FEATURED_GAME_ID,
-        "steam",
-        getSteamLanguage(i18n.language)
-      )
       .then((result) => {
         setFeaturedGameDetails(result);
       })
@@ -38,41 +29,36 @@ export function Hero() {
       });
   }, [i18n.language]);
 
-  return (
+  if (isLoading) {
-    <button
+    return (
-      type="button"
+      <SkeletonTheme baseColor={vars.color.background} highlightColor="#444">
-      onClick={() =>
+        <Skeleton className={styles.hero} />
-        navigate(
+      </SkeletonTheme>
-          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}
-        />
 
-        <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)}
+            src={game.background}
-            width="250px"
+            alt={game.description}
-            alt={FEATURED_GAME_TITLE}
+            className={styles.heroMedia}
           />
 
-          {!isLoading && featuredGameDetails && (
+          <div className={styles.content}>
-            <p className={styles.description}>
+            <p className={styles.description}>{game.description}</p>
-              {featuredGameDetails?.short_description}
+          </div>
-            </p>
-          )}
         </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;
+}