From 057a9ff4f50c81dccf1308348f558b2832152d92 Mon Sep 17 00:00:00 2001 From: Nutomic Date: Tue, 5 Apr 2022 10:41:50 +0000 Subject: [PATCH] Fix loading indicator on search page (fixes #443) (#606) * Fix loading indicator on search page (fixes #443) * fix lints * review fix * remove .filter --- src/shared/components/search.tsx | 137 +++++++++++++++---------------- src/shared/utils.ts | 6 ++ 2 files changed, 74 insertions(+), 69 deletions(-) diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx index bf660ab5..f4c78503 100644 --- a/src/shared/components/search.tsx +++ b/src/shared/components/search.tsx @@ -41,6 +41,7 @@ import { numToSI, personSelectName, personToChoice, + pushNotNull, restoreScrollPosition, routeListingTypeToEnum, routeSearchTypeToEnum, @@ -88,13 +89,13 @@ interface SearchState { communityId: number; creatorId: number; page: number; - searchResponse: SearchResponse; + searchResponse?: SearchResponse; communities: CommunityView[]; creator?: PersonViewSafe; loading: boolean; site: Site; searchText: string; - resolveObjectResponse: ResolveObjectResponse; + resolveObjectResponse?: ResolveObjectResponse; } interface UrlParams { @@ -131,19 +132,8 @@ export class Search extends Component { this.props.match.params.community_id ), creatorId: Search.getCreatorIdFromProps(this.props.match.params.creator_id), - searchResponse: { - type_: null, - posts: [], - comments: [], - communities: [], - users: [], - }, - resolveObjectResponse: { - comment: null, - post: null, - community: null, - person: null, - }, + searchResponse: null, + resolveObjectResponse: null, loading: true, site: this.isoData.site_res.site_view.site, communities: [], @@ -306,6 +296,8 @@ export class Search extends Component { setOptionalAuth(resolveObjectForm, req.auth); if (form.q != "") { + //this.state.loading = false; + //this.setState(this.state); promises.push(req.client.search(form)); promises.push(req.client.resolveObject(resolveObjectForm)); } @@ -323,7 +315,12 @@ export class Search extends Component { lastState.creatorId !== this.state.creatorId || 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(); } } @@ -461,39 +458,43 @@ export class Search extends Component { let combined: Combined[] = []; // Push the possible resolve / federated objects first - let resolveComment = this.state.resolveObjectResponse.comment; + let resolveComment = this.state.resolveObjectResponse?.comment; if (resolveComment) { combined.push(this.commentViewToCombined(resolveComment)); } - let resolvePost = this.state.resolveObjectResponse.post; + let resolvePost = this.state.resolveObjectResponse?.post; if (resolvePost) { combined.push(this.postViewToCombined(resolvePost)); } - let resolveCommunity = this.state.resolveObjectResponse.community; + let resolveCommunity = this.state.resolveObjectResponse?.community; if (resolveCommunity) { combined.push(this.communityViewToCombined(resolveCommunity)); } - let resolveUser = this.state.resolveObjectResponse.person; + let resolveUser = this.state.resolveObjectResponse?.person; if (resolveUser) { combined.push(this.personViewSafeToCombined(resolveUser)); } // Push the search results - combined.push( - ...this.state.searchResponse.comments.map(e => + pushNotNull( + combined, + this.state.searchResponse?.comments?.map(e => this.commentViewToCombined(e) ) ); - combined.push( - ...this.state.searchResponse.posts.map(e => this.postViewToCombined(e)) + pushNotNull( + combined, + this.state.searchResponse?.posts?.map(e => this.postViewToCombined(e)) ); - combined.push( - ...this.state.searchResponse.communities.map(e => + pushNotNull( + combined, + this.state.searchResponse?.communities?.map(e => this.communityViewToCombined(e) ) ); - combined.push( - ...this.state.searchResponse.users.map(e => + pushNotNull( + combined, + this.state.searchResponse?.users?.map(e => this.personViewSafeToCombined(e) ) ); @@ -556,12 +557,8 @@ export class Search extends Component { comments() { let comments: CommentView[] = []; - let resolveComment = this.state.resolveObjectResponse.comment; - if (resolveComment) { - comments.push(resolveComment); - } - - comments.push(...this.state.searchResponse.comments); + pushNotNull(comments, this.state.resolveObjectResponse?.comment); + pushNotNull(comments, this.state.searchResponse?.comments); return ( { posts() { let posts: PostView[] = []; - let resolvePost = this.state.resolveObjectResponse.post; - if (resolvePost) { - posts.push(resolvePost); - } - - posts.push(...this.state.searchResponse.posts); + pushNotNull(posts, this.state.resolveObjectResponse?.post); + pushNotNull(posts, this.state.searchResponse?.posts); return ( <> @@ -604,12 +597,9 @@ export class Search extends Component { communities() { let communities: CommunityView[] = []; - let resolveCommunity = this.state.resolveObjectResponse.community; - if (resolveCommunity) { - communities.push(resolveCommunity); - } + pushNotNull(communities, this.state.resolveObjectResponse?.community); + pushNotNull(communities, this.state.searchResponse?.communities); - communities.push(...this.state.searchResponse.communities); return ( <> {communities.map(community => ( @@ -624,12 +614,9 @@ export class Search extends Component { users() { let users: PersonViewSafe[] = []; - let resolveUser = this.state.resolveObjectResponse.person; - if (resolveUser) { - users.push(resolveUser); - } + pushNotNull(users, this.state.resolveObjectResponse?.person); + pushNotNull(users, this.state.searchResponse?.users); - users.push(...this.state.searchResponse.users); return ( <> {users.map(user => ( @@ -719,14 +706,14 @@ export class Search extends Component { let res = this.state.searchResponse; let resObj = this.state.resolveObjectResponse; let resObjCount = - resObj.post || resObj.person || resObj.community || resObj.comment + resObj?.post || resObj?.person || resObj?.community || resObj?.comment ? 1 : 0; return ( - res.posts.length + - res.comments.length + - res.communities.length + - res.users.length + + res?.posts?.length + + res?.comments?.length + + res?.communities?.length + + res?.users?.length + resObjCount ); } @@ -758,6 +745,10 @@ export class Search extends Component { }; 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.resolveObject(resolveObjectForm)); } @@ -897,36 +888,34 @@ export class Search extends Component { console.log(msg); let op = wsUserOp(msg); if (msg.error) { - if (msg.error != "couldnt_find_object") { + if (msg.error == "couldnt_find_object") { + this.state.resolveObjectResponse = { + comment: null, + post: null, + community: null, + person: null, + }; + this.checkFinishedLoading(); + } else { toast(i18n.t(msg.error), "danger"); return; - } else { - this.setState({ - resolveObjectResponse: { - comment: null, - community: null, - person: null, - post: null, - }, - }); } } else if (op == UserOperation.Search) { let data = wsJsonToRes(msg).data; this.state.searchResponse = data; - this.state.loading = false; window.scrollTo(0, 0); - this.setState(this.state); + this.checkFinishedLoading(); restoreScrollPosition(this.context); } else if (op == UserOperation.CreateCommentLike) { let data = wsJsonToRes(msg).data; createCommentLikeRes( data.comment_view, - this.state.searchResponse.comments + this.state.searchResponse?.comments ); this.setState(this.state); } else if (op == UserOperation.CreatePostLike) { let data = wsJsonToRes(msg).data; - createPostLikeFindRes(data.post_view, this.state.searchResponse.posts); + createPostLikeFindRes(data.post_view, this.state.searchResponse?.posts); this.setState(this.state); } else if (op == UserOperation.ListCommunities) { let data = wsJsonToRes(msg).data; @@ -936,6 +925,16 @@ export class Search extends Component { } else if (op == UserOperation.ResolveObject) { let data = wsJsonToRes(msg).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); } } diff --git a/src/shared/utils.ts b/src/shared/utils.ts index 3681bc4e..df26970d 100644 --- a/src/shared/utils.ts +++ b/src/shared/utils.ts @@ -1335,3 +1335,9 @@ export function isBanned(ps: PersonSafe): boolean { return ps.banned; } } + +export function pushNotNull(array: any[], new_item?: any) { + if (new_item) { + array.push(...new_item); + } +}