feat: show friend request modal when click on sidebar

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}
       />
 
+      <UserFriendRequestModal
+        visible={showFriendRequestsModal}
+        onClose={() => setShowFriendRequestModal(false)}
+      />
+
       <main>
         <Sidebar />
 

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,
   },
 });

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() {
           )}
         </div>
       </button>
-      {userDetails && !gameRunning && (
+      {userDetails && friendRequests?.length && !gameRunning && (
         <div className={styles.friendRequestContainer}>
           <button
             type="button"
             className={styles.friendRequestButton}
-            onClick={() => {
-              console.log("alshdaksjhdskajhd");
-            }}
+            onClick={() => setShowFriendRequestModal(true)}
           >
             <PersonAddIcon size={24} />
-            30
+            {friendRequests.length}
           </button>
         </div>
       )}

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<boolean>) => {
+      state.showFriendRequestsModal = action.payload;
+    },
   },
 });
 
-export const { setUserDetails, setProfileBackground, setFriendRequests } =
-  userDetailsSlice.actions;
+export const {
+  setUserDetails,
+  setProfileBackground,
+  setFriendRequests,
+  setShowFriendRequestsModal,
+} = userDetailsSlice.actions;

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,
   };
 }

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) => {

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";
 

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}
       />
 
-      <UserAddFriendsModal
-        visible={showAddFriendsModal}
-        onClose={() => setShowAddFriendsModal(false)}
-      />
-
       <section
         className={styles.profileContentBox}
         style={{
@@ -335,14 +335,7 @@ export function UserContent({
           {(isMe ||
             (userProfile.friends && userProfile.friends.length > 0)) && (
             <div className={styles.friendsSection}>
-              <div
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  gap: `${SPACING_UNIT * 2}px`,
-                }}
-              >
+              <div className={styles.friendsSectionHeader}>
                 <h2>{t("friends")}</h2>
 
                 <div
@@ -352,16 +345,9 @@ export function UserContent({
                     height: "1px",
                   }}
                 />
-                {isMe && (
-                  <button
-                    type="button"
-                    style={{ color: vars.color.success, cursor: "pointer" }}
-                    onClick={() => setShowAddFriendsModal(true)}
-                  >
-                    <PersonAddIcon size={24} />
-                    30
-                  </button>
-                )}
+                <h3 style={{ fontWeight: "400" }}>
+                  {userProfile.friends?.length || 0}
+                </h3>
               </div>
 
               <div
@@ -399,6 +385,13 @@ export function UserContent({
                     </button>
                   );
                 })}
+
+                <Button
+                  theme="outline"
+                  onClick={() => setShowFriendRequestModal(true)}
+                >
+                  <PlusIcon /> Add friend
+                </Button>
               </div>
             </div>
           )}

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",