View where a URL has been cross-posted to in the past

- This shows when creating a post, or when viewing a post.
- Fixes #131

5 files changed, 59 insertions, 4 deletions

diff --git a/ui/src/components/post-form.tsx b/ui/src/components/post-form.tsx
index 42620c9f..d21b2fb4 100644
--- a/ui/src/components/post-form.tsx
+++ b/ui/src/components/post-form.tsx
@@ -23,6 +23,7 @@ interface PostFormState {
   loading: boolean;
   suggestedTitle: string;
   suggestedPosts: Array<Post>;
+  crossPosts: Array<Post>;
 }
 
 export class PostForm extends Component<PostFormProps, PostFormState> {
@@ -40,6 +41,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
     loading: false,
     suggestedTitle: undefined,
     suggestedPosts: [],
+    crossPosts: [],
   }
 
   constructor(props: any, context: any) {
@@ -95,6 +97,12 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
               {this.state.suggestedTitle && 
                 <div class="mt-1 text-muted small font-weight-bold pointer" onClick={linkEvent(this, this.copySuggestedTitle)}><T i18nKey="copy_suggested_title" interpolation={{title: this.state.suggestedTitle}}>#</T></div>
               }
+              {this.state.crossPosts.length > 0 && 
+                <>
+                  <div class="my-1 text-muted small font-weight-bold"><T i18nKey="cross_posts">#</T></div>
+                  <PostListings showCommunity posts={this.state.crossPosts} />
+                </>
+              }
             </div>
           </div>
           <div class="form-group row">
@@ -170,13 +178,27 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
   handlePostUrlChange(i: PostForm, event: any) {
     i.state.postForm.url = event.target.value;
     if (validURL(i.state.postForm.url)) {
+
+      let form: SearchForm = {
+        q: i.state.postForm.url,
+        type_: SearchType[SearchType.Url],
+        sort: SortType[SortType.TopAll],
+        page: 1,
+        limit: 6,
+      };
+
+      WebSocketService.Instance.search(form);
+
+      // Fetch the page title
       getPageTitle(i.state.postForm.url).then(d => {
         i.state.suggestedTitle = d;
         i.setState(i.state);
       });
     } else {
       i.state.suggestedTitle = undefined;
+      i.state.crossPosts = [];
     }
+
     i.setState(i.state);
   }
 
@@ -248,7 +270,12 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
       this.props.onEdit(res.post);
     } else if (op == UserOperation.Search) {
       let res: SearchResponse = msg;
-      this.state.suggestedPosts = res.posts;
+      
+      if (res.type_ == SearchType[SearchType.Posts]) {
+        this.state.suggestedPosts = res.posts;
+      } else if (res.type_ == SearchType[SearchType.Url]) {
+        this.state.crossPosts = res.posts;
+      }
       this.setState(this.state);
     }
   }
diff --git a/ui/src/components/post.tsx b/ui/src/components/post.tsx
index b0204d38..97a9cd72 100644
--- a/ui/src/components/post.tsx
+++ b/ui/src/components/post.tsx
@@ -1,10 +1,11 @@
 import { Component, linkEvent } from 'inferno';
 import { Subscription } from "rxjs";
 import { retryWhen, delay, take } from 'rxjs/operators';
-import { UserOperation, Community, Post as PostI, GetPostResponse, PostResponse, Comment, CommentForm as CommentFormI, CommentResponse, CommentSortType, CreatePostLikeResponse, CommunityUser, CommunityResponse, CommentNode as CommentNodeI, BanFromCommunityResponse, BanUserResponse, AddModToCommunityResponse, AddAdminResponse, UserView } from '../interfaces';
+import { UserOperation, Community, Post as PostI, GetPostResponse, PostResponse, Comment, CommentForm as CommentFormI, CommentResponse, CommentSortType, CreatePostLikeResponse, CommunityUser, CommunityResponse, CommentNode as CommentNodeI, BanFromCommunityResponse, BanUserResponse, AddModToCommunityResponse, AddAdminResponse, UserView, SearchType, SortType, SearchForm, SearchResponse } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
 import { msgOp, hotRank } from '../utils';
 import { PostListing } from './post-listing';
+import { PostListings } from './post-listings';
 import { Sidebar } from './sidebar';
 import { CommentForm } from './comment-form';
 import { CommentNodes } from './comment-nodes';
@@ -22,6 +23,7 @@ interface PostState {
   scrolled?: boolean;
   scrolled_comment_id?: number;
   loading: boolean;
+  crossPosts: Array<PostI>;
 }
 
 export class Post extends Component<any, PostState> {
@@ -35,7 +37,8 @@ export class Post extends Component<any, PostState> {
     moderators: [],
     admins: [],
     scrolled: false, 
-    loading: true
+    loading: true,
+    crossPosts: [],
   }
 
   constructor(props: any, context: any) {
@@ -112,6 +115,12 @@ export class Post extends Component<any, PostState> {
                 moderators={this.state.moderators} 
                 admins={this.state.admins}
               />
+              {this.state.crossPosts.length > 0 && 
+                <>
+                  <div class="my-1 text-muted small font-weight-bold"><T i18nKey="cross_posts">#</T></div>
+                  <PostListings showCommunity posts={this.state.crossPosts} />
+                </>
+              }
               <div className="mb-2" />
               <CommentForm postId={this.state.post.id} disabled={this.state.post.locked} />
               {this.sortRadios()}
@@ -256,6 +265,18 @@ export class Post extends Component<any, PostState> {
       this.state.admins = res.admins;
       this.state.loading = false;
       document.title = `${this.state.post.name} - ${WebSocketService.Instance.site.name}`;
+
+      // Get cross-posts  
+      let form: SearchForm = {
+        q: res.post.url,
+        type_: SearchType[SearchType.Url],
+        sort: SortType[SortType.TopAll],
+        page: 1,
+        limit: 6,
+      };
+
+      WebSocketService.Instance.search(form);
+
       this.setState(this.state);
     } else if (op == UserOperation.CreateComment) {
       let res: CommentResponse = msg;
@@ -332,6 +353,10 @@ export class Post extends Component<any, PostState> {
       let res: AddAdminResponse = msg;
       this.state.admins = res.admins;
       this.setState(this.state);
+    } else if (op == UserOperation.Search) {
+      let res: SearchResponse = msg;
+      this.state.crossPosts = res.posts.filter(p => p.id != this.state.post.id);
+      this.setState(this.state);
     }
 
   }
diff --git a/ui/src/components/search.tsx b/ui/src/components/search.tsx
index 0f8727cb..34a4a3d3 100644
--- a/ui/src/components/search.tsx
+++ b/ui/src/components/search.tsx
@@ -29,6 +29,7 @@ export class Search extends Component<any, SearchState> {
     page: 1,
     searchResponse: {
       op: null,
+      type_: null,
       posts: [],
       comments: [],
       communities: [],
diff --git a/ui/src/interfaces.ts b/ui/src/interfaces.ts
index ebd42340..91d89783 100644
--- a/ui/src/interfaces.ts
+++ b/ui/src/interfaces.ts
@@ -15,7 +15,7 @@ export enum SortType {
 }
 
 export enum SearchType {
-  All, Comments, Posts, Communities, Users
+  All, Comments, Posts, Communities, Users, Url
 }
 
 export interface User {
@@ -551,6 +551,7 @@ export interface SearchForm {
 
 export interface SearchResponse {
   op: string;
+  type_: string;
   posts?: Array<Post>;
   comments?: Array<Comment>;
   communities: Array<Community>;  
diff --git a/ui/src/translations/en.ts b/ui/src/translations/en.ts
index b5c06672..90497ada 100644
--- a/ui/src/translations/en.ts
+++ b/ui/src/translations/en.ts
@@ -8,6 +8,7 @@ export const en = {
     number_of_posts:'{{count}} Posts',
     posts: 'Posts',
     related_posts: 'These posts might be related',
+    cross_posts: 'This link has also been posted to:',
     comments: 'Comments',
     number_of_comments:'{{count}} Comments',
     remove_comment: 'Remove Comment',