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",
"ignore_request": "Ignore 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",
"ignore_request": "Ignorar 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>
<meta
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>
<body style="background-color: #1c1c1c">

View file

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

View file

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

View file

@ -23,7 +23,7 @@ export const UserFriendModalAddFriend = ({
const { sendFriendRequest, updateFriendRequestState, friendRequests } =
useUserDetails();
const { showErrorToast } = useToast();
const { showSuccessToast, showErrorToast } = useToast();
const handleClickAddFriend = () => {
setIsAddingFriend(true);
@ -58,19 +58,23 @@ export const UserFriendModalAddFriend = ({
const handleCancelFriendRequest = (userId: string) => {
updateFriendRequestState(userId, "CANCEL").catch(() => {
showErrorToast("Falha ao cancelar convite");
showErrorToast(t("try_again"));
});
};
const handleAcceptFriendRequest = (userId: string) => {
updateFriendRequestState(userId, "ACCEPTED").catch(() => {
showErrorToast("Falha ao aceitar convite");
});
updateFriendRequestState(userId, "ACCEPTED")
.then(() => {
showSuccessToast(t("request_accepted"));
})
.catch(() => {
showErrorToast(t("try_again"));
});
};
const handleRefuseFriendRequest = (userId: string) => {
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 * as styles from "./user.css";
import { SPACING_UNIT, vars } from "@renderer/theme.css";
@ -45,8 +45,8 @@ export function UserContent({
const {
userDetails,
profileBackground,
friendRequests,
signOut,
sendFriendRequest,
fetchFriendRequests,
showFriendsModal,
updateFriendRequestState,
@ -124,22 +124,47 @@ export function UserContent({
}
}, [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) => {
updateFriendRequestState(userId, "CANCEL").catch(() => {
showErrorToast("Falha ao cancelar convite");
});
updateFriendRequestState(userId, "CANCEL")
.then(updateUserProfile)
.catch(() => {
showErrorToast(t("try_again"));
});
};
const handleAcceptFriendRequest = (userId: string) => {
updateFriendRequestState(userId, "ACCEPTED").catch(() => {
showErrorToast("Falha ao aceitar convite");
});
updateFriendRequestState(userId, "ACCEPTED")
.then(updateUserProfile)
.catch(() => {
showErrorToast(t("try_again"));
});
};
const handleRefuseFriendRequest = (userId: string) => {
updateFriendRequestState(userId, "REFUSED").catch(() => {
showErrorToast("Falha ao recusar convite");
});
updateFriendRequestState(userId, "REFUSED")
.then(updateUserProfile)
.catch(() => {
showErrorToast(t("try_again"));
});
};
const getProfileActions = () => {
@ -157,14 +182,10 @@ export function UserContent({
);
}
const friendRequest = friendRequests.find(
(request) => request.id == userProfile.id
);
if (!friendRequest) {
if (userProfile.relation == null) {
return (
<>
<Button theme="outline" onClick={() => {}}>
<Button theme="outline" onClick={handleSendFriendRequest}>
{t("add_friend")}
</Button>
@ -175,35 +196,49 @@ export function UserContent({
);
}
if (friendRequest.type === "RECEIVED") {
if (userProfile.relation.status === "ACCEPTED") {
return (
<>
<Button
theme="outline"
className={styles.acceptRequestButton}
onClick={() => handleAcceptFriendRequest(friendRequest.id)}
>
<CheckCircleIcon size={28} /> {t("accept_request")}
</Button>
<Button
theme="outline"
className={styles.cancelRequestButton}
onClick={() => handleRefuseFriendRequest(friendRequest.id)}
onClick={() => handleUndoFriendship(userProfile.relation!)}
>
<XCircleIcon size={28} /> {t("ignore_request")}
<XCircleIcon size={28} /> {t("undo_friendship")}
</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 (
<Button
theme="outline"
className={styles.cancelRequestButton}
onClick={() => handleCancelFriendRequest(friendRequest.id)}
>
<XCircleIcon size={28} /> {t("cancel_request")}
</Button>
<>
<Button
theme="outline"
className={styles.acceptRequestButton}
onClick={() => handleAcceptFriendRequest(userProfile.relation!.AId)}
>
<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";
}
export interface UserRelation {
AId: string;
BId: string;
status: "ACCEPTED" | "PENDING";
createdAt: string;
updatedAt: string;
}
export interface UserProfile {
id: string;
displayName: string;
@ -298,6 +306,7 @@ export interface UserProfile {
libraryGames: UserGame[];
recentGames: UserGame[];
friends: UserFriends;
relation: UserRelation | null;
}
export interface DownloadSource {