From: Hermanto Lim <hermantolim@outlook.com>
Date: Fri, 23 Apr 2021 19:13:21 +0000 (+0700)
Subject: Change from using Link to NavLink. resolve #269
X-Git-Url: http://these/git/%7B%60%24%7BwebArchiveUrl%7D/save/static/README.ja.md?a=commitdiff_plain;h=9e77148cb1c33677ca6a4ef44bdffce8933a8d52;p=lemmy-ui.git

Change from using Link to NavLink. resolve #269
---

diff --git a/src/shared/components/footer.tsx b/src/shared/components/footer.tsx
index 16f5fc7..d447cc3 100644
--- a/src/shared/components/footer.tsx
+++ b/src/shared/components/footer.tsx
@@ -1,5 +1,5 @@
 import { Component } from "inferno";
-import { Link } from "inferno-router";
+import { NavLink } from "inferno-router";
 import { i18n } from "../i18next";
 import { repoUrl, joinLemmyUrl, docsUrl } from "../utils";
 import { GetSiteResponse } from "lemmy-js-client";
@@ -22,15 +22,15 @@ export class Footer extends Component<FooterProps, any> {
               <span class="navbar-text">{this.props.site.version}</span>
             </li>
             <li className="nav-item">
-              <Link className="nav-link" to="/modlog">
+              <NavLink className="nav-link" to="/modlog">
                 {i18n.t("modlog")}
-              </Link>
+              </NavLink>
             </li>
             {this.props.site.federated_instances && (
               <li class="nav-item">
-                <Link className="nav-link" to="/instances">
+                <NavLink className="nav-link" to="/instances">
                   {i18n.t("instances")}
-                </Link>
+                </NavLink>
               </li>
             )}
             <li class="nav-item">
diff --git a/src/shared/components/navbar.tsx b/src/shared/components/navbar.tsx
index 35ed041..ec44015 100644
--- a/src/shared/components/navbar.tsx
+++ b/src/shared/components/navbar.tsx
@@ -1,5 +1,5 @@
 import { Component, linkEvent, createRef, RefObject } from "inferno";
-import { Link } from "inferno-router";
+import { NavLink } from "inferno-router";
 import { Subscription } from "rxjs";
 import { WebSocketService, UserService } from "../services";
 import {
@@ -171,8 +171,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
     this.userSub.unsubscribe();
     this.unreadCountSub.unsubscribe();
   }
-
-  // TODO class active corresponding to current page
+  
   navbar() {
     let localUserView =
       UserService.Instance.localUserView || this.props.site_res.my_user;
@@ -180,10 +179,11 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
       <nav class="navbar navbar-expand-lg navbar-light shadow-sm p-0 px-3">
         <div class="container">
           {this.props.site_res.site_view && (
-            <Link
+            <NavLink
               title={this.props.site_res.version}
               className="d-flex align-items-center navbar-brand mr-md-3"
               to="/"
+              exact={true}
             >
               {this.props.site_res.site_view.site.icon && showAvatars() && (
                 <PictrsImage
@@ -192,10 +192,10 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                 />
               )}
               {this.props.site_res.site_view.site.name}
-            </Link>
+            </NavLink>
           )}
           {this.state.isLoggedIn && (
-            <Link
+            <NavLink
               className="ml-auto p-1 navbar-toggler nav-link border-0"
               to="/inbox"
               title={i18n.t("inbox")}
@@ -211,7 +211,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                   {this.state.unreadCount}
                 </span>
               )}
-            </Link>
+            </NavLink>
           )}
           <button
             class="navbar-toggler border-0 p-1"
@@ -227,16 +227,16 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
           >
             <ul class="navbar-nav my-2 mr-auto">
               <li class="nav-item">
-                <Link
+                <NavLink
                   className="nav-link"
                   to="/communities"
                   title={i18n.t("communities")}
                 >
                   {i18n.t("communities")}
-                </Link>
+                </NavLink>
               </li>
               <li class="nav-item">
-                <Link
+                <NavLink
                   className="nav-link"
                   to={{
                     pathname: "/create_post",
@@ -245,16 +245,16 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                   title={i18n.t("create_post")}
                 >
                   {i18n.t("create_post")}
-                </Link>
+                </NavLink>
               </li>
               <li class="nav-item">
-                <Link
+                <NavLink
                   className="nav-link"
                   to="/create_community"
                   title={i18n.t("create_community")}
                 >
                   {i18n.t("create_community")}
-                </Link>
+                </NavLink>
               </li>
               <li class="nav-item">
                 <a
@@ -269,13 +269,13 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
             <ul class="navbar-nav my-2">
               {this.canAdmin && (
                 <li className="nav-item">
-                  <Link
+                  <NavLink
                     className="nav-link"
                     to={`/admin`}
                     title={i18n.t("admin_settings")}
                   >
                     <Icon icon="settings" />
-                  </Link>
+                  </NavLink>
                 </li>
               )}
             </ul>
@@ -289,7 +289,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                 <input
                   id="search-input"
                   class={`form-control mr-0 search-input ${
-                    this.state.toggleSearch ? "show-input" : "hide-input"
+                      this.state.toggleSearch ? "show-input" : "hide-input"
                   }`}
                   onInput={linkEvent(this, this.handleSearchParam)}
                   value={this.state.searchParam}
@@ -297,7 +297,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                   type="text"
                   placeholder={i18n.t("search")}
                   onBlur={linkEvent(this, this.handleSearchBlur)}
-                ></input>
+                  />
                 <label class="sr-only" htmlFor="search-input">
                   {i18n.t("search")}
                 </label>
@@ -316,7 +316,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
               <>
                 <ul class="navbar-nav my-2">
                   <li className="nav-item">
-                    <Link
+                    <NavLink
                       className="nav-link"
                       to="/inbox"
                       title={i18n.t("inbox")}
@@ -332,12 +332,12 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                           {this.state.unreadCount}
                         </span>
                       )}
-                    </Link>
+                    </NavLink>
                   </li>
                 </ul>
                 <ul class="navbar-nav">
                   <li className="nav-item">
-                    <Link
+                    <NavLink
                       className="nav-link"
                       to={`/u/${localUserView.person.name}`}
                       title={i18n.t("settings")}
@@ -350,20 +350,20 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                           ? localUserView.person.display_name
                           : localUserView.person.name}
                       </span>
-                    </Link>
+                    </NavLink>
                   </li>
                 </ul>
               </>
             ) : (
               <ul class="navbar-nav my-2">
                 <li className="ml-2 nav-item">
-                  <Link
+                  <NavLink
                     className="btn btn-success"
                     to="/login"
                     title={i18n.t("login_sign_up")}
                   >
                     {i18n.t("login_sign_up")}
-                  </Link>
+                  </NavLink>
                 </li>
               </ul>
             )}