feat: add search friend feature #157

include can search by nickname

client/shared/cache/useCache.ts

@@ -1,38 +1,8 @@
-import { useQueries, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
-import {
+import { getUserOnlineStatus } from '../model/user';
-  fetchUserInfo,
-  getUserOnlineStatus,
-  UserBaseInfo,
-} from '../model/user';
-import { isValidStr } from '../utils/string-helper';
 
 export { useQuery, useQueryClient };
 
-/**
- * 用户缓存
- */
-export function useCachedUserInfo(
-  userId: string | null,
-  refetch = false
-): UserBaseInfo | Record<string, never> {
-  const { data } = useQuery(
-    ['user', userId],
-    () => {
-      if (!isValidStr(userId)) {
-        return {};
-      }
-
-      return fetchUserInfo(userId);
-    },
-    {
-      staleTime: 2 * 60 * 60 * 1000, // 缓存2小时
-      refetchOnMount: refetch ? 'always' : true,
-    }
-  );
-
-  return data ?? {};
-}
-
 /**
  * 用户登录状态
  */

client/shared/hooks/model/useUserInfo.ts

@@ -0,0 +1,19 @@
+import { getCachedUserInfo } from '../../cache/cache';
+import type { UserBaseInfo } from '../../model/user';
+import { useAsync } from '../useAsync';
+
+/**
+ * 用户信息
+ */
+export function useCachedUserInfo(
+  userId: string,
+  refetch = false
+): UserBaseInfo | Record<string, never> {
+  const { value: userInfo = {} } = useAsync(async () => {
+    const users = getCachedUserInfo(userId, refetch);
+
+    return users;
+  }, [userId, refetch]);
+
+  return userInfo;
+}

client/shared/hooks/useSearch.ts

@@ -1,4 +1,6 @@
 import { useMemo, useState } from 'react';
+import { useFriendNicknameMap } from '../redux/hooks/useFriendNickname';
+import type { UserBaseInfo } from 'tailchat-types';
 
 export interface UseSearchOptions<T> {
   dataSource: T[];
@@ -21,3 +23,34 @@ export function useSearch<T>(options: UseSearchOptions<T>) {
     searchResult,
   };
 }
+
+/**
+ * 用于搜索用户的封装函数
+ */
+export function useUserSearch(userInfos: UserBaseInfo[]) {
+  const friendNicknameMap = useFriendNicknameMap();
+
+  const { searchText, setSearchText, isSearching, searchResult } = useSearch({
+    dataSource: userInfos,
+    filterFn: (item, searchText) => {
+      if (friendNicknameMap[item._id]) {
+        if (friendNicknameMap[item._id].includes(searchText)) {
+          return true;
+        }
+      }
+
+      if (item.nickname.includes(searchText)) {
+        return true;
+      }
+
+      return false;
+    },
+  });
+
+  return {
+    searchText,
+    setSearchText,
+    isSearching,
+    searchResult,
+  };
+}

client/shared/index.tsx

@@ -14,7 +14,7 @@ export {
   getCachedRegistryPlugins,
   getCachedUserSettings,
 } from './cache/cache';
-export { useCachedUserInfo, useCachedOnlineStatus } from './cache/useCache';
+export { useCachedOnlineStatus } from './cache/useCache';
 
 // components
 export { buildPortal, DefaultEventEmitter } from './components/Portal';
@@ -61,6 +61,7 @@ export { useLanguage } from './i18n/language';
 export { createUseStorageState } from './hooks/factory/createUseStorageState';
 export { useAvailableServices } from './hooks/model/useAvailableServices';
 export { useMessageNotifyEventFilter } from './hooks/model/useMessageNotifyEventFilter';
+export { useCachedUserInfo } from './hooks/model/useUserInfo';
 export { useUserInfoList } from './hooks/model/useUserInfoList';
 export { useUsernames } from './hooks/model/useUsernames';
 export {
@@ -82,7 +83,7 @@ export { useMemoizedFn } from './hooks/useMemoizedFn';
 export { useMountedState } from './hooks/useMountedState';
 export { usePrevious } from './hooks/usePrevious';
 export { useRafState } from './hooks/useRafState';
-export { useSearch } from './hooks/useSearch';
+export { useSearch, useUserSearch } from './hooks/useSearch';
 export { useShallowObject } from './hooks/useShallowObject';
 export { useUpdateRef } from './hooks/useUpdateRef';
 export { useWatch } from './hooks/useWatch';
@@ -197,7 +198,10 @@ export { useDMConverseList } from './redux/hooks/useConverse';
 export { useConverseAck } from './redux/hooks/useConverseAck';
 export { useConverseMessage } from './redux/hooks/useConverseMessage';
 export { useDMConverseName } from './redux/hooks/useDMConverseName';
-export { useFriendNickname } from './redux/hooks/useFriendNickname';
+export {
+  useFriendNickname,
+  useFriendNicknameMap,
+} from './redux/hooks/useFriendNickname';
 export {
   useGroupInfo,
   useGroupMemberIds,

client/shared/model/user.ts

@@ -11,18 +11,9 @@ import _uniq from 'lodash/uniq';
 import _flatten from 'lodash/flatten';
 import _zipObject from 'lodash/zipObject';
 import { t } from '../i18n';
+import type { UserBaseInfo } from 'tailchat-types';
 
-export interface UserBaseInfo {
+export type { UserBaseInfo };
-  _id: string;
-  email: string;
-  nickname: string;
-  discriminator: string;
-  avatar: string | null;
-  temporary: boolean;
-  emailVerified: boolean;
-  banned: boolean;
-  extra?: Record<string, unknown>;
-}
 
 export interface UserLoginInfo extends UserBaseInfo {
   token: string;

client/web/src/components/Panel/group/TextPanel.tsx

@@ -19,7 +19,7 @@ import {
   GroupPanelType,
   useHasGroupPanelPermission,
 } from 'tailchat-shared';
-import { useFriendNicknameMap } from 'tailchat-shared/redux/hooks/useFriendNickname';
+import { useFriendNicknameMap } from 'tailchat-shared';
 import { MembersPanel } from './MembersPanel';
 import { GroupPanelContainer } from './shared/GroupPanelContainer';
 import { MessageSearchPanel } from '../common/MessageSearch';

client/web/src/hooks/useGroupMemberAction.ts

@@ -13,10 +13,9 @@ import {
   useGroupMemberInfos,
   useHasGroupPermission,
   UserBaseInfo,
-  useSearch,
+  useUserSearch,
 } from 'tailchat-shared';
 import _compact from 'lodash/compact';
-import { useFriendNicknameMap } from 'tailchat-shared/redux/hooks/useFriendNickname';
 
 /**
  * 群组成员管理相关操作
@@ -26,7 +25,6 @@ export function useGroupMemberAction(groupId: string) {
   const members = groupInfo?.members ?? [];
   const roles = groupInfo?.roles ?? [];
   const userInfos = useGroupMemberInfos(groupId);
-  const friendNicknameMap = useFriendNicknameMap();
   const [allowManageUser, allowManageRoles] = useHasGroupPermission(groupId, [
     PERMISSION.core.manageUser,
     PERMISSION.core.manageRoles,
@@ -37,22 +35,8 @@ export function useGroupMemberAction(groupId: string) {
     userInfos
   );
 
-  const { searchText, setSearchText, isSearching, searchResult } = useSearch({
+  const { searchText, setSearchText, isSearching, searchResult } =
-    dataSource: userInfos,
+    useUserSearch(userInfos);
-    filterFn: (item, searchText) => {
-      if (friendNicknameMap[item._id]) {
-        if (friendNicknameMap[item._id].includes(searchText)) {
-          return true;
-        }
-      }
-
-      if (item.nickname.includes(searchText)) {
-        return true;
-      }
-
-      return false;
-    },
-  });
 
   /**
    * 移除用户

client/web/src/routes/Main/Content/Personal/Friends/FriendList.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import {
   createDMConverse,
   isValidStr,
@@ -12,15 +12,18 @@ import {
   useAsyncRequest,
   useEvent,
   useGlobalConfigStore,
+  useUserInfoList,
+  useUserSearch,
   userActions,
 } from 'tailchat-shared';
 import { UserListItem } from '@/components/UserListItem';
 import { IconBtn } from '@/components/IconBtn';
-import { Button, Dropdown, Tooltip } from 'antd';
+import { Button, Dropdown, Input, Tooltip } from 'antd';
 import { useNavigate } from 'react-router';
 import { Problem } from '@/components/Problem';
 import { closeModal, openModal } from '@/components/Modal';
 import { SetFriendNickname } from '@/components/modals/SetFriendNickname';
+import { Icon } from 'tailchat-design';
 
 /**
  * 好友列表
@@ -29,6 +32,9 @@ export const FriendList: React.FC<{
   onSwitchToAddFriend: () => void;
 }> = React.memo((props) => {
   const friends = useAppSelector((state) => state.user.friends);
+  const friendIds = useMemo(() => friends.map((f) => f.id), [friends]);
+  const userInfos = useUserInfoList(friendIds);
+  const { searchText, setSearchText, searchResult } = useUserSearch(userInfos);
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
   const disableAddFriend = useGlobalConfigStore(
@@ -91,11 +97,21 @@ export const FriendList: React.FC<{
   return (
     <div className="py-2.5 px-5">
       <div>{t('好友列表')}</div>
+
+      <Input
+        className="my-2"
+        placeholder={t('搜索好友')}
+        size="large"
+        prefix={<Icon fontSize={20} color="grey" icon="mdi:magnify" />}
+        value={searchText}
+        onChange={(e) => setSearchText(e.target.value)}
+      />
+
       <div>
-        {friends.map((item) => (
+        {searchResult.map((item) => (
           <UserListItem
-            key={item.id}
+            key={item._id}
-            userId={item.id}
+            userId={item._id}
             actions={[
               <Tooltip key="message" title={t('发送消息')}>
                 <div>

packages/types/src/model/user.ts

@@ -33,6 +33,7 @@ export interface UserBaseInfo {
   temporary: boolean;
   type: UserType;
   emailVerified: boolean;
+  banned: boolean;
   extra?: Record<string, unknown>;
 }