feat: conditional to show user content section based on visibility

This commit is contained in:
Zamitto 2024-08-14 19:12:26 -03:00
parent 6806787ca0
commit 7e6b9ca825
4 changed files with 173 additions and 159 deletions

View file

@ -266,6 +266,7 @@
"public": "Public",
"private": "Private",
"friends_only": "Friends only",
"privacy": "Privacy"
"privacy": "Privacy",
"blocked_users": "Blocked users"
}
}

View file

@ -266,6 +266,7 @@
"privacy": "Privacidade",
"private": "Privado",
"friends_only": "Apenas amigos",
"public": "Público"
"public": "Público",
"blocked_users": "Usuários bloqueados"
}
}

View file

@ -160,6 +160,11 @@ export function UserContent({
};
const showFriends = isMe || userProfile.totalFriends > 0;
const showProfileContent =
isMe ||
userProfile.profileVisibility === "PUBLIC" ||
(userProfile.relation?.status === "ACCEPTED" &&
userProfile.profileVisibility === "FRIENDS");
const getProfileActions = () => {
if (isMe) {
@ -362,6 +367,7 @@ export function UserContent({
</div>
</section>
{showProfileContent && (
<div className={styles.profileContent}>
<div className={styles.profileGameSection}>
<h2>{t("activity")}</h2>
@ -440,7 +446,9 @@ export function UserContent({
{userProfile.libraryGames.length}
</h3>
</div>
<small>{t("total_play_time", { amount: formatPlayTime() })}</small>
<small>
{t("total_play_time", { amount: formatPlayTime() })}
</small>
<div
style={{
display: "grid",
@ -451,7 +459,10 @@ export function UserContent({
{userProfile.libraryGames.map((game) => (
<button
key={game.objectID}
className={cn(styles.gameListItem, styles.profileContentBox)}
className={cn(
styles.gameListItem,
styles.profileContentBox
)}
onClick={() => handleGameClick(game)}
title={game.title}
>
@ -548,6 +559,7 @@ export function UserContent({
)}
</div>
</div>
)}
</>
);
}

View file

@ -20,7 +20,7 @@ export const UserProfileSettingsModal = ({
}: UserEditProfileModalProps) => {
const { t } = useTranslation("user_profile");
const tabs = [t("edit_profile"), "Ban list"];
const tabs = [t("edit_profile"), t("blocked_users")];
const [currentTabIndex, setCurrentTabIndex] = useState(0);