LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-22 20: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

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

@ -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<any, SearchState> {
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<any, SearchState> {
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<any, SearchState> {
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<any, SearchState> {
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<any, SearchState> {
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 (
<CommentNodes
@ -576,12 +573,8 @@ export class Search extends Component<any, SearchState> {
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<any, SearchState> {
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<any, SearchState> {
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<any, SearchState> {
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<any, SearchState> {
};
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<any, SearchState> {
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<SearchResponse>(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<CommentResponse>(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<PostResponse>(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<ListCommunitiesResponse>(msg).data;
@ -936,6 +925,16 @@ export class Search extends Component<any, SearchState> {
} else if (op == UserOperation.ResolveObject) {
let data = wsJsonToRes<ResolveObjectResponse>(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);
}
}

6
src/shared/utils.ts
View file

@ -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);
}
}