Front end federation names and links for users, posts, and communities.

13 files changed, 135 insertions, 34 deletions

diff --git a/ui/src/components/admin-settings.tsx b/ui/src/components/admin-settings.tsx
index 56af7114..0034c229 100644
--- a/ui/src/components/admin-settings.tsx
+++ b/ui/src/components/admin-settings.tsx
@@ -113,6 +113,9 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
                 user={{
                   name: admin.name,
                   avatar: admin.avatar,
+                  id: admin.id,
+                  local: admin.local,
+                  actor_id: admin.actor_id,
                 }}
               />
             </li>
@@ -133,6 +136,9 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
                 user={{
                   name: banned.name,
                   avatar: banned.avatar,
+                  id: banned.id,
+                  local: banned.local,
+                  actor_id: banned.actor_id,
                 }}
               />
             </li>
diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx
index 69a78f50..9bc9c7bb 100644
--- a/ui/src/components/comment-node.tsx
+++ b/ui/src/components/comment-node.tsx
@@ -154,6 +154,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                   user={{
                     name: node.comment.creator_name,
                     avatar: node.comment.creator_avatar,
+                    id: node.comment.creator_id,
+                    local: node.comment.creator_local,
+                    actor_id: node.comment.creator_actor_id,
                   }}
                 />
               </span>
diff --git a/ui/src/components/communities.tsx b/ui/src/components/communities.tsx
index 8d130ae7..a3e340ff 100644
--- a/ui/src/components/communities.tsx
+++ b/ui/src/components/communities.tsx
@@ -14,6 +14,7 @@ import {
 } from '../interfaces';
 import { WebSocketService } from '../services';
 import { wsJsonToRes, toast } from '../utils';
+import { CommunityLink } from './community-link';
 import { i18n } from '../i18next';
 
 declare const Sortable: any;
@@ -104,9 +105,7 @@ export class Communities extends Component<any, CommunitiesState> {
                   {this.state.communities.map(community => (
                     <tr>
                       <td>
-                        <Link to={`/c/${community.name}`}>
-                          {community.name}
-                        </Link>
+                        <CommunityLink community={community} />
                       </td>
                       <td class="d-none d-lg-table-cell">{community.title}</td>
                       <td>{community.category_name}</td>
diff --git a/ui/src/components/community-link.tsx b/ui/src/components/community-link.tsx
new file mode 100644
index 00000000..bcfa0534
--- /dev/null
+++ b/ui/src/components/community-link.tsx
@@ -0,0 +1,35 @@
+import { Component } from 'inferno';
+import { Link } from 'inferno-router';
+import { Community } from '../interfaces';
+import { hostname } from '../utils';
+
+interface CommunityOther {
+  name: string;
+  id?: number; // Necessary if its federated
+  local?: boolean;
+  actor_id?: string;
+}
+
+interface CommunityLinkProps {
+  community: Community | CommunityOther;
+}
+
+export class CommunityLink extends Component<CommunityLinkProps, any> {
+  constructor(props: any, context: any) {
+    super(props, context);
+  }
+
+  render() {
+    let community = this.props.community;
+    let name_: string, link: string;
+    let local = community.local == null ? true : community.local;
+    if (local) {
+      name_ = community.name;
+      link = `/c/${community.name}`;
+    } else {
+      name_ = `${hostname(community.actor_id)}/${community.name}`;
+      link = `/community/${community.id}`;
+    }
+    return <Link to={link}>{name_}</Link>;
+  }
+}
diff --git a/ui/src/components/community.tsx b/ui/src/components/community.tsx
index a921de2c..373d8f80 100644
--- a/ui/src/components/community.tsx
+++ b/ui/src/components/community.tsx
@@ -80,6 +80,11 @@ export class Community extends Component<any, State> {
       removed: null,
       nsfw: false,
       deleted: null,
+      local: null,
+      actor_id: null,
+      last_refreshed_at: null,
+      creator_actor_id: null,
+      creator_local: null,
     },
     moderators: [],
     admins: [],
diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx
index 366d3be8..9e0c3a59 100644
--- a/ui/src/components/main.tsx
+++ b/ui/src/components/main.tsx
@@ -34,6 +34,7 @@ import { ListingTypeSelect } from './listing-type-select';
 import { DataTypeSelect } from './data-type-select';
 import { SiteForm } from './site-form';
 import { UserListing } from './user-listing';
+import { CommunityLink } from './community-link';
 import {
   wsJsonToRes,
   repoUrl,
@@ -190,9 +191,14 @@ export class Main extends Component<any, MainState> {
                       <ul class="list-inline">
                         {this.state.subscribedCommunities.map(community => (
                           <li class="list-inline-item">
-                            <Link to={`/c/${community.community_name}`}>
-                              {community.community_name}
-                            </Link>
+                            <CommunityLink
+                              community={{
+                                name: community.community_name,
+                                id: community.community_id,
+                                local: community.community_local,
+                                actor_id: community.community_actor_id,
+                              }}
+                            />
                           </li>
                         ))}
                       </ul>
@@ -228,7 +234,7 @@ export class Main extends Component<any, MainState> {
         <ul class="list-inline">
           {this.state.trendingCommunities.map(community => (
             <li class="list-inline-item">
-              <Link to={`/c/${community.name}`}>{community.name}</Link>
+              <CommunityLink community={community} />
             </li>
           ))}
         </ul>
@@ -319,6 +325,9 @@ export class Main extends Component<any, MainState> {
                     user={{
                       name: admin.name,
                       avatar: admin.avatar,
+                      local: admin.local,
+                      actor_id: admin.actor_id,
+                      id: admin.id,
                     }}
                   />
                 </li>
diff --git a/ui/src/components/post-form.tsx b/ui/src/components/post-form.tsx
index 4dbc8b23..f04910be 100644
--- a/ui/src/components/post-form.tsx
+++ b/ui/src/components/post-form.tsx
@@ -35,6 +35,7 @@ import {
   setupTribute,
   setupTippy,
   emojiPicker,
+  hostname,
 } from '../utils';
 import autosize from 'autosize';
 import Tribute from 'tributejs/src/Tribute.js';
@@ -331,7 +332,11 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                   onInput={linkEvent(this, this.handlePostCommunityChange)}
                 >
                   {this.state.communities.map(community => (
-                    <option value={community.id}>{community.name}</option>
+                    <option value={community.id}>
+                      {community.local
+                        ? community.name
+                        : `${hostname(community.actor_id)}/${community.name}`}
+                    </option>
                   ))}
                 </select>
               </div>
diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx
index 49749201..6ebf5400 100644
--- a/ui/src/components/post-listing.tsx
+++ b/ui/src/components/post-listing.tsx
@@ -20,6 +20,7 @@ import { MomentTime } from './moment-time';
 import { PostForm } from './post-form';
 import { IFramelyCard } from './iframely-card';
 import { UserListing } from './user-listing';
+import { CommunityLink } from './community-link';
 import {
   md,
   mdToHtml,
@@ -420,6 +421,9 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                     user={{
                       name: post.creator_name,
                       avatar: post.creator_avatar,
+                      id: post.creator_id,
+                      local: post.creator_local,
+                      actor_id: post.creator_actor_id,
                     }}
                   />
                   {this.isMod && (
@@ -440,15 +444,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                   {this.props.showCommunity && (
                     <span>
                       <span> {i18n.t('to')} </span>
-                      {post.local ? (
-                        <Link to={`/c/${post.community_name}`}>
-                          {post.community_name}
-                        </Link>
-                      ) : (
-                        <a href={post.community_actor_id} target="_blank">
-                          {hostname(post.ap_id)}/{post.community_name}
-                        </a>
-                      )}
+                      <CommunityLink
+                        community={{
+                          name: post.community_name,
+                          id: post.community_id,
+                          local: post.community_local,
+                          actor_id: post.community_actor_id,
+                        }}
+                      />
                     </span>
                   )}
                 </li>
diff --git a/ui/src/components/private-message-form.tsx b/ui/src/components/private-message-form.tsx
index 14abacf6..586b867e 100644
--- a/ui/src/components/private-message-form.tsx
+++ b/ui/src/components/private-message-form.tsx
@@ -135,6 +135,9 @@ export class PrivateMessageForm extends Component<
                     user={{
                       name: this.state.recipient.name,
                       avatar: this.state.recipient.avatar,
+                      id: this.state.recipient.id,
+                      local: this.state.recipient.local,
+                      actor_id: this.state.recipient.actor_id,
                     }}
                   />
                 </div>
diff --git a/ui/src/components/sidebar.tsx b/ui/src/components/sidebar.tsx
index 4b317aaa..51766923 100644
--- a/ui/src/components/sidebar.tsx
+++ b/ui/src/components/sidebar.tsx
@@ -8,12 +8,7 @@ import {
   UserView,
 } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
-import {
-  mdToHtml,
-  getUnixTime,
-  pictshareAvatarThumbnail,
-  showAvatars,
-} from '../utils';
+import { mdToHtml, getUnixTime, hostname } from '../utils';
 import { CommunityForm } from './community-form';
 import { UserListing } from './user-listing';
 import { i18n } from '../i18next';
@@ -65,6 +60,15 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
 
   sidebar() {
     let community = this.props.community;
+    let name_: string, link: string;
+
+    if (community.local) {
+      name_ = community.name;
+      link = `/c/${community.name}`;
+    } else {
+      name_ = `${hostname(community.actor_id)}/${community.name}`;
+      link = community.actor_id;
+    }
     return (
       <div>
         <div class="card border-secondary mb-3">
@@ -82,9 +86,15 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                 </small>
               )}
             </h5>
-            <Link className="text-muted" to={`/c/${community.name}`}>
-              /c/{community.name}
-            </Link>
+            {community.local ? (
+              <Link className="text-muted" to={link}>
+                {name_}
+              </Link>
+            ) : (
+              <a className="text-muted" href={link} target="_blank">
+                {name_}
+              </a>
+            )}
             <ul class="list-inline mb-1 text-muted font-weight-bold">
               {this.canMod && (
                 <>
@@ -210,11 +220,15 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                     user={{
                       name: mod.user_name,
                       avatar: mod.avatar,
+                      id: mod.user_id,
+                      local: mod.user_local,
+                      actor_id: mod.user_actor_id,
                     }}
                   />
                 </li>
               ))}
             </ul>
+            {/* TODO the to= needs to be able to handle community_ids as well, since they're federated */}
             <Link
               class={`btn btn-sm btn-secondary btn-block mb-3 ${
                 (community.deleted || community.removed) && 'no-click'
diff --git a/ui/src/components/user-listing.tsx b/ui/src/components/user-listing.tsx
index 1f136e00..356c4d48 100644
--- a/ui/src/components/user-listing.tsx
+++ b/ui/src/components/user-listing.tsx
@@ -1,11 +1,14 @@
 import { Component } from 'inferno';
 import { Link } from 'inferno-router';
 import { UserView } from '../interfaces';
-import { pictshareAvatarThumbnail, showAvatars } from '../utils';
+import { pictshareAvatarThumbnail, showAvatars, hostname } from '../utils';
 
 interface UserOther {
   name: string;
+  id?: number; // Necessary if its federated
   avatar?: string;
+  local?: boolean;
+  actor_id?: string;
 }
 
 interface UserListingProps {
@@ -19,8 +22,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_ = `${hostname(user.actor_id)}/${user.name}`;
+      link = `/user/${user.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 +43,7 @@ export class UserListing extends Component<UserListingProps, any> {
             class="rounded-circle mr-2"
           />
         )}
-        <span>{user.name}</span>
+        <span>{name_}</span>
       </Link>
     );
   }
diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx
index bf67a5fd..b3e4542f 100644
--- a/ui/src/components/user.tsx
+++ b/ui/src/components/user.tsx
@@ -40,6 +40,7 @@ import {
   setupTippy,
 } from '../utils';
 import { PostListing } from './post-listing';
+import { UserListing } from './user-listing';
 import { SortSelect } from './sort-select';
 import { ListingTypeSelect } from './listing-type-select';
 import { CommentNodes } from './comment-nodes';
@@ -81,7 +82,6 @@ export class User extends Component<any, UserState> {
     user: {
       id: null,
       name: null,
-      fedi_name: null,
       published: null,
       number_of_posts: null,
       post_score: null,
@@ -91,6 +91,8 @@ export class User extends Component<any, UserState> {
       avatar: null,
       show_avatars: null,
       send_notifications_to_email: null,
+      actor_id: null,
+      local: null,
     },
     user_id: null,
     username: null,
@@ -399,7 +401,9 @@ export class User extends Component<any, UserState> {
           <div class="card-body">
             <h5>
               <ul class="list-inline mb-0">
-                <li className="list-inline-item">{user.name}</li>
+                <li className="list-inline-item">
+                  <UserListing user={user} />
+                </li>
                 {user.banned && (
                   <li className="list-inline-item badge badge-danger">
                     {i18n.t('banned')}
@@ -455,8 +459,9 @@ export class User extends Component<any, UserState> {
             ) : (
               <>
                 <a
-                  className={`btn btn-block btn-secondary mt-3 ${!this.state
-                    .user.matrix_user_id && 'disabled'}`}
+                  className={`btn btn-block btn-secondary mt-3 ${
+                    !this.state.user.matrix_user_id && 'disabled'
+                  }`}
                   target="_blank"
                   href={`https://matrix.to/#/${this.state.user.matrix_user_id}`}
                 >
diff --git a/ui/src/env.ts b/ui/src/env.ts
index 5003986b..a57b9349 100644
--- a/ui/src/env.ts
+++ b/ui/src/env.ts
@@ -1,6 +1,6 @@
 const host = `${window.location.hostname}`;
 const port = `${
-  window.location.port == '4444' ? '8536' : window.location.port
+  window.location.port == '4444' ? '8540' : window.location.port
 }`;
 const endpoint = `${host}:${port}`;