ui/src/components/search.tsx

   1 import { Component, linkEvent } from 'inferno';
   2 import { Subscription } from "rxjs";
   3 import { retryWhen, delay, take } from 'rxjs/operators';
   4 import { UserOperation, Post, Comment, SortType, SearchForm, SearchResponse, SearchType } from '../interfaces';
   5 import { WebSocketService } from '../services';
   6 import { msgOp, fetchLimit } from '../utils';
   7 import { PostListing } from './post-listing';
   8 import { CommentNodes } from './comment-nodes';
   9
  10 interface SearchState {
  11   q: string,
  12   type_: SearchType,
  13   sort: SortType,
  14   page: number,
  15   searchResponse: SearchResponse;
  16   loading: boolean;
  17 }
  18
  19 export class Search extends Component<any, SearchState> {
  20
  21   private subscription: Subscription;
  22   private emptyState: SearchState = {
  23     q: undefined,
  24     type_: SearchType.Both,
  25     sort: SortType.TopAll,
  26     page: 1,
  27     searchResponse: {
  28       op: null,
  29       posts: [],
  30       comments: [],
  31     },
  32     loading: false,
  33   }
  34
  35   constructor(props: any, context: any) {
  36     super(props, context);
  37
  38     this.state = this.emptyState;
  39
  40     this.subscription = WebSocketService.Instance.subject
  41     .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
  42     .subscribe(
  43       (msg) => this.parseMessage(msg),
  44         (err) => console.error(err),
  45         () => console.log('complete')
  46     );
  47
  48   }
  49
  50   componentWillUnmount() {
  51     this.subscription.unsubscribe();
  52   }
  53
  54   componentDidMount() {
  55     document.title = "Search - Lemmy";
  56   }
  57
  58   render() {
  59     return (
  60       <div class="container">
  61         <div class="row">
  62           <div class="col-12">
  63             <h5>Search</h5>
  64             {this.selects()}
  65             {this.searchForm()}
  66             {this.state.type_ == SearchType.Both &&
  67               this.both()
  68             }
  69             {this.state.type_ == SearchType.Comments &&
  70               this.comments()
  71             }
  72             {this.state.type_ == SearchType.Posts &&
  73               this.posts()
  74             }
  75             {this.noResults()}
  76             {this.paginator()}
  77           </div>
  78         </div>
  79       </div>
  80     )
  81   }
  82
  83   searchForm() {
  84     return (
  85       <form class="form-inline" onSubmit={linkEvent(this, this.handleSearchSubmit)}>
  86         <input type="text" class="form-control mr-2" value={this.state.q} placeholder="Search..." onInput={linkEvent(this, this.handleQChange)} required minLength={3} />
  87         <button type="submit" class="btn btn-secondary mr-2">
  88           {this.state.loading ?
  89           <svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> :
  90           <span>Search</span>
  91           }
  92         </button>
  93       </form>
  94     )
  95   }
  96
  97   selects() {
  98     return (
  99       <div className="mb-2">
 100         <select value={this.state.type_} onChange={linkEvent(this, this.handleTypeChange)} class="custom-select custom-select-sm w-auto">
 101           <option disabled>Type</option>
 102           <option value={SearchType.Both}>Both</option>
 103           <option value={SearchType.Comments}>Comments</option>
 104           <option value={SearchType.Posts}>Posts</option>
 105         </select>
 106         <select value={this.state.sort} onChange={linkEvent(this, this.handleSortChange)} class="custom-select custom-select-sm w-auto ml-2">
 107           <option disabled>Sort Type</option>
 108           <option value={SortType.New}>New</option>
 109           <option value={SortType.TopDay}>Top Day</option>
 110           <option value={SortType.TopWeek}>Week</option>
 111           <option value={SortType.TopMonth}>Month</option>
 112           <option value={SortType.TopYear}>Year</option>
 113           <option value={SortType.TopAll}>All</option>
 114         </select>
 115       </div>
 116     )
 117
 118   }
 119
 120   both() {
 121     let combined: Array<{type_: string, data: Comment | Post}> = [];
 122     let comments = this.state.searchResponse.comments.map(e => {return {type_: "comments", data: e}});
 123     let posts = this.state.searchResponse.posts.map(e => {return {type_: "posts", data: e}});
 124
 125     combined.push(...comments);
 126     combined.push(...posts);
 127
 128     // Sort it
 129     if (this.state.sort == SortType.New) {
 130       combined.sort((a, b) => b.data.published.localeCompare(a.data.published));
 131     } else {
 132       combined.sort((a, b) => b.data.score - a.data.score);
 133     }
 134
 135     return (
 136       <div>
 137         {combined.map(i =>
 138           <div>
 139             {i.type_ == "posts"
 140               ? <PostListing post={i.data as Post} showCommunity viewOnly />
 141               : <CommentNodes nodes={[{comment: i.data as Comment}]} viewOnly noIndent />
 142             }
 143           </div>
 144                      )
 145         }
 146       </div>
 147     )
 148   }
 149
 150   comments() {
 151     return (
 152       <div>
 153         {this.state.searchResponse.comments.map(comment =>
 154           <CommentNodes nodes={[{comment: comment}]} noIndent viewOnly />
 155         )}
 156       </div>
 157     );
 158   }
 159
 160   posts() {
 161     return (
 162       <div>
 163         {this.state.searchResponse.posts.map(post =>
 164           <PostListing post={post} showCommunity viewOnly />
 165         )}
 166       </div>
 167     );
 168   }
 169
 170   paginator() {
 171     return (
 172       <div class="mt-2">
 173         {this.state.page > 1 &&
 174           <button class="btn btn-sm btn-secondary mr-1" onClick={linkEvent(this, this.prevPage)}>Prev</button>
 175         }
 176         <button class="btn btn-sm btn-secondary" onClick={linkEvent(this, this.nextPage)}>Next</button>
 177       </div>
 178     );
 179   }
 180
 181   noResults() {
 182     let res = this.state.searchResponse;
 183     return (
 184       <div>
 185         {res && res.op && res.posts.length == 0 && res.comments.length == 0 &&
 186           <span>No Results</span>
 187         }
 188       </div>
 189     )
 190   }
 191
 192   nextPage(i: Search) {
 193     i.state.page++;
 194     i.setState(i.state);
 195     i.search();
 196   }
 197
 198   prevPage(i: Search) {
 199     i.state.page--;
 200     i.setState(i.state);
 201     i.search();
 202   }
 203
 204   search() {
 205     // TODO community
 206     let form: SearchForm = {
 207       q: this.state.q,
 208       type_: SearchType[this.state.type_],
 209       sort: SortType[this.state.sort],
 210       page: this.state.page,
 211       limit: fetchLimit,
 212     };
 213
 214     WebSocketService.Instance.search(form);
 215   }
 216
 217   handleSortChange(i: Search, event: any) {
 218     i.state.sort = Number(event.target.value);
 219     i.state.page = 1;
 220     i.setState(i.state);
 221     i.search();
 222   }
 223
 224   handleTypeChange(i: Search, event: any) {
 225     i.state.type_ = Number(event.target.value);
 226     i.state.page = 1;
 227     i.setState(i.state);
 228     i.search();
 229   }
 230
 231   handleSearchSubmit(i: Search, event: any) {
 232     event.preventDefault();
 233     i.state.loading = true;
 234     i.search();
 235     i.setState(i.state);
 236   }
 237
 238   handleQChange(i: Search, event: any) {
 239     i.state.q = event.target.value;
 240     i.setState(i.state);
 241   }
 242
 243   parseMessage(msg: any) {
 244     console.log(msg);
 245     let op: UserOperation = msgOp(msg);
 246     if (msg.error) {
 247       alert(msg.error);
 248       return;
 249     } else if (op == UserOperation.Search) {
 250       let res: SearchResponse = msg;
 251       this.state.searchResponse = res;
 252       this.state.loading = false;
 253       document.title = `Search - ${this.state.q} - Lemmy`;
 254       window.scrollTo(0,0);
 255       this.setState(this.state);
 256
 257     }
 258   }
 259 }
 260