feat: 联系人搜索

packages/web/src/modules/FunctionBarAndContactList/ContactList.tsx

@@ -1,11 +1,25 @@
 import React from 'react';
+import { uniq } from 'lodash-es';
 import { useSelector } from 'react-redux';
 import { State } from '../../state/reducer';
 import ContactComponent from './Contact';
 import Style from './ContactList.less';
 
-function ContactList() {
-    const contacts = useSelector((state: State) => state.contacts);
+function ContactList({ keyword = '' }) {
+    let contacts =
+        useSelector((state: State) => [...state.groups, ...state.contacts]) ||
+        [];
+    if (keyword) {
+        keyword = keyword.toLowerCase();
+        contacts = [
+            ...contacts.filter((c) => c.displayName?.toLowerCase().includes(keyword)),
+            ...contacts.filter((c) => c.nameQuanPin?.toLowerCase().includes(keyword)),
+            ...contacts.filter((c) => c.nickname?.toLowerCase().includes(keyword)),
+            ...contacts.filter((c) => c.nickname?.toLowerCase().includes(keyword)),
+        ];
+        contacts = uniq(contacts);
+    }
+    console.log(contacts);
 
     return (
         <div className={Style.linkmanList}>

packages/web/src/modules/FunctionBarAndContactList/FunctionBarAndContactList.tsx

@@ -1,23 +1,18 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-import useAction from '../../hooks/useAction';
-import useAero from '../../hooks/useAero';
+import React, { useState } from 'react';
 import useIsLogin from '../../hooks/useIsLogin';
-import { State } from '../../state/reducer';
 import ContactList from './ContactList';
 import SearchBar from './SearchBar';
 import Style from './FunctionBarAndContactList.less';
 
 function FunctionBarAndContactList() {
     const isLogin = useIsLogin();
-    const action = useAction();
-    const aero = useAero();
+    const [keyword, setKeyword] = useState('');
 
     return (
         <div className={Style.contactList} role="button">
             <div className={Style.container}>
-                {isLogin && <SearchBar />}
-                <ContactList />
+                {isLogin && <SearchBar onSearch={setKeyword} />}
+                <ContactList keyword={keyword} />
             </div>
         </div>
     );

packages/web/src/modules/FunctionBarAndContactList/SearchBar.tsx

@@ -1,47 +1,30 @@
-import React, { useContext, useEffect, useState } from 'react';
-import Avatar from '../../components/Avatar';
-import IconButton from '../../components/IconButton';
+import React, { useCallback, useContext, useState } from 'react';
+import { debounce } from 'lodash-es';
 import Input from '../../components/Input';
-import Message from '../../components/Message';
-import {
-    ScrollableInkTabBar,
-    TabContent,
-    TabPane,
-    Tabs as div,
-} from '../../components/Tabs';
-import { ShowUserOrGroupInfoContext } from '../../context';
 import Style from './SearchBar.less';
 
-type SearchResult = {
-    users: any[];
-    groups: any[];
-};
+function FunctionBar({ onSearch }) {
+    const [keyword, setKeyword] = useState('');
 
-function FunctionBar() {
-    const [keywords, setKeywords] = useState('');
-    const [searchResultVisible, toggleSearchResultVisible] = useState(false);
-    const [searchResult, setSearchResult] = useState<SearchResult>({
-        users: [],
-        groups: [],
-    });
+    const triggerSearch = useCallback(
+        debounce((kw: string) => {
+            onSearch && onSearch(kw);
+        }, 500),
+        [onSearch],
+    );
+    const handleInputChange = useCallback(
+        (kw) => {
+          console.log('aaaaa',kw);
 
-    const context = useContext(ShowUserOrGroupInfoContext);
-    const placeholder = '搜索群组/用户';
+            setKeyword(kw);
+            triggerSearch(kw);
+        },
+        [triggerSearch],
+    );
 
-    function resetSearch() {
-        setSearchResult({ users: [], groups: [] });
-        setKeywords('');
-    }
-
-    function handleInputChange(value: string) {
-        setKeywords(value);
-        if (!value) {
-            resetSearch();
-        }
-    }
-
-    function handleInputEnter() {
-    }
+    const handleInputEnter = useCallback(() => {
+        triggerSearch.flush();
+    }, [triggerSearch]);
 
     return (
         <div className={Style.functionBar}>
@@ -51,12 +34,10 @@ function FunctionBar() {
                 onSubmit={(e) => e.preventDefault()}
             >
                 <Input
-                    className={`${Style.input} ${
-                        searchResultVisible ? Style.inputFocus : ''
-                    }`}
+                    className={Style.input}
                     type="text"
-                    placeholder={placeholder}
-                    value={keywords}
+                    placeholder="搜索用户/群组"
+                    value={keyword}
                     onChange={handleInputChange}
                     onEnter={handleInputEnter}
                 />