Adding similar post searching before creating post.

- Fixes #185.
- Offsetting create post and community columns.

4 files changed, 33 insertions, 5 deletions

diff --git a/ui/src/components/create-community.tsx b/ui/src/components/create-community.tsx
index 5e31efc2..c2f89eef 100644
--- a/ui/src/components/create-community.tsx
+++ b/ui/src/components/create-community.tsx
@@ -18,7 +18,7 @@ export class CreateCommunity extends Component<any, any> {
     return (
       <div class="container">
         <div class="row">
-          <div class="col-12 col-lg-6 mb-4">
+          <div class="col-12 col-lg-6 offset-lg-3 mb-4">
             <h5>Create Community</h5>
             <CommunityForm onCreate={this.handleCommunityCreate}/>
           </div>
diff --git a/ui/src/components/create-post.tsx b/ui/src/components/create-post.tsx
index 0e37ba1d..e09bcf70 100644
--- a/ui/src/components/create-post.tsx
+++ b/ui/src/components/create-post.tsx
@@ -17,7 +17,7 @@ export class CreatePost extends Component<any, any> {
     return (
       <div class="container">
         <div class="row">
-          <div class="col-12 col-lg-6 mb-4">
+          <div class="col-12 col-lg-6 offset-lg-3 mb-4">
             <h5>Create a Post</h5>
             <PostForm onCreate={this.handlePostCreate} prevCommunityName={this.prevCommunityName} />
           </div>
diff --git a/ui/src/components/post-form.tsx b/ui/src/components/post-form.tsx
index 50b4acd1..9b33c6e1 100644
--- a/ui/src/components/post-form.tsx
+++ b/ui/src/components/post-form.tsx
@@ -1,7 +1,8 @@
 import { Component, linkEvent } from 'inferno';
+import { PostListings } from './post-listings';
 import { Subscription } from "rxjs";
 import { retryWhen, delay, take } from 'rxjs/operators';
-import { PostForm as PostFormI, Post, PostResponse, UserOperation, Community, ListCommunitiesResponse, ListCommunitiesForm, SortType } from '../interfaces';
+import { PostForm as PostFormI, Post, PostResponse, UserOperation, Community, ListCommunitiesResponse, ListCommunitiesForm, SortType, SearchForm, SearchType, SearchResponse } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
 import { msgOp, getPageTitle } from '../utils';
 import * as autosize from 'autosize';
@@ -19,6 +20,7 @@ interface PostFormState {
   communities: Array<Community>;
   loading: boolean;
   suggestedTitle: string;
+  suggestedPosts: Array<Post>;
 }
 
 export class PostForm extends Component<PostFormProps, PostFormState> {
@@ -34,6 +36,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
     communities: [],
     loading: false,
     suggestedTitle: undefined,
+    suggestedPosts: [],
   }
 
   constructor(props: any, context: any) {
@@ -86,7 +89,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
             <div class="col-sm-10">
               <input type="url" class="form-control" value={this.state.postForm.url} onInput={linkEvent(this, this.handlePostUrlChange)} />
               {this.state.suggestedTitle && 
-                <span class="text-muted small font-weight-bold pointer" onClick={linkEvent(this, this.copySuggestedTitle)}>copy suggested title: {this.state.suggestedTitle}</span>
+                <div class="mt-1 text-muted small font-weight-bold pointer" onClick={linkEvent(this, this.copySuggestedTitle)}>copy suggested title: {this.state.suggestedTitle}</div>
               }
             </div>
           </div>
@@ -94,6 +97,12 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
             <label class="col-sm-2 col-form-label">Title</label>
             <div class="col-sm-10">
               <textarea value={this.state.postForm.name} onInput={linkEvent(this, this.handlePostNameChange)} class="form-control" required rows={2} minLength={3} maxLength={100} />
+              {this.state.suggestedPosts.length > 0 && 
+                <>
+                  <div class="my-1 text-muted small font-weight-bold">These posts might be related</div>
+                  <PostListings posts={this.state.suggestedPosts} />
+                </>
+              }
             </div>
           </div>
           <div class="form-group row">
@@ -157,6 +166,22 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
 
   handlePostNameChange(i: PostForm, event: any) {
     i.state.postForm.name = event.target.value;
+
+    let form: SearchForm = {
+      q: i.state.postForm.name,
+      type_: SearchType[SearchType.Posts],
+      sort: SortType[SortType.TopAll],
+      community_id: i.state.postForm.community_id,
+      page: 1,
+      limit: 6,
+    };
+
+    if (i.state.postForm.name !== '') {
+      WebSocketService.Instance.search(form);
+    } else {
+      i.state.suggestedPosts = [];
+    }
+
     i.setState(i.state);
   }
 
@@ -201,6 +226,10 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
       this.state.loading = false;
       let res: PostResponse = msg;
       this.props.onEdit(res.post);
+    } else if (op == UserOperation.Search) {
+      let res: SearchResponse = msg;
+      this.state.suggestedPosts = res.posts;
+      this.setState(this.state);
     }
   }
 
diff --git a/ui/src/components/search.tsx b/ui/src/components/search.tsx
index 0d3b255d..ec657bb1 100644
--- a/ui/src/components/search.tsx
+++ b/ui/src/components/search.tsx
@@ -253,7 +253,6 @@ export class Search extends Component<any, SearchState> {
       document.title = `Search - ${this.state.q} - ${WebSocketService.Instance.site.name}`;
       window.scrollTo(0,0);
       this.setState(this.state);
-      
     }
   }
 }