refactor: replace Link and NavLink with button

Link (or NavLink) uses <a> tags under the hood. When mouse over, there will be a tiny (but noticable) tooltip in the left-bottom of your browser (maybe Chrome only) displaying the url of that <a> tag and it is not possible to hide it. It's quite anoying, as I am only doing client side routing, the url is of zero importance and will cover on the bottom buttons of my side bar.

Author: edwardzjl

web/src/routes/root/ChatTab/index.jsx

@@ -1,7 +1,7 @@
 import styles from "./index.module.css";
 
 import { useContext, useEffect, useState, useRef } from "react";
-import { NavLink } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import PropTypes from "prop-types";
 import Tooltip from "@mui/material/Tooltip";
 import Icon from "@mui/material/Icon";
@@ -23,6 +23,9 @@ import { ConversationContext } from "@/contexts/conversation";
  * @returns
  */
 const ChatTab = ({ chat, onShareClick, onDeleteClick }) => {
+    const navigate = useNavigate();
+    const params = useParams();
+
     const { dispatch } = useContext(ConversationContext);
     const titleRef = useRef(null);
     const [titleEditable, setTitleEditable] = useState("false");
@@ -101,26 +104,29 @@ const ChatTab = ({ chat, onShareClick, onDeleteClick }) => {
     };
 
     return (
-        <NavLink
-            to={`conversations/${chat.id}`}
-            className={({ isActive, isPending }) =>
-                `${styles.sidebarButton} ${isActive ? styles.active : isPending ? styles.pending : ""}`}
+        <div
+            className={`${styles.sidebarButton} ${params.convId === chat.id ? styles.active : ""}`}
         >
             <Tooltip title={titleRef.current?.innerText}>
-                {/* contentEditable moves control out of react, so useState won't work correctly.
-                  * I use ref to get the value instead.
-                */}
-                <span
-                    aria-label="chat title"
-                    ref={titleRef}
-                    className={styles.chatTitle}
-                    contentEditable={titleEditable}
-                    suppressContentEditableWarning={true}  // TODO: I'm not sure whether I can ignore this warning
-                    onKeyDown={handleKeyDown}
-                    onBlur={() => setTitleEditable("false")}
+                <div
+                    className={styles.titleContainer}
+                    onClick={() => navigate(`/conversations/${chat.id}`)}
                 >
-                    {chat.title}
-                </span>
+                    {/* contentEditable moves control out of react, so useState won't work correctly.
+                      * I use ref to get the value instead.
+                    */}
+                    <span
+                        aria-label="chat title"
+                        ref={titleRef}
+                        className={styles.chatTitle}
+                        contentEditable={titleEditable}
+                        suppressContentEditableWarning={true}  // TODO: I'm not sure whether I can ignore this warning
+                        onKeyDown={handleKeyDown}
+                        onBlur={() => setTitleEditable("false")}
+                    >
+                        {chat.title}
+                    </span>
+                </div>
             </Tooltip>
             <Dropdown className={styles.chatOpMenu}>
                 <DropdownButton ref={buttonRef} className={styles.chatOpMenuIcon}>
@@ -166,7 +172,7 @@ const ChatTab = ({ chat, onShareClick, onDeleteClick }) => {
                     </li>
                 </DropdownMenu>
             </Dropdown>
-        </NavLink>
+        </div>
     );
 };
 

web/src/routes/root/ChatTab/index.module.css

@@ -1,6 +1,6 @@
 .sidebarButton {
   height: 2rem;
-  margin: 2px;
+  margin: 2px 0;
   padding: 3px;
   background-color: var(--bg-primary);
   color: var(--text-primary);
@@ -24,17 +24,27 @@
   background-color: var(--bg-secondary);
 }
 
+.titleContainer {
+  flex: 1;
+  height: 100%;
+  padding-left: 1rem;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  overflow: hidden;
+  cursor: pointer;
+}
+
 .chatTitle {
-  margin-left: 5px;
+  display: inline-block;
   /* line-height should be equal to height */
   height: 1.3rem;
   line-height: 1.3rem;
   color: var(--text-primary);
   border: none;
   text-align: left;
-  /* the following 4 lines ellipsis text */
+  /* the following 3 lines ellipsis text */
   /* See <https://stackoverflow.com/a/17783233/6564721> */
-  width: 200px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

web/src/routes/root/Sidebar/index.jsx

@@ -1,7 +1,7 @@
 import styles from "./index.module.css";
 
 import { useContext } from "react";
-import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import PropTypes from "prop-types";
 
 import AddOutlinedIcon from "@mui/icons-material/AddOutlined";
@@ -16,13 +16,14 @@ import ChatTab from "../ChatTab";
 
 const Sidebar = ({ onShareClick, onDeleteClick }) => {
     const { groupedConvs } = useContext(ConversationContext);
+    const navigate = useNavigate();
 
     return (
         <aside className={styles.sidebar}>
-            <Link className={styles.sidebarButton} to="/">
+            <button className={styles.sidebarButton} onClick={() => navigate("/")}>
                 <AddOutlinedIcon />
                 New Chat
-            </Link>
+            </button>
             <nav className={styles.convList}>
                 {groupedConvs && Object.entries(groupedConvs)
                     .filter(([, convs]) => convs && convs.length > 0) // Filter out empty lists
@@ -60,5 +61,4 @@ Sidebar.propTypes = {
     onDeleteClick: PropTypes.func.isRequired,
 };
 
-
 export default Sidebar;