Adding better community and main page routing, with sorting and type in url.

1 files changed, 7 insertions, 162 deletions

diff --git a/ui/src/components/post-listings.tsx b/ui/src/components/post-listings.tsx
index b60b05d8..c1126f52 100644
--- a/ui/src/components/post-listings.tsx
+++ b/ui/src/components/post-listings.tsx
@@ -1,183 +1,28 @@
-import { Component, linkEvent } from 'inferno';
+import { Component } from 'inferno';
 import { Link } from 'inferno-router';
-import { Subscription } from "rxjs";
-import { retryWhen, delay, take } from 'rxjs/operators';
-import { UserOperation, Post, GetPostsForm, SortType, ListingType, GetPostsResponse, CreatePostLikeResponse, CommunityUser} from '../interfaces';
-import { WebSocketService, UserService } from '../services';
+import { Post } from '../interfaces';
 import { PostListing } from './post-listing';
-import { msgOp, fetchLimit } from '../utils';
 
 interface PostListingsProps {
-  type?: ListingType;
-  communityId?: number;
-}
-
-interface PostListingsState {
-  moderators: Array<CommunityUser>;
   posts: Array<Post>;
-  sortType: SortType;
-  type_: ListingType;
-  page: number;
-  loading: boolean;
+  showCommunity?: boolean;
 }
 
-export class PostListings extends Component<PostListingsProps, PostListingsState> {
-
-  private subscription: Subscription;
-  private emptyState: PostListingsState = {
-    moderators: [],
-    posts: [],
-    sortType: SortType.Hot,
-    type_: (this.props.type !== undefined && UserService.Instance.user) ? this.props.type : 
-      this.props.communityId 
-        ? ListingType.Community 
-        : UserService.Instance.user
-          ? ListingType.Subscribed 
-          : ListingType.All,
-          page: 1,
-          loading: true
-  }
+export class PostListings extends Component<PostListingsProps, any> {
 
   constructor(props: any, context: any) {
     super(props, context);
-
-    this.state = this.emptyState;
-
-    this.subscription = WebSocketService.Instance.subject
-      .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
-      .subscribe(
-        (msg) => this.parseMessage(msg),
-        (err) => console.error(err),
-        () => console.log('complete')
-      );
-
-      this.refetch();
-  }
-
-  componentWillUnmount() {
-    this.subscription.unsubscribe();
   }
 
   render() {
     return (
       <div>
-        {this.state.loading ? 
-        <h5><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h5> : 
-        <div>
-          {this.selects()}
-          {this.state.posts.length > 0 
-            ? this.state.posts.map(post => 
-              <PostListing post={post} showCommunity={!this.props.communityId}/>) 
-                : <div>No Listings. {!this.props.communityId && <span>Subscribe to some <Link to="/communities">forums</Link>.</span>}</div>
-          }
-          {this.paginator()}
+        {this.props.posts.length > 0 ? this.props.posts.map(post => 
+          <PostListing post={post} showCommunity={this.props.showCommunity} />) : 
+          <div>No Listings. {!this.props.showCommunity && <span>Subscribe to some <Link to="/communities">forums</Link>.</span>}
         </div>
         }
       </div>
     )
   }
-
-  selects() {
-    return (
-      <div className="mb-2">
-        <select value={this.state.sortType} onChange={linkEvent(this, this.handleSortChange)} class="custom-select w-auto">
-          <option disabled>Sort Type</option>
-          <option value={SortType.Hot}>Hot</option>
-          <option value={SortType.New}>New</option>
-          <option disabled>──────────</option>
-          <option value={SortType.TopDay}>Top Day</option>
-          <option value={SortType.TopWeek}>Week</option>
-          <option value={SortType.TopMonth}>Month</option>
-          <option value={SortType.TopYear}>Year</option>
-          <option value={SortType.TopAll}>All</option>
-        </select>
-        {!this.props.communityId && 
-          UserService.Instance.user &&
-            <select value={this.state.type_} onChange={linkEvent(this, this.handleTypeChange)} class="ml-2 custom-select w-auto">
-              <option disabled>Type</option>
-              <option value={ListingType.All}>All</option>
-              <option value={ListingType.Subscribed}>Subscribed</option>
-            </select>
-
-        }
-      </div>
-    )
-  }
-
-  paginator() {
-    return (
-      <div class="mt-2">
-        {this.state.page > 1 && 
-          <button class="btn btn-sm btn-secondary mr-1" onClick={linkEvent(this, this.prevPage)}>Prev</button>
-        }
-        <button class="btn btn-sm btn-secondary" onClick={linkEvent(this, this.nextPage)}>Next</button>
-      </div>
-    );
-  }
-
-  nextPage(i: PostListings) { 
-    i.state.page++;
-    i.setState(i.state);
-    i.refetch();
-  }
-
-  prevPage(i: PostListings) { 
-    i.state.page--;
-    i.setState(i.state);
-    i.refetch();
-  }
-
-  handleSortChange(i: PostListings, event: any) {
-    i.state.sortType = Number(event.target.value);
-    i.state.page = 1;
-    i.setState(i.state);
-    i.refetch();
-  }
-
-  refetch() {
-    let getPostsForm: GetPostsForm = {
-      community_id: this.props.communityId,
-      page: this.state.page,
-      limit: fetchLimit,
-      sort: SortType[this.state.sortType],
-      type_: ListingType[this.state.type_]
-    }
-    WebSocketService.Instance.getPosts(getPostsForm);
-  }
-
-  handleTypeChange(i: PostListings, event: any) {
-    i.state.type_ = Number(event.target.value);
-    i.state.page = 1;
-    if (i.state.type_ == ListingType.All) {
-      i.context.router.history.push('/all');
-    } else {
-      i.context.router.history.push('/');
-    }
-    i.setState(i.state);
-    i.refetch();
-  }
-
-  parseMessage(msg: any) {
-    console.log(msg);
-    let op: UserOperation = msgOp(msg);
-    if (msg.error) {
-      alert(msg.error);
-      return;
-    } else if (op == UserOperation.GetPosts) {
-      let res: GetPostsResponse = msg;
-      this.state.posts = res.posts;
-      this.state.loading = false;
-      this.setState(this.state);
-    } else if (op == UserOperation.CreatePostLike) {
-      let res: CreatePostLikeResponse = msg;
-      let found = this.state.posts.find(c => c.id == res.post.id);
-      found.my_vote = res.post.my_vote;
-      found.score = res.post.score;
-      found.upvotes = res.post.upvotes;
-      found.downvotes = res.post.downvotes;
-      this.setState(this.state);
-    }
-  }
 }
-
-