feat: change diskFreeSpace from rapacks modal to select folder modal description

src/locales/en/translation.json

@@ -79,7 +79,7 @@
     "close": "Close",
     "playing_now": "Playing now",
     "change": "Change",
-    "select_folder_description": "Select the folder where the game will be installed",
+    "repacks_modal_description": "Choose the repack you want to download",
     "downloads_path": "Downloads path",
     "select_folder_hint": "To change the default folder, access the",
     "hydra_settings": "Hydra settings",

src/locales/pt/translation.json

@@ -75,7 +75,7 @@
     "deleting": "Excluindo instalador…",
     "playing_now": "Jogando agora",
     "change": "Mudar",
-    "select_folder_description": "Selecione a pasta em que o jogo será baixado",
+    "repacks_modal_description": "Escolha o repack do jogo que deseja baixar",
     "downloads_path": "Diretório do download",
     "select_folder_hint": "Para trocar a pasta padrão, acesse as ",
     "hydra_settings": "Configurações do Hydra",

src/renderer/declaration.d.ts

@@ -76,7 +76,7 @@ declare global {
     ) => Promise<void>;
 
     /* Hardware */
-    getDiskFreeSpace: () => Promise<DiskSpace>;
+    getDiskFreeSpace: (path: string) => Promise<DiskSpace>;
 
     /* Misc */
     getOrCacheImage: (url: string) => Promise<string>;

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

@@ -19,15 +19,15 @@ import { useAppDispatch, useDownload } from "@renderer/hooks";
 import starsAnimation from "@renderer/assets/lottie/stars.json";
 
 import { vars } from "@renderer/theme.css";
+import Lottie from "lottie-react";
 import { useTranslation } from "react-i18next";
 import { SkeletonTheme } from "react-loading-skeleton";
+import { DescriptionHeader } from "./description-header";
 import { GameDetailsSkeleton } from "./game-details-skeleton";
 import * as styles from "./game-details.css";
 import { HeroPanel } from "./hero-panel";
 import { HowLongToBeatSection } from "./how-long-to-beat-section";
 import { RepacksModal } from "./repacks-modal";
-import Lottie from "lottie-react";
-import { DescriptionHeader } from "./description-header";
 
 export function GameDetails() {
   const { objectID, shop } = useParams();

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

@@ -6,11 +6,9 @@ import type { GameRepack, ShopDetails } from "@types";
 
 import * as styles from "./repacks-modal.css";
 
-import type { DiskSpace } from "check-disk-space";
-import { format } from "date-fns";
-import { SPACING_UNIT } from "@renderer/theme.css";
-import { formatBytes } from "@renderer/utils";
 import { useAppSelector } from "@renderer/hooks";
+import { SPACING_UNIT } from "@renderer/theme.css";
+import { format } from "date-fns";
 import { SelectFolderModal } from "./select-folder-modal";
 
 export interface RepacksModalProps {
@@ -30,7 +28,6 @@ export function RepacksModal({
   startDownload,
   onClose,
 }: RepacksModalProps) {
-  const [diskFreeSpace, setDiskFreeSpace] = useState<DiskSpace>(null);
   const [filteredRepacks, setFilteredRepacks] = useState<GameRepack[]>([]);
   const [repack, setRepack] = useState<GameRepack>(null);
 
@@ -44,16 +41,6 @@ export function RepacksModal({
     setFilteredRepacks(gameDetails.repacks);
   }, [gameDetails.repacks]);
 
-  const getDiskFreeSpace = () => {
-    window.electron.getDiskFreeSpace().then((result) => {
-      setDiskFreeSpace(result);
-    });
-  };
-
-  useEffect(() => {
-    getDiskFreeSpace();
-  }, [visible]);
-
   const handleRepackClick = (repack: GameRepack) => {
     setRepack(repack);
     setShowSelectFolderModal(true);
@@ -73,9 +60,7 @@ export function RepacksModal({
     <Modal
       visible={visible}
       title={`${gameDetails.name} Repacks`}
-      description={t("space_left_on_disk", {
+      description={t("repacks_modal_description")}
-        space: formatBytes(diskFreeSpace?.free ?? 0),
-      })}
       onClose={onClose}
     >
       <SelectFolderModal

src/renderer/pages/game-details/select-folder-modal.tsx

@@ -3,8 +3,10 @@ import { GameRepack, ShopDetails } from "@types";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import * as styles from "./select-folder-modal.css";
+import { formatBytes } from "@renderer/utils";
+import { DiskSpace } from "check-disk-space";
 import { Link } from "react-router-dom";
+import * as styles from "./select-folder-modal.css";
 
 export interface SelectFolderModalProps {
   visible: boolean;
@@ -23,9 +25,14 @@ export function SelectFolderModal({
 }: SelectFolderModalProps) {
   const { t } = useTranslation("game_details");
 
+  const [diskFreeSpace, setDiskFreeSpace] = useState<DiskSpace>(null);
   const [selectedPath, setSelectedPath] = useState("");
   const [downloadStarting, setDownloadStarting] = useState(false);
 
+  useEffect(() => {
+    visible && getDiskFreeSpace(selectedPath);
+  }, [visible, selectedPath]);
+
   useEffect(() => {
     Promise.all([
       window.electron.getDefaultDownloadsPath(),
@@ -35,6 +42,12 @@ export function SelectFolderModal({
     });
   }, []);
 
+  const getDiskFreeSpace = (path: string) => {
+    window.electron.getDiskFreeSpace(path).then((result) => {
+      setDiskFreeSpace(result);
+    });
+  };
+
   const handleChooseDownloadsPath = async () => {
     const { filePaths } = await window.electron.showOpenDialog({
       defaultPath: selectedPath,
@@ -58,7 +71,9 @@ export function SelectFolderModal({
     <Modal
       visible={visible}
       title={`${gameDetails.name} Installation folder`}
-      description={t("select_folder_description")}
+      description={t("space_left_on_disk", {
+        space: formatBytes(diskFreeSpace?.free ?? 0),
+      })}
       onClose={onClose}
     >
       <div className={styles.container}>