feat: action buttons on user profile page

This commit is contained in:
Zamitto 2024-07-25 19:27:03 -03:00
parent 102299e42f
commit 304aa011ad
8 changed files with 101 additions and 47 deletions

View file

@ -258,6 +258,7 @@
"accept_request": "Accept request", "accept_request": "Accept request",
"ignore_request": "Ignore request", "ignore_request": "Ignore request",
"cancel_request": "Cancel request", "cancel_request": "Cancel request",
"undo_friendship": "Undo friendship" "undo_friendship": "Undo friendship",
"request_accepted": "Request accepted"
} }
} }

View file

@ -258,6 +258,7 @@
"accept_request": "Aceitar pedido", "accept_request": "Aceitar pedido",
"ignore_request": "Ignorar pedido", "ignore_request": "Ignorar pedido",
"cancel_request": "Cancelar pedido", "cancel_request": "Cancelar pedido",
"undo_friendship": "Desfazer amizade" "undo_friendship": "Desfazer amizade",
"request_accepted": "Pedido de amizade aceito"
} }
} }

View file

@ -6,7 +6,7 @@
<title>Hydra</title> <title>Hydra</title>
<meta <meta
http-equiv="Content-Security-Policy" http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: local: https://cdn.discordapp.com https://*.cloudfront.net https://*.s3.amazonaws.com https://steamcdn-a.akamaihd.net https://shared.akamai.steamstatic.com https://cdn.cloudflare.steamstatic.com https://cdn2.steamgriddb.com https://cdn.akamai.steamstatic.com; media-src 'self' local: data: https://steamcdn-a.akamaihd.net https://cdn.cloudflare.steamstatic.com https://cdn2.steamgriddb.com https://cdn.akamai.steamstatic.com https://shared.akamai.steamstatic.com;" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: local: https://*.cloudfront.net https://*.s3.amazonaws.com https://steamcdn-a.akamaihd.net https://shared.akamai.steamstatic.com https://cdn.cloudflare.steamstatic.com https://cdn2.steamgriddb.com https://cdn.akamai.steamstatic.com; media-src 'self' local: data: https://steamcdn-a.akamaihd.net https://cdn.cloudflare.steamstatic.com https://cdn2.steamgriddb.com https://cdn.akamai.steamstatic.com https://shared.akamai.steamstatic.com;"
/> />
</head> </head>
<body style="background-color: #1c1c1c"> <body style="background-color: #1c1c1c">

View file

@ -21,7 +21,7 @@ export function SidebarProfile() {
useEffect(() => { useEffect(() => {
setReceivedRequests( setReceivedRequests(
receivedRequests.filter((request) => request.type === "RECEIVED") friendRequests.filter((request) => request.type === "RECEIVED")
); );
}, [friendRequests]); }, [friendRequests]);

View file

@ -85,9 +85,13 @@ export function useUserDetails() {
[updateUserDetails] [updateUserDetails]
); );
const fetchFriendRequests = useCallback(async () => { const fetchFriendRequests = useCallback(() => {
const friendRequests = await window.electron.getFriendRequests(); return window.electron
dispatch(setFriendRequests(friendRequests)); .getFriendRequests()
.then((friendRequests) => {
dispatch(setFriendRequests(friendRequests));
})
.catch(() => {});
}, [dispatch]); }, [dispatch]);
const showFriendsModal = useCallback( const showFriendsModal = useCallback(

View file

@ -23,7 +23,7 @@ export const UserFriendModalAddFriend = ({
const { sendFriendRequest, updateFriendRequestState, friendRequests } = const { sendFriendRequest, updateFriendRequestState, friendRequests } =
useUserDetails(); useUserDetails();
const { showErrorToast } = useToast(); const { showSuccessToast, showErrorToast } = useToast();
const handleClickAddFriend = () => { const handleClickAddFriend = () => {
setIsAddingFriend(true); setIsAddingFriend(true);
@ -58,19 +58,23 @@ export const UserFriendModalAddFriend = ({
const handleCancelFriendRequest = (userId: string) => { const handleCancelFriendRequest = (userId: string) => {
updateFriendRequestState(userId, "CANCEL").catch(() => { updateFriendRequestState(userId, "CANCEL").catch(() => {
showErrorToast("Falha ao cancelar convite"); showErrorToast(t("try_again"));
}); });
}; };
const handleAcceptFriendRequest = (userId: string) => { const handleAcceptFriendRequest = (userId: string) => {
updateFriendRequestState(userId, "ACCEPTED").catch(() => { updateFriendRequestState(userId, "ACCEPTED")
showErrorToast("Falha ao aceitar convite"); .then(() => {
}); showSuccessToast(t("request_accepted"));
})
.catch(() => {
showErrorToast(t("try_again"));
});
}; };
const handleRefuseFriendRequest = (userId: string) => { const handleRefuseFriendRequest = (userId: string) => {
updateFriendRequestState(userId, "REFUSED").catch(() => { updateFriendRequestState(userId, "REFUSED").catch(() => {
showErrorToast("Falha ao recusar convite"); showErrorToast(t("try_again"));
}); });
}; };

View file

@ -1,4 +1,4 @@
import { UserGame, UserProfile } from "@types"; import { UserGame, UserProfile, UserRelation } from "@types";
import cn from "classnames"; import cn from "classnames";
import * as styles from "./user.css"; import * as styles from "./user.css";
import { SPACING_UNIT, vars } from "@renderer/theme.css"; import { SPACING_UNIT, vars } from "@renderer/theme.css";
@ -45,8 +45,8 @@ export function UserContent({
const { const {
userDetails, userDetails,
profileBackground, profileBackground,
friendRequests,
signOut, signOut,
sendFriendRequest,
fetchFriendRequests, fetchFriendRequests,
showFriendsModal, showFriendsModal,
updateFriendRequestState, updateFriendRequestState,
@ -124,22 +124,47 @@ export function UserContent({
} }
}, [profileBackground, isMe]); }, [profileBackground, isMe]);
const handleUndoFriendship = (userRelation: UserRelation) => {
const userId =
userRelation.AId === userProfile.id ? userRelation.BId : userRelation.AId;
updateFriendRequestState(userId, "CANCEL")
.then(updateUserProfile)
.catch(() => {
showErrorToast(t("try_again"));
});
};
const handleSendFriendRequest = () => {
sendFriendRequest(userProfile.id)
.then(updateUserProfile)
.catch(() => {
showErrorToast(t("try_again"));
});
};
const handleCancelFriendRequest = (userId: string) => { const handleCancelFriendRequest = (userId: string) => {
updateFriendRequestState(userId, "CANCEL").catch(() => { updateFriendRequestState(userId, "CANCEL")
showErrorToast("Falha ao cancelar convite"); .then(updateUserProfile)
}); .catch(() => {
showErrorToast(t("try_again"));
});
}; };
const handleAcceptFriendRequest = (userId: string) => { const handleAcceptFriendRequest = (userId: string) => {
updateFriendRequestState(userId, "ACCEPTED").catch(() => { updateFriendRequestState(userId, "ACCEPTED")
showErrorToast("Falha ao aceitar convite"); .then(updateUserProfile)
}); .catch(() => {
showErrorToast(t("try_again"));
});
}; };
const handleRefuseFriendRequest = (userId: string) => { const handleRefuseFriendRequest = (userId: string) => {
updateFriendRequestState(userId, "REFUSED").catch(() => { updateFriendRequestState(userId, "REFUSED")
showErrorToast("Falha ao recusar convite"); .then(updateUserProfile)
}); .catch(() => {
showErrorToast(t("try_again"));
});
}; };
const getProfileActions = () => { const getProfileActions = () => {
@ -157,14 +182,10 @@ export function UserContent({
); );
} }
const friendRequest = friendRequests.find( if (userProfile.relation == null) {
(request) => request.id == userProfile.id
);
if (!friendRequest) {
return ( return (
<> <>
<Button theme="outline" onClick={() => {}}> <Button theme="outline" onClick={handleSendFriendRequest}>
{t("add_friend")} {t("add_friend")}
</Button> </Button>
@ -175,35 +196,49 @@ export function UserContent({
); );
} }
if (friendRequest.type === "RECEIVED") { if (userProfile.relation.status === "ACCEPTED") {
return ( return (
<> <>
<Button
theme="outline"
className={styles.acceptRequestButton}
onClick={() => handleAcceptFriendRequest(friendRequest.id)}
>
<CheckCircleIcon size={28} /> {t("accept_request")}
</Button>
<Button <Button
theme="outline" theme="outline"
className={styles.cancelRequestButton} className={styles.cancelRequestButton}
onClick={() => handleRefuseFriendRequest(friendRequest.id)} onClick={() => handleUndoFriendship(userProfile.relation!)}
> >
<XCircleIcon size={28} /> {t("ignore_request")} <XCircleIcon size={28} /> {t("undo_friendship")}
</Button> </Button>
</> </>
); );
} }
if (userProfile.relation.BId === userProfile.id) {
return (
<Button
theme="outline"
className={styles.cancelRequestButton}
onClick={() => handleCancelFriendRequest(userProfile.relation!.BId)}
>
<XCircleIcon size={28} /> {t("cancel_request")}
</Button>
);
}
return ( return (
<Button <>
theme="outline" <Button
className={styles.cancelRequestButton} theme="outline"
onClick={() => handleCancelFriendRequest(friendRequest.id)} className={styles.acceptRequestButton}
> onClick={() => handleAcceptFriendRequest(userProfile.relation!.AId)}
<XCircleIcon size={28} /> {t("cancel_request")} >
</Button> <CheckCircleIcon size={28} /> {t("accept_request")}
</Button>
<Button
theme="outline"
className={styles.cancelRequestButton}
onClick={() => handleRefuseFriendRequest(userProfile.relation!.AId)}
>
<XCircleIcon size={28} /> {t("ignore_request")}
</Button>
</>
); );
}; };

View file

@ -289,6 +289,14 @@ export interface FriendRequest {
type: "SENT" | "RECEIVED"; type: "SENT" | "RECEIVED";
} }
export interface UserRelation {
AId: string;
BId: string;
status: "ACCEPTED" | "PENDING";
createdAt: string;
updatedAt: string;
}
export interface UserProfile { export interface UserProfile {
id: string; id: string;
displayName: string; displayName: string;
@ -298,6 +306,7 @@ export interface UserProfile {
libraryGames: UserGame[]; libraryGames: UserGame[];
recentGames: UserGame[]; recentGames: UserGame[];
friends: UserFriends; friends: UserFriends;
relation: UserRelation | null;
} }
export interface DownloadSource { export interface DownloadSource {