feat: user search

src/common/component/User/index.tsx

@@ -61,7 +61,7 @@ const User: FC<Props> = ({
             <Avatar url={curr.avatar} name={curr.name} alt="avatar" />
             <div className={`status ${online ? "online" : "offline"}`}></div>
           </div>
-          {!compact && <span className="name">{curr?.name}</span>}
+          {!compact && <span className="name" title={curr?.name}>{curr?.name}</span>}
           {owner && <IconOwner />}
         </StyledWrapper>
       </ContextMenu>
@@ -91,7 +91,7 @@ const User: FC<Props> = ({
             <Avatar url={curr.avatar} name={curr.name} alt="avatar" />
             <div className={`status ${online ? "online" : "offline"}`}></div>
           </div>
-          {!compact && <span className="name">{curr?.name}</span>}
+          {!compact && <span className="name" title={curr?.name}>{curr?.name}</span>}
           {owner && <IconOwner />}
         </StyledWrapper>
       </Tippy>

src/common/component/User/styled.tsx

@@ -50,6 +50,9 @@ const StyledWrapper = styled.div`
     font-size: 14px;
     line-height: 20px;
     color: #52525b;
+    max-width: 190px;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
   /* session nav */
   &.compact {

src/routes/users/Search.tsx

@@ -2,9 +2,9 @@ import styled from "styled-components";
 import Tippy from "@tippyjs/react";
 import searchIcon from "../../assets/icons/search.svg?url";
 import addIcon from "../../assets/icons/add.svg?url";
-import AddEntriesMenu from "./AddEntriesMenu";
+import AddEntriesMenu from "../../common/component/AddEntriesMenu";
-import Tooltip from "./Tooltip";
+import Tooltip from "../../common/component/Tooltip";
-import { FC } from "react";
+import { FC, ChangeEvent } from "react";
 import { useTranslation } from "react-i18next";
 
 const StyledWrapper = styled.div`
@@ -30,22 +30,25 @@ const StyledWrapper = styled.div`
       line-height: 20px;
     }
   }
-  .add {
-    cursor: pointer;
-  }
 `;
-type Props = {};
+type Props = {
-const Search: FC<Props> = () => {
+  input: string,
+  updateInput: (input: string) => void
+};
+const Search: FC<Props> = ({ input, updateInput }) => {
   const { t } = useTranslation();
+  const handleInput = (evt: ChangeEvent<HTMLInputElement>) => {
+    updateInput(evt.target.value);
+  };
   return (
     <StyledWrapper>
       <div className="search">
         <img src={searchIcon} alt="search icon" />
-        <input placeholder={`${t("action.search")}...`} className="input" />
+        <input value={input} placeholder={`${t("action.search")}...`} className="input" onChange={handleInput} />
       </div>
       <Tooltip tip={t("more")} placement="bottom">
         <Tippy interactive placement="bottom-end" trigger="click" content={<AddEntriesMenu />}>
-          <img src={addIcon} alt="add icon" className="add" />
+          <img src={addIcon} alt="add icon" className="cursor-pointer" />
         </Tippy>
       </Tooltip>
     </StyledWrapper>

src/routes/users/index.tsx

@@ -1,22 +1,21 @@
 import { memo, useEffect } from "react";
 import { NavLink, useParams, useLocation } from "react-router-dom";
 import { useDispatch } from "react-redux";
-import _ from "lodash";
 import { updateRememberedNavs } from "../../app/slices/ui";
-import Search from "../../common/component/Search";
+import Search from "./Search";
 import User from "../../common/component/User";
 import Profile from "../../common/component/Profile";
 
 import StyledWrapper from "./styled";
 import BlankPlaceholder from "../../common/component/BlankPlaceholder";
-import { useAppSelector } from "../../app/store";
+import useFilteredUsers from "../../common/hook/useFilteredUsers";
 
 function UsersPage() {
   const dispatch = useDispatch();
   const { pathname } = useLocation();
-
+  const { input, updateInput, users } = useFilteredUsers();
   const { user_id } = useParams();
-  const userIds = useAppSelector((store) => store.users.ids, _.isEqual);
+  // 记住路由
   useEffect(() => {
     dispatch(updateRememberedNavs({ key: "user" }));
     return () => {
@@ -24,14 +23,14 @@ function UsersPage() {
     };
   }, [pathname]);
 
-  if (!userIds) return null;
+  if (!users) return null;
   return (
     <StyledWrapper>
       <div className="left">
-        <Search />
+        <Search input={input} updateInput={updateInput} />
         <div className="list">
           <nav className="nav">
-            {userIds.map((uid: number) => {
+            {users.map(({ uid }) => {
               return (
                 <NavLink key={uid} className="session" to={`/users/${uid}`}>
                   <User uid={uid} enableContextMenu={true} />