feat: show confirm modal for block action

src/locales/en/translation.json

@@ -260,6 +260,7 @@
     "cancel_request": "Cancel request",
     "undo_friendship": "Undo friendship",
     "request_accepted": "Request accepted",
-    "user_blocked_successfully": "User blocked successfully"
+    "user_blocked_successfully": "User blocked successfully",
+    "user_block_modal_text": "This will block {{displayName}}"
   }
 }

src/locales/pt/translation.json

@@ -260,6 +260,7 @@
     "cancel_request": "Cancelar pedido",
     "undo_friendship": "Desfazer amizade",
     "request_accepted": "Pedido de amizade aceito",
-    "user_blocked_successfully": "Usuário bloqueado com sucesso"
+    "user_blocked_successfully": "Usuário bloqueado com sucesso",
+    "user_block_modal_text": "Bloquear {{displayName}}"
   }
 }

src/main/events/user/block-user.ts

@@ -5,7 +5,7 @@ const blockUser = async (
   _event: Electron.IpcMainInvokeEvent,
   userId: string
 ): Promise<void> => {
-  return HydraApi.get(`/user/${userId}/block`);
+  return HydraApi.post(`/user/${userId}/block`);
 };
 
-registerEvent("block", blockUser);
+registerEvent("blockUser", blockUser);

src/main/events/user/unblock-user.ts

@@ -5,7 +5,7 @@ const unblockUser = async (
   _event: Electron.IpcMainInvokeEvent,
   userId: string
 ): Promise<void> => {
-  return HydraApi.get(`/user/${userId}/unblock`);
+  return HydraApi.post(`/user/${userId}/unblock`);
 };
 
 registerEvent("unblockUser", unblockUser);

src/renderer/src/pages/user/user-block-modal.tsx

@@ -0,0 +1,44 @@
+import { Button, Modal } from "@renderer/components";
+import * as styles from "./user.css";
+import { useTranslation } from "react-i18next";
+
+export interface UserBlockModalProps {
+  visible: boolean;
+  displayName: string;
+  onConfirm: () => void;
+  onClose: () => void;
+}
+
+export const UserBlockModal = ({
+  visible,
+  displayName,
+  onConfirm,
+  onClose,
+}: UserBlockModalProps) => {
+  const { t } = useTranslation("user_profile");
+
+  return (
+    <>
+      <Modal
+        visible={visible}
+        title={t("sign_out_modal_title")}
+        onClose={onClose}
+      >
+        <div className={styles.signOutModalContent}>
+          <p style={{ fontFamily: "Fira Sans" }}>
+            {t("user_block_modal_text", { displayName })}
+          </p>
+          <div className={styles.signOutModalButtonsContainer}>
+            <Button onClick={onConfirm} theme="danger">
+              {t("block_user")}
+            </Button>
+
+            <Button onClick={onClose} theme="primary">
+              {t("cancel")}
+            </Button>
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+};

src/renderer/src/pages/user/user-content.tsx

@@ -28,6 +28,7 @@ import { Button, Link } from "@renderer/components";
 import { UserEditProfileModal } from "./user-edit-modal";
 import { UserSignOutModal } from "./user-signout-modal";
 import { UserFriendModalTab } from "../shared-modals/user-friend-modal";
+import { UserBlockModal } from "./user-block-modal";
 
 const MAX_MINUTES_TO_SHOW_IN_PLAYTIME = 120;
 
@@ -59,6 +60,7 @@ export function UserContent({
     useState<string | undefined>();
   const [showEditProfileModal, setShowEditProfileModal] = useState(false);
   const [showSignOutModal, setShowSignOutModal] = useState(false);
+  const [showUserBlockModal, setShowUserBlockModal] = useState(false);
 
   const { gameRunning } = useAppSelector((state) => state.gameRunning);
 
@@ -150,6 +152,7 @@ export function UserContent({
   const handleBlockUser = () => {
     blockUser(userProfile.id)
       .then(() => {
+        setShowUserBlockModal(false);
         showSuccessToast(t("user_blocked_successfully"));
         navigate(-1);
       })
@@ -204,7 +207,7 @@ export function UserContent({
             {t("add_friend")}
           </Button>
 
-          <Button theme="danger" onClick={handleBlockUser}>
+          <Button theme="danger" onClick={() => setShowUserBlockModal(true)}>
             {t("block_user")}
           </Button>
         </>
@@ -272,6 +275,13 @@ export function UserContent({
         onConfirm={handleConfirmSignout}
       />
 
+      <UserBlockModal
+        visible={showUserBlockModal}
+        onClose={() => setShowUserBlockModal(false)}
+        onConfirm={handleBlockUser}
+        displayName={userProfile.displayName}
+      />
+
       <section
         className={styles.profileContentBox}
         style={{

src/renderer/src/pages/user/user-signout-modal.tsx

@@ -2,7 +2,7 @@ import { Button, Modal } from "@renderer/components";
 import * as styles from "./user.css";
 import { useTranslation } from "react-i18next";
 
-export interface UserEditProfileModalProps {
+export interface UserSignOutModalProps {
   visible: boolean;
   onConfirm: () => void;
   onClose: () => void;
@@ -12,7 +12,7 @@ export const UserSignOutModal = ({
   visible,
   onConfirm,
   onClose,
-}: UserEditProfileModalProps) => {
+}: UserSignOutModalProps) => {
   const { t } = useTranslation("user_profile");
 
   return (