Hopefully stop lint command from erroring

[lemmy-ui.git] / src / shared / components / app / navbar.tsx

diff --git a/src/shared/components/app/navbar.tsx b/src/shared/components/app/navbar.tsx
index d758af60fea3ab40b6e17296e862318dd351d421..d92ec259443f144987968190c81e3d56514a030f 100644 (file)
--- 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,
@@ -35,7 +35,7 @@ import { Icon } from "../common/icon";
 import { PictrsImage } from "../common/pictrs-image";
 
 interface NavbarProps {
-  siteRes: GetSiteResponse;
+  siteRes?: GetSiteResponse;
 }
 
 interface NavbarState {
@@ -43,8 +43,6 @@ interface NavbarState {
   unreadInboxCount: number;
   unreadReportCount: number;
   unreadApplicationCount: number;
-  searchParam: string;
-  toggleSearch: boolean;
   showDropdown: boolean;
   onSiteBanner?(url: string): any;
 }
@@ -55,14 +53,11 @@ 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 +72,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) {
@@ -120,28 +113,13 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
     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();
   }
 
   // TODO class active corresponding to current page
   navbar() {
-    let siteView = this.props.siteRes.site_view;
+    let siteView = this.props.siteRes?.site_view;
     let person = UserService.Instance.myUserInfo?.local_user_view.person;
     return (
       <nav className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3">
@@ -149,13 +127,13 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
           <NavLink
             to="/"
             onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
-            title={siteView.site.description ?? siteView.site.name}
+            title={siteView?.site.description ?? siteView?.site.name ?? "Lemmy"}
             className="d-flex align-items-center navbar-brand mr-md-3"
           >
-            {siteView.site.icon && showAvatars() && (
+            {siteView?.site.icon && showAvatars() && (
               <PictrsImage src={siteView.site.icon} icon />
             )}
-            {siteView.site.name}
+            {siteView?.site.name ?? "Lemmy"}
           </NavLink>
           {UserService.Instance.myUserInfo && (
             <>
@@ -166,7 +144,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                     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),
                     })}
                   >
@@ -187,7 +165,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                       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),
                       })}
                     >
@@ -209,7 +187,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                       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
                         ),
@@ -267,7 +245,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                   {i18n.t("create_post")}
                 </NavLink>
               </li>
-              {canCreateCommunity(this.props.siteRes) && (
+              {this.props.siteRes && canCreateCommunity(this.props.siteRes) && (
                 <li className="nav-item">
                   <NavLink
                     to="/create_community"
@@ -308,35 +286,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>
             )}
@@ -349,7 +305,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                       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),
                       })}
                     >
@@ -370,7 +326,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                         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),
                         })}
                       >
@@ -392,7 +348,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                         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
                           ),
@@ -516,32 +472,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
     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();