-import { Component, createRef, linkEvent, RefObject } from "inferno";
+import { Component, linkEvent } from "inferno";
import { NavLink } from "inferno-router";
import {
CommentResponse,
unreadInboxCount: number;
unreadReportCount: number;
unreadApplicationCount: number;
- searchParam: string;
- toggleSearch: boolean;
showDropdown: boolean;
onSiteBanner?(url: string): any;
}
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;
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) {
this.unreadApplicationCountSub.unsubscribe();
}
- 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/`);
- } else {
- const searchParamEncoded = encodeURIComponent(searchParam);
- this.context.router.history.push(
- `/search/q/${searchParamEncoded}/type/All/sort/TopAll/listing_type/All/community_id/0/creator_id/0/page/1`
- );
- }
- }
-
render() {
return this.navbar();
}
className="p-1 navbar-toggler nav-link border-0"
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={i18n.t("unread_messages", {
- count: this.state.unreadInboxCount,
+ count: Number(this.state.unreadInboxCount),
formattedCount: numToSI(this.state.unreadInboxCount),
})}
>
className="p-1 navbar-toggler nav-link border-0"
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={i18n.t("unread_reports", {
- count: this.state.unreadReportCount,
+ count: Number(this.state.unreadReportCount),
formattedCount: numToSI(this.state.unreadReportCount),
})}
>
className="p-1 navbar-toggler nav-link border-0"
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={i18n.t("unread_registration_applications", {
- count: this.state.unreadApplicationCount,
+ count: Number(this.state.unreadApplicationCount),
formattedCount: numToSI(
this.state.unreadApplicationCount
),
) && (
<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>
)}
to="/inbox"
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={i18n.t("unread_messages", {
- count: this.state.unreadInboxCount,
+ count: Number(this.state.unreadInboxCount),
formattedCount: numToSI(this.state.unreadInboxCount),
})}
>
to="/reports"
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={i18n.t("unread_reports", {
- count: this.state.unreadReportCount,
+ count: Number(this.state.unreadReportCount),
formattedCount: numToSI(this.state.unreadReportCount),
})}
>
className="nav-link"
onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
title={i18n.t("unread_registration_applications", {
- count: this.state.unreadApplicationCount,
+ count: Number(this.state.unreadApplicationCount),
formattedCount: numToSI(
this.state.unreadApplicationCount
),
i.setState({ expanded: false, showDropdown: false });
}
- handleSearchParam(i: Navbar, event: any) {
- 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();