From 8669c1d660a63bc4c45c2e5cf50f615b7f79cb3b Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Fri, 7 Jun 2024 14:23:34 -0300
Subject: [PATCH] feat: add modal to confirm remove from library

---
 src/locales/en/translation.json               |  4 +-
 src/locales/pt/translation.json               |  4 +-
 .../modals/game-options-modal.tsx             | 11 ++++-
 .../modals/remove-from-library-modal.css.ts   | 10 +++++
 .../modals/remove-from-library-modal.tsx      | 44 +++++++++++++++++++
 5 files changed, 70 insertions(+), 3 deletions(-)
 create mode 100644 src/renderer/src/pages/game-details/modals/remove-from-library-modal.css.ts
 create mode 100644 src/renderer/src/pages/game-details/modals/remove-from-library-modal.tsx

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index e9423f75..838c795f 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -106,7 +106,9 @@
     "open_folder": "Open folder",
     "open_download_location": "Abrir local de download",
     "create_shortcut": "Create shortcut",
-    "remove_files": "Remove files"
+    "remove_files": "Remove files",
+    "remove_from_library_title": "Are you sure?",
+    "remove_from_library_description": "This will remove {{game}} from your library"
   },
   "activation": {
     "title": "Activate Hydra",
diff --git a/src/locales/pt/translation.json b/src/locales/pt/translation.json
index 08b73428..9b34e09d 100644
--- a/src/locales/pt/translation.json
+++ b/src/locales/pt/translation.json
@@ -103,7 +103,9 @@
     "open_folder": "Abrir pasta",
     "open_download_location": "Abrir local de download",
     "create_shortcut": "Criar atalho",
-    "remove_files": "Remover arquivos"
+    "remove_files": "Remover arquivos",
+    "remove_from_library_description": "Tem certeza que deseja remover {{game}} da sua biblioteca?",
+    "remove_from_library_title": "Tem certeza?"
   },
   "activation": {
     "title": "Ativação",
diff --git a/src/renderer/src/pages/game-details/modals/game-options-modal.tsx b/src/renderer/src/pages/game-details/modals/game-options-modal.tsx
index 4d8ae28f..145e262c 100644
--- a/src/renderer/src/pages/game-details/modals/game-options-modal.tsx
+++ b/src/renderer/src/pages/game-details/modals/game-options-modal.tsx
@@ -7,6 +7,7 @@ import { gameDetailsContext } from "../game-details.context";
 import { NoEntryIcon, TrashIcon } from "@primer/octicons-react";
 import { DeleteGameModal } from "@renderer/pages/downloads/delete-game-modal";
 import { useDownload } from "@renderer/hooks";
+import { RemoveGameFromLibraryModal } from "./remove-from-library-modal";
 
 export interface GameOptionsModalProps {
   visible: boolean;
@@ -26,6 +27,7 @@ export function GameOptionsModal({
   const { updateGame, openRepacksModal } = useContext(gameDetailsContext);
 
   const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [showRemoveGameModal, setShowRemoveGameModal] = useState(false);
 
   const { removeGameInstaller, removeGameFromLibrary, isGameDeleting } =
     useDownload();
@@ -83,6 +85,13 @@ export function GameOptionsModal({
           deleteGame={handleDeleteGame}
         />
 
+        <RemoveGameFromLibraryModal
+          visible={showRemoveGameModal}
+          onClose={() => setShowRemoveGameModal(false)}
+          removeGameFromLibrary={handleRemoveGameFromLibrary}
+          game={game}
+        />
+
         <div className={styles.optionsContainer}>
           <div className={styles.gameOptionRow}>
             <Button
@@ -150,7 +159,7 @@ export function GameOptionsModal({
             </Button>
 
             <Button
-              onClick={handleRemoveGameFromLibrary}
+              onClick={() => setShowRemoveGameModal(true)}
               style={{ alignSelf: "flex-end" }}
               theme="outline"
               disabled={deleting}
diff --git a/src/renderer/src/pages/game-details/modals/remove-from-library-modal.css.ts b/src/renderer/src/pages/game-details/modals/remove-from-library-modal.css.ts
new file mode 100644
index 00000000..eb676e57
--- /dev/null
+++ b/src/renderer/src/pages/game-details/modals/remove-from-library-modal.css.ts
@@ -0,0 +1,10 @@
+import { SPACING_UNIT } from "../../../theme.css";
+import { style } from "@vanilla-extract/css";
+
+export const deleteActionsButtonsCtn = style({
+  display: "flex",
+  width: "100%",
+  justifyContent: "end",
+  alignItems: "center",
+  gap: `${SPACING_UNIT}px`,
+});
diff --git a/src/renderer/src/pages/game-details/modals/remove-from-library-modal.tsx b/src/renderer/src/pages/game-details/modals/remove-from-library-modal.tsx
new file mode 100644
index 00000000..09bf5d43
--- /dev/null
+++ b/src/renderer/src/pages/game-details/modals/remove-from-library-modal.tsx
@@ -0,0 +1,44 @@
+import { useTranslation } from "react-i18next";
+import { Button, Modal } from "@renderer/components";
+import * as styles from "./remove-from-library-modal.css";
+import { Game } from "@types";
+
+interface RemoveGameFromLibraryModalProps {
+  visible: boolean;
+  game: Game;
+  onClose: () => void;
+  removeGameFromLibrary: () => Promise<void>;
+}
+
+export function RemoveGameFromLibraryModal({
+  onClose,
+  game,
+  visible,
+  removeGameFromLibrary,
+}: RemoveGameFromLibraryModalProps) {
+  const { t } = useTranslation("game_details");
+
+  const handleRemoveGame = async () => {
+    await removeGameFromLibrary();
+    onClose();
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      title={t("remove_from_library_title")}
+      description={t("remove_from_library_description", { game: game.title })}
+      onClose={onClose}
+    >
+      <div className={styles.deleteActionsButtonsCtn}>
+        <Button onClick={handleRemoveGame} theme="outline">
+          {t("remove")}
+        </Button>
+
+        <Button onClick={onClose} theme="primary">
+          {t("cancel")}
+        </Button>
+      </div>
+    </Modal>
+  );
+}