Refactor UserCard components and improve code style

The changes clean up the UserCard components by:
- Removing unnecessary forwardRef usage
- Simplifying prop handling and conditions

packages/app/src/components/UserCard/index.jsx

@@ -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>
+				<p>{link.value}</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
+	return (
-        className="userCard"
+		<div className="userCard">
-        ref={ref}
-    >
 			<div className="avatar">
-            <Image
+				<Image src={user.avatar} />
-                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>
+					<span>@{user.username}</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>
+				<span>{user.description}</span>
-                {user.description}
-            </span>
 			</div>
 
-        {
+			{user.links &&
-            user.links && Array.isArray(user.links) && user.links.length > 0 && <div className="userLinks">
+				Array.isArray(user.links) &&
-                {
+				user.links.length > 0 && (
-                    user.links.map((link, index) => {
+					<div className="userLinks">
-                        return <UserLink index={index} link={link} />
+						{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 && (
-                props.user.cover && <div className="_mobile_userCard_top_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
+								<Image src={props.user.avatar} />
-                                src={props.user.avatar}
-                            />
 							</div>
 						</div>
 					</div>
-            }
+				)}
 
-            {
+				{!props.user.cover && (
-                !props.user.cover && <div className="_mobile_userCard_top_avatar">
+					<div className="_mobile_userCard_top_avatar">
-                    <Image
+						<Image src={props.user.avatar} />
-                        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.fullName ?? `@${props.user.username}`
+							{props.user.verified && (
-                        }
+								<Icons.verifiedBadge id="verification_tick" />
-                        {
+							)}
-                            props.user.verified && <Icons.verifiedBadge id="verification_tick" />
-                        }
 						</h1>
 
-                    {
+						{props.user.fullName && (
-                        props.user.fullName && <span>
+							<span>@{props.user.username}</span>
-                            @{props.user.username}
+						)}
-                        </span>
-                    }
 					</div>
 
 					<div className="_mobile_userCard_top_badges_wrapper">
-                    {
+						{props.user.badges?.length > 0 && (
-                        props.user.badges?.length > 0 && <UserBadges user_id={props.user._id} />
+							<UserBadges user_id={props.user._id} />
-                    }
+						)}
 					</div>
 
 					<div className="_mobile_userCard_top_description">
-                    <p>
+						<p>{props.user.description}</p>
-                        {
-                            props.user.description
-                        }
-                    </p>
 					</div>
 				</div>
 
-            {
+				{props.user.links &&
-                props.user.links
+					Array.isArray(props.user.links) &&
-                && Array.isArray(props.user.links)
+					props.user.links.length > 0 && (
-                && props.user.links.length > 0
+						<div className={classnames("_mobile_userCard_links")}>
-                && <div
+							{props.user.links.map((link, index) => {
-                    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 && (
-                props.followers && <FollowButton
+					<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
+				<antd.Button type="primary" icon={<Icons.MdShare />} />
-                type="primary"
-                icon={<Icons.MdShare />}
-            />
 			</div>
 		</div>
-})
+	)
+}
 
 export default UserCard