@droppii-org/chat-mobile 0.2.68 → 0.2.70

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,15 @@ 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}}',
+  'group:public_group': 'Nhóm công khai',
+  'group:private_group': 'Nhóm riêng tư',
 };
 
 export default {