import { Component } from 'inferno';
import { Link } from 'inferno-router';
-import { UserView } from '../interfaces';
-import { pictshareAvatarThumbnail, showAvatars, hostname } from '../utils';
+import { UserView } from 'lemmy-js-client';
+import {
+ pictrsAvatarThumbnail,
+ showAvatars,
+ hostname,
+ isCakeDay,
+} from '../utils';
+import { CakeDay } from './cake-day';
-interface UserOther {
+export interface UserOther {
name: string;
+ preferred_username?: string;
id?: number; // Necessary if its federated
avatar?: string;
local?: boolean;
actor_id?: string;
+ published?: string;
}
interface UserListingProps {
user: UserView | UserOther;
realLink?: boolean;
+ useApubName?: boolean;
+ muted?: boolean;
+ hideAvatar?: boolean;
}
export class UserListing extends Component<UserListingProps, any> {
render() {
let user = this.props.user;
let local = user.local == null ? true : user.local;
- let name_: string, link: string;
+ let apubName: string, link: string;
if (local) {
- name_ = user.name;
+ apubName = `@${user.name}`;
link = `/u/${user.name}`;
} else {
- name_ = `${user.name}@${hostname(user.actor_id)}`;
+ apubName = `@${user.name}@${hostname(user.actor_id)}`;
link = !this.props.realLink ? `/user/${user.id}` : user.actor_id;
}
+ let displayName = this.props.useApubName
+ ? apubName
+ : user.preferred_username
+ ? user.preferred_username
+ : apubName;
+
return (
- <Link className="text-body font-weight-bold" to={link}>
- {user.avatar && showAvatars() && (
- <img
- height="32"
- width="32"
- src={pictshareAvatarThumbnail(user.avatar)}
- class="rounded-circle mr-2"
- />
- )}
- <span>{name_}</span>
- </Link>
+ <>
+ <Link
+ title={apubName}
+ className={this.props.muted ? 'text-muted' : 'text-info'}
+ to={link}
+ >
+ {!this.props.hideAvatar && user.avatar && showAvatars() && (
+ <img
+ style="width: 2rem; height: 2rem;"
+ src={pictrsAvatarThumbnail(user.avatar)}
+ class="rounded-circle mr-2"
+ />
+ )}
+ <span>{displayName}</span>
+ </Link>
+
+ {isCakeDay(user.published) && <CakeDay creatorName={apubName} />}
+ </>
);
}
}