feat: add undo friendship confirm modal

This commit is contained in:
Zamitto 2024-08-26 12:23:32 -03:00
parent a608e11be2
commit fb60c91c83
4 changed files with 56 additions and 8 deletions

View File

@ -270,6 +270,7 @@
"pending": "Pending",
"no_pending_invites": "You have no pending invites",
"no_blocked_users": "You have no blocked users",
"friend_code_copied": "Friend code copied"
"friend_code_copied": "Friend code copied",
"undo_friendship_modal_text": "This will undo your friendship with {{displayName}}"
}
}

View File

@ -273,6 +273,7 @@
"pending": "Pendentes",
"no_pending_invites": "Você não possui convites de amizade pendentes",
"no_blocked_users": "Você não tem nenhum usuário bloqueado",
"friend_code_copied": "Código de amigo copiado"
"friend_code_copied": "Código de amigo copiado",
"undo_friendship_modal_text": "Isso irá remover sua amizade com {{displayName}}"
}
}

View File

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

View File

@ -34,6 +34,7 @@ import { UserProfileSettingsModal } from "./user-profile-settings-modal";
import { UserSignOutModal } from "./user-sign-out-modal";
import { UserFriendModalTab } from "../shared-modals/user-friend-modal";
import { UserBlockModal } from "./user-block-modal";
import { UserConfirmUndoFriendshipModal } from "./user-confirm-undo-friendship-modal";
const MAX_MINUTES_TO_SHOW_IN_PLAYTIME = 120;
@ -68,6 +69,7 @@ export function UserContent({
useState(false);
const [showSignOutModal, setShowSignOutModal] = useState(false);
const [showUserBlockModal, setShowUserBlockModal] = useState(false);
const [showUndoFriendshipModal, setShowUndoFriendshipModal] = useState(false);
const [currentGame, setCurrentGame] = useState<GameRunning | null>(null);
const { gameRunning } = useAppSelector((state) => state.gameRunning);
@ -213,17 +215,12 @@ export function UserContent({
}
if (userProfile.relation.status === "ACCEPTED") {
const userId =
userProfile.relation.AId === userDetails?.id
? userProfile.relation.BId
: userProfile.relation.AId;
return (
<>
<Button
theme="outline"
className={styles.cancelRequestButton}
onClick={() => handleFriendAction(userId, "UNDO")}
onClick={() => setShowUndoFriendshipModal(true)}
>
<XCircleIcon size={28} /> {t("undo_friendship")}
</Button>
@ -291,6 +288,13 @@ export function UserContent({
displayName={userProfile.displayName}
/>
<UserConfirmUndoFriendshipModal
visible={showUndoFriendshipModal}
onClose={() => setShowUndoFriendshipModal(false)}
onConfirm={() => handleFriendAction(userProfile.id, "UNDO")}
displayName={userProfile.displayName}
/>
<section
className={styles.profileContentBox}
style={{