diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 4104e2d5..8b1abe79 100644 --- a/src/locales/en/translation.json +++ b/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": { diff --git a/src/locales/pt/translation.json b/src/locales/pt/translation.json index 19a6dd71..0b68230e 100644 --- a/src/locales/pt/translation.json +++ b/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": { diff --git a/src/renderer/src/pages/downloads/download-list.css.ts b/src/renderer/src/pages/downloads/download-group.css.ts similarity index 95% rename from src/renderer/src/pages/downloads/download-list.css.ts rename to src/renderer/src/pages/downloads/download-group.css.ts index 6d17b3fa..e42fb6eb 100644 --- a/src/renderer/src/pages/downloads/download-list.css.ts +++ b/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`, +}); diff --git a/src/renderer/src/pages/downloads/download-list.tsx b/src/renderer/src/pages/downloads/download-group.tsx similarity index 67% rename from src/renderer/src/pages/downloads/download-list.tsx rename to src/renderer/src/pages/downloads/download-group.tsx index 546827b1..737e318a 100644 --- a/src/renderer/src/pages/downloads/download-list.tsx +++ b/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

{t(game.status)}

; }; - 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")} - @@ -196,51 +190,57 @@ export function DownloadList({ library }: DownloadListProps) { ); }; + if (!library.length) return null; + return ( - + + ); + })} + + ); } diff --git a/src/renderer/src/pages/downloads/downloads.css.ts b/src/renderer/src/pages/downloads/downloads.css.ts index 472c30c9..0364015b 100644 --- a/src/renderer/src/pages/downloads/downloads.css.ts +++ b/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`, -}); diff --git a/src/renderer/src/pages/downloads/downloads.tsx b/src/renderer/src/pages/downloads/downloads.tsx index 3fefb226..b20c4dc5 100644 --- a/src/renderer/src/pages/downloads/downloads.tsx +++ b/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 = useMemo(() => { const initialValue: Record = { 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 (
@@ -81,26 +105,15 @@ export function Downloads() { />
- {libraryGroup.downloading.length > 0 && ( -
-

{t("download_in_progress")}

- -
- )} - - {libraryGroup.queued.length > 0 && ( -
-

{t("queued_downloads")}

- -
- )} - - {libraryGroup.complete.length > 0 && ( -
-

{t("downloads_complete")}

- -
- )} + {downloadGroups.map((group) => ( + + ))}
);