diff options
Diffstat (limited to 'ui/src/components/search.tsx')
-rw-r--r-- | ui/src/components/search.tsx | 215 |
1 files changed, 127 insertions, 88 deletions
diff --git a/ui/src/components/search.tsx b/ui/src/components/search.tsx index ae0f8dbc..18b5d341 100644 --- a/ui/src/components/search.tsx +++ b/ui/src/components/search.tsx @@ -12,6 +12,8 @@ import { SearchForm, SearchResponse, SearchType, + CreatePostLikeResponse, + CommentResponse, WebSocketJsonResponse, } from '../interfaces'; import { WebSocketService } from '../services'; @@ -22,6 +24,7 @@ import { routeSortTypeToEnum, pictshareAvatarThumbnail, showAvatars, + toast, } from '../utils'; import { PostListing } from './post-listing'; import { SortSelect } from './sort-select'; @@ -123,22 +126,18 @@ export class Search extends Component<any, SearchState> { render() { return ( <div class="container"> - <div class="row"> - <div class="col-12"> - <h5> - <T i18nKey="search">#</T> - </h5> - {this.selects()} - {this.searchForm()} - {this.state.type_ == SearchType.All && this.all()} - {this.state.type_ == SearchType.Comments && this.comments()} - {this.state.type_ == SearchType.Posts && this.posts()} - {this.state.type_ == SearchType.Communities && this.communities()} - {this.state.type_ == SearchType.Users && this.users()} - {this.noResults()} - {this.paginator()} - </div> - </div> + <h5> + <T i18nKey="search">#</T> + </h5> + {this.selects()} + {this.searchForm()} + {this.state.type_ == SearchType.All && this.all()} + {this.state.type_ == SearchType.Comments && this.comments()} + {this.state.type_ == SearchType.Posts && this.posts()} + {this.state.type_ == SearchType.Communities && this.communities()} + {this.state.type_ == SearchType.Users && this.users()} + {this.noResults()} + {this.paginator()} </div> ); } @@ -252,54 +251,56 @@ export class Search extends Component<any, SearchState> { return ( <div> {combined.map(i => ( - <div> - {i.type_ == 'posts' && ( - <PostListing post={i.data as Post} showCommunity viewOnly /> - )} - {i.type_ == 'comments' && ( - <CommentNodes - nodes={[{ comment: i.data as Comment }]} - locked - noIndent - /> - )} - {i.type_ == 'communities' && ( - <div> - <span> - <Link to={`/c/${(i.data as Community).name}`}>{`/c/${ - (i.data as Community).name - }`}</Link> - </span> - <span>{` - ${(i.data as Community).title} - ${ - (i.data as Community).number_of_subscribers - } subscribers`}</span> - </div> - )} - {i.type_ == 'users' && ( - <div> - <span> - <Link - className="text-info" - to={`/u/${(i.data as UserView).name}`} - > - {(i.data as UserView).avatar && showAvatars() && ( - <img - height="32" - width="32" - src={pictshareAvatarThumbnail( - (i.data as UserView).avatar - )} - class="rounded-circle mr-1" - /> - )} - <span>{`/u/${(i.data as UserView).name}`}</span> - </Link> - </span> - <span>{` - ${ - (i.data as UserView).comment_score - } comment karma`}</span> - </div> - )} + <div class="row"> + <div class="col-12"> + {i.type_ == 'posts' && ( + <PostListing post={i.data as Post} showCommunity /> + )} + {i.type_ == 'comments' && ( + <CommentNodes + nodes={[{ comment: i.data as Comment }]} + locked + noIndent + /> + )} + {i.type_ == 'communities' && ( + <div> + <span> + <Link to={`/c/${(i.data as Community).name}`}>{`/c/${ + (i.data as Community).name + }`}</Link> + </span> + <span>{` - ${(i.data as Community).title} - ${ + (i.data as Community).number_of_subscribers + } subscribers`}</span> + </div> + )} + {i.type_ == 'users' && ( + <div> + <span> + <Link + className="text-info" + to={`/u/${(i.data as UserView).name}`} + > + {(i.data as UserView).avatar && showAvatars() && ( + <img + height="32" + width="32" + src={pictshareAvatarThumbnail( + (i.data as UserView).avatar + )} + class="rounded-circle mr-1" + /> + )} + <span>{`/u/${(i.data as UserView).name}`}</span> + </Link> + </span> + <span>{` - ${ + (i.data as UserView).comment_score + } comment karma`}</span> + </div> + )} + </div> </div> ))} </div> @@ -308,55 +309,69 @@ export class Search extends Component<any, SearchState> { comments() { return ( - <div> + <> {this.state.searchResponse.comments.map(comment => ( - <CommentNodes nodes={[{ comment: comment }]} locked noIndent /> + <div class="row"> + <div class="col-12"> + <CommentNodes nodes={[{ comment: comment }]} locked noIndent /> + </div> + </div> ))} - </div> + </> ); } posts() { return ( - <div> + <> {this.state.searchResponse.posts.map(post => ( - <PostListing post={post} showCommunity viewOnly /> + <div class="row"> + <div class="col-12"> + <PostListing post={post} showCommunity /> + </div> + </div> ))} - </div> + </> ); } // Todo possibly create UserListing and CommunityListing communities() { return ( - <div> + <> {this.state.searchResponse.communities.map(community => ( - <div> - <span> - <Link to={`/c/${community.name}`}>{`/c/${community.name}`}</Link> - </span> - <span>{` - ${community.title} - ${community.number_of_subscribers} subscribers`}</span> + <div class="row"> + <div class="col-12"> + <span> + <Link + to={`/c/${community.name}`} + >{`/c/${community.name}`}</Link> + </span> + <span>{` - ${community.title} - ${community.number_of_subscribers} subscribers`}</span> + </div> </div> ))} - </div> + </> ); } users() { return ( - <div> + <> {this.state.searchResponse.users.map(user => ( - <div> - <span> - <Link - className="text-info" - to={`/u/${user.name}`} - >{`/u/${user.name}`}</Link> - </span> - <span>{` - ${user.comment_score} comment karma`}</span> + <div class="row"> + <div class="col-12"> + <span> + <Link + className="text-info" + to={`/u/${user.name}`} + >{`/u/${user.name}`}</Link> + </span> + <span>{` - ${user.comment_score} comment karma`}</span> + </div> </div> ))} - </div> + </> ); } @@ -465,7 +480,7 @@ export class Search extends Component<any, SearchState> { console.log(msg); let res = wsJsonToRes(msg); if (res.error) { - alert(i18n.t(res.error)); + toast(i18n.t(msg.error), 'danger'); return; } else if (res.op == UserOperation.Search) { let data = res.data as SearchResponse; @@ -476,6 +491,30 @@ export class Search extends Component<any, SearchState> { }`; window.scrollTo(0, 0); this.setState(this.state); + } else if (res.op == UserOperation.CreateCommentLike) { + let data = res.data as CommentResponse; + let found: Comment = this.state.searchResponse.comments.find( + c => c.id === data.comment.id + ); + found.score = data.comment.score; + found.upvotes = data.comment.upvotes; + found.downvotes = data.comment.downvotes; + if (data.comment.my_vote !== null) { + found.my_vote = data.comment.my_vote; + found.upvoteLoading = false; + found.downvoteLoading = false; + } + this.setState(this.state); + } else if (res.op == UserOperation.CreatePostLike) { + let data = res.data as CreatePostLikeResponse; + let found = this.state.searchResponse.posts.find( + c => c.id == data.post.id + ); + found.my_vote = data.post.my_vote; + found.score = data.post.score; + found.upvotes = data.post.upvotes; + found.downvotes = data.post.downvotes; + this.setState(this.state); } } } |