@droppii-org/chat-mobile 0.2.68 → 0.2.69

package/src/hooks/groups/useFetchPublicGroup.ts

@@ -0,0 +1,43 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import OpenIMSDK, {
+  PublicGroupJoinStatus,
+  type SearchPublicGroupInfo,
+} from '@droppii/openim-rn-client-sdk';
+import { PAGE_SIZE } from '../../constants';
+import { groupQueryKeys } from '../query-keys';
+
+export const useFetchPublicGroup = (keyword: string) => {
+  const { data, ...rest } = useInfiniteQuery({
+    queryKey: groupQueryKeys.publicSearch(keyword),
+    queryFn: ({ pageParam = 0 }) => {
+      return OpenIMSDK.searchPublicGroups(
+        keyword,
+        PublicGroupJoinStatus.All,
+        pageParam,
+        PAGE_SIZE
+      );
+    },
+    getNextPageParam: (lastPage, allPages) => {
+      const fetched = allPages.reduce((sum, p) => sum + p.groups.length, 0);
+      return fetched < lastPage.total ? fetched : undefined;
+    },
+    initialPageParam: 0,
+    maxPages: 1,
+  });
+
+  const dataFlatten: SearchPublicGroupInfo[] = useMemo(() => {
+    const seen = new Set<string>();
+    return (
+      data?.pages.flatMap((page) =>
+        page.groups.filter((g) => {
+          if (seen.has(g.groupID)) return false;
+          seen.add(g.groupID);
+          return true;
+        })
+      ) ?? []
+    );
+  }, [data]);
+
+  return { dataFlatten, ...rest };
+};

package/src/hooks/groups/useJoinGroup.ts

@@ -0,0 +1,46 @@
+import OpenIMSDK, { type JoinGroupParams } from '@droppii/openim-rn-client-sdk';
+import { useQueryClient } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
+import { conversationQueryKeys, groupQueryKeys } from '../query-keys';
+import { UIUtils } from '../../utils/UIUtils';
+import { trans } from '../../translation';
+
+export const useJoinGroup = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationKey: groupQueryKeys.join(),
+    mutationFn: (params: JoinGroupParams & { groupName: string }) =>
+      OpenIMSDK.joinGroup(params),
+    onSuccess: (_data, params) => {
+      queryClient.invalidateQueries({
+        queryKey: conversationQueryKeys.joinedGroup(params.groupID),
+      });
+
+      queryClient.setQueriesData<{
+        pages: {
+          total: number;
+          groups: { groupID: string; isJoined: boolean }[];
+        }[];
+        pageParams: unknown[];
+      }>({ queryKey: groupQueryKeys.public(), exact: false }, (old) => {
+        if (!old) return old;
+        return {
+          ...old,
+          pages: old.pages.map((page) => ({
+            ...page,
+            groups: page.groups.map((g) =>
+              g.groupID === params.groupID ? { ...g, isJoined: true } : g
+            ),
+          })),
+        };
+      });
+
+      UIUtils.toast.open({
+        title: trans('group:joined_group', {
+          groupName: params?.groupName || '',
+        }),
+      });
+    },
+  });
+};

package/src/hooks/query-keys.ts

@@ -61,3 +61,11 @@ export const messageQueryKeys = {
   search: (query: string, conversationId?: string) =>
     [...messageQueryKeys.all, 'search', query, conversationId] as const,
 };
+
+export const groupQueryKeys = {
+  all: ['groups'] as const,
+  public: () => [...groupQueryKeys.all, 'public'] as const,
+  publicSearch: (keyword: string) =>
+    [...groupQueryKeys.public(), keyword] as const,
+  join: () => [...groupQueryKeys.all, 'join'] as const,
+};

package/src/index.tsx

@@ -40,7 +40,11 @@ export type {
   MessageItem,
   ConversationItem,
 } from '@droppii/openim-rn-client-sdk';
-export { LoginStatus, MessageType } from '@droppii/openim-rn-client-sdk';
+export {
+  LoginStatus,
+  MessageType,
+  GroupJoinSource,
+} from '@droppii/openim-rn-client-sdk';
 export * from './screens/chat-detail';
 export type {
   DChatActionItem,

package/src/screens/SearchConversation/TabResult.tsx

@@ -122,7 +122,7 @@ const styles = StyleSheet.create({
   tabRow: {
     flexDirection: 'row',
     borderBottomWidth: 1,
-    borderBottomColor: KColors.border.normal,
+    borderBottomColor: KColors.border.light,
   },
   tabItem: {
     paddingVertical: KSpacingValue['0.5rem'],

package/src/screens/chat-detail/ChatComposer.tsx

@@ -65,6 +65,7 @@ import { openBotMenuSheet } from './BotMenuSheet';
 import { UIUtils } from '../../utils/UIUtils';
 import { GroupPermission, PeerType } from '@droppii/openim-rn-client-sdk';
 import { useGuardedAction } from '../../hooks/useGroupPermission';
+import { useIsJoinedGroup } from '../../hooks/useIsJoinedGroup';
 
 interface ChatComposerInternalProps {
   isEmptyMessage?: boolean;
@@ -72,6 +73,8 @@ interface ChatComposerInternalProps {
   isComposeDisabled?: boolean;
   composerRef?: RefObject<View | null>;
   onComposerLayout?: (event: LayoutChangeEvent) => void;
+  onPressJoinGroup?: () => void;
+  isJoiningGroup?: boolean;
 }
 
 export const ChatComposer = memo(
@@ -81,6 +84,8 @@ export const ChatComposer = memo(
     isComposeDisabled = false,
     composerRef,
     onComposerLayout,
+    onPressJoinGroup,
+    isJoiningGroup = false,
   }: ChatComposerInternalProps) => {
     const insets = useSafeAreaInsets();
     const isDisableCompose = isComposeDisabled;
@@ -100,6 +105,12 @@ export const ChatComposer = memo(
     const { sendMessage } = useSendMessage();
     const compose = useChatCompose();
 
+    const { data: isJoinedGroup } = useIsJoinedGroup(conversation?.groupID);
+
+    const isNotInGroup = useMemo(() => {
+      return conversation?.groupID ? !isJoinedGroup : false;
+    }, [conversation?.groupID, isJoinedGroup]);
+
     const {
       activePanelType,
       setActivePanelType,
@@ -431,6 +442,30 @@ export const ChatComposer = memo(
           />
         </KContainer.View>
       );
+    } else if (isNotInGroup) {
+      content = (
+        <KContainer.View
+          paddingH="0.75rem"
+          justifyContent="center"
+          brTW={1}
+          brTC={KColors.border.light}
+        >
+          <KLabel.Text
+            typo="TextSmNormal"
+            textAlign="center"
+            paddingV={'0.75rem'}
+          >
+            {trans('group:not_in_group')}
+          </KLabel.Text>
+          <KButton.Solid
+            size="md"
+            label={trans('group:join')}
+            stretch
+            loading={isJoiningGroup}
+            onPress={onPressJoinGroup}
+          />
+        </KContainer.View>
+      );
     } else {
       content = (
         <KContainer.View background={'#F9F9FA'}>

package/src/screens/chat-detail/ChatDetail.tsx

@@ -30,10 +30,14 @@ import {
   useGetConversationDetail,
   useGetConversationTarget,
 } from '../../hooks/conversation/useGetConversationDetail';
-import type { MessageItem } from '@droppii/openim-rn-client-sdk';
+import {
+  GroupJoinSource,
+  type MessageItem,
+} from '@droppii/openim-rn-client-sdk';
 import { useMessages } from '../../hooks/message/useMessages';
 import { ChatEvent, type GroupRemovedPayload } from '../../types/events';
 import { useSetIsShowFLashMessage } from '../../context/global';
+import { useJoinGroup } from '../../hooks/groups/useJoinGroup';
 
 const ChatDetail = memo(
   ({
@@ -50,6 +54,7 @@ const ChatDetail = memo(
     onPressUrl,
     customMessageItemFactory,
     pannelActions,
+    groupJoinSource,
   }: ChatDetailProps) => {
     const navigation = useNavigation();
     const mediaViewerRef = useRef<MediaViewerModalHandle>(null);
@@ -94,6 +99,8 @@ const ChatDetail = memo(
       hasMoreNew,
     } = useMessages({ conversationId, startClientMsgId: targetMessageId });
 
+    const { mutate: joinGroup, isPending: isJoiningGroup } = useJoinGroup();
+
     const setShowFLashMessage = useSetIsShowFLashMessage();
 
     const { pinnedMessages, pinMessage, unpinMessage } =
@@ -164,6 +171,21 @@ const ChatDetail = memo(
       onPressMenu?.(conversationId);
     }, [conversationId, onPressMenu]);
 
+    const handlePressJoinGroup = useCallback(() => {
+      if (!conversation?.groupID) return;
+      joinGroup({
+        groupID: conversation?.groupID,
+        reqMsg: '',
+        joinSource: groupJoinSource || GroupJoinSource.Search,
+        groupName: conversation?.showName || '',
+      });
+    }, [
+      groupJoinSource,
+      conversation?.groupID,
+      joinGroup,
+      conversation?.showName,
+    ]);
+
     return (
       <KContainer.Page flex edges={['bottom']}>
         <ChatDetailHeader
@@ -207,6 +229,8 @@ const ChatDetail = memo(
           isEmptyMessage={messages?.length === 0}
           pannelActions={pannelActions}
           isComposeDisabled={isComposeDisabled}
+          onPressJoinGroup={handlePressJoinGroup}
+          isJoiningGroup={isJoiningGroup}
         />
 
         <MediaViewerModal ref={mediaViewerRef} />

package/src/screens/chat-detail/types.ts

@@ -1,7 +1,10 @@
 import type { ReactNode } from 'react';
 import type { MediaItem } from '../../hooks/useMediaViewer';
 import type { MeasuredRect } from './messageToolbox/types';
-import type { MessageItem } from '@droppii/openim-rn-client-sdk';
+import type {
+  GroupJoinSource,
+  MessageItem,
+} from '@droppii/openim-rn-client-sdk';
 
 export type DChatActionIconProvider = 'MaterialCommunityIcons' | 'DroppiiNew';
 
@@ -100,4 +103,5 @@ export interface ChatDetailProps extends Omit<
   onPressUrl?: (url: string) => void;
   customMessageItemFactory?: (item: MessageItem) => ReactNode;
   pannelActions?: DChatPannelAction[];
+  groupJoinSource?: GroupJoinSource;
 }

package/src/screens/inbox/CommunityTab.tsx

@@ -0,0 +1,65 @@
+import { KContainer, KSpacingValue } from '@droppii/libs';
+import { memo, useCallback } from 'react';
+import { ActivityIndicator, StyleSheet } from 'react-native';
+import type { SearchPublicGroupInfo } from '@droppii/openim-rn-client-sdk';
+import { useFetchPublicGroup } from '../../hooks/groups/useFetchPublicGroup';
+import { GroupItem } from '../../components/GroupItem';
+
+interface CommunityTabProps {
+  onPressGroup?: (groupId: string) => void;
+}
+export const CommunityTab = memo(({ onPressGroup }: CommunityTabProps) => {
+  const {
+    dataFlatten,
+    isFetching,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage,
+    isRefetching,
+    refetch,
+  } = useFetchPublicGroup('');
+
+  const renderItem = useCallback(
+    ({ item }: { item: SearchPublicGroupInfo }) => (
+      <GroupItem item={item} onPress={onPressGroup} />
+    ),
+    [onPressGroup]
+  );
+
+  const keyExtractor = useCallback(
+    (item: SearchPublicGroupInfo) => item.groupID,
+    []
+  );
+
+  const onEndReached = useCallback(() => {
+    if (hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  return (
+    <KContainer.Page flex>
+      {isFetching && !isFetchingNextPage && !isRefetching ? (
+        <KContainer.View flex center>
+          <ActivityIndicator />
+        </KContainer.View>
+      ) : (
+        <KContainer.FlatList
+          data={dataFlatten}
+          renderItem={renderItem}
+          keyExtractor={keyExtractor}
+          onEndReached={onEndReached}
+          refreshing={isRefetching}
+          onRefresh={refetch}
+          contentContainerStyle={styles.contentContainer}
+        />
+      )}
+    </KContainer.Page>
+  );
+});
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    paddingHorizontal: KSpacingValue['0.75rem'],
+  },
+});

package/src/screens/inbox/Inbox.tsx

@@ -1,38 +1,56 @@
 import { memo, useCallback, useState } from 'react';
 import { StyleSheet } from 'react-native';
 import { TabView } from 'react-native-tab-view';
-import { KContainer, KImage, KLabel, KColors } from '@droppii/libs';
+import {
+  KContainer,
+  KImage,
+  KLabel,
+  KColors,
+  KRadiusValue,
+  KSpacingValue,
+} from '@droppii/libs';
 import { MessagesTab } from './MessagesTab';
+import { trans } from '../../translation';
+import { CommunityTab } from './CommunityTab';
 
 interface InboxProps {
   onPressThread?: (item: string) => void;
   onPressSearch?: () => void;
   onPressEdit?: () => void;
   onPressContact?: () => void;
+  onPressGroup?: (groupId: string) => void;
 }
 
 type TabRoute = { key: string; title: string };
 
+const TabRoutes: TabRoute[] = [
+  { key: 'messages', title: trans('messages') },
+  { key: 'community', title: trans('community') },
+];
+
 const Inbox = memo(
   ({
     onPressThread,
     onPressSearch,
     onPressEdit,
     onPressContact,
+    onPressGroup,
   }: InboxProps) => {
     const [index, setIndex] = useState(0);
-    const [routes] = useState<TabRoute[]>([
-      { key: 'messages', title: 'Tin nhắn' },
-    ]);
+    const [routes] = useState<TabRoute[]>(TabRoutes);
 
     const renderScene = useCallback(
       ({ route }: { route: TabRoute }) => {
-        if (route.key === 'messages') {
-          return <MessagesTab onPressThread={onPressThread} />;
+        switch (route.key) {
+          case 'messages':
+            return <MessagesTab onPressThread={onPressThread} />;
+          case 'community':
+            return <CommunityTab onPressGroup={onPressGroup} />;
+          default:
+            return null;
         }
-        return null;
       },
-      [onPressThread]
+      [onPressThread, onPressGroup]
     );
 
     const renderTabBar = useCallback(
@@ -46,24 +64,18 @@ const Inbox = memo(
                 <KContainer.Touchable
                   key={route.key}
                   onPress={() => setIndex(i)}
-                  paddingV="0.75rem"
-                  marginR="1rem"
                   style={styles.tabItem}
                   activeOpacity={0.7}
                 >
                   <KLabel.Text
                     typo="TextNmBold"
                     color={
-                      isActive
-                        ? KColors.palette.primary.w400
-                        : KColors.palette.gray.w500
+                      isActive ? KColors.primary.normal : KColors.gray.light
                     }
                   >
                     {route.title}
                   </KLabel.Text>
-                  {isActive && (
-                    <KContainer.View style={styles.activeIndicator} />
-                  )}
+                  {isActive && <KContainer.View style={styles.indicator} />}
                 </KContainer.Touchable>
               );
             })}
@@ -77,10 +89,9 @@ const Inbox = memo(
               activeOpacity={0.7}
             >
               <KImage.VectorIcons
-                name="magnify"
-                provider="MaterialCommunityIcons"
+                name="search-o"
                 size={24}
-                color={KColors.palette.primary.w400}
+                color={KColors.primary.normal}
               />
             </KContainer.Touchable>
             <KContainer.Touchable
@@ -89,10 +100,9 @@ const Inbox = memo(
               activeOpacity={0.7}
             >
               <KImage.VectorIcons
-                name="square-edit-outline"
-                provider="MaterialCommunityIcons"
+                name="plus-circle-o"
                 size={24}
-                color={KColors.palette.primary.w400}
+                color={KColors.primary.normal}
               />
             </KContainer.Touchable>
             <KContainer.Touchable
@@ -101,10 +111,9 @@ const Inbox = memo(
               activeOpacity={0.7}
             >
               <KImage.VectorIcons
-                name="account-group-outline"
-                provider="MaterialCommunityIcons"
+                name="user-three-o"
                 size={24}
-                color={KColors.palette.primary.w400}
+                color={KColors.primary.normal}
               />
             </KContainer.Touchable>
           </KContainer.View>
@@ -114,13 +123,13 @@ const Inbox = memo(
     );
 
     return (
-      <KContainer.Page flex edges={['top', 'bottom']}>
+      <KContainer.Page flex edges={['top']}>
         <TabView
           navigationState={{ index, routes }}
           renderScene={renderScene}
           renderTabBar={renderTabBar}
           onIndexChange={setIndex}
-          swipeEnabled={routes.length > 1}
+          lazy
         />
       </KContainer.Page>
     );
@@ -133,25 +142,28 @@ export default Inbox;
 
 const styles = StyleSheet.create({
   tabBar: {
-    borderBottomWidth: 0.5,
-    borderBottomColor: KColors.palette.gray.w100,
-    paddingHorizontal: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: KColors.border.light,
+    paddingTop: 2,
   },
   tabItem: {
-    position: 'relative',
-    paddingTop: 2,
-    paddingBottom: 0,
+    height: 40,
+    marginHorizontal: KSpacingValue['0.75rem'],
+    justifyContent: 'center',
+    alignItems: 'center',
   },
-  activeIndicator: {
+  indicator: {
+    height: 3,
+    backgroundColor: KColors.primary.normal,
+    width: '100%',
+    borderRadius: KRadiusValue.x,
     position: 'absolute',
-    bottom: 0,
+    bottom: -1,
     left: 0,
     right: 0,
-    height: 3,
-    borderRadius: 4,
-    backgroundColor: KColors.palette.primary.w400,
   },
   actionGroup: {
-    gap: 4,
+    gap: KSpacingValue['0.25rem'],
+    paddingRight: KSpacingValue['0.5rem'],
   },
 });

package/src/translation/resources/i18n.ts

@@ -165,6 +165,13 @@ const i18nKey: Record<string, string> = {
   'search_message:revoked_message': 'Tin nhắn đã được thu hồi',
   'chat:no_permission': 'Bạn không có quyền này',
   'chat:no_send_permission': 'Bạn không có quyền gửi tin nhắn',
+  'community': 'Cộng đồng',
+  'group:member_count': '{{count}} thành viên',
+  'group:access': 'Truy cập',
+  'group:join': 'Tham gia',
+  'group:not_in_group': 'Bạn cần tham gia nhóm để gửi tin nhắn',
+  'group:cannot_send_message': 'Bạn không thể gửi tin nhắn vào nhóm này',
+  'group:joined_group': 'Đã tham gia nhóm {{groupName}}',
 };
 
 export default {