mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-18 06:54:15 +00:00
Refactor UserCard components and improve code style
The changes clean up the UserCard components by: - Removing unnecessary forwardRef usage - Simplifying prop handling and conditions
This commit is contained in:
parent
f711b71ae2
commit
552f0b5998
@ -10,256 +10,223 @@ import linksDecorators from "@config/linksDecorators"
|
|||||||
import "./index.less"
|
import "./index.less"
|
||||||
|
|
||||||
function processValue(value, decorator) {
|
function processValue(value, decorator) {
|
||||||
if (decorator.hrefResolve) {
|
if (decorator.hrefResolve) {
|
||||||
if (!String(value).includes(decorator.hrefResolve)) {
|
if (!String(value).includes(decorator.hrefResolve)) {
|
||||||
return `${decorator.hrefResolve}${value}`
|
return `${decorator.hrefResolve}${value}`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return value
|
return value
|
||||||
}
|
}
|
||||||
|
|
||||||
const UserLinkViewer = (props) => {
|
const UserLinkViewer = (props) => {
|
||||||
const { link, decorator } = props
|
const { link, decorator } = props
|
||||||
|
|
||||||
return <div className="userLinkViewer">
|
return (
|
||||||
<div className="userLinkViewer_icon">
|
<div className="userLinkViewer">
|
||||||
{
|
<div className="userLinkViewer_icon">
|
||||||
createIconRender(decorator.icon ?? "MdLink")
|
{createIconRender(decorator.icon ?? "MdLink")}
|
||||||
}
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="userLinkViewer_value">
|
|
||||||
<p>
|
|
||||||
{
|
|
||||||
link.value
|
|
||||||
}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<div className="userLinkViewer_value">
|
||||||
|
<p>{link.value}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const UserLink = (props) => {
|
const UserLink = (props) => {
|
||||||
let { index, link } = props
|
let { index, link } = props
|
||||||
|
|
||||||
link.key = link.key.toLowerCase()
|
link.key = link.key.toLowerCase()
|
||||||
|
|
||||||
const decorator = linksDecorators[link.key] ?? {}
|
const decorator = linksDecorators[link.key] ?? {}
|
||||||
|
|
||||||
link.value = processValue(link.value, decorator)
|
link.value = processValue(link.value, decorator)
|
||||||
|
|
||||||
const hasHref = String(link.value).includes("://")
|
const hasHref = String(link.value).includes("://")
|
||||||
|
|
||||||
const handleOnClick = () => {
|
const handleOnClick = () => {
|
||||||
if (!hasHref) {
|
if (!hasHref) {
|
||||||
if (app.isMobile) {
|
if (app.isMobile) {
|
||||||
app.layout.drawer.open("link_viewer", UserLinkViewer, {
|
app.layout.drawer.open("link_viewer", UserLinkViewer, {
|
||||||
componentProps: {
|
componentProps: {
|
||||||
link: link,
|
link: link,
|
||||||
decorator: decorator
|
decorator: decorator,
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
window.open(link.value, "_blank")
|
window.open(link.value, "_blank")
|
||||||
}
|
}
|
||||||
|
|
||||||
const renderName = () => {
|
const renderName = () => {
|
||||||
if (decorator.hrefResolve) {
|
if (decorator.hrefResolve) {
|
||||||
return decorator.label ?? link.value
|
return decorator.label ?? link.value
|
||||||
}
|
}
|
||||||
|
|
||||||
return link.value
|
return link.value
|
||||||
}
|
}
|
||||||
|
|
||||||
return <div
|
return (
|
||||||
key={index}
|
<div
|
||||||
id={`link-${index}-${link.key}`}
|
key={index}
|
||||||
className={`userLink ${hasHref ? "clickable" : ""}`}
|
id={`link-${index}-${link.key}`}
|
||||||
onClick={handleOnClick}
|
className={`userLink ${hasHref ? "clickable" : ""}`}
|
||||||
>
|
onClick={handleOnClick}
|
||||||
{
|
>
|
||||||
createIconRender(decorator.icon ?? "MdLink")
|
{createIconRender(decorator.icon ?? "MdLink")}
|
||||||
}
|
|
||||||
|
|
||||||
{
|
{!app.isMobile && <p>{renderName()}</p>}
|
||||||
!app.isMobile && <p>
|
</div>
|
||||||
{
|
)
|
||||||
renderName()
|
|
||||||
}
|
|
||||||
</p>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const UserCard = React.forwardRef((props, ref) => {
|
export const UserCard = (props) => {
|
||||||
const [user, setUser] = React.useState(props.user)
|
const [user, setUser] = React.useState(props.user)
|
||||||
|
|
||||||
// TODO: Support API user data fetching
|
React.useEffect(() => {
|
||||||
|
setUser(props.user)
|
||||||
|
}, [props.user])
|
||||||
|
|
||||||
return <div
|
// TODO: Support API user data fetching
|
||||||
className="userCard"
|
|
||||||
ref={ref}
|
|
||||||
>
|
|
||||||
<div className="avatar">
|
|
||||||
<Image
|
|
||||||
src={user.avatar}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="username">
|
return (
|
||||||
<div className="username_text">
|
<div className="userCard">
|
||||||
<h1>
|
<div className="avatar">
|
||||||
{user.public_name || user.username}
|
<Image src={user.avatar} />
|
||||||
{user.verified && <Icons.verifiedBadge />}
|
</div>
|
||||||
</h1>
|
|
||||||
<span>
|
|
||||||
@{user.username}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{
|
<div className="username">
|
||||||
user.badges?.length > 0 && <UserBadges user_id={user._id} />
|
<div className="username_text">
|
||||||
}
|
<h1>
|
||||||
</div>
|
{user.public_name || user.username}
|
||||||
|
{user.verified && <Icons.verifiedBadge />}
|
||||||
|
</h1>
|
||||||
|
<span>@{user.username}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="description">
|
{user.badges?.length > 0 && <UserBadges user_id={user._id} />}
|
||||||
<span>
|
</div>
|
||||||
{user.description}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{
|
<div className="description">
|
||||||
user.links && Array.isArray(user.links) && user.links.length > 0 && <div className="userLinks">
|
<span>{user.description}</span>
|
||||||
{
|
</div>
|
||||||
user.links.map((link, index) => {
|
|
||||||
return <UserLink index={index} link={link} />
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
})
|
|
||||||
|
|
||||||
export const MobileUserCard = React.forwardRef((props, ref) => {
|
{user.links &&
|
||||||
return <div
|
Array.isArray(user.links) &&
|
||||||
ref={ref}
|
user.links.length > 0 && (
|
||||||
className={classnames(
|
<div className="userLinks">
|
||||||
"_mobile_userCard",
|
{user.links.map((link, index) => {
|
||||||
{
|
return (
|
||||||
["no-cover"]: !props.user.cover
|
<UserLink
|
||||||
}
|
key={index}
|
||||||
)}
|
index={index}
|
||||||
>
|
link={link}
|
||||||
<div className="_mobile_userCard_top">
|
/>
|
||||||
{
|
)
|
||||||
props.user.cover && <div className="_mobile_userCard_top_cover">
|
})}
|
||||||
<div
|
</div>
|
||||||
className="cover"
|
)}
|
||||||
style={{
|
</div>
|
||||||
backgroundImage: `url("${props.user.cover}")`
|
)
|
||||||
}}
|
}
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="_mobile_userCard_top_avatar_wrapper">
|
export const MobileUserCard = (props, ref) => {
|
||||||
<div className="_mobile_userCard_top_avatar">
|
return (
|
||||||
<Image
|
<div
|
||||||
src={props.user.avatar}
|
ref={ref}
|
||||||
/>
|
className={classnames("_mobile_userCard", {
|
||||||
</div>
|
["no-cover"]: !props.user.cover,
|
||||||
</div>
|
})}
|
||||||
</div>
|
>
|
||||||
}
|
<div className="_mobile_userCard_top">
|
||||||
|
{props.user.cover && (
|
||||||
|
<div className="_mobile_userCard_top_cover">
|
||||||
|
<div
|
||||||
|
className="cover"
|
||||||
|
style={{
|
||||||
|
backgroundImage: `url("${props.user.cover}")`,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
{
|
<div className="_mobile_userCard_top_avatar_wrapper">
|
||||||
!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>
|
||||||
</div>
|
</div>
|
||||||
}
|
)}
|
||||||
|
|
||||||
<div className="_mobile_userCard_top_texts">
|
{!props.user.cover && (
|
||||||
<div className="_mobile_userCard_top_username">
|
<div className="_mobile_userCard_top_avatar">
|
||||||
<h1>
|
<Image src={props.user.avatar} />
|
||||||
{
|
</div>
|
||||||
props.user.fullName ?? `@${props.user.username}`
|
)}
|
||||||
}
|
|
||||||
{
|
|
||||||
props.user.verified && <Icons.verifiedBadge id="verification_tick" />
|
|
||||||
}
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
{
|
<div className="_mobile_userCard_top_texts">
|
||||||
props.user.fullName && <span>
|
<div className="_mobile_userCard_top_username">
|
||||||
@{props.user.username}
|
<h1>
|
||||||
</span>
|
{props.user.fullName ?? `@${props.user.username}`}
|
||||||
}
|
{props.user.verified && (
|
||||||
</div>
|
<Icons.verifiedBadge id="verification_tick" />
|
||||||
|
)}
|
||||||
|
</h1>
|
||||||
|
|
||||||
<div className="_mobile_userCard_top_badges_wrapper">
|
{props.user.fullName && (
|
||||||
{
|
<span>@{props.user.username}</span>
|
||||||
props.user.badges?.length > 0 && <UserBadges user_id={props.user._id} />
|
)}
|
||||||
}
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="_mobile_userCard_top_description">
|
<div className="_mobile_userCard_top_badges_wrapper">
|
||||||
<p>
|
{props.user.badges?.length > 0 && (
|
||||||
{
|
<UserBadges user_id={props.user._id} />
|
||||||
props.user.description
|
)}
|
||||||
}
|
</div>
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{
|
<div className="_mobile_userCard_top_description">
|
||||||
props.user.links
|
<p>{props.user.description}</p>
|
||||||
&& Array.isArray(props.user.links)
|
</div>
|
||||||
&& props.user.links.length > 0
|
</div>
|
||||||
&& <div
|
|
||||||
className={classnames(
|
|
||||||
"_mobile_userCard_links",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{
|
|
||||||
props.user.links.map((link, index) => {
|
|
||||||
return <UserLink index={index} link={link} />
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
{props.user.links &&
|
||||||
className={classnames(
|
Array.isArray(props.user.links) &&
|
||||||
"_mobile_card",
|
props.user.links.length > 0 && (
|
||||||
"_mobile_userCard_actions",
|
<div className={classnames("_mobile_userCard_links")}>
|
||||||
)}
|
{props.user.links.map((link, index) => {
|
||||||
>
|
return <UserLink index={index} link={link} />
|
||||||
{
|
})}
|
||||||
props.followers && <FollowButton
|
</div>
|
||||||
count={props.followers.length}
|
)}
|
||||||
onClick={props.onClickFollow}
|
</div>
|
||||||
followed={props.isFollowed}
|
|
||||||
self={props.isSelf}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
|
|
||||||
<antd.Button
|
<div
|
||||||
type="primary"
|
className={classnames(
|
||||||
icon={<Icons.MdMessage />}
|
"_mobile_card",
|
||||||
disabled
|
"_mobile_userCard_actions",
|
||||||
/>
|
)}
|
||||||
|
>
|
||||||
|
{props.followers && (
|
||||||
|
<FollowButton
|
||||||
|
count={props.followers.length}
|
||||||
|
onClick={props.onClickFollow}
|
||||||
|
followed={props.isFollowed}
|
||||||
|
self={props.isSelf}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
<antd.Button
|
<antd.Button
|
||||||
type="primary"
|
type="primary"
|
||||||
icon={<Icons.MdShare />}
|
icon={<Icons.MdMessage />}
|
||||||
/>
|
disabled
|
||||||
</div>
|
/>
|
||||||
</div>
|
|
||||||
})
|
<antd.Button type="primary" icon={<Icons.MdShare />} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
export default UserCard
|
export default UserCard
|
||||||
Loading…
x
Reference in New Issue
Block a user