feat: refactor friends requests

src/main/events/index.ts

@@ -45,6 +45,7 @@ import "./auth/get-session-hash";
 import "./user/get-user";
 import "./profile/get-friend-requests";
 import "./profile/get-me";
+import "./profile/update-friend-request";
 import "./profile/update-profile";
 
 ipcMain.handle("ping", () => "pong");

src/main/events/profile/get-friend-requests.ts

@@ -1,10 +1,10 @@
 import { registerEvent } from "../register-event";
 import { HydraApi } from "@main/services";
-import { PendingFriendRequest } from "@types";
+import { FriendRequest } from "@types";
 
 const getFriendRequests = async (
   _event: Electron.IpcMainInvokeEvent
-): Promise<PendingFriendRequest[] | null> => {
+): Promise<FriendRequest[] | null> => {
   try {
     const response = await HydraApi.get(`/profile/friend-requests`);
     return response.data;

src/main/events/profile/update-friend-request.ts

@@ -0,0 +1,19 @@
+import { registerEvent } from "../register-event";
+import { HydraApi } from "@main/services";
+import { FriendRequestAction } from "@types";
+
+const updateFriendRequest = async (
+  _event: Electron.IpcMainInvokeEvent,
+  userId: string,
+  action: FriendRequestAction
+) => {
+  if (action == "CANCEL") {
+    return HydraApi.delete(`/profile/friend-requests/${userId}`);
+  }
+
+  return HydraApi.patch(`/profile/friend-requests/${userId}`, {
+    requestState: action,
+  });
+};
+
+registerEvent("updateFriendRequest", updateFriendRequest);

src/preload/index.ts

@@ -9,6 +9,7 @@ import type {
   AppUpdaterEvent,
   StartGameDownloadPayload,
   GameRunning,
+  FriendRequestAction,
 } from "@types";
 
 contextBridge.exposeInMainWorld("electron", {
@@ -137,6 +138,8 @@ contextBridge.exposeInMainWorld("electron", {
   updateProfile: (displayName: string, newProfileImagePath: string | null) =>
     ipcRenderer.invoke("updateProfile", displayName, newProfileImagePath),
   getFriendRequests: () => ipcRenderer.invoke("getFriendRequests"),
+  updateFriendRequest: (userId: string, action: FriendRequestAction) =>
+    ipcRenderer.invoke("updateFriendRequest", userId, action),
 
   /* User */
   getUser: (userId: string) => ipcRenderer.invoke("getUser", userId),

src/renderer/src/declaration.d.ts

@@ -14,7 +14,8 @@ import type {
   RealDebridUser,
   DownloadSource,
   UserProfile,
-  PendingFriendRequest,
+  FriendRequest,
+  FriendRequestAction,
 } from "@types";
 import type { DiskSpace } from "check-disk-space";
 
@@ -133,7 +134,11 @@ declare global {
       displayName: string,
       newProfileImagePath: string | null
     ) => Promise<UserProfile>;
-    getFriendRequests: () => Promise<PendingFriendRequest[] | null>;
+    getFriendRequests: () => Promise<FriendRequest[] | null>;
+    updateFriendRequest: (
+      userId: string,
+      action: FriendRequestAction
+    ) => Promise<void>;
   }
 
   interface Window {

src/renderer/src/features/user-details-slice.ts

@@ -1,14 +1,16 @@
 import { PayloadAction, createSlice } from "@reduxjs/toolkit";
-import type { UserDetails } from "@types";
+import type { FriendRequest, UserDetails } from "@types";
 
 export interface UserDetailsState {
   userDetails: UserDetails | null;
   profileBackground: null | string;
+  friendRequests: FriendRequest[] | null;
 }
 
 const initialState: UserDetailsState = {
   userDetails: null,
   profileBackground: null,
+  friendRequests: null,
 };
 
 export const userDetailsSlice = createSlice({
@@ -21,8 +23,14 @@ export const userDetailsSlice = createSlice({
     setProfileBackground: (state, action: PayloadAction<string | null>) => {
       state.profileBackground = action.payload;
     },
+    setFriendRequests: (
+      state,
+      action: PayloadAction<FriendRequest[] | null>
+    ) => {
+      state.friendRequests = action.payload;
+    },
   },
 });
 
-export const { setUserDetails, setProfileBackground } =
+export const { setUserDetails, setProfileBackground, setFriendRequests } =
   userDetailsSlice.actions;

src/renderer/src/hooks/use-user-details.ts

@@ -2,14 +2,18 @@ import { useCallback } from "react";
 import { average } from "color.js";
 
 import { useAppDispatch, useAppSelector } from "./redux";
-import { setProfileBackground, setUserDetails } from "@renderer/features";
+import {
+  setProfileBackground,
+  setUserDetails,
+  setFriendRequests,
+} from "@renderer/features";
 import { darkenColor } from "@renderer/helpers";
 import { UserDetails } from "@types";
 
 export function useUserDetails() {
   const dispatch = useAppDispatch();
 
-  const { userDetails, profileBackground } = useAppSelector(
+  const { userDetails, profileBackground, friendRequests } = useAppSelector(
     (state) => state.userDetails
   );
 
@@ -82,19 +86,21 @@ export function useUserDetails() {
     console.log("sending friend request to", userId);
   }, []);
 
-  const fetchPendingRequests = useCallback(async () => {
+  const updateFriendRequests = useCallback(async () => {
-    return window.electron.getFriendRequests();
+    const friendRequests = await window.electron.getFriendRequests();
-  }, []);
+    dispatch(setFriendRequests(friendRequests));
+  }, [dispatch]);
 
   return {
     userDetails,
+    profileBackground,
+    friendRequests,
     fetchUserDetails,
     signOut,
     clearUserDetails,
     updateUserDetails,
     patchUser,
     sendFriendRequest,
-    fetchPendingRequests,
+    updateFriendRequests,
-    profileBackground,
   };
 }

src/renderer/src/pages/user/user-add-friends-modal.tsx

@@ -1,22 +1,19 @@
 import { Button, Modal, TextField } from "@renderer/components";
-import { PendingFriendRequest } from "@types";
 import { SPACING_UNIT } from "@renderer/theme.css";
 import { useState } from "react";
 import { useToast, useUserDetails } from "@renderer/hooks";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-import { UserFriendPendingRequest } from "./user-friend-pending-request";
+import { UserFriendRequest } from "./user-friend-request";
 
 export interface UserAddFriendsModalProps {
   visible: boolean;
   onClose: () => void;
-  pendingRequests: PendingFriendRequest[];
 }
 
 export const UserAddFriendsModal = ({
   visible,
   onClose,
-  pendingRequests,
 }: UserAddFriendsModalProps) => {
   const { t } = useTranslation("user_profile");
 
@@ -25,7 +22,8 @@ export const UserAddFriendsModal = ({
 
   const navigate = useNavigate();
 
-  const { sendFriendRequest } = useUserDetails();
+  const { sendFriendRequest, updateFriendRequests, friendRequests } =
+    useUserDetails();
 
   const { showSuccessToast, showErrorToast } = useToast();
 
@@ -33,6 +31,7 @@ export const UserAddFriendsModal = ({
     setIsAddingFriend(true);
     sendFriendRequest(friendCode)
       .then(() => {
+        updateFriendRequests();
         showSuccessToast(t("friend_request_sent"));
       })
       .catch(() => {
@@ -54,14 +53,17 @@ export const UserAddFriendsModal = ({
 
   const handleClickCancelFriendRequest = (userId: string) => {
     console.log(userId);
+    updateFriendRequests();
   };
 
   const handleClickAcceptFriendRequest = (userId: string) => {
     console.log(userId);
+    updateFriendRequests();
   };
 
   const handleClickRefuseFriendRequest = (userId: string) => {
     console.log(userId);
+    updateFriendRequests();
   };
 
   const resetModal = () => {
@@ -131,9 +133,9 @@ export const UserAddFriendsModal = ({
             }}
           >
             <h3>Pendentes</h3>
-            {pendingRequests.map((request) => {
+            {friendRequests?.map((request) => {
               return (
-                <UserFriendPendingRequest
+                <UserFriendRequest
                   key={request.userId}
                   displayName={request.displayName}
                   isRequestSent={request.type === "SENT"}

src/renderer/src/pages/user/user-content.tsx

@@ -1,4 +1,4 @@
-import { PendingFriendRequest, UserGame, UserProfile } from "@types";
+import { UserGame, UserProfile } from "@types";
 import cn from "classnames";
 import * as styles from "./user.css";
 import { SPACING_UNIT, vars } from "@renderer/theme.css";
@@ -36,7 +36,8 @@ export function UserContent({
 }: ProfileContentProps) {
   const { t, i18n } = useTranslation("user_profile");
 
-  const { userDetails, profileBackground, signOut } = useUserDetails();
+  const { userDetails, profileBackground, signOut, updateFriendRequests } =
+    useUserDetails();
   const { showSuccessToast } = useToast();
 
   const [showEditProfileModal, setShowEditProfileModal] = useState(false);
@@ -89,16 +90,10 @@ export function UserContent({
     navigate("/");
   };
 
-  const [pendingRequests, setPendingRequests] = useState<
-    PendingFriendRequest[]
-  >([]);
-
   const isMe = userDetails?.id == userProfile.id;
 
   useEffect(() => {
-    window.electron.getFriendRequests().then((friendsRequests) => {
+    if (isMe) updateFriendRequests();
-      setPendingRequests(friendsRequests ?? []);
-    });
   }, [isMe]);
 
   const profileContentBoxBackground = useMemo(() => {
@@ -123,7 +118,6 @@ export function UserContent({
       />
 
       <UserAddFriendsModal
-        pendingRequests={pendingRequests}
         visible={showAddFriendsModal}
         onClose={() => setShowAddFriendsModal(false)}
       />

src/renderer/src/pages/user/user-friend-request.tsx

@@ -6,7 +6,7 @@ import {
 import * as styles from "./user.css";
 import cn from "classnames";
 
-export interface UserFriendPendingRequestProps {
+export interface UserFriendRequestProps {
   userId: string;
   profileImageUrl: string | null;
   displayName: string;
@@ -17,7 +17,7 @@ export interface UserFriendPendingRequestProps {
   onClickRequest: (userId: string) => void;
 }
 
-export const UserFriendPendingRequest = ({
+export const UserFriendRequest = ({
   userId,
   profileImageUrl,
   displayName,
@@ -26,7 +26,7 @@ export const UserFriendPendingRequest = ({
   onClickAcceptRequest,
   onClickRefuseRequest,
   onClickRequest,
-}: UserFriendPendingRequestProps) => {
+}: UserFriendRequestProps) => {
   return (
     <button
       type="button"

src/types/index.ts

@@ -10,6 +10,8 @@ export type GameStatus =
 
 export type GameShop = "steam" | "epic";
 
+export type FriendRequestAction = "ACCEPTED" | "REFUSED" | "CANCEL";
+
 export interface SteamGenre {
   id: string;
   name: string;
@@ -275,7 +277,7 @@ export interface UserFriend {
   profileImageUrl: string | null;
 }
 
-export interface PendingFriendRequest {
+export interface FriendRequest {
   userId: string;
   displayName: string;
   profileImageUrl: string | null;