From d15ca88714ee3661735b048cead474943a099afd Mon Sep 17 00:00:00 2001 From: Chubby Granny Chaser Date: Sat, 14 Sep 2024 02:27:58 +0100 Subject: [PATCH] fix: using local state for game running --- src/locales/pt-BR/translation.json | 3 +- .../components/sidebar/sidebar-profile.tsx | 14 +++--- .../src/components/sidebar/sidebar.tsx | 9 +++- .../src/pages/game-details/game-details.tsx | 1 + .../pages/game-details/sidebar/sidebar.css.ts | 13 +++-- .../profile-content/profile-content.css.ts | 21 ++++++++ .../profile-content/profile-content.tsx | 18 +++---- .../profile/profile-hero/profile-hero.tsx | 48 +++++++++++++++---- src/renderer/src/pages/settings/settings.tsx | 22 ++++++--- 9 files changed, 112 insertions(+), 37 deletions(-) diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json index efd430ff..e04e5c7f 100644 --- a/src/locales/pt-BR/translation.json +++ b/src/locales/pt-BR/translation.json @@ -293,6 +293,7 @@ "image_process_failure": "Falha ao processar a imagem", "required_field": "Este campo é obrigatório", "displayname_min_length": "Nome de exibição deve ter pelo menos 3 caracteres", - "displayname_max_length": "Nome de exibição deve ter no máximo 50 caracteres" + "displayname_max_length": "Nome de exibição deve ter no máximo 50 caracteres", + "locked_profile": "Este perfil é privado" } } diff --git a/src/renderer/src/components/sidebar/sidebar-profile.tsx b/src/renderer/src/components/sidebar/sidebar-profile.tsx index 984ec80d..652d932e 100644 --- a/src/renderer/src/components/sidebar/sidebar-profile.tsx +++ b/src/renderer/src/components/sidebar/sidebar-profile.tsx @@ -1,7 +1,7 @@ import { useNavigate } from "react-router-dom"; import { PeopleIcon, PersonIcon } from "@primer/octicons-react"; import * as styles from "./sidebar-profile.css"; -import { useUserDetails } from "@renderer/hooks"; +import { useAppSelector, useUserDetails } from "@renderer/hooks"; import { useMemo } from "react"; import { useTranslation } from "react-i18next"; import { UserFriendModalTab } from "@renderer/pages/shared-modals/user-friend-modal"; @@ -13,6 +13,8 @@ export function SidebarProfile() { const { userDetails, friendRequests, showFriendsModal } = useUserDetails(); + const { gameRunning } = useAppSelector((state) => state.gameRunning); + const receivedRequests = useMemo(() => { return friendRequests.filter((request) => request.type === "RECEIVED"); }, [friendRequests]); @@ -74,19 +76,19 @@ export function SidebarProfile() { {userDetails ? userDetails.displayName : t("sign_in")}

- {userDetails && userDetails.currentGame && ( + {userDetails && gameRunning && (
- {userDetails.currentGame.title} + {gameRunning.title}
)} - {userDetails && userDetails.currentGame && ( + {userDetails && gameRunning && ( {userDetails.currentGame.title} )} diff --git a/src/renderer/src/components/sidebar/sidebar.tsx b/src/renderer/src/components/sidebar/sidebar.tsx index 7c90374a..383d2197 100644 --- a/src/renderer/src/components/sidebar/sidebar.tsx +++ b/src/renderer/src/components/sidebar/sidebar.tsx @@ -23,6 +23,8 @@ const SIDEBAR_MAX_WIDTH = 450; const initialSidebarWidth = window.localStorage.getItem("sidebarWidth"); export function Sidebar() { + const filterRef = useRef(null); + const { t } = useTranslation("sidebar"); const { library, updateLibrary } = useLibrary(); const navigate = useNavigate(); @@ -78,6 +80,10 @@ export function Sidebar() { useEffect(() => { setFilteredLibrary(sortedLibrary); + + if (filterRef.current) { + filterRef.current.value = ""; + } }, [sortedLibrary]); useEffect(() => { @@ -139,7 +145,7 @@ export function Sidebar() { navigate(path); } - if (event.detail == 2) { + if (event.detail === 2) { if (game.executablePath) { window.electron.openGame(game.id, game.executablePath); } else { @@ -190,6 +196,7 @@ export function Sidebar() { {t("my_library")} { + setHasNSFWContentBlocked(false); navigate(-1); }; diff --git a/src/renderer/src/pages/game-details/sidebar/sidebar.css.ts b/src/renderer/src/pages/game-details/sidebar/sidebar.css.ts index 116b5a30..9e3bf3f3 100644 --- a/src/renderer/src/pages/game-details/sidebar/sidebar.css.ts +++ b/src/renderer/src/pages/game-details/sidebar/sidebar.css.ts @@ -7,10 +7,6 @@ export const contentSidebar = style({ width: "100%", height: "100%", "@media": { - "(min-width: 768px)": { - width: "100%", - maxWidth: "200px", - }, "(min-width: 1024px)": { maxWidth: "300px", width: "100%", @@ -90,6 +86,14 @@ export const statsSection = style({ gap: `${SPACING_UNIT * 2}px`, padding: `${SPACING_UNIT * 2}px`, justifyContent: "space-between", + "@media": { + "(min-width: 1024px)": { + flexDirection: "column", + }, + "(min-width: 1280px)": { + flexDirection: "row", + }, + }, }); export const statsCategoryTitle = style({ @@ -104,7 +108,6 @@ export const statsCategory = style({ display: "flex", flexDirection: "column", gap: `${SPACING_UNIT / 2}px`, - alignItems: "flex-end", }); globalStyle(`${requirementsDetails} a`, { diff --git a/src/renderer/src/pages/profile/profile-content/profile-content.css.ts b/src/renderer/src/pages/profile/profile-content/profile-content.css.ts index 39f86f66..0a140c1a 100644 --- a/src/renderer/src/pages/profile/profile-content/profile-content.css.ts +++ b/src/renderer/src/pages/profile/profile-content/profile-content.css.ts @@ -124,3 +124,24 @@ export const gamesGrid = style({ }, }, }); + +export const telescopeIcon = style({ + width: "60px", + height: "60px", + borderRadius: "50%", + backgroundColor: "rgba(255, 255, 255, 0.06)", + display: "flex", + alignItems: "center", + justifyContent: "center", + marginBottom: `${SPACING_UNIT * 2}px`, +}); + +export const noGames = style({ + display: "flex", + width: "100%", + height: "100%", + justifyContent: "center", + alignItems: "center", + flexDirection: "column", + gap: `${SPACING_UNIT}px`, +}); diff --git a/src/renderer/src/pages/profile/profile-content/profile-content.tsx b/src/renderer/src/pages/profile/profile-content/profile-content.tsx index 739e7125..7f3887fb 100644 --- a/src/renderer/src/pages/profile/profile-content/profile-content.tsx +++ b/src/renderer/src/pages/profile/profile-content/profile-content.tsx @@ -29,11 +29,6 @@ export function ProfileContent() { } }, [userProfile, dispatch]); - const truncatedGamesList = useMemo(() => { - if (!userProfile) return []; - return userProfile?.libraryGames.slice(0, 12); - }, [userProfile]); - const { numberFormatter } = useFormat(); const navigate = useNavigate(); @@ -91,8 +86,16 @@ export function ProfileContent() {

{numberFormatter.format(userProfile.libraryGames.length)}

+ {/*
+
+ +
+

{t("no_recent_activity_title")}

+ {isMe &&

{t("no_recent_activity_description")}

} +
*/} +
    - {truncatedGamesList.map((game) => ( + {userProfile?.libraryGames?.map((game) => (
  • -

    Played recently

    +

    {t("activity")}

    @@ -216,7 +219,6 @@ export function ProfileContent() { formatPlayTime, numberFormatter, t, - truncatedGamesList, usersAreFriends, isMe, navigate, diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx b/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx index d001718a..14dca9d0 100644 --- a/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx +++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx @@ -4,8 +4,10 @@ import * as styles from "./profile-hero.css"; import { useCallback, useContext, useMemo, useState } from "react"; import { userProfileContext } from "@renderer/context"; import { + BlockedIcon, CheckCircleFillIcon, PencilIcon, + PersonAddIcon, PersonIcon, SignOutIcon, XCircleFillIcon, @@ -13,7 +15,12 @@ import { import { buildGameDetailsPath } from "@renderer/helpers"; import { Button, Link } from "@renderer/components"; import { useTranslation } from "react-i18next"; -import { useDate, useToast, useUserDetails } from "@renderer/hooks"; +import { + useAppSelector, + useDate, + useToast, + useUserDetails, +} from "@renderer/hooks"; import { addSeconds } from "date-fns"; import { useNavigate } from "react-router-dom"; @@ -37,10 +44,11 @@ export function ProfileHero() { blockUser, } = useUserDetails(); + const { gameRunning } = useAppSelector((state) => state.gameRunning); + const { isMe, heroBackground, getUserProfile } = context; const userProfile = context.userProfile!; - const { currentGame } = userProfile; const { t } = useTranslation("user_profile"); const { formatDistance } = useDate(); @@ -63,17 +71,17 @@ export function ProfileHero() { }, [navigate, signOut, showSuccessToast, t]); const handleFriendAction = useCallback( - (userId: string, action: FriendAction) => { + async (userId: string, action: FriendAction) => { setIsPerformingAction(true); try { if (action === "UNDO_FRIENDSHIP") { - undoFriendship(userId).then(getUserProfile); + await undoFriendship(userId).then(getUserProfile); return; } if (action === "BLOCK") { - blockUser(userId).then(() => { + await blockUser(userId).then(() => { showSuccessToast(t("user_blocked_successfully")); navigate(-1); }); @@ -82,11 +90,11 @@ export function ProfileHero() { } if (action === "SEND") { - sendFriendRequest(userProfile.id).then(getUserProfile); + await sendFriendRequest(userProfile.id).then(getUserProfile); return; } - updateFriendRequestState(userId, action).then(getUserProfile); + await updateFriendRequestState(userId, action).then(getUserProfile); } catch (err) { showErrorToast(t("try_again")); } finally { @@ -140,6 +148,7 @@ export function ProfileHero() { onClick={() => handleFriendAction(userProfile.id, "SEND")} disabled={isPerformingAction} > + {t("add_friend")} @@ -148,6 +157,7 @@ export function ProfileHero() { onClick={() => handleFriendAction(userProfile.id, "BLOCK")} disabled={isPerformingAction} > + {t("block_user")} @@ -218,6 +228,20 @@ export function ProfileHero() { } }, [isMe]); + const currentGame = useMemo(() => { + if (isMe) { + if (gameRunning) + return { + ...gameRunning, + objectId: gameRunning.objectID, + sessionDurationInSeconds: gameRunning.sessionDurationInMillis / 1000, + }; + + return null; + } + return userProfile.currentGame; + }, [isMe, userProfile, gameRunning]); + return ( <> {/*
    -
    -
    +
    {profileActions}
    diff --git a/src/renderer/src/pages/settings/settings.tsx b/src/renderer/src/pages/settings/settings.tsx index 776e47ee..be7e9597 100644 --- a/src/renderer/src/pages/settings/settings.tsx +++ b/src/renderer/src/pages/settings/settings.tsx @@ -12,17 +12,25 @@ import { SettingsContextProvider, } from "@renderer/context"; import { SettingsPrivacy } from "./settings-privacy"; +import { useUserDetails } from "@renderer/hooks"; +import { useMemo } from "react"; export function Settings() { const { t } = useTranslation("settings"); - const categories = [ - t("general"), - t("behavior"), - t("download_sources"), - "Real-Debrid", - t("privacy"), - ]; + const { userDetails } = useUserDetails(); + + const categories = useMemo(() => { + const categories = [ + t("general"), + t("behavior"), + t("download_sources"), + "Real-Debrid", + ]; + + if (userDetails) return [...categories, t("privacy")]; + return categories; + }, [userDetails, t]); return (