LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-26 22:31:13 +00:00
Code Issues Projects Releases Wiki Activity

Fix loading indicator on search page (fixes #443) (#606)

Browse source 
* Fix loading indicator on search page (fixes #443)

* fix lints

* review fix

* remove .filter
This commit is contained in:
Nutomic 2022-04-05 10:41:50 +00:00 committed by GitHub
parent a15c9d0793
commit 057a9ff4f5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 74 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

135
src/shared/components/search.tsx
View file

@ -41,6 +41,7 @@ import {
numToSI, numToSI,
personSelectName, personSelectName,
personToChoice, personToChoice,
pushNotNull,
restoreScrollPosition, restoreScrollPosition,
routeListingTypeToEnum, routeListingTypeToEnum,
routeSearchTypeToEnum, routeSearchTypeToEnum,
@ -88,13 +89,13 @@ interface SearchState {
communityId: number; communityId: number;
creatorId: number; creatorId: number;
page: number; page: number;
searchResponse: SearchResponse; searchResponse?: SearchResponse;
communities: CommunityView[]; communities: CommunityView[];
creator?: PersonViewSafe; creator?: PersonViewSafe;
loading: boolean; loading: boolean;
site: Site; site: Site;
searchText: string; searchText: string;
resolveObjectResponse: ResolveObjectResponse; resolveObjectResponse?: ResolveObjectResponse;
} }
interface UrlParams { interface UrlParams {
@ -131,19 +132,8 @@ export class Search extends Component<any, SearchState> {
this.props.match.params.community_id this.props.match.params.community_id
), ),
creatorId: Search.getCreatorIdFromProps(this.props.match.params.creator_id), creatorId: Search.getCreatorIdFromProps(this.props.match.params.creator_id),
searchResponse: { searchResponse: null,
type_: null, resolveObjectResponse: null,
posts: [],
comments: [],
communities: [],
users: [],
},
resolveObjectResponse: {
comment: null,
post: null,
community: null,
person: null,
},
loading: true, loading: true,
site: this.isoData.site_res.site_view.site, site: this.isoData.site_res.site_view.site,
communities: [], communities: [],
@ -306,6 +296,8 @@ export class Search extends Component<any, SearchState> {
setOptionalAuth(resolveObjectForm, req.auth); setOptionalAuth(resolveObjectForm, req.auth);
if (form.q != "") { if (form.q != "") {
//this.state.loading = false;
//this.setState(this.state);
promises.push(req.client.search(form)); promises.push(req.client.search(form));
promises.push(req.client.resolveObject(resolveObjectForm)); promises.push(req.client.resolveObject(resolveObjectForm));
} }
@ -323,7 +315,12 @@ export class Search extends Component<any, SearchState> {
lastState.creatorId !== this.state.creatorId || lastState.creatorId !== this.state.creatorId ||
lastState.page !== this.state.page lastState.page !== this.state.page
) { ) {
this.setState({ loading: true, searchText: this.state.q }); this.setState({
loading: true,
searchText: this.state.q,
searchResponse: null,
resolveObjectResponse: null,
});
this.search(); this.search();
} }
} }
@ -461,39 +458,43 @@ export class Search extends Component<any, SearchState> {
let combined: Combined[] = []; let combined: Combined[] = [];
// Push the possible resolve / federated objects first // Push the possible resolve / federated objects first
let resolveComment = this.state.resolveObjectResponse.comment; let resolveComment = this.state.resolveObjectResponse?.comment;
if (resolveComment) { if (resolveComment) {
combined.push(this.commentViewToCombined(resolveComment)); combined.push(this.commentViewToCombined(resolveComment));
} }
let resolvePost = this.state.resolveObjectResponse.post; let resolvePost = this.state.resolveObjectResponse?.post;
if (resolvePost) { if (resolvePost) {
combined.push(this.postViewToCombined(resolvePost)); combined.push(this.postViewToCombined(resolvePost));
} }
let resolveCommunity = this.state.resolveObjectResponse.community; let resolveCommunity = this.state.resolveObjectResponse?.community;
if (resolveCommunity) { if (resolveCommunity) {
combined.push(this.communityViewToCombined(resolveCommunity)); combined.push(this.communityViewToCombined(resolveCommunity));
} }
let resolveUser = this.state.resolveObjectResponse.person; let resolveUser = this.state.resolveObjectResponse?.person;
if (resolveUser) { if (resolveUser) {
combined.push(this.personViewSafeToCombined(resolveUser)); combined.push(this.personViewSafeToCombined(resolveUser));
} }
// Push the search results // Push the search results
combined.push( pushNotNull(
...this.state.searchResponse.comments.map(e => combined,
this.state.searchResponse?.comments?.map(e =>
this.commentViewToCombined(e) this.commentViewToCombined(e)
) )
); );
combined.push( pushNotNull(
...this.state.searchResponse.posts.map(e => this.postViewToCombined(e)) combined,
this.state.searchResponse?.posts?.map(e => this.postViewToCombined(e))
); );
combined.push( pushNotNull(
...this.state.searchResponse.communities.map(e => combined,
this.state.searchResponse?.communities?.map(e =>
this.communityViewToCombined(e) this.communityViewToCombined(e)
) )
); );
combined.push( pushNotNull(
...this.state.searchResponse.users.map(e => combined,
this.state.searchResponse?.users?.map(e =>
this.personViewSafeToCombined(e) this.personViewSafeToCombined(e)
) )
); );
@ -556,12 +557,8 @@ export class Search extends Component<any, SearchState> {
comments() { comments() {
let comments: CommentView[] = []; let comments: CommentView[] = [];
let resolveComment = this.state.resolveObjectResponse.comment; pushNotNull(comments, this.state.resolveObjectResponse?.comment);
if (resolveComment) { pushNotNull(comments, this.state.searchResponse?.comments);
comments.push(resolveComment);
}
comments.push(...this.state.searchResponse.comments);
return ( return (
<CommentNodes <CommentNodes
@ -576,12 +573,8 @@ export class Search extends Component<any, SearchState> {
posts() { posts() {
let posts: PostView[] = []; let posts: PostView[] = [];
let resolvePost = this.state.resolveObjectResponse.post; pushNotNull(posts, this.state.resolveObjectResponse?.post);
if (resolvePost) { pushNotNull(posts, this.state.searchResponse?.posts);
posts.push(resolvePost);
}
posts.push(...this.state.searchResponse.posts);
return ( return (
<> <>
@ -604,12 +597,9 @@ export class Search extends Component<any, SearchState> {
communities() { communities() {
let communities: CommunityView[] = []; let communities: CommunityView[] = [];
let resolveCommunity = this.state.resolveObjectResponse.community; pushNotNull(communities, this.state.resolveObjectResponse?.community);
if (resolveCommunity) { pushNotNull(communities, this.state.searchResponse?.communities);
communities.push(resolveCommunity);
}
communities.push(...this.state.searchResponse.communities);
return ( return (
<> <>
{communities.map(community => ( {communities.map(community => (
@ -624,12 +614,9 @@ export class Search extends Component<any, SearchState> {
users() { users() {
let users: PersonViewSafe[] = []; let users: PersonViewSafe[] = [];
let resolveUser = this.state.resolveObjectResponse.person; pushNotNull(users, this.state.resolveObjectResponse?.person);
if (resolveUser) { pushNotNull(users, this.state.searchResponse?.users);
users.push(resolveUser);
}
users.push(...this.state.searchResponse.users);
return ( return (
<> <>
{users.map(user => ( {users.map(user => (
@ -719,14 +706,14 @@ export class Search extends Component<any, SearchState> {
let res = this.state.searchResponse; let res = this.state.searchResponse;
let resObj = this.state.resolveObjectResponse; let resObj = this.state.resolveObjectResponse;
let resObjCount = let resObjCount =
resObj.post || resObj.person || resObj.community || resObj.comment resObj?.post || resObj?.person || resObj?.community || resObj?.comment
? 1 ? 1
: 0; : 0;
return ( return (
res.posts.length + res?.posts?.length +
res.comments.length + res?.comments?.length +
res.communities.length + res?.communities?.length +
res.users.length + res?.users?.length +
resObjCount resObjCount
); );
} }
@ -758,6 +745,10 @@ export class Search extends Component<any, SearchState> {
}; };
if (this.state.q != "") { if (this.state.q != "") {
this.state.searchResponse = null;
this.state.resolveObjectResponse = null;
this.state.loading = true;
this.setState(this.state);
WebSocketService.Instance.send(wsClient.search(form)); WebSocketService.Instance.send(wsClient.search(form));
WebSocketService.Instance.send(wsClient.resolveObject(resolveObjectForm)); WebSocketService.Instance.send(wsClient.resolveObject(resolveObjectForm));
} }
@ -897,36 +888,34 @@ export class Search extends Component<any, SearchState> {
console.log(msg); console.log(msg);
let op = wsUserOp(msg); let op = wsUserOp(msg);
if (msg.error) { if (msg.error) {
if (msg.error != "couldnt_find_object") { if (msg.error == "couldnt_find_object") {
toast(i18n.t(msg.error), "danger"); this.state.resolveObjectResponse = {
return;
} else {
this.setState({
resolveObjectResponse: {
comment: null, comment: null,
post: null,
community: null, community: null,
person: null, person: null,
post: null, };
}, this.checkFinishedLoading();
}); } else {
toast(i18n.t(msg.error), "danger");
return;
} }
} else if (op == UserOperation.Search) { } else if (op == UserOperation.Search) {
let data = wsJsonToRes<SearchResponse>(msg).data; let data = wsJsonToRes<SearchResponse>(msg).data;
this.state.searchResponse = data; this.state.searchResponse = data;
this.state.loading = false;
window.scrollTo(0, 0); window.scrollTo(0, 0);
this.setState(this.state); this.checkFinishedLoading();
restoreScrollPosition(this.context); restoreScrollPosition(this.context);
} else if (op == UserOperation.CreateCommentLike) { } else if (op == UserOperation.CreateCommentLike) {
let data = wsJsonToRes<CommentResponse>(msg).data; let data = wsJsonToRes<CommentResponse>(msg).data;
createCommentLikeRes( createCommentLikeRes(
data.comment_view, data.comment_view,
this.state.searchResponse.comments this.state.searchResponse?.comments
); );
this.setState(this.state); this.setState(this.state);
} else if (op == UserOperation.CreatePostLike) { } else if (op == UserOperation.CreatePostLike) {
let data = wsJsonToRes<PostResponse>(msg).data; let data = wsJsonToRes<PostResponse>(msg).data;
createPostLikeFindRes(data.post_view, this.state.searchResponse.posts); createPostLikeFindRes(data.post_view, this.state.searchResponse?.posts);
this.setState(this.state); this.setState(this.state);
} else if (op == UserOperation.ListCommunities) { } else if (op == UserOperation.ListCommunities) {
let data = wsJsonToRes<ListCommunitiesResponse>(msg).data; let data = wsJsonToRes<ListCommunitiesResponse>(msg).data;
@ -936,6 +925,16 @@ export class Search extends Component<any, SearchState> {
} else if (op == UserOperation.ResolveObject) { } else if (op == UserOperation.ResolveObject) {
let data = wsJsonToRes<ResolveObjectResponse>(msg).data; let data = wsJsonToRes<ResolveObjectResponse>(msg).data;
this.state.resolveObjectResponse = data; this.state.resolveObjectResponse = data;
this.checkFinishedLoading();
}
}
checkFinishedLoading() {
if (
this.state.searchResponse != null &&
this.state.resolveObjectResponse != null
) {
this.state.loading = false;
this.setState(this.state); this.setState(this.state);
} }
} }

6
src/shared/utils.ts
View file

@ -1335,3 +1335,9 @@ export function isBanned(ps: PersonSafe): boolean {
return ps.banned; return ps.banned;
} }
} }
export function pushNotNull(array: any[], new_item?: any) {
if (new_item) {
array.push(...new_item);
}
}