fet: show only received friends request on sidebar icon

This commit is contained in:
Zamitto 2024-07-25 19:12:14 -03:00
parent abdc9f6e98
commit 94bd691209

View File

@ -3,10 +3,11 @@ import { PersonAddIcon, PersonIcon } from "@primer/octicons-react";
import * as styles from "./sidebar-profile.css"; import * as styles from "./sidebar-profile.css";
import { assignInlineVars } from "@vanilla-extract/dynamic"; import { assignInlineVars } from "@vanilla-extract/dynamic";
import { useAppSelector, useUserDetails } from "@renderer/hooks"; import { useAppSelector, useUserDetails } from "@renderer/hooks";
import { useMemo } from "react"; import { useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { profileContainerBackground } from "./sidebar-profile.css"; import { profileContainerBackground } from "./sidebar-profile.css";
import { UserFriendModalTab } from "@renderer/pages/shared-modals/user-friend-modal"; import { UserFriendModalTab } from "@renderer/pages/shared-modals/user-friend-modal";
import { FriendRequest } from "@types";
export function SidebarProfile() { export function SidebarProfile() {
const navigate = useNavigate(); const navigate = useNavigate();
@ -16,6 +17,14 @@ export function SidebarProfile() {
const { userDetails, profileBackground, friendRequests, showFriendsModal } = const { userDetails, profileBackground, friendRequests, showFriendsModal } =
useUserDetails(); useUserDetails();
const [receivedRequests, setReceivedRequests] = useState<FriendRequest[]>([]);
useEffect(() => {
setReceivedRequests(
receivedRequests.filter((request) => request.type === "RECEIVED")
);
}, [friendRequests]);
const { gameRunning } = useAppSelector((state) => state.gameRunning); const { gameRunning } = useAppSelector((state) => state.gameRunning);
const handleButtonClick = () => { const handleButtonClick = () => {
@ -79,7 +88,7 @@ export function SidebarProfile() {
)} )}
</div> </div>
</button> </button>
{userDetails && friendRequests.length > 0 && !gameRunning && ( {userDetails && receivedRequests.length > 0 && !gameRunning && (
<div className={styles.friendRequestContainer}> <div className={styles.friendRequestContainer}>
<button <button
type="button" type="button"
@ -89,7 +98,7 @@ export function SidebarProfile() {
} }
> >
<PersonAddIcon size={24} /> <PersonAddIcon size={24} />
{friendRequests.length} {receivedRequests.length}
</button> </button>
</div> </div>
)} )}