beenull/WebChat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

perf(message): user name ellipsis

Browse source
This commit is contained in:
molvqingtai 2024-09-23 03:44:08 +08:00
parent f6277bcc83
commit 8a18871b90
2 changed files with 5 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/app/content/App.tsx
View file

@ -19,7 +19,7 @@ export default function App() {
const roomDomain = useRemeshDomain(RoomDomain()) const roomDomain = useRemeshDomain(RoomDomain())
const userInfoDomain = useRemeshDomain(UserInfoDomain()) const userInfoDomain = useRemeshDomain(UserInfoDomain())
const messageListDomain = useRemeshDomain(MessageListDomain()) const messageListDomain = useRemeshDomain(MessageListDomain())
const joinRoomFinished = useRemeshQuery(roomDomain.query.IsFinishedQuery()) const roomFinished = useRemeshQuery(roomDomain.query.IsFinishedQuery())
const userInfoFinished = useRemeshQuery(userInfoDomain.query.IsFinishedQuery()) const userInfoFinished = useRemeshQuery(userInfoDomain.query.IsFinishedQuery())
const userInfo = useRemeshQuery(userInfoDomain.query.UserInfoQuery()) const userInfo = useRemeshQuery(userInfoDomain.query.UserInfoQuery())
@ -29,12 +29,12 @@ export default function App() {
useEffect(() => { useEffect(() => {
if (userInfoFinished) { if (userInfoFinished) {
if (userInfo) { if (userInfo) {
!joinRoomFinished && send(roomDomain.command.JoinRoomCommand(hostRoomId)) !roomFinished && send(roomDomain.command.JoinRoomCommand(hostRoomId))
} else { } else {
send(messageListDomain.command.ClearListCommand()) send(messageListDomain.command.ClearListCommand())
} }
} }
}, [userInfoFinished, userInfo, joinRoomFinished]) }, [userInfoFinished, userInfo, roomFinished])
return ( return (
<> <>

4
src/app/content/components/MessageItem.tsx
View file

@ -30,8 +30,8 @@ const MessageItem: FC<MessageItemProps> = (props) => {
<AvatarFallback>{props.data.username.at(0)}</AvatarFallback> <AvatarFallback>{props.data.username.at(0)}</AvatarFallback>
</Avatar> </Avatar>
<div className="overflow-hidden"> <div className="overflow-hidden">
<div className="grid grid-cols-[1fr_auto] items-baseline gap-x-2 leading-none"> <div className="grid grid-cols-[1fr_auto] items-center gap-x-2 leading-none">
<div className="text-sm font-medium text-slate-600">{props.data.username}</div> <div className="overflow-hidden text-ellipsis text-sm font-medium text-slate-600">{props.data.username}</div>
<FormatDate className="text-xs text-slate-400" date={props.data.date}></FormatDate> <FormatDate className="text-xs text-slate-400" date={props.data.date}></FormatDate>
</div> </div>
<div> <div>