RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-18 06:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor UserCard components and improve code style

Browse Source 
The changes clean up the UserCard components by:
- Removing unnecessary forwardRef usage
- Simplifying prop handling and conditions
This commit is contained in:
SrGooglo 2025-06-16 20:47:56 +00:00
parent f711b71ae2
commit 552f0b5998
1 changed files with 181 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

193
packages/app/src/components/UserCard/index.jsx
View File

@ -22,22 +22,17 @@ function processValue(value, decorator) {
const UserLinkViewer = (props) => {
const { link, decorator } = props
return <div className="userLinkViewer">
return (
<div className="userLinkViewer">
<div className="userLinkViewer_icon">
{
createIconRender(decorator.icon ?? "MdLink")
}
{createIconRender(decorator.icon ?? "MdLink")}
</div>
<div className="userLinkViewer_value">
<p>
{
link.value
}
</p>
<p>{link.value}</p>
</div>
</div>
)
}
const UserLink = (props) => {
@ -57,8 +52,8 @@ const UserLink = (props) => {
app.layout.drawer.open("link_viewer", UserLinkViewer, {
componentProps: {
link: link,
decorator: decorator
}
decorator: decorator,
},
})
}
return false
@ -75,39 +70,33 @@ const UserLink = (props) => {
return link.value
}
return <div
return (
<div
key={index}
id={`link-${index}-${link.key}`}
className={`userLink ${hasHref ? "clickable" : ""}`}
onClick={handleOnClick}
>
{
createIconRender(decorator.icon ?? "MdLink")
}
{createIconRender(decorator.icon ?? "MdLink")}
{
!app.isMobile && <p>
{
renderName()
}
</p>
}
{!app.isMobile && <p>{renderName()}</p>}
</div>
)
}
export const UserCard = React.forwardRef((props, ref) => {
export const UserCard = (props) => {
const [user, setUser] = React.useState(props.user)
React.useEffect(() => {
setUser(props.user)
}, [props.user])
// TODO: Support API user data fetching
return <div
className="userCard"
ref={ref}
>
return (
<div className="userCard">
<div className="avatar">
<Image
src={user.avatar}
/>
<Image src={user.avatar} />
</div>
<div className="username">
@ -116,121 +105,101 @@ export const UserCard = React.forwardRef((props, ref) => {
{user.public_name || user.username}
{user.verified && <Icons.verifiedBadge />}
</h1>
<span>
@{user.username}
</span>
<span>@{user.username}</span>
</div>
{
user.badges?.length > 0 && <UserBadges user_id={user._id} />
}
{user.badges?.length > 0 && <UserBadges user_id={user._id} />}
</div>
<div className="description">
<span>
{user.description}
</span>
<span>{user.description}</span>
</div>
{
user.links && Array.isArray(user.links) && user.links.length > 0 && <div className="userLinks">
{
user.links.map((link, index) => {
return <UserLink index={index} link={link} />
})
}
{user.links &&
Array.isArray(user.links) &&
user.links.length > 0 && (
<div className="userLinks">
{user.links.map((link, index) => {
return (
<UserLink
key={index}
index={index}
link={link}
/>
)
})}
</div>
}
</div>
})
export const MobileUserCard = React.forwardRef((props, ref) => {
return <div
ref={ref}
className={classnames(
"_mobile_userCard",
{
["no-cover"]: !props.user.cover
}
)}
</div>
)
}
export const MobileUserCard = (props, ref) => {
return (
<div
ref={ref}
className={classnames("_mobile_userCard", {
["no-cover"]: !props.user.cover,
})}
>
<div className="_mobile_userCard_top">
{
props.user.cover && <div className="_mobile_userCard_top_cover">
{props.user.cover && (
<div className="_mobile_userCard_top_cover">
<div
className="cover"
style={{
backgroundImage: `url("${props.user.cover}")`
backgroundImage: `url("${props.user.cover}")`,
}}
/>
<div className="_mobile_userCard_top_avatar_wrapper">
<div className="_mobile_userCard_top_avatar">
<Image
src={props.user.avatar}
/>
<Image src={props.user.avatar} />
</div>
</div>
</div>
}
)}
{
!props.user.cover && <div className="_mobile_userCard_top_avatar">
<Image
src={props.user.avatar}
/>
{!props.user.cover && (
<div className="_mobile_userCard_top_avatar">
<Image src={props.user.avatar} />
</div>
}
)}
<div className="_mobile_userCard_top_texts">
<div className="_mobile_userCard_top_username">
<h1>
{
props.user.fullName ?? `@${props.user.username}`
}
{
props.user.verified && <Icons.verifiedBadge id="verification_tick" />
}
{props.user.fullName ?? `@${props.user.username}`}
{props.user.verified && (
<Icons.verifiedBadge id="verification_tick" />
)}
</h1>
{
props.user.fullName && <span>
@{props.user.username}
</span>
}
{props.user.fullName && (
<span>@{props.user.username}</span>
)}
</div>
<div className="_mobile_userCard_top_badges_wrapper">
{
props.user.badges?.length > 0 && <UserBadges user_id={props.user._id} />
}
{props.user.badges?.length > 0 && (
<UserBadges user_id={props.user._id} />
)}
</div>
<div className="_mobile_userCard_top_description">
<p>
{
props.user.description
}
</p>
<p>{props.user.description}</p>
</div>
</div>
{
props.user.links
&& Array.isArray(props.user.links)
&& props.user.links.length > 0
&& <div
className={classnames(
"_mobile_userCard_links",
)}
>
{
props.user.links.map((link, index) => {
{props.user.links &&
Array.isArray(props.user.links) &&
props.user.links.length > 0 && (
<div className={classnames("_mobile_userCard_links")}>
{props.user.links.map((link, index) => {
return <UserLink index={index} link={link} />
})
}
})}
</div>
}
)}
</div>
<div
@ -239,14 +208,14 @@ export const MobileUserCard = React.forwardRef((props, ref) => {
"_mobile_userCard_actions",
)}
>
{
props.followers && <FollowButton
{props.followers && (
<FollowButton
count={props.followers.length}
onClick={props.onClickFollow}
followed={props.isFollowed}
self={props.isSelf}
/>
}
)}
<antd.Button
type="primary"
@ -254,12 +223,10 @@ export const MobileUserCard = React.forwardRef((props, ref) => {
disabled
/>
<antd.Button
type="primary"
icon={<Icons.MdShare />}
/>
<antd.Button type="primary" icon={<Icons.MdShare />} />
</div>
</div>
})
)
}
export default UserCard