Remove buggy navbar search. Fixes #921 (#950)

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: "";

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<NavbarProps, NavbarState> {
   private unreadInboxCountSub: Subscription;
   private unreadReportCountSub: Subscription;
   private unreadApplicationCountSub: Subscription;
-  private searchTextField: RefObject<HTMLInputElement>;
   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<NavbarProps, NavbarState> {
   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<NavbarProps, NavbarState> {
   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<NavbarProps, NavbarState> {
             ) && (
               <ul className="navbar-nav">
                 <li className="nav-item">
-                  <form
-                    className="form-inline mr-1"
-                    onSubmit={linkEvent(this, this.handleSearchSubmit)}
+                  <NavLink
+                    to="/search"
+                    className="nav-link"
+                    title={i18n.t("search")}
                   >
-                    <input
-                      id="search-input"
-                      className={`form-control mr-0 search-input ${
-                        this.state.toggleSearch ? "show-input" : "hide-input"
-                      }`}
-                      onInput={linkEvent(this, this.handleSearchParam)}
-                      value={this.state.searchParam}
-                      ref={this.searchTextField}
-                      disabled={!this.state.toggleSearch}
-                      type="text"
-                      placeholder={i18n.t("search")}
-                      onBlur={linkEvent(this, this.handleSearchBlur)}
-                    ></input>
-                    <label className="sr-only" htmlFor="search-input">
-                      {i18n.t("search")}
-                    </label>
-                    <button
-                      name="search-btn"
-                      onClick={linkEvent(this, this.handleSearchBtn)}
-                      className="px-1 btn btn-link nav-link"
-                      aria-label={i18n.t("search")}
-                    >
-                      <Icon icon="search" />
-                    </button>
-                  </form>
+                    <Icon icon="search" />
+                  </NavLink>
                 </li>
               </ul>
             )}
@@ -520,28 +492,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
     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();

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<any, SearchState> {
       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<any, SearchState> {
       }
     } else {
       this.fetchCommunities();
-      this.search();
+
+      if (this.state.q) {
+        this.search();
+      }
     }
   }
 
@@ -298,29 +301,33 @@ export class Search extends Component<any, SearchState> {
       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]);
 
-    let resolveObjectForm: ResolveObject = {
-      q: this.getSearchQueryFromProps(pathSplit[3]),
-      auth: req.auth,
-    };
+    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,
+      };
 
-    if (form.q != "") {
-      promises.push(req.client.search(form));
-      promises.push(req.client.resolveObject(resolveObjectForm));
-    } else {
-      promises.push(Promise.resolve());
-      promises.push(Promise.resolve());
+      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());
+      }
     }
 
     return promises;
@@ -336,11 +343,13 @@ 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.search();
+      if (this.state.q) {
+        this.setState({
+          loading: true,
+          searchText: this.state.q,
+        });
+        this.search();
+      }
     }
   }
 
@@ -779,24 +788,24 @@ export class Search extends Component<any, SearchState> {
       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<any, SearchState> {
 
   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;