@droppii-org/chat-mobile 0.2.80 → 0.2.82

package/src/screens/SearchConversation/SearchAllResult.tsx

@@ -10,41 +10,56 @@ import {
 import { memo, useCallback, useMemo } from 'react';
 import { useChatContext } from '../../context';
 import { useSearchMessage } from '../../hooks/message/useSearchMessage';
+import { useSearchContacts } from '../../hooks/contacts/useSearchContacts';
 import { SearchConversationTabResultType } from './types';
-import type { ISearchMessageItem } from '../../types/chat';
+import type { IContactSearchItem, ISearchMessageItem } from '../../types/chat';
 import { trans } from '../../translation';
 import { ActivityIndicator, FlatList, StyleSheet } from 'react-native';
 import { SearchEmpty } from './SearchEmpty';
 import SearchResultItem from './SearchResultItem';
+import ContactResultItem from './ContactResultItem';
 
 interface SearchAllResultProps {
   searchTerm: string;
   handleChangeTab: (key: SearchConversationTabResultType) => void;
   onPressItem?: (item: ISearchMessageItem) => void;
+  onPressSearchContact?: (item: IContactSearchItem) => void;
 }
 
 interface ISearchAllResultItem {
   type: SearchConversationTabResultType;
-  data: ISearchMessageItem[];
+  data: (ISearchMessageItem | IContactSearchItem)[];
   title: string;
 }
 
 const PAGE_SIZE = 5;
 
 const SearchAllResult = memo(
-  ({ searchTerm, handleChangeTab, onPressItem }: SearchAllResultProps) => {
+  ({
+    searchTerm,
+    handleChangeTab,
+    onPressItem,
+    onPressSearchContact,
+  }: SearchAllResultProps) => {
     const { applicationType } = useChatContext();
-    const { dataFlatten: messagesData, isFetching } = useSearchMessage({
-      query: searchTerm,
-      applicationType,
-      pageSize: PAGE_SIZE,
-    });
+    const { dataFlatten: messagesData, isFetching: isFetchingMessages } =
+      useSearchMessage({
+        query: searchTerm,
+        applicationType,
+        pageSize: PAGE_SIZE,
+      });
+    const { dataFlatten: contactsData, isFetching: isFetchingContacts } =
+      useSearchContacts({
+        query: searchTerm,
+        applicationType,
+      });
+    const isFetching = isFetchingMessages || isFetchingContacts;
 
     const data: ISearchAllResultItem[] = useMemo(() => {
       const mData = [
         {
           type: SearchConversationTabResultType.Conversations,
-          data: [],
+          data: contactsData,
           title: trans('contacts'),
         },
         {
@@ -54,7 +69,7 @@ const SearchAllResult = memo(
         },
       ]?.filter((item) => item.data.length > 0);
       return mData;
-    }, [messagesData]);
+    }, [messagesData, contactsData]);
 
     const onChangeTab = useCallback(
       (key: SearchConversationTabResultType) => {
@@ -80,21 +95,24 @@ const SearchAllResult = memo(
               </KLabel.Text>
               <KImage.VectorIcons name="angle-right-o" size={20} />
             </KContainer.Touchable>
-            {item?.data?.map((childItem) => {
-              return (
-                <KContainer.View
-                  style={styles.childItemContainer}
-                  key={`${item.type}-${childItem?.conversation?.conversationID}-${childItem?.chatLog?.clientMsgID}`}
-                >
+            {item.type === SearchConversationTabResultType.Conversations
+              ? (item.data as IContactSearchItem[]).map((childItem) => (
+                  <ContactResultItem
+                    key={`${item.type}-${childItem?.id}`}
+                    item={childItem}
+                    onPressSearchContact={onPressSearchContact}
+                    searchTerm={searchTerm}
+                  />
+                ))
+              : (item.data as ISearchMessageItem[]).map((childItem) => (
                   <SearchResultItem
+                    key={`${item.type}-${childItem?.conversation?.conversationID}-${childItem?.chatLog?.clientMsgID}`}
                     item={childItem}
                     tabResultType={item.type}
                     onPressItem={onPressItem}
                     searchTerm={searchTerm}
                   />
-                </KContainer.View>
-              );
-            })}
+                ))}
             <KButton.Link
               label={trans('view_all')}
               icon={{
@@ -108,7 +126,7 @@ const SearchAllResult = memo(
           </KContainer.View>
         );
       },
-      [onChangeTab, onPressItem, searchTerm]
+      [onChangeTab, onPressItem, onPressSearchContact, searchTerm]
     );
 
     const keyExtractor = useCallback((item: ISearchAllResultItem) => {
@@ -158,10 +176,6 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: KColors.border.light,
   },
-  childItemContainer: {
-    borderBottomWidth: 1,
-    borderBottomColor: KColors.border.light,
-  },
   viewAllButton: {
     height: 40,
   },

package/src/screens/SearchConversation/SearchCommunityResult.tsx

@@ -0,0 +1,96 @@
+import { KColors, KContainer, KSpacingValue } from '@droppii/libs';
+import { memo, useCallback, useMemo } from 'react';
+import { ActivityIndicator, FlatList, StyleSheet } from 'react-native';
+import isEmpty from 'lodash/isEmpty';
+import type { SearchPublicGroupInfo } from '@droppii/openim-rn-client-sdk';
+import { useFetchPublicGroup } from '../../hooks/groups/useFetchPublicGroup';
+import { GroupItem } from '../../components/GroupItem';
+import { SearchEmpty } from './SearchEmpty';
+import { SearchConversationTabResultType } from './types';
+
+interface ISearchCommunityResultProps {
+  searchTerm: string;
+  onPressGroup?: (groupId: string) => void;
+}
+
+const keyExtractor = (item: SearchPublicGroupInfo) => item.groupID;
+
+const SearchCommunityResult = memo(
+  ({ searchTerm, onPressGroup }: ISearchCommunityResultProps) => {
+    const hasKeyword = !isEmpty(searchTerm?.trim());
+
+    const {
+      dataFlatten,
+      hasNextPage,
+      fetchNextPage,
+      isFetchingNextPage,
+      isFetching,
+      isRefetching,
+      refetch,
+    } = useFetchPublicGroup(searchTerm);
+
+    const data = useMemo(
+      () => (hasKeyword ? dataFlatten : []),
+      [hasKeyword, dataFlatten]
+    );
+
+    const renderItem = useCallback(
+      ({ item }: { item: SearchPublicGroupInfo }) => (
+        <GroupItem item={item} onPress={onPressGroup} />
+      ),
+      [onPressGroup]
+    );
+
+    const onEndReached = useCallback(() => {
+      if (hasKeyword && hasNextPage && !isFetchingNextPage) {
+        fetchNextPage();
+      }
+    }, [hasKeyword, hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+    if (!hasKeyword) {
+      return (
+        <KContainer.View flex>
+          <SearchEmpty
+            searchTerm={searchTerm}
+            searchType={SearchConversationTabResultType.Community}
+          />
+        </KContainer.View>
+      );
+    }
+
+    return (
+      <KContainer.View flex>
+        {isFetching && !isFetchingNextPage && !isRefetching ? (
+          <KContainer.View flex center>
+            <ActivityIndicator color={KColors.primary.normal} size={'small'} />
+          </KContainer.View>
+        ) : (
+          <FlatList
+            data={data}
+            renderItem={renderItem}
+            keyExtractor={keyExtractor}
+            contentContainerStyle={styles.container}
+            showsVerticalScrollIndicator={false}
+            onEndReached={onEndReached}
+            ListEmptyComponent={
+              <SearchEmpty
+                searchTerm={searchTerm}
+                searchType={SearchConversationTabResultType.Community}
+              />
+            }
+            refreshing={isFetching}
+            onRefresh={refetch}
+          />
+        )}
+      </KContainer.View>
+    );
+  }
+);
+
+export default SearchCommunityResult;
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: KSpacingValue['0.75rem'],
+  },
+});

package/src/screens/SearchConversation/SearchContactsResult.tsx

@@ -0,0 +1,155 @@
+import {
+  KColors,
+  KContainer,
+  KSpacingValue,
+  KTagsChoiceSlideBar,
+  type KTagsChoiceSlideBarItemProps,
+} from '@droppii/libs';
+import { memo, useCallback, useMemo, useState } from 'react';
+import { ActivityIndicator, FlatList, StyleSheet } from 'react-native';
+import { useChatContext } from '../../context';
+import { useSearchContacts } from '../../hooks/contacts/useSearchContacts';
+import { ContactCategory, type IContactSearchItem } from '../../types/chat';
+import { trans } from '../../translation';
+import { SearchEmpty } from './SearchEmpty';
+import ContactResultItem from './ContactResultItem';
+import { SearchConversationTabResultType } from './types';
+
+interface ISearchContactsResultProps {
+  searchTerm: string;
+  onPressSearchContact?: (item: IContactSearchItem) => void;
+}
+
+const FILTER_ITEMS: KTagsChoiceSlideBarItemProps[] = [
+  {
+    id: ContactCategory.Customer,
+    label: trans('contact_type:customer'),
+    allowDeselect: true,
+  },
+  {
+    id: ContactCategory.Pdp,
+    label: trans('contact_type:pdp'),
+    allowDeselect: true,
+  },
+  {
+    id: ContactCategory.Group,
+    label: trans('contact_type:group'),
+    allowDeselect: true,
+  },
+  {
+    id: ContactCategory.Seller,
+    label: trans('contact_type:seller'),
+    allowDeselect: true,
+  },
+];
+
+const SearchContactsResult = memo(
+  ({ searchTerm, onPressSearchContact }: ISearchContactsResultProps) => {
+    const { applicationType } = useChatContext();
+    const [contactType, setContactType] = useState<
+      ContactCategory | undefined
+    >();
+
+    const {
+      dataFlatten,
+      hasNextPage,
+      fetchNextPage,
+      isFetchingNextPage,
+      isFetching,
+      isRefetching,
+      refetch,
+    } = useSearchContacts({
+      query: searchTerm,
+      applicationType,
+      type: contactType,
+    });
+
+    const onFilterChanged = useCallback(
+      (item?: KTagsChoiceSlideBarItemProps) => {
+        setContactType(item?.id as ContactCategory | undefined);
+      },
+      []
+    );
+
+    const renderItem = useCallback(
+      ({ item }: { item: IContactSearchItem }) => {
+        return (
+          <ContactResultItem
+            item={item}
+            onPressSearchContact={onPressSearchContact}
+            searchTerm={searchTerm}
+          />
+        );
+      },
+      [onPressSearchContact, searchTerm]
+    );
+
+    const keyExtractor = useCallback(
+      (item: IContactSearchItem) => item?.id,
+      []
+    );
+
+    const onEndReached = useCallback(() => {
+      if (hasNextPage && !isFetchingNextPage) {
+        fetchNextPage();
+      }
+    }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+    const ListHeaderComponent = useMemo(
+      () => (
+        <KContainer.View style={styles.filterContainer}>
+          <KTagsChoiceSlideBar
+            items={FILTER_ITEMS}
+            onChanged={onFilterChanged}
+            containerStyle={styles.filterContentContainer}
+            type="outline"
+          />
+        </KContainer.View>
+      ),
+      [onFilterChanged]
+    );
+
+    return (
+      <KContainer.View flex>
+        {ListHeaderComponent}
+        {isFetching && !isFetchingNextPage && !isRefetching ? (
+          <KContainer.View flex center>
+            <ActivityIndicator color={KColors.primary.normal} size={'small'} />
+          </KContainer.View>
+        ) : (
+          <FlatList
+            data={dataFlatten}
+            renderItem={renderItem}
+            keyExtractor={keyExtractor}
+            contentContainerStyle={styles.container}
+            showsVerticalScrollIndicator={false}
+            onEndReached={onEndReached}
+            ListEmptyComponent={
+              <SearchEmpty
+                searchTerm={searchTerm}
+                searchType={SearchConversationTabResultType.Conversations}
+              />
+            }
+            refreshing={isFetching}
+            onRefresh={refetch}
+          />
+        )}
+      </KContainer.View>
+    );
+  }
+);
+
+export default SearchContactsResult;
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: KSpacingValue['0.75rem'],
+  },
+  filterContainer: {
+    borderBottomWidth: 1,
+    borderBottomColor: KColors.border.light,
+  },
+  filterContentContainer: {
+    padding: 12,
+  },
+});

package/src/screens/SearchConversation/SearchEmpty.tsx

@@ -22,6 +22,8 @@ export const SearchEmpty = memo(
           return 'search_message:empty_hint';
         case SearchConversationTabResultType.Conversations:
           return 'search_conversation:empty_hint';
+        case SearchConversationTabResultType.Community:
+          return 'search_community:empty_hint';
         default:
           return 'search:empty_hint';
       }

package/src/screens/SearchConversation/SearchMessagesResult.tsx

@@ -1,4 +1,4 @@
-import { KColors, KContainer, KDivider, KSpacingValue } from '@droppii/libs';
+import { KColors, KContainer, KSpacingValue } from '@droppii/libs';
 import { memo, useCallback } from 'react';
 import { useSearchMessage } from '../../hooks/message/useSearchMessage';
 import { useChatContext } from '../../context';
@@ -52,10 +52,6 @@ const SearchMessagesResult = memo(
       }
     }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
 
-    const ItemSeparatorComponent = useCallback(() => {
-      return <KDivider size={'hairline'} vertical={false} />;
-    }, []);
-
     return (
       <KContainer.View flex>
         {isFetching && !isFetchingNextPage && !isRefetching ? (
@@ -70,7 +66,6 @@ const SearchMessagesResult = memo(
             contentContainerStyle={styles.container}
             showsVerticalScrollIndicator={false}
             onEndReached={onEndReached}
-            ItemSeparatorComponent={ItemSeparatorComponent}
             ListEmptyComponent={
               <SearchEmpty
                 searchTerm={searchTerm}

package/src/screens/SearchConversation/SearchResultItem.tsx

@@ -68,7 +68,12 @@ const SearchResultItem = memo((props: ISearchResultItemProps) => {
   }, [onPressItem, item?.conversation, item?.chatLog]);
 
   return (
-    <KContainer.Touchable style={styles.container} onPress={handlePressItem}>
+    <KContainer.Touchable
+      style={styles.container}
+      onPress={handlePressItem}
+      brBW={1}
+      brBC={KColors.border.light}
+    >
       <KContainer.View style={styles.leftContainer}>
         <AvatarSection
           avatar={item?.conversation?.faceURL ?? null}

package/src/screens/SearchConversation/TabResult.tsx

@@ -12,19 +12,30 @@ import { SearchConversationTabResultType } from './types';
 import { trans } from '../../translation';
 import SearchMessagesResult from './SearchMessagesResult';
 import SearchAllResult from './SearchAllResult';
-import type { ISearchMessageItem } from '../../types/chat';
+import SearchContactsResult from './SearchContactsResult';
+import SearchCommunityResult from './SearchCommunityResult';
+import type { IContactSearchItem, ISearchMessageItem } from '../../types/chat';
 
 type TabRoute = { key: string; title: string };
 
 interface ISearchConversationTabResultProps {
   searchTerm: string;
   onPressItem?: (item: ISearchMessageItem) => void;
+  onPressSearchContact?: (item: IContactSearchItem) => void;
+  onPressGroup?: (groupId: string) => void;
 }
 
 const TabRoutes: TabRoute[] = [
   { key: SearchConversationTabResultType.All, title: trans('all') },
-  // { key: SearchConversationTabResultType.Conversations, title: trans('contacts') },
+  {
+    key: SearchConversationTabResultType.Conversations,
+    title: trans('contacts'),
+  },
   { key: SearchConversationTabResultType.Messages, title: trans('messages') },
+  {
+    key: SearchConversationTabResultType.Community,
+    title: trans('community'),
+  },
 ];
 
 interface CustomTabBarProps {
@@ -58,7 +69,12 @@ const CustomTabBar = memo(({ routes, index, onPress }: CustomTabBarProps) => (
 ));
 
 const SearchConversationTabResult = memo(
-  ({ searchTerm, onPressItem }: ISearchConversationTabResultProps) => {
+  ({
+    searchTerm,
+    onPressItem,
+    onPressSearchContact,
+    onPressGroup,
+  }: ISearchConversationTabResultProps) => {
     const [index, setIndex] = useState(0);
     const [routes] = useState<TabRoute[]>(TabRoutes);
 
@@ -78,10 +94,16 @@ const SearchConversationTabResult = memo(
                 searchTerm={searchTerm}
                 handleChangeTab={handleChangeTab}
                 onPressItem={onPressItem}
+                onPressSearchContact={onPressSearchContact}
               />
             );
           case SearchConversationTabResultType.Conversations:
-            return null;
+            return (
+              <SearchContactsResult
+                searchTerm={searchTerm}
+                onPressSearchContact={onPressSearchContact}
+              />
+            );
           case SearchConversationTabResultType.Messages:
             return (
               <SearchMessagesResult
@@ -89,11 +111,24 @@ const SearchConversationTabResult = memo(
                 onPressItem={onPressItem}
               />
             );
+          case SearchConversationTabResultType.Community:
+            return (
+              <SearchCommunityResult
+                searchTerm={searchTerm}
+                onPressGroup={onPressGroup}
+              />
+            );
           default:
             return null;
         }
       },
-      [searchTerm, handleChangeTab, onPressItem]
+      [
+        searchTerm,
+        handleChangeTab,
+        onPressItem,
+        onPressSearchContact,
+        onPressGroup,
+      ]
     );
 
     const renderTabBar = useCallback(

package/src/screens/SearchConversation/index.tsx

@@ -5,13 +5,19 @@ import { trans } from '../../translation';
 import debounce from 'lodash/debounce';
 import type { TextInput } from 'react-native';
 import SearchConversationTabResult from './TabResult';
-import type { ISearchMessageItem } from '../../types/chat';
+import type { IContactSearchItem, ISearchMessageItem } from '../../types/chat';
 
 interface SearchConversationScreenProps {
   onPressItem?: (item: ISearchMessageItem) => void;
+  onPressSearchContact?: (item: IContactSearchItem) => void;
+  onPressGroup?: (groupId: string) => void;
 }
 const SearchConversationScreen = memo(
-  ({ onPressItem }: SearchConversationScreenProps) => {
+  ({
+    onPressItem,
+    onPressSearchContact,
+    onPressGroup,
+  }: SearchConversationScreenProps) => {
     const nav = useNavigation();
     const [inputValue, setInputValue] = useState('');
     const [searchTerm, setSearchTerm] = useState('');
@@ -62,6 +68,8 @@ const SearchConversationScreen = memo(
         <SearchConversationTabResult
           searchTerm={searchTerm}
           onPressItem={onPressItem}
+          onPressSearchContact={onPressSearchContact}
+          onPressGroup={onPressGroup}
         />
       </KContainer.Page>
     );

package/src/screens/SearchConversation/types.tsx

@@ -2,4 +2,5 @@ export enum SearchConversationTabResultType {
   All = 'all',
   Conversations = 'conversations',
   Messages = 'messages',
+  Community = 'community',
 }