From 6aa33e6809f7da40c6d2f7fc92ba84986577c76e Mon Sep 17 00:00:00 2001 From: Dessalines Date: Tue, 21 Feb 2023 15:52:12 -0500 Subject: [PATCH] Remove buggy navbar search. Fixes #921 (#950) --- src/assets/css/main.css | 10 --- src/shared/components/app/navbar.tsx | 64 ++-------------- src/shared/components/search.tsx | 109 +++++++++++++++------------ 3 files changed, 66 insertions(+), 117 deletions(-) diff --git a/src/assets/css/main.css b/src/assets/css/main.css index 98e98d2..766c9db 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -305,16 +305,6 @@ pre { transition: width 0.2s ease-out 0s !important; } -.show-input { - width: 13vw !important; -} -.hide-input { - background: transparent !important; - background-color: transparent !important; - width: 0px !important; - padding: 0 !important; -} - br.big { display: block; content: ""; diff --git a/src/shared/components/app/navbar.tsx b/src/shared/components/app/navbar.tsx index d758af6..4d0b88f 100644 --- a/src/shared/components/app/navbar.tsx +++ b/src/shared/components/app/navbar.tsx @@ -1,4 +1,4 @@ -import { Component, createRef, linkEvent, RefObject } from "inferno"; +import { Component, linkEvent } from "inferno"; import { NavLink } from "inferno-router"; import { CommentResponse, @@ -44,7 +44,6 @@ interface NavbarState { unreadReportCount: number; unreadApplicationCount: number; searchParam: string; - toggleSearch: boolean; showDropdown: boolean; onSiteBanner?(url: string): any; } @@ -55,14 +54,12 @@ export class Navbar extends Component { private unreadInboxCountSub: Subscription; private unreadReportCountSub: Subscription; private unreadApplicationCountSub: Subscription; - private searchTextField: RefObject; state: NavbarState = { unreadInboxCount: 0, unreadReportCount: 0, unreadApplicationCount: 0, expanded: false, searchParam: "", - toggleSearch: false, showDropdown: false, }; subscription: any; @@ -77,8 +74,6 @@ export class Navbar extends Component { componentDidMount() { // Subscribe to jwt changes if (isBrowser()) { - this.searchTextField = createRef(); - // On the first load, check the unreads let auth = myAuth(false); if (auth && UserService.Instance.myUserInfo) { @@ -123,7 +118,6 @@ export class Navbar extends Component { updateUrl() { const searchParam = this.state.searchParam; this.setState({ searchParam: "" }); - this.setState({ toggleSearch: false }); this.setState({ showDropdown: false, expanded: false }); if (searchParam === "") { this.context.router.history.push(`/search/`); @@ -308,35 +302,13 @@ export class Navbar extends Component { ) && (
  • -
    - - - -
    + +
)} @@ -520,28 +492,6 @@ export class Navbar extends Component { i.setState({ searchParam: event.target.value }); } - handleSearchSubmit(i: Navbar, event: any) { - event.preventDefault(); - i.updateUrl(); - } - - handleSearchBtn(i: Navbar, event: any) { - event.preventDefault(); - i.setState({ toggleSearch: true }); - - i.searchTextField.current?.focus(); - const offsetWidth = i.searchTextField.current?.offsetWidth; - if (i.state.searchParam && offsetWidth && offsetWidth > 100) { - i.updateUrl(); - } - } - - handleSearchBlur(i: Navbar, event: any) { - if (!(event.relatedTarget && event.relatedTarget.name !== "search-btn")) { - i.setState({ toggleSearch: false }); - } - } - handleLogoutClick(i: Navbar) { i.setState({ showDropdown: false, expanded: false }); UserService.Instance.logout(); diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx index 102e0fc..b96e1c5 100644 --- a/src/shared/components/search.tsx +++ b/src/shared/components/search.tsx @@ -75,7 +75,7 @@ if (isBrowser()) { } interface SearchProps { - q: string; + q?: string; type_: SearchType; sort: SortType; listingType: ListingType; @@ -85,7 +85,7 @@ interface SearchProps { } interface SearchState { - q: string; + q?: string; type_: SearchType; sort: SortType; listingType: ListingType; @@ -97,7 +97,7 @@ interface SearchState { creatorDetails?: GetPersonDetailsResponse; loading: boolean; siteRes: GetSiteResponse; - searchText: string; + searchText?: string; resolveObjectResponse?: ResolveObjectResponse; } @@ -135,13 +135,13 @@ export class Search extends Component { this.props.match.params.community_id ), creatorId: Search.getCreatorIdFromProps(this.props.match.params.creator_id), - loading: true, + loading: false, siteRes: this.isoData.site_res, communities: [], }; - static getSearchQueryFromProps(q: string): string { - return decodeURIComponent(q) || ""; + static getSearchQueryFromProps(q?: string): string | undefined { + return q ? decodeURIComponent(q) : undefined; } static getSearchTypeFromProps(type_: string): SearchType { @@ -219,7 +219,10 @@ export class Search extends Component { } } else { this.fetchCommunities(); - this.search(); + + if (this.state.q) { + this.search(); + } } } @@ -298,29 +301,33 @@ export class Search extends Component { promises.push(Promise.resolve()); } - let form: SearchForm = { - q: this.getSearchQueryFromProps(pathSplit[3]), - community_id, - creator_id, - type_: this.getSearchTypeFromProps(pathSplit[5]), - sort: this.getSortTypeFromProps(pathSplit[7]), - listing_type: this.getListingTypeFromProps(pathSplit[9]), - page: this.getPageFromProps(pathSplit[15]), - limit: fetchLimit, - auth: req.auth, - }; + let q = this.getSearchQueryFromProps(pathSplit[3]); + + if (q) { + let form: SearchForm = { + q, + community_id, + creator_id, + type_: this.getSearchTypeFromProps(pathSplit[5]), + sort: this.getSortTypeFromProps(pathSplit[7]), + listing_type: this.getListingTypeFromProps(pathSplit[9]), + page: this.getPageFromProps(pathSplit[15]), + limit: fetchLimit, + auth: req.auth, + }; - let resolveObjectForm: ResolveObject = { - q: this.getSearchQueryFromProps(pathSplit[3]), - auth: req.auth, - }; + let resolveObjectForm: ResolveObject = { + q, + auth: req.auth, + }; - if (form.q != "") { - promises.push(req.client.search(form)); - promises.push(req.client.resolveObject(resolveObjectForm)); - } else { - promises.push(Promise.resolve()); - promises.push(Promise.resolve()); + if (form.q != "") { + promises.push(req.client.search(form)); + promises.push(req.client.resolveObject(resolveObjectForm)); + } else { + promises.push(Promise.resolve()); + promises.push(Promise.resolve()); + } } return promises; @@ -336,11 +343,13 @@ export class Search extends Component { lastState.creatorId !== this.state.creatorId || lastState.page !== this.state.page ) { - this.setState({ - loading: true, - searchText: this.state.q, - }); - this.search(); + if (this.state.q) { + this.setState({ + loading: true, + searchText: this.state.q, + }); + this.search(); + } } } @@ -779,24 +788,24 @@ export class Search extends Component { this.state.creatorId == 0 ? undefined : this.state.creatorId; let auth = myAuth(false); - let form: SearchForm = { - q: this.state.q, - community_id, - creator_id, - type_: this.state.type_, - sort: this.state.sort, - listing_type: this.state.listingType, - page: this.state.page, - limit: fetchLimit, - auth, - }; + if (this.state.q && this.state.q != "") { + let form: SearchForm = { + q: this.state.q, + community_id, + creator_id, + type_: this.state.type_, + sort: this.state.sort, + listing_type: this.state.listingType, + page: this.state.page, + limit: fetchLimit, + auth, + }; - let resolveObjectForm: ResolveObject = { - q: this.state.q, - auth, - }; + let resolveObjectForm: ResolveObject = { + q: this.state.q, + auth, + }; - if (this.state.q != "") { this.setState({ searchResponse: undefined, resolveObjectResponse: undefined, @@ -919,7 +928,7 @@ export class Search extends Component { updateUrl(paramUpdates: UrlParams) { const qStr = paramUpdates.q || this.state.q; - const qStrEncoded = encodeURIComponent(qStr); + const qStrEncoded = encodeURIComponent(qStr || ""); const typeStr = paramUpdates.type_ || this.state.type_; const listingTypeStr = paramUpdates.listingType || this.state.listingType; const sortStr = paramUpdates.sort || this.state.sort; -- 2.44.1