71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
import { observer } from "mobx-react-lite";
|
|
import { useParams } from "react-router-dom";
|
|
|
|
import { Text } from "preact-i18n";
|
|
|
|
import { User } from "../../../mobx";
|
|
|
|
import {
|
|
useForceUpdate,
|
|
useMember,
|
|
useServer,
|
|
} from "../../../context/revoltjs/hooks";
|
|
|
|
import UserIcon from "./UserIcon";
|
|
|
|
export const Username = observer(
|
|
({
|
|
user,
|
|
...otherProps
|
|
}: { user?: User } & JSX.HTMLAttributes<HTMLElement>) => {
|
|
let username = user?.username;
|
|
let color;
|
|
|
|
// ! FIXME: this must be really bad for perf.
|
|
if (user) {
|
|
let { server } = useParams<{ server?: string }>();
|
|
if (server) {
|
|
let ctx = useForceUpdate();
|
|
let member = useMember(`${server}${user._id}`, ctx);
|
|
if (member) {
|
|
if (member.nickname) {
|
|
username = member.nickname;
|
|
}
|
|
|
|
if (member.roles && member.roles.length > 0) {
|
|
let s = useServer(server, ctx);
|
|
for (let role of member.roles) {
|
|
let c = s?.roles?.[role].colour;
|
|
if (c) {
|
|
color = c;
|
|
continue;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<span {...otherProps} style={{ color }}>
|
|
{username ?? <Text id="app.main.channel.unknown_user" />}
|
|
</span>
|
|
);
|
|
},
|
|
);
|
|
|
|
export default function UserShort({
|
|
user,
|
|
size,
|
|
}: {
|
|
user?: User;
|
|
size?: number;
|
|
}) {
|
|
return (
|
|
<>
|
|
<UserIcon size={size ?? 24} target={user} />
|
|
<Username user={user} />
|
|
</>
|
|
);
|
|
}
|