feat: refactor

src/locales/en/translation.json

@@ -249,6 +249,7 @@
     "sending": "Sending",
     "friend_request_sent": "Friend request sent",
     "friends": "Friends",
-    "friends_list": "Friends list"
+    "friends_list": "Friends list",
+    "user_not_found": "User not found"
   }
 }

src/locales/pt/translation.json

@@ -249,6 +249,7 @@
     "friends": "Amigos",
     "add": "Adicionar",
     "sending": "Enviando",
-    "friends_list": "Lista de amigos"
+    "friends_list": "Lista de amigos",
+    "user_not_found": "Usuário não encontrado"
   }
 }

src/renderer/src/app.tsx

@@ -40,10 +40,10 @@ export function App() {
   const { clearDownload, setLastPacket } = useDownload();
 
   const {
-    showFriendsModal,
+    isFriendsModalVisible,
     friendRequetsModalTab,
-    setShowFriendsModal,
     updateFriendRequests,
+    hideFriendsModal,
   } = useUserDetails();
 
   const { fetchUserDetails, updateUserDetails, clearUserDetails } =
@@ -219,9 +219,9 @@ export function App() {
       />
 
       <UserFriendModal
-        visible={showFriendsModal}
+        visible={isFriendsModalVisible}
         initialTab={friendRequetsModalTab}
-        onClose={() => setShowFriendsModal(false, null)}
+        onClose={hideFriendsModal}
       />
 
       <main>

src/renderer/src/components/sidebar/sidebar-profile.tsx

@@ -13,12 +13,8 @@ export function SidebarProfile() {
 
   const { t } = useTranslation("sidebar");
 
-  const {
+  const { userDetails, profileBackground, friendRequests, showFriendsModal } =
-    userDetails,
+    useUserDetails();
-    profileBackground,
-    friendRequests,
-    setShowFriendsModal,
-  } = useUserDetails();
 
   const { gameRunning } = useAppSelector((state) => state.gameRunning);
 
@@ -88,9 +84,7 @@ export function SidebarProfile() {
           <button
             type="button"
             className={styles.friendRequestButton}
-            onClick={() =>
+            onClick={() => showFriendsModal(UserFriendModalTab.AddFriend)}
-              setShowFriendsModal(true, UserFriendModalTab.AddFriend)
-            }
           >
             <PersonAddIcon size={24} />
             {friendRequests.length}

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

@@ -6,7 +6,7 @@ export interface UserDetailsState {
   userDetails: UserDetails | null;
   profileBackground: null | string;
   friendRequests: FriendRequest[];
-  showFriendsModal: boolean;
+  isFriendsModalVisible: boolean;
   friendRequetsModalTab: UserFriendModalTab | null;
 }
 
@@ -14,7 +14,7 @@ const initialState: UserDetailsState = {
   userDetails: null,
   profileBackground: null,
   friendRequests: [],
-  showFriendsModal: false,
+  isFriendsModalVisible: false,
   friendRequetsModalTab: null,
 };
 
@@ -31,15 +31,17 @@ export const userDetailsSlice = createSlice({
     setFriendRequests: (state, action: PayloadAction<FriendRequest[]>) => {
       state.friendRequests = action.payload;
     },
-    setshowFriendsModal: (state, action: PayloadAction<boolean>) => {
+    setFriendsModalVisible: (
-      state.showFriendsModal = action.payload;
-    },
-    setFriendRequestsModal: (
       state,
-      action: PayloadAction<UserFriendModalTab | null>
+      action: PayloadAction<UserFriendModalTab>
     ) => {
+      state.isFriendsModalVisible = true;
       state.friendRequetsModalTab = action.payload;
     },
+    setFriendsModalHidden: (state) => {
+      state.isFriendsModalVisible = false;
+      state.friendRequetsModalTab = null;
+    },
   },
 });
 
@@ -47,6 +49,6 @@ export const {
   setUserDetails,
   setProfileBackground,
   setFriendRequests,
-  setshowFriendsModal,
+  setFriendsModalVisible,
-  setFriendRequestsModal,
+  setFriendsModalHidden,
 } = userDetailsSlice.actions;

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

@@ -6,8 +6,8 @@ import {
   setProfileBackground,
   setUserDetails,
   setFriendRequests,
-  setshowFriendsModal,
+  setFriendsModalVisible,
-  setFriendRequestsModal,
+  setFriendsModalHidden,
 } from "@renderer/features";
 import { darkenColor } from "@renderer/helpers";
 import { FriendRequestAction, UserDetails } from "@types";
@@ -20,7 +20,7 @@ export function useUserDetails() {
     userDetails,
     profileBackground,
     friendRequests,
-    showFriendsModal,
+    isFriendsModalVisible,
     friendRequetsModalTab,
   } = useAppSelector((state) => state.userDetails);
 
@@ -94,18 +94,18 @@ export function useUserDetails() {
     dispatch(setFriendRequests(friendRequests || []));
   }, [dispatch]);
 
-  const setShowFriendsModal = useCallback(
+  const showFriendsModal = useCallback(
-    (showModal: boolean, tab: UserFriendModalTab | null) => {
+    (tab: UserFriendModalTab) => {
-      dispatch(setFriendRequestsModal(tab));
+      dispatch(setFriendsModalVisible(tab));
-      dispatch(setshowFriendsModal(showModal));
+      updateFriendRequests();
-
-      if (showModal) {
-        updateFriendRequests();
-      }
     },
     [dispatch]
   );
 
+  const hideFriendsModal = useCallback(() => {
+    dispatch(setFriendsModalHidden());
+  }, [dispatch]);
+
   const sendFriendRequest = useCallback(
     async (userId: string) => {
       return window.electron
@@ -128,8 +128,10 @@ export function useUserDetails() {
     userDetails,
     profileBackground,
     friendRequests,
-    showFriendsModal,
     friendRequetsModalTab,
+    isFriendsModalVisible,
+    showFriendsModal,
+    hideFriendsModal,
     fetchUserDetails,
     signOut,
     clearUserDetails,
@@ -138,6 +140,5 @@ export function useUserDetails() {
     sendFriendRequest,
     updateFriendRequests,
     updateFriendRequestState,
-    setShowFriendsModal,
   };
 }

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

@@ -37,7 +37,7 @@ export function UserContent({
     profileBackground,
     signOut,
     updateFriendRequests,
-    setShowFriendsModal,
+    showFriendsModal,
   } = useUserDetails();
   const { showSuccessToast } = useToast();
 
@@ -332,9 +332,7 @@ export function UserContent({
             <div className={styles.friendsSection}>
               <button
                 className={styles.friendsSectionHeader}
-                onClick={() =>
+                onClick={() => showFriendsModal(UserFriendModalTab.FriendsList)}
-                  setShowFriendsModal(true, UserFriendModalTab.FriendsList)
-                }
               >
                 <h2>{t("friends")}</h2>
 
@@ -390,7 +388,7 @@ export function UserContent({
                   <Button
                     theme="outline"
                     onClick={() =>
-                      setShowFriendsModal(true, UserFriendModalTab.AddFriend)
+                      showFriendsModal(UserFriendModalTab.AddFriend)
                     }
                   >
                     <PlusIcon /> {t("add")}

src/renderer/src/pages/user/user.tsx

@@ -8,12 +8,15 @@ import { UserContent } from "./user-content";
 import { SkeletonTheme } from "react-loading-skeleton";
 import { vars } from "@renderer/theme.css";
 import * as styles from "./user.css";
+import { useTranslation } from "react-i18next";
 
 export const User = () => {
   const { userId } = useParams();
   const [userProfile, setUserProfile] = useState<UserProfile>();
   const navigate = useNavigate();
 
+  const { t } = useTranslation("user_profile");
+
   const { showErrorToast } = useToast();
 
   const dispatch = useAppDispatch();
@@ -24,11 +27,11 @@ export const User = () => {
         dispatch(setHeaderTitle(userProfile.displayName));
         setUserProfile(userProfile);
       } else {
-        showErrorToast("Usuário não encontrado");
+        showErrorToast(t("user_not_found"));
         navigate(-1);
       }
     });
-  }, [dispatch, userId]);
+  }, [dispatch, userId, t]);
 
   useEffect(() => {
     getUserProfile();