From 5aec973882b9120e4daf9785a29dec02b0a21832 Mon Sep 17 00:00:00 2001 From: Zamitto <167933696+zamitto@users.noreply.github.com> Date: Tue, 16 Jul 2024 12:39:16 -0300 Subject: [PATCH] feat: show friend request modal when click on sidebar --- src/renderer/src/app.tsx | 19 +++++++- .../components/sidebar/sidebar-profile.css.ts | 2 +- .../components/sidebar/sidebar-profile.tsx | 15 +++--- .../src/features/user-details-slice.ts | 13 ++++- src/renderer/src/hooks/use-user-details.ts | 22 +++++++-- .../user-friend-request-modal.tsx} | 2 +- .../user-friend-request.tsx | 2 +- src/renderer/src/pages/user/user-content.tsx | 47 ++++++++----------- src/renderer/src/pages/user/user.css.ts | 11 +++++ 9 files changed, 91 insertions(+), 42 deletions(-) rename src/renderer/src/pages/{user/user-add-friends-modal.tsx => shared-modals/user-friend-request-modal.tsx} (99%) rename src/renderer/src/pages/{user => shared-modals}/user-friend-request.tsx (98%) diff --git a/src/renderer/src/app.tsx b/src/renderer/src/app.tsx index afce9622..a91e8881 100644 --- a/src/renderer/src/app.tsx +++ b/src/renderer/src/app.tsx @@ -25,6 +25,7 @@ import { setGameRunning, } from "@renderer/features"; import { useTranslation } from "react-i18next"; +import { UserFriendRequestModal } from "./pages/shared-modals/user-friend-request-modal"; export interface AppProps { children: React.ReactNode; @@ -38,6 +39,13 @@ export function App() { const { clearDownload, setLastPacket } = useDownload(); + const { + userDetails, + showFriendRequestsModal, + setShowFriendRequestModal, + updateFriendRequests, + } = useUserDetails(); + const { fetchUserDetails, updateUserDetails, clearUserDetails } = useUserDetails(); @@ -94,7 +102,10 @@ export function App() { } fetchUserDetails().then((response) => { - if (response) updateUserDetails(response); + if (response) { + updateUserDetails(response); + updateFriendRequests(); + } }); }, [fetchUserDetails, updateUserDetails, dispatch]); @@ -102,6 +113,7 @@ export function App() { fetchUserDetails().then((response) => { if (response) { updateUserDetails(response); + updateFriendRequests(); showSuccessToast(t("successfully_signed_in")); } }); @@ -206,6 +218,11 @@ export function App() { onClose={handleToastClose} /> + setShowFriendRequestModal(false)} + /> +
diff --git a/src/renderer/src/components/sidebar/sidebar-profile.css.ts b/src/renderer/src/components/sidebar/sidebar-profile.css.ts index 9fcc64c2..ba29c850 100644 --- a/src/renderer/src/components/sidebar/sidebar-profile.css.ts +++ b/src/renderer/src/components/sidebar/sidebar-profile.css.ts @@ -93,6 +93,6 @@ export const friendRequestButton = style({ width: "40px", height: "40px", ":hover": { - color: vars.color.body, + color: vars.color.muted, }, }); diff --git a/src/renderer/src/components/sidebar/sidebar-profile.tsx b/src/renderer/src/components/sidebar/sidebar-profile.tsx index d4414dec..33779c0f 100644 --- a/src/renderer/src/components/sidebar/sidebar-profile.tsx +++ b/src/renderer/src/components/sidebar/sidebar-profile.tsx @@ -12,7 +12,12 @@ export function SidebarProfile() { const { t } = useTranslation("sidebar"); - const { userDetails, profileBackground } = useUserDetails(); + const { + userDetails, + profileBackground, + friendRequests, + setShowFriendRequestModal, + } = useUserDetails(); const { gameRunning } = useAppSelector((state) => state.gameRunning); @@ -77,17 +82,15 @@ export function SidebarProfile() { )} - {userDetails && !gameRunning && ( + {userDetails && friendRequests?.length && !gameRunning && (
)} diff --git a/src/renderer/src/features/user-details-slice.ts b/src/renderer/src/features/user-details-slice.ts index 1912c810..04b716fd 100644 --- a/src/renderer/src/features/user-details-slice.ts +++ b/src/renderer/src/features/user-details-slice.ts @@ -5,12 +5,14 @@ export interface UserDetailsState { userDetails: UserDetails | null; profileBackground: null | string; friendRequests: FriendRequest[] | null; + showFriendRequestsModal: boolean; } const initialState: UserDetailsState = { userDetails: null, profileBackground: null, friendRequests: null, + showFriendRequestsModal: false, }; export const userDetailsSlice = createSlice({ @@ -29,8 +31,15 @@ export const userDetailsSlice = createSlice({ ) => { state.friendRequests = action.payload; }, + setShowFriendRequestsModal: (state, action: PayloadAction) => { + state.showFriendRequestsModal = action.payload; + }, }, }); -export const { setUserDetails, setProfileBackground, setFriendRequests } = - userDetailsSlice.actions; +export const { + setUserDetails, + setProfileBackground, + setFriendRequests, + setShowFriendRequestsModal, +} = userDetailsSlice.actions; diff --git a/src/renderer/src/hooks/use-user-details.ts b/src/renderer/src/hooks/use-user-details.ts index ceb2df3f..da4d51b5 100644 --- a/src/renderer/src/hooks/use-user-details.ts +++ b/src/renderer/src/hooks/use-user-details.ts @@ -6,6 +6,7 @@ import { setProfileBackground, setUserDetails, setFriendRequests, + setShowFriendRequestsModal, } from "@renderer/features"; import { darkenColor } from "@renderer/helpers"; import { FriendRequestAction, UserDetails } from "@types"; @@ -13,9 +14,12 @@ import { FriendRequestAction, UserDetails } from "@types"; export function useUserDetails() { const dispatch = useAppDispatch(); - const { userDetails, profileBackground, friendRequests } = useAppSelector( - (state) => state.userDetails - ); + const { + userDetails, + profileBackground, + friendRequests, + showFriendRequestsModal, + } = useAppSelector((state) => state.userDetails); const clearUserDetails = useCallback(async () => { dispatch(setUserDetails(null)); @@ -87,6 +91,16 @@ export function useUserDetails() { dispatch(setFriendRequests(friendRequests)); }, [dispatch]); + const setShowFriendRequestModal = useCallback( + (showModal: boolean) => { + dispatch(setShowFriendRequestsModal(showModal)); + if (showModal) { + updateFriendRequests(); + } + }, + [dispatch] + ); + const sendFriendRequest = useCallback( async (userId: string) => { return window.electron @@ -109,6 +123,7 @@ export function useUserDetails() { userDetails, profileBackground, friendRequests, + showFriendRequestsModal, fetchUserDetails, signOut, clearUserDetails, @@ -117,5 +132,6 @@ export function useUserDetails() { sendFriendRequest, updateFriendRequests, updateFriendRequestState, + setShowFriendRequestModal, }; } diff --git a/src/renderer/src/pages/user/user-add-friends-modal.tsx b/src/renderer/src/pages/shared-modals/user-friend-request-modal.tsx similarity index 99% rename from src/renderer/src/pages/user/user-add-friends-modal.tsx rename to src/renderer/src/pages/shared-modals/user-friend-request-modal.tsx index d980df43..9d8dbe6f 100644 --- a/src/renderer/src/pages/user/user-add-friends-modal.tsx +++ b/src/renderer/src/pages/shared-modals/user-friend-request-modal.tsx @@ -11,7 +11,7 @@ export interface UserAddFriendsModalProps { onClose: () => void; } -export const UserAddFriendsModal = ({ +export const UserFriendRequestModal = ({ visible, onClose, }: UserAddFriendsModalProps) => { diff --git a/src/renderer/src/pages/user/user-friend-request.tsx b/src/renderer/src/pages/shared-modals/user-friend-request.tsx similarity index 98% rename from src/renderer/src/pages/user/user-friend-request.tsx rename to src/renderer/src/pages/shared-modals/user-friend-request.tsx index e37004fc..e79a8369 100644 --- a/src/renderer/src/pages/user/user-friend-request.tsx +++ b/src/renderer/src/pages/shared-modals/user-friend-request.tsx @@ -3,7 +3,7 @@ import { PersonIcon, XCircleIcon, } from "@primer/octicons-react"; -import * as styles from "./user.css"; +import * as styles from "../user/user.css"; import cn from "classnames"; import { SPACING_UNIT } from "@renderer/theme.css"; diff --git a/src/renderer/src/pages/user/user-content.tsx b/src/renderer/src/pages/user/user-content.tsx index 503561a9..e1b0a8a2 100644 --- a/src/renderer/src/pages/user/user-content.tsx +++ b/src/renderer/src/pages/user/user-content.tsx @@ -16,12 +16,13 @@ import { buildGameDetailsPath, steamUrlBuilder } from "@renderer/helpers"; import { PersonAddIcon, PersonIcon, + PlusCircleIcon, + PlusIcon, TelescopeIcon, } from "@primer/octicons-react"; import { Button, Link } from "@renderer/components"; import { UserEditProfileModal } from "./user-edit-modal"; import { UserSignOutModal } from "./user-signout-modal"; -import { UserAddFriendsModal } from "./user-add-friends-modal"; const MAX_MINUTES_TO_SHOW_IN_PLAYTIME = 120; @@ -36,13 +37,17 @@ export function UserContent({ }: ProfileContentProps) { const { t, i18n } = useTranslation("user_profile"); - const { userDetails, profileBackground, signOut, updateFriendRequests } = - useUserDetails(); + const { + userDetails, + profileBackground, + signOut, + updateFriendRequests, + setShowFriendRequestModal, + } = useUserDetails(); const { showSuccessToast } = useToast(); const [showEditProfileModal, setShowEditProfileModal] = useState(false); const [showSignOutModal, setShowSignOutModal] = useState(false); - const [showAddFriendsModal, setShowAddFriendsModal] = useState(false); const { gameRunning } = useAppSelector((state) => state.gameRunning); @@ -117,11 +122,6 @@ export function UserContent({ onConfirm={handleConfirmSignout} /> - setShowAddFriendsModal(false)} - /> -
0)) && (
-
+

{t("friends")}

- {isMe && ( - - )} +

+ {userProfile.friends?.length || 0} +

); })} + +
)} diff --git a/src/renderer/src/pages/user/user.css.ts b/src/renderer/src/pages/user/user.css.ts index 8a56bd7d..629e8dc9 100644 --- a/src/renderer/src/pages/user/user.css.ts +++ b/src/renderer/src/pages/user/user.css.ts @@ -119,6 +119,17 @@ export const friendsSection = style({ gap: `${SPACING_UNIT * 2}px`, }); +export const friendsSectionHeader = style({ + cursor: "pointer", + display: "flex", + alignItems: "center", + justifyContent: "space-between", + gap: `${SPACING_UNIT * 2}px`, + ":hover": { + color: vars.color.muted, + }, +}); + export const contentSidebar = style({ width: "100%", display: "flex",