fix: changing get random game to work with shop block

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

@@ -1,9 +1,10 @@
 import { shuffle } from "lodash-es";
 
-import { Steam250Game, getSteam250List } from "@main/services";
+import { getSteam250List } from "@main/services";
 
 import { registerEvent } from "../register-event";
 import { searchGames, searchRepacks } from "../helpers/search-games";
+import type { Steam250Game } from "@types";
 
 const state = { games: Array<Steam250Game>(), index: 0 };
 
@@ -25,8 +26,6 @@ const getRandomGame = async (_event: Electron.IpcMainInvokeEvent) => {
     return "";
   }
 
-  const resultObjectId = state.games[state.index].objectID;
-
   state.index += 1;
 
   if (state.index == state.games.length) {
@@ -34,7 +33,7 @@ const getRandomGame = async (_event: Electron.IpcMainInvokeEvent) => {
     state.games = shuffle(state.games);
   }
 
-  return resultObjectId;
+  return state.games[state.index];
 };
 
 registerEvent(getRandomGame, {

src/main/services/steam-250.ts

@@ -1,10 +1,7 @@
 import axios from "axios";
 import { JSDOM } from "jsdom";
 
-export interface Steam250Game {
-  title: string;
-  objectID: string;
-}
+import type { Steam250Game } from "@types";
 
 export const requestSteam250 = async (path: string) => {
   return axios

src/renderer/src/declaration.d.ts

@@ -6,6 +6,7 @@ import type {
   GameShop,
   HowLongToBeatCategory,
   ShopDetails,
+  Steam250Game,
   TorrentProgress,
   UserPreferences,
 } from "@types";
@@ -41,7 +42,7 @@ declare global {
       shop: GameShop,
       language: string
     ) => Promise<ShopDetails | null>;
-    getRandomGame: () => Promise<string>;
+    getRandomGame: () => Promise<Steam250Game>;
     getHowLongToBeat: (
       objectID: string,
       shop: GameShop,

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

@@ -3,11 +3,21 @@ import { average } from "color.js";
 import { useCallback, useEffect, useState } from "react";
 import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 
-import type { Game, GameRepack, GameShop, ShopDetails } from "@types";
+import {
+  Steam250Game,
+  type Game,
+  type GameRepack,
+  type GameShop,
+  type ShopDetails,
+} from "@types";
 
 import { Button } from "@renderer/components";
 import { setHeaderTitle } from "@renderer/features";
-import { getSteamLanguage, steamUrlBuilder } from "@renderer/helpers";
+import {
+  buildGameDetailsPath,
+  getSteamLanguage,
+  steamUrlBuilder,
+} from "@renderer/helpers";
 import { useAppDispatch, useDownload } from "@renderer/hooks";
 
 import starsAnimation from "@renderer/assets/lottie/stars.json";
@@ -35,7 +45,7 @@ export function GameDetails() {
   const { objectID, shop } = useParams();
 
   const [isLoading, setIsLoading] = useState(false);
-  const [isLoadingRandomGame, setIsLoadingRandomGame] = useState(false);
+  const [randomGame, setRandomGame] = useState<Steam250Game | null>(null);
   const [color, setColor] = useState({ dark: "", light: "" });
   const [gameDetails, setGameDetails] = useState<ShopDetails | null>(null);
   const [repacks, setRepacks] = useState<GameRepack[]>([]);
@@ -87,6 +97,10 @@ export function GameDetails() {
     setIsGamePlaying(false);
     dispatch(setHeaderTitle(title));
 
+    window.electron.getRandomGame().then((randomGame) => {
+      setRandomGame(randomGame);
+    });
+
     Promise.all([
       window.electron.getGameShopDetails(
         objectID!,
@@ -98,7 +112,6 @@ export function GameDetails() {
       .then(([appDetails, repacks]) => {
         if (appDetails) setGameDetails(appDetails);
         setRepacks(repacks);
-        setIsLoadingRandomGame(false);
       })
       .finally(() => {
         setIsLoading(false);
@@ -163,15 +176,15 @@ export function GameDetails() {
     });
   };
 
-  const handleRandomizerClick = async () => {
-    setIsLoadingRandomGame(true);
-    const randomGameObjectID = await window.electron.getRandomGame();
-
-    const searchParams = new URLSearchParams({
-      fromRandomizer: "1",
-    });
-
-    navigate(`/game/steam/${randomGameObjectID}?${searchParams.toString()}`);
+  const handleRandomizerClick = () => {
+    if (randomGame) {
+      navigate(
+        buildGameDetailsPath(
+          { ...randomGame, shop: "steam" },
+          { fromRandomizer: "1" }
+        )
+      );
+    }
   };
 
   return (
@@ -254,7 +267,7 @@ export function GameDetails() {
           className={styles.randomizerButton}
           onClick={handleRandomizerClick}
           theme="outline"
-          disabled={isLoadingRandomGame}
+          disabled={!randomGame}
         >
           <div style={{ width: 16, height: 16, position: "relative" }}>
             <Lottie

src/renderer/src/pages/home/home.tsx

@@ -1,11 +1,15 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useSearchParams } from "react-router-dom";
 
 import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
 
 import { Button, GameCard, Hero } from "@renderer/components";
-import type { CatalogueCategory, CatalogueEntry } from "@types";
+import {
+  Steam250Game,
+  type CatalogueCategory,
+  type CatalogueEntry,
+} from "@types";
 
 import starsAnimation from "@renderer/assets/lottie/stars.json";
 
@@ -21,8 +25,7 @@ export function Home() {
   const navigate = useNavigate();
 
   const [isLoading, setIsLoading] = useState(false);
-  const [isLoadingRandomGame, setIsLoadingRandomGame] = useState(false);
-  const randomGameObjectID = useRef<string | null>(null);
+  const [randomGame, setRandomGame] = useState<Steam250Game | null>(null);
 
   const [searchParams] = useSearchParams();
 
@@ -57,24 +60,22 @@ export function Home() {
   };
 
   const getRandomGame = useCallback(() => {
-    setIsLoadingRandomGame(true);
-
-    window.electron.getRandomGame().then((objectID) => {
-      if (objectID) {
-        randomGameObjectID.current = objectID;
-        setIsLoadingRandomGame(false);
-      }
+    window.electron.getRandomGame().then((game) => {
+      if (game) setRandomGame(game);
     });
   }, []);
 
   const handleRandomizerClick = () => {
-    const searchParams = new URLSearchParams({
-      fromRandomizer: "1",
-    });
-
-    navigate(
-      `/game/steam/${randomGameObjectID.current}?${searchParams.toString()}`
-    );
+    if (randomGame) {
+      navigate(
+        buildGameDetailsPath(
+          { ...randomGame, shop: "steam" },
+          {
+            fromRandomizer: "1",
+          }
+        )
+      );
+    }
   };
 
   useEffect(() => {
@@ -106,7 +107,7 @@ export function Home() {
           <Button
             onClick={handleRandomizerClick}
             theme="outline"
-            disabled={isLoadingRandomGame}
+            disabled={!randomGame}
           >
             <div style={{ width: 16, height: 16, position: "relative" }}>
               <Lottie

src/types/index.ts

@@ -133,3 +133,8 @@ export interface HowLongToBeatCategory {
   duration: string;
   accuracy: string;
 }
+
+export interface Steam250Game {
+  title: string;
+  objectID: string;
+}