routes.api: fix get_captcha endpoint (#1135)

[lemmy.git] / ui / src / components / user-listing.tsx

diff --git a/ui/src/components/user-listing.tsx b/ui/src/components/user-listing.tsx
index ea87fd3aae778d8313853abe0ffbccc8d053fcc6..fd296faddce8a2b019a830ed0c8769810404b3a9 100644 (file)
--- a/ui/src/components/user-listing.tsx
+++ b/ui/src/components/user-listing.tsx
@@ -1,15 +1,30 @@
 import { Component } from 'inferno';
 import { Link } from 'inferno-router';
-import { UserView } from '../interfaces';
-import { pictrsAvatarThumbnail, showAvatars } 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> {
@@ -19,18 +34,42 @@ export class UserListing extends Component<UserListingProps, any> {
 
   render() {
     let user = this.props.user;
+    let local = user.local == null ? true : user.local;
+    let apubName: string, link: string;
+
+    if (local) {
+      apubName = `@${user.name}`;
+      link = `/u/${user.name}`;
+    } else {
+      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={`/u/${user.name}`}>
-        {user.avatar && showAvatars() && (
-          <img
-            height="32"
-            width="32"
-            src={pictrsAvatarThumbnail(user.avatar)}
-            class="rounded-circle mr-2"
-          />
-        )}
-        <span>{user.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} />}
+      </>
     );
   }
 }