mirror of
https://github.com/hydralauncher/hydra.git
synced 2025-03-09 15:40:26 +00:00
feat: action buttons on user profile page
This commit is contained in:
parent
102299e42f
commit
304aa011ad
8 changed files with 101 additions and 47 deletions
|
@ -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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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]);
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
.getFriendRequests()
|
||||||
|
.then((friendRequests) => {
|
||||||
dispatch(setFriendRequests(friendRequests));
|
dispatch(setFriendRequests(friendRequests));
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
}, [dispatch]);
|
}, [dispatch]);
|
||||||
|
|
||||||
const showFriendsModal = useCallback(
|
const showFriendsModal = useCallback(
|
||||||
|
|
|
@ -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"));
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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,21 +124,46 @@ 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"));
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -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,36 +196,50 @@ export function UserContent({
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (friendRequest.type === "RECEIVED") {
|
if (userProfile.relation.status === "ACCEPTED") {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
theme="outline"
|
||||||
|
className={styles.cancelRequestButton}
|
||||||
|
onClick={() => handleUndoFriendship(userProfile.relation!)}
|
||||||
|
>
|
||||||
|
<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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<Button
|
<Button
|
||||||
theme="outline"
|
theme="outline"
|
||||||
className={styles.acceptRequestButton}
|
className={styles.acceptRequestButton}
|
||||||
onClick={() => handleAcceptFriendRequest(friendRequest.id)}
|
onClick={() => handleAcceptFriendRequest(userProfile.relation!.AId)}
|
||||||
>
|
>
|
||||||
<CheckCircleIcon size={28} /> {t("accept_request")}
|
<CheckCircleIcon size={28} /> {t("accept_request")}
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
theme="outline"
|
theme="outline"
|
||||||
className={styles.cancelRequestButton}
|
className={styles.cancelRequestButton}
|
||||||
onClick={() => handleRefuseFriendRequest(friendRequest.id)}
|
onClick={() => handleRefuseFriendRequest(userProfile.relation!.AId)}
|
||||||
>
|
>
|
||||||
<XCircleIcon size={28} /> {t("ignore_request")}
|
<XCircleIcon size={28} /> {t("ignore_request")}
|
||||||
</Button>
|
</Button>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Button
|
|
||||||
theme="outline"
|
|
||||||
className={styles.cancelRequestButton}
|
|
||||||
onClick={() => handleCancelFriendRequest(friendRequest.id)}
|
|
||||||
>
|
|
||||||
<XCircleIcon size={28} /> {t("cancel_request")}
|
|
||||||
</Button>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue