package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amityco/react-native-chat-ui-kit",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "chat uikit for react native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -171,7 +171,7 @@
     ]
   },
   "dependencies": {
-    "@amityco/ts-sdk-react-native": "^6.19.0",
+    "@amityco/ts-sdk-react-native": "6.19.0",
     "expo-constants": "^14.2.1",
     "expo-image-picker": "^14.7.1",
     "expo-modules-core": "^1.11.8",

src/components/AddMembersModal/index.tsx

@@ -21,6 +21,7 @@ import { SearchIcon } from '../../svg/SearchIcon';
 import { CircleCloseIcon } from '../../svg/CircleCloseIcon';
 import { useTheme } from 'react-native-paper';
 import type { MyMD3Theme } from '../../providers/amity-ui-kit-provider';
+import useAuth from '../../hooks/useAuth';
 interface IModal {
   visible: boolean;
   userId?: string;
@@ -34,12 +35,13 @@ export type SelectUserList = {
 };
 const AddMembersModal = ({ visible, onClose, onFinish, initUserList = [] }: IModal) => {
   const theme = useTheme() as MyMD3Theme;
-  const styles =useStyles();
+  const styles = useStyles();
   const [sectionedUserList, setSectionedUserList] = useState<UserInterface[]>(initUserList);
   const [selectedUserList, setSelectedUserList] = useState<UserInterface[]>(initUserList);
   const [usersObject, setUsersObject] = useState<Amity.LiveCollection<Amity.User>>();
   const [searchTerm, setSearchTerm] = useState('');
   const [isShowSectionHeader, setIsShowSectionHeader] = useState<boolean>(false)
+  const { client } = useAuth()
   const { data: userArr = [], onNextPage } = usersObject ?? {};
 
 
@@ -128,10 +130,9 @@ const AddMembersModal = ({ visible, onClose, onFinish, initUserList = [] }: IMod
 
 
     return (
-      <View>
+      <View style={styles.sectionItem}>
         {isrenderheader && <SectionHeader title={currentLetter} />}
-
-        <UserItem showThreeDot={false} user={userObj} isCheckmark={selectedUser} onPress={onUserPressed} />
+        <UserItem isUserAccount={(client as Amity.Client).userId === userObj.userId ? true : false} showThreeDot={false} user={userObj} isCheckmark={selectedUser} onPress={onUserPressed} />
       </View>
 
     );
@@ -187,17 +188,17 @@ const AddMembersModal = ({ visible, onClose, onFinish, initUserList = [] }: IMod
             <Text style={[selectedUserList.length > 0 ? styles.doneText : styles.disabledDone]}>Done</Text>
           </TouchableOpacity>
         </View>
-      <View style={styles.inputWrap}>
+        <View style={styles.inputWrap}>
           <TouchableOpacity onPress={() => queryAccounts(searchTerm)}>
-          <SearchIcon color={theme.colors.base}/>
+            <SearchIcon color={theme.colors.base} />
           </TouchableOpacity>
           <TextInput
             style={styles.input}
             value={searchTerm}
             onChangeText={handleChange}
           />
           <TouchableOpacity onPress={clearButton}>
-           <CircleCloseIcon color={theme.colors.base}/>
+            <CircleCloseIcon color={theme.colors.base} />
           </TouchableOpacity>
         </View>
         {selectedUserList.length > 0 ? (
@@ -219,7 +220,7 @@ const AddMembersModal = ({ visible, onClose, onFinish, initUserList = [] }: IMod
           ref={flatListRef}
           onScroll={handleScroll}
         />
-      </View> 
+      </View>
     </Modal>
   );
 };

src/components/AddMembersModal/styles.ts

@@ -78,6 +78,10 @@ export const useStyles = () => {
     disabledDone: {
       opacity: 0.5
     },
+    sectionItem: {
+     flex: 1
+    }
+
   });
   return styles;
 }

src/components/ChatList/index.tsx

@@ -43,8 +43,12 @@ const ChatList: React.FC<IChatListProps> = ({
   const { client, apiRegion } = useAuth();
   const [oneOnOneChatObject, setOneOnOneChatObject] = useState<Amity.Membership<'channel'>[]>();
   const [groupChatObject, setGroupChatObject] = useState<Amity.Membership<'channel'>[]>();
+  const [channelAvatarFileId, setChannelAvatarFileId] = useState<string | undefined>(avatarFileId)
+  const [channelDisplayName, setChannelDisplayName] = useState<string>(chatName)
+
   const styles = useStyles();
 
+
   const handlePress = (
     chatMemberNumber: number
   ) => {
@@ -101,6 +105,16 @@ const ChatList: React.FC<IChatListProps> = ({
     );
   }, [])
 
+  useEffect(() => {
+    if (oneOnOneChatObject) {
+      const targetIndex: number = oneOnOneChatObject?.findIndex(
+        (item) => item.userId !== (client as Amity.Client).userId
+      );
+      setChannelAvatarFileId(oneOnOneChatObject[targetIndex]?.user?.avatarFileId ?? avatarFileId)
+      setChannelDisplayName(oneOnOneChatObject[targetIndex]?.user?.displayName as string)
+    }
+  }, [oneOnOneChatObject])
+
 
   return (
 
@@ -111,11 +125,11 @@ const ChatList: React.FC<IChatListProps> = ({
         <View style={styles.avatarSection}>
 
 
-          {avatarFileId ? <Image
+          {channelAvatarFileId ? <Image
             style={styles.icon}
             source={
               {
-                uri: `https://api.${apiRegion}.amity.co/api/v3/files/${avatarFileId}/download?size=small`,
+                uri: `https://api.${apiRegion}.amity.co/api/v3/files/${channelAvatarFileId}/download?size=small`,
               }
             }
           /> : <View style={styles.icon}>
@@ -129,7 +143,7 @@ const ChatList: React.FC<IChatListProps> = ({
         <View style={styles.chatDetailSection}>
           <View style={styles.chatNameWrap}>
             <CustomText style={styles.chatName} numberOfLines={1}>
-              {chatName}
+              {channelDisplayName}
             </CustomText>
             <CustomText style={styles.chatLightText}>
               ({chatMemberNumber})

src/components/LoadingImage/index.tsx

@@ -42,14 +42,14 @@ const LoadingImage = ({
 
   const uploadFileToAmity = useCallback(async () => {
 
-    if (!isFinish ) {
+    if (!isFinish) {
       const file: Amity.File<any>[] = await uploadImageFile(
         source,
         (percent: number) => {
           setProgress(percent);
-          console.log('percent:', percent)
+
         },
-        true
+        false
 
       );
       if (file) {

src/components/MemberActionModal/MemberActionModal.tsx

@@ -0,0 +1,188 @@
+import {
+  Alert,
+  Animated,
+  Modal,
+  Pressable,
+  Text,
+  type TextStyle,
+  TouchableOpacity,
+} from 'react-native';
+import React, {
+  type FC,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import { useStyles } from './styles';
+import { ChannelRepository, createReport } from '@amityco/ts-sdk-react-native';
+import useAuth from './../../hooks/useAuth';
+
+interface IMemberActionModal {
+  isVisible: boolean;
+  setIsVisible: (isVisible: boolean) => void;
+  userId: string;
+  channelId: string;
+  hasModeratorPermission?: boolean;
+  isInModeratorTab?: boolean;
+  isChannelModerator?: boolean;
+  onFinish?:()=> void;
+}
+
+const MemberActionModal: FC<IMemberActionModal> = ({
+  isVisible,
+  setIsVisible,
+  userId,
+  channelId,
+  hasModeratorPermission,
+  isInModeratorTab,
+  isChannelModerator,
+  onFinish
+}) => {
+  const styles = useStyles();
+  const slideAnimation = useRef(new Animated.Value(0)).current;
+  const { client } = useAuth() as { client: { userId: string } };
+  const currentUserId = client.userId ?? '';
+
+  async function addRole() {
+    const didAdd = await ChannelRepository.Moderation.addRole(channelId, 'channel-moderator', [
+      userId
+    ]);
+    if (didAdd) {
+      Alert.alert('Promote to moderator ✅')
+    }
+  }
+
+  async function removeRole() {
+    const didRemove = await ChannelRepository.Moderation.removeRole(channelId, 'channel-moderator', [
+      userId
+    ]);
+
+    if (didRemove) {
+      Alert.alert('Remove user from moderator')
+    }
+  }
+  const actionData = useMemo(
+    () => [
+      {
+        id: 'demote',
+        label: 'Dismiss to member',
+        shouldShow:
+          hasModeratorPermission &&
+          currentUserId !== userId &&
+          isInModeratorTab,
+        callBack: async () => {
+          removeRole()
+          onFinish && onFinish()
+        }
+
+      },
+      {
+        id: 'promote',
+        label: 'Promote to moderator',
+        shouldShow:
+          hasModeratorPermission &&
+          currentUserId !== userId &&
+          !isInModeratorTab && !isChannelModerator,
+        callBack: async () => {
+          addRole();
+          onFinish && onFinish();
+
+        }
+      },
+      {
+        id: 'report',
+        label: 'Report User',
+        shouldShow: currentUserId !== userId,
+        callBack: async () => {
+          const isReport = await createReport('user', userId)
+          if (isReport) {
+            Alert.alert('Report sent ✅')
+            onFinish && onFinish();
+          }
+        }
+      },
+
+    ],
+    [
+      channelId,
+      currentUserId,
+      hasModeratorPermission,
+      isInModeratorTab,
+      userId,
+    ]
+  );
+
+  const closeModal = useCallback(() => {
+    Animated.timing(slideAnimation, {
+      toValue: 0,
+      duration: 300,
+      useNativeDriver: true,
+    }).start(() => setIsVisible(false));
+  }, [setIsVisible, slideAnimation]);
+
+  const onPressAction = useCallback(
+    async ({ callBack }) => {
+      try {
+        await callBack();
+      } catch (error) { }
+      closeModal();
+    },
+    [closeModal]
+  );
+
+  useEffect(() => {
+    if (isVisible) {
+      Animated.timing(slideAnimation, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [isVisible, slideAnimation]);
+
+  const modalStyle = {
+    transform: [
+      {
+        translateY: slideAnimation.interpolate({
+          inputRange: [0, 1],
+          outputRange: [600, 0],
+        }),
+      },
+    ],
+  };
+
+  return (
+    <Modal
+      animationType="fade"
+      transparent={true}
+      visible={isVisible}
+      onRequestClose={closeModal}
+    >
+      <Pressable onPress={closeModal} style={styles.modalContainer}>
+        <Animated.View style={[styles.modalContent, modalStyle]}>
+          {actionData.map((data) => {
+            const warningStyle: TextStyle | null =
+              data.id === 'remove' ? { color: 'red' } : null;
+            if (data.shouldShow) {
+              return (
+                <TouchableOpacity
+                  key={data.id}
+                  onPress={() => onPressAction(data)}
+                  style={styles.modalRow}
+                >
+                  <Text style={[styles.actionText, warningStyle]}>
+                    {data.label}
+                  </Text>
+                </TouchableOpacity>
+              );
+            } else return null;
+          })}
+        </Animated.View>
+      </Pressable>
+    </Modal>
+  );
+};
+
+export default memo(MemberActionModal);