external/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-03-09 15:40:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: show friends from response

Browse source
This commit is contained in:
Zamitto 2024-07-10 17:51:53 -03:00
parent 0f0a1e98a3
commit 6ff48605da
1 changed files with 64 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

139
src/renderer/src/pages/user/user-content.tsx
View file

@ -1,4 +1,4 @@
import { UserFriend, UserGame, UserProfile } from "@types"; import { UserGame, UserProfile } from "@types";
import cn from "classnames"; import cn from "classnames";
import * as styles from "./user.css"; import * as styles from "./user.css";
@ -79,7 +79,7 @@ export function UserContent({
}; };
const handleOnClickFriend = (userId: string) => { const handleOnClickFriend = (userId: string) => {
console.log(userId); navigate(`/user/${userId}`);
}; };
const handleConfirmSignout = async () => { const handleConfirmSignout = async () => {
@ -326,86 +326,75 @@ export function UserContent({
</div> </div>
</div> </div>
<div className={styles.friendsSection}> {(isMe ||
<div (userProfile.friends && userProfile.friends.length > 0)) && (
style={{ <div className={styles.friendsSection}>
display: "flex", <div
alignItems: "center", style={{
justifyContent: "space-between", display: "flex",
gap: `${SPACING_UNIT * 2}px`, alignItems: "center",
}} justifyContent: "space-between",
> gap: `${SPACING_UNIT * 2}px`,
<h2>{t("friends")}</h2> }}
>
<h2>{t("friends")}</h2>
<div
style={{
flex: 1,
backgroundColor: vars.color.border,
height: "1px",
}}
/>
{isMe && (
<button
type="button"
style={{ color: vars.color.body, cursor: "pointer" }}
onClick={() => setShowAddFriendsModal(true)}
>
<PersonAddIcon size={24} />
</button>
)}
</div>
<div <div
style={{ style={{
flex: 1, display: "flex",
backgroundColor: vars.color.border, flexDirection: "column",
height: "1px", gap: `${SPACING_UNIT}px`,
}} }}
/> >
{isMe && ( {userProfile.friends?.map((friend) => {
<button return (
type="button" <button
style={{ color: vars.color.body, cursor: "pointer" }} key={friend.id}
onClick={() => setShowAddFriendsModal(true)} className={cn(
> styles.friendListItem,
<PersonAddIcon size={24} /> styles.profileContentBox
</button>
)}
</div>
<div
style={{
display: "flex",
flexDirection: "column",
gap: `${SPACING_UNIT}px`,
}}
>
{(
[
{
id: "",
displayName: "Punheta Master 123123123123123123",
profileImageUrl:
"https://cdn.discordapp.com/avatars/1239959140785455295/4aff4b901c7a9f5f814b4379b6cfd58a.webp",
},
{
id: "",
displayName: "Hydra Launcher",
profileImageUrl: null,
},
] as UserFriend[]
).map((friend) => {
return (
<button
key={friend.id}
className={cn(
styles.friendListItem,
styles.profileContentBox
)}
onClick={() => handleOnClickFriend(friend.id)}
>
<div className={styles.friendAvatarContainer}>
{friend.profileImageUrl ? (
<img
className={styles.friendProfileIcon}
src={friend.profileImageUrl}
alt={friend.displayName}
/>
) : (
<PersonIcon size={24} />
)} )}
</div> onClick={() => handleOnClickFriend(friend.id)}
>
<div className={styles.friendAvatarContainer}>
{friend.profileImageUrl ? (
<img
className={styles.friendProfileIcon}
src={friend.profileImageUrl}
alt={friend.displayName}
/>
) : (
<PersonIcon size={24} />
)}
</div>
<p className={styles.friendListDisplayName}> <p className={styles.friendListDisplayName}>
{friend.displayName} {friend.displayName}
</p> </p>
</button> </button>
); );
})} })}
</div>
</div> </div>
</div> )}
</div> </div>
</div> </div>
</> </>