fix: fixing remove installer button on downloads page

src/locales/en/translation.json

@@ -132,7 +132,7 @@
     "install": "Install",
     "download_in_progress": "In progress",
     "queued_downloads": "Queued downloads",
-    "downloads_complete": "Completed",
+    "downloads_completed": "Completed",
     "queued": "Queued"
   },
   "settings": {

src/locales/pt/translation.json

@@ -130,7 +130,7 @@
     "install": "Instalar",
     "download_in_progress": "Baixando agora",
     "queued_downloads": "Na fila",
-    "downloads_complete": "Completo",
+    "downloads_completed": "Completo",
     "queued": "Na fila"
   },
   "settings": {

src/renderer/src/pages/downloads/download-group.css.ts

@@ -111,3 +111,9 @@ export const downloadActions = style({
   alignItems: "center",
   gap: `${SPACING_UNIT}px`,
 });
+
+export const downloadGroup = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: `${SPACING_UNIT * 2}px`,
+});

src/renderer/src/pages/downloads/download-group.tsx

@@ -11,22 +11,28 @@ import {
 
 import { Downloader, formatBytes } from "@shared";
 import { DOWNLOADER_NAME } from "@renderer/constants";
-import { useAppSelector, useDownload, useLibrary } from "@renderer/hooks";
+import { useAppSelector, useDownload } from "@renderer/hooks";
 
-import * as styles from "./download-list.css";
+import * as styles from "./download-group.css";
 import { useTranslation } from "react-i18next";
 
-export interface DownloadListProps {
+export interface DownloadGroupProps {
   library: LibraryGame[];
+  title: string;
+  openDeleteGameModal: (gameId: number) => void;
+  openGameInstaller: (gameId: number) => void;
 }
 
-export function DownloadList({ library }: DownloadListProps) {
+export function DownloadGroup({
+  library,
+  title,
+  openDeleteGameModal,
+  openGameInstaller,
+}: DownloadGroupProps) {
   const navigate = useNavigate();
 
   const { t } = useTranslation("downloads");
 
-  const { updateLibrary } = useLibrary();
-
   const userPreferences = useAppSelector(
     (state) => state.userPreferences.value
   );
@@ -38,16 +44,9 @@ export function DownloadList({ library }: DownloadListProps) {
     resumeDownload,
     removeGameFromLibrary,
     cancelDownload,
-    removeGameInstaller,
     isGameDeleting,
   } = useDownload();
 
-  const openGameInstaller = (gameId: number) =>
-    window.electron.openGameInstaller(gameId).then((isBinaryInPath) => {
-      if (!isBinaryInPath) setShowBinaryNotFoundModal(true);
-      updateLibrary();
-    });
-
   const getFinalDownloadSize = (game: LibraryGame) => {
     const isGameDownloading = lastPacket?.game.id === game.id;
 
@@ -114,11 +113,6 @@ export function DownloadList({ library }: DownloadListProps) {
     return <p>{t(game.status)}</p>;
   };
 
-  const openDeleteModal = (gameId: number) => {
-    // gameToBeDeleted.current = gameId;
-    // setShowDeleteModal(true);
-  };
-
   const getGameActions = (game: LibraryGame) => {
     const isGameDownloading = lastPacket?.game.id === game.id;
 
@@ -135,7 +129,7 @@ export function DownloadList({ library }: DownloadListProps) {
             {t("install")}
           </Button>
 
-          <Button onClick={() => openDeleteModal(game.id)} theme="outline">
+          <Button onClick={() => openDeleteGameModal(game.id)} theme="outline">
             {t("delete")}
           </Button>
         </>
@@ -196,7 +190,12 @@ export function DownloadList({ library }: DownloadListProps) {
     );
   };
 
+  if (!library.length) return null;
+
   return (
+    <div className={styles.downloadGroup}>
+      <h2>{title}</h2>
+
       <ul className={styles.downloads}>
         {library.map((game) => {
           return (
@@ -242,5 +241,6 @@ export function DownloadList({ library }: DownloadListProps) {
           );
         })}
       </ul>
+    </div>
   );
 }

src/renderer/src/pages/downloads/downloads.css.ts

@@ -13,9 +13,3 @@ export const downloadGroups = style({
   gap: `${SPACING_UNIT * 3}px`,
   flexDirection: "column",
 });
-
-export const downloadGroup = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT * 2}px`,
-});

src/renderer/src/pages/downloads/downloads.tsx

@@ -6,12 +6,12 @@ import { useMemo, useRef, useState } from "react";
 import { BinaryNotFoundModal } from "../shared-modals/binary-not-found-modal";
 import * as styles from "./downloads.css";
 import { DeleteGameModal } from "./delete-game-modal";
-import { DownloadList } from "./download-list";
+import { DownloadGroup } from "./download-group";
 import { LibraryGame } from "@types";
 import { orderBy } from "lodash-es";
 
 export function Downloads() {
-  const { library } = useLibrary();
+  const { library, updateLibrary } = useLibrary();
 
   const { t } = useTranslation("downloads");
 
@@ -29,6 +29,17 @@ export function Downloads() {
 
   const { lastPacket } = useDownload();
 
+  const handleOpenGameInstaller = (gameId: number) =>
+    window.electron.openGameInstaller(gameId).then((isBinaryInPath) => {
+      if (!isBinaryInPath) setShowBinaryNotFoundModal(true);
+      updateLibrary();
+    });
+
+  const handleOpenDeleteGameModal = (gameId: number) => {
+    gameToBeDeleted.current = gameId;
+    setShowDeleteModal(true);
+  };
+
   const libraryGroup: Record<string, LibraryGame[]> = useMemo(() => {
     const initialValue: Record<string, LibraryGame[]> = {
       downloading: [],
@@ -65,7 +76,20 @@ export function Downloads() {
     };
   }, [library, lastPacket?.game.id]);
 
-  console.log(libraryGroup);
+  const downloadGroups = [
+    {
+      title: t("download_in_progress"),
+      library: libraryGroup.downloading,
+    },
+    {
+      title: t("queued_downloads"),
+      library: libraryGroup.queued,
+    },
+    {
+      title: t("downloads_completed"),
+      library: libraryGroup.complete,
+    },
+  ];
 
   return (
     <section className={styles.downloadsContainer}>
@@ -81,26 +105,15 @@ export function Downloads() {
       />
 
       <div className={styles.downloadGroups}>
-        {libraryGroup.downloading.length > 0 && (
-          <div className={styles.downloadGroup}>
-            <h2>{t("download_in_progress")}</h2>
-            <DownloadList library={libraryGroup.downloading} />
-          </div>
-        )}
-
-        {libraryGroup.queued.length > 0 && (
-          <div className={styles.downloadGroup}>
-            <h2>{t("queued_downloads")}</h2>
-            <DownloadList library={libraryGroup.queued} />
-          </div>
-        )}
-
-        {libraryGroup.complete.length > 0 && (
-          <div className={styles.downloadGroup}>
-            <h2>{t("downloads_complete")}</h2>
-            <DownloadList library={libraryGroup.complete} />
-          </div>
-        )}
+        {downloadGroups.map((group) => (
+          <DownloadGroup
+            key={group.title}
+            title={group.title}
+            library={group.library}
+            openDeleteGameModal={handleOpenDeleteGameModal}
+            openGameInstaller={handleOpenGameInstaller}
+          />
+        ))}
       </div>
     </section>
   );