X-Git-Url: http://these/git/?a=blobdiff_plain;f=ui%2Fsrc%2Fcomponents%2Fuser-listing.tsx;h=0e150b9420d3468d61cadd01ea229ab2dca01c54;hb=dc94e58cbf7e7de10d97331a3056380a3416e0b0;hp=ea87fd3aae778d8313853abe0ffbccc8d053fcc6;hpb=790b944031f9433be765936763d848ffa6e1b496;p=lemmy.git

diff --git a/ui/src/components/user-listing.tsx b/ui/src/components/user-listing.tsx
index ea87fd3a..0e150b94 100644
--- a/ui/src/components/user-listing.tsx
+++ b/ui/src/components/user-listing.tsx
@@ -1,15 +1,19 @@
 import { Component } from 'inferno';
 import { Link } from 'inferno-router';
 import { UserView } from '../interfaces';
-import { pictrsAvatarThumbnail, showAvatars } from '../utils';
+import { pictrsAvatarThumbnail, showAvatars, hostname } from '../utils';
 
 interface UserOther {
   name: string;
+  id?: number; // Necessary if its federated
   avatar?: string;
+  local?: boolean;
+  actor_id?: string;
 }
 
 interface UserListingProps {
   user: UserView | UserOther;
+  realLink?: boolean;
 }
 
 export class UserListing extends Component<UserListingProps, any> {
@@ -19,8 +23,19 @@ 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;
+
+    if (local) {
+      name_ = user.name;
+      link = `/u/${user.name}`;
+    } else {
+      name_ = `${user.name}@${hostname(user.actor_id)}`;
+      link = !this.props.realLink ? `/user/${user.id}` : user.actor_id;
+    }
+
     return (
-      <Link className="text-body font-weight-bold" to={`/u/${user.name}`}>
+      <Link className="text-body font-weight-bold" to={link}>
         {user.avatar && showAvatars() && (
           <img
             height="32"
@@ -29,7 +44,7 @@ export class UserListing extends Component<UserListingProps, any> {
             class="rounded-circle mr-2"
           />
         )}
-        <span>{user.name}</span>
+        <span>{name_}</span>
       </Link>
     );
   }