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

support for only icon

Browse Source
This commit is contained in:
SrGooglo 2025-04-02 01:51:53 +00:00
parent edb52ae9cd
commit bfd4e28d01
1 changed files with 65 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
packages/app/src/components/UserPreview/index.jsx
View File

@ -9,74 +9,76 @@ import User from "@models/user"
import "./index.less" import "./index.less"
export default (props) => { const UserPreview = (props) => {
let [userData, setUserData] = React.useState(props.user) let [userData, setUserData] = React.useState(props.user)
const fetchUser = async () => { const fetchUser = async () => {
if (!props.user_id && !props.username) { if (!props.user_id && !props.username) {
console.error("Cannot fetch user data without user_id or username") console.error("Cannot fetch user data without user_id or username")
return false return false
} }
const data = await User.data({ const data = await User.data({
user_id: props.user_id, user_id: props.user_id,
username: props.username username: props.username,
}).catch((err) => { }).catch((err) => {
console.error(err) console.error(err)
app.message.error("Failed to fetch user data") app.message.error("Failed to fetch user data")
return null return null
}) })
if (data) { if (data) {
setUserData(data) setUserData(data)
} }
} }
const handleOnClick = async () => { const handleOnClick = async () => {
if (typeof props.onClick !== "function") { if (typeof props.onClick !== "function") {
console.warn("UserPreview: onClick is not a function, executing default action") console.warn(
return app.navigation.goToAccount(userData.username) "UserPreview: onClick is not a function, executing default action",
} )
return app.navigation.goToAccount(userData.username)
}
return await props.onClick(userData) return await props.onClick(userData)
} }
React.useEffect(() => { React.useEffect(() => {
if (typeof userData === "undefined") { if (typeof userData === "undefined") {
fetchUser() fetchUser()
} }
}, []) }, [])
if (!userData) { if (!userData) {
return <div className="userPreview"> return (
<Skeleton.Avatar active /> <div className="userPreview">
</div> <Skeleton.Avatar active />
} </div>
)
}
return <div return (
className={classnames( <div
"userPreview", className={classnames("userPreview", {
{ ["clickable"]: typeof props.onClick === "function",
["clickable"]: typeof props.onClick === "function", ["small"]: props.small && !props.big,
["small"]: props.small && !props.big, ["big"]: props.big && !props.small,
["big"]: props.big && !props.small, })}
} >
)} <div className="avatar" onClick={handleOnClick}>
> <Image alt="Avatar" src={userData.avatar} />
<div className="avatar" onClick={handleOnClick}> </div>
<Image {!props.onlyIcon && (
alt="Avatar" <div className="info" onClick={handleOnClick}>
src={userData.avatar} <h1>
/> {userData.fullName ?? userData.username}
</div> {userData.verified && <Icons.verifiedBadge />}
<div className="info" onClick={handleOnClick}> </h1>
<h1> <span>@{userData.username}</span>
{userData.fullName ?? userData.username} </div>
{userData.verified && <Icons.verifiedBadge />} )}
</h1> </div>
<span> )
@{userData.username}
</span>
</div>
</div>
} }
export default UserPreview