@amityco/react-native-social-uikit 4.0.0-df1703f8.0 → 4.0.0-e0eb8745.0

package/src/social/features/post/Composer/PostComposer.tsx

@@ -22,8 +22,9 @@ import {
 import {
   TSearchItem,
   useAmityPage,
-  useIsCommunityModerator,
   useRequestPermission,
+  useUser,
+  isModerator,
 } from '../../../hooks';
 import { useStyles } from './styles';
 import {
@@ -55,11 +56,19 @@ import LoadingImage from '../../../components/LoadingImage';
 import LoadingVideo from '../../../components/LoadingVideo';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { RootStackParamList } from '../../../../core/routes/RouteParamList';
-import { PostRepository, UserRepository } from '@amityco/ts-sdk-react-native';
+import {
+  CommunityRepository,
+  PostRepository,
+  UserRepository,
+} from '@amityco/ts-sdk-react-native';
 import { useFile } from '../../../hooks';
 import useMention from '../../../hooks/useMention';
 import { getPostErrorMessage } from '../../../utils/errors';
-import { MAXIMUM_POST_CHARACTERS } from '../../../../core/constants';
+import {
+  ALERT,
+  MAX_MENTION_USERS,
+  MAXIMUM_POST_CHARACTERS,
+} from '../../../../core/constants';
 import { replaceTriggerValues } from 'react-native-controlled-mentions';
 import { useUIKitDispatch } from '../../../../core/stores/store';
 import { useBehaviour } from '../../../providers/BehaviourProvider';
@@ -87,14 +96,13 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
   const navigation =
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
   const { isKeyboardShowing } = useKeyboardStatus();
+  const [attachmentBarHeight, setAttachmentBarHeight] = useState(0);
   const { client } = useAuth();
   const dispatch = useUIKitDispatch();
   const { addPostToGlobalFeed, updateByPostId } = globalfeedSlice.actions;
 
-  const { isCommunityModerator } = useIsCommunityModerator({
-    communityId: community?.communityId,
-    userId: (client as Amity.Client)?.userId,
-  });
+  const currentUser = useUser((client as Amity.Client)?.userId || '');
+  const isCommunityModerator = isModerator(currentUser?.roles);
   const { showToastMessage, hideToastMessage } = uiSlice.actions;
   const [inputMessage, setInputMessage] = useState<string>(
     (post?.data as Amity.ContentDataText)?.text ?? ''
@@ -112,10 +120,31 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
   const [hasChangedAttachment, setHasChangedAttachment] = useState(false);
   const [imageErrors, setImageErrors] = useState<Set<string>>(new Set());
   const [videoErrors, setVideoErrors] = useState<Set<string>>(new Set());
-  const privateCommunityId = !community?.isPublic && community?.communityId;
+
+  // When community is not provided via props (e.g. PostTypeChoiceModal only
+  // dispatches targetId/targetType), fetch it from targetId.
+  const [fetchedCommunity, setFetchedCommunity] =
+    useState<Amity.Community | null>(null);
+  useEffect(() => {
+    let unsub: (() => void) | undefined;
+    if (!community && targetType === 'community' && targetId) {
+      unsub =
+        CommunityRepository.getCommunity(
+          targetId,
+          ({ data, loading, error }) => {
+            if (!loading && !error && data) setFetchedCommunity(data);
+          }
+        ) ?? undefined;
+    }
+    return () => unsub?.();
+  }, [community, targetId, targetType]);
+
+  const effectiveCommunity = community ?? fetchedCommunity;
+  const privateCommunityId =
+    !effectiveCommunity?.isPublic && effectiveCommunity?.communityId;
   const title = isEditMode
     ? 'Edit Post'
-    : community?.displayName ?? 'My Timeline';
+    : effectiveCommunity?.displayName ?? 'My Timeline';
   const isInputValid =
     !isUploading &&
     imageErrors.size === 0 &&
@@ -136,6 +165,14 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
     setMentionPosition: (position: IMentionPosition) => {
       setMentionsPosition((prev) => [...prev, position]);
     },
+    isMentionLimitReached: mentionUsers.length >= MAX_MENTION_USERS,
+    onMentionLimitReached: () => {
+      Alert.alert(
+        ALERT.MENTION.TOO_MANY.TITLE,
+        ALERT.MENTION.TOO_MANY.MESSAGE.replace('%s', String(MAX_MENTION_USERS)),
+        [{ text: ALERT.ACTION.OK }]
+      );
+    },
   });
 
   const checkIsEditValid = () => {
@@ -392,8 +429,9 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
       dispatch(hideToastMessage());
       if (
         targetType === 'community' &&
-        (community?.postSetting === 'ADMIN_REVIEW_POST_REQUIRED' ||
-          (community as Record<string, any>)?.needApprovalOnPostCreation) &&
+        (effectiveCommunity?.postSetting === 'ADMIN_REVIEW_POST_REQUIRED' ||
+          (effectiveCommunity as Record<string, any>)
+            ?.needApprovalOnPostCreation) &&
         !isCommunityModerator
       ) {
         onPressClose();
@@ -429,7 +467,7 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
   }, [
     addPostToGlobalFeed,
     chosenMediaType,
-    community,
+    effectiveCommunity,
     deletedPostIds,
     dispatch,
     displayImages,
@@ -723,6 +761,7 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
           onPressImage={onPressImage}
           onPressVideo={onPressVideo}
           chosenMediaType={chosenMediaType}
+          onHeightChange={setAttachmentBarHeight}
         />
       );
     }
@@ -732,6 +771,7 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
         onPressImage={onPressImage}
         onPressVideo={onPressVideo}
         chosenMediaType={chosenMediaType}
+        onHeightChange={setAttachmentBarHeight}
       />
     );
   }, [
@@ -847,17 +887,9 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
             )}
           </View>
         </ScrollView>
-        {renderSuggestions({
-          type: 'post',
-          bottom: isEditMode
-            ? 0
-            : shouldShowDetailAttachment
-            ? 220
-            : isKeyboardShowing
-            ? 60
-            : 80,
-        })}
+        {renderSuggestions({ type: 'post' })}
         <View
+          style={{ zIndex: 200, minHeight: attachmentBarHeight }}
           onTouchStart={() => {
             tEvents = [];
           }}

package/src/social/features/post/Detail/index.tsx

@@ -39,14 +39,11 @@ import AmityPostCommentComponent from '../../comment/components/PostComment';
 import { closeIcon } from '../../../../core/assets/icons/xml';
 import { SvgXml } from 'react-native-svg';
 import { IMentionPosition } from '../../../../core/types';
-import uiSlice from '../../../../core/stores/slices/uiSlice';
 import NetInfo from '@react-native-community/netinfo';
 import { useToast } from '../../../../core/stores/slices/toastSlice';
 import MyAvatar from '../../../components/MyAvatar/MyAvatar';
-import {
-  comment_contains_inapproproate_word,
-  text_contain_blocked_word,
-} from '../../../../core/constants';
+import { MAX_MENTION_USERS } from '../../../../core/constants';
+import useAuth from '../../../../core/hooks/useAuth';
 
 import { SafeAreaView } from 'react-native-safe-area-context';
 import ErrorComponent from '../../../components/ErrorComponent/ErrorComponent';
@@ -59,7 +56,6 @@ import {
   createComment,
   createReplyComment,
 } from '../../../../core/legacy/comment';
-import { useUIKitDispatch } from '../../../../core/stores/store';
 
 type AmityPostDetailPageType = {
   postId: Amity.Post['postId'];
@@ -77,14 +73,16 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
   isDeleted,
 }) => {
   const pageId = PageID.post_detail_page;
-  const dispatch = useUIKitDispatch();
   const componentId = ComponentID.WildCardComponent;
+  // Web parity (CommentTray.canShowComposer): visitors never see the
+  // composer; comment rows stay visible and their actions toast on tap.
+  const { isVisitorOrBot } = useAuth();
   const disabledInteraction = false;
   const navigation =
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
   const { isExcluded, themeStyles, accessibilityId } = useAmityPage({ pageId });
   const styles = useStyles(themeStyles);
-  const { showToast } = useToast();
+  const { showToast, showCommentErrorToast } = useToast();
   const [postData, setPostData] = useState<Amity.Post<any>>(null);
   const [loading, setLoading] = useState<boolean>(true);
 
@@ -95,24 +93,41 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
   const [mentionsPosition, setMentionsPosition] = useState<IMentionPosition[]>(
     []
   );
+  const [inputBarHeight, setInputBarHeight] = useState(0);
 
   const [showLivestreamEndPopup, setShowLivestreamEndPopup] = useState<boolean>(
     showEndPopup || false
   );
 
+  // Restrict @mention list to community members when the post belongs to a
+  // private community. postData.targetCommunity is populated after the post loads.
+  const privateCommunityId =
+    postData?.targetType === 'community' && !postData?.targetCommunity?.isPublic
+      ? postData?.targetId
+      : undefined;
+
   const { renderInput, renderSuggestions } = useMention({
     value: inputMessage,
     onChange: setInputMessage,
+    communityId: privateCommunityId,
     setMentionUsers: (user: TSearchItem) => {
-      setMentionNames((prev) => [...prev, user]);
+      setMentionNames((prev) => {
+        if (prev.length >= MAX_MENTION_USERS) {
+          Alert.alert(
+            'Too many users mentioned',
+            'You can only mention up to 30 users per post.',
+            [{ text: 'OK' }]
+          );
+          return prev;
+        }
+        return [...prev, user];
+      });
     },
     setMentionPosition: (position: IMentionPosition) => {
       setMentionsPosition((prev) => [...prev, position]);
     },
   });
 
-  const { showToastMessage } = uiSlice.actions;
-
   useEffect(() => {
     const unsubscribe = NetInfo.addEventListener((state) => {
       if (!state.isConnected) {
@@ -156,14 +171,22 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
   }, [postId]);
 
   useEffect(() => {
-    const checkMentionNames = mentionNames.filter((item) => {
-      return inputMessage.includes(item.displayName);
-    });
-    const checkMentionPosition = mentionsPosition.filter((item) => {
-      return inputMessage.includes(item.displayName as string);
-    });
-    setMentionNames(checkMentionNames);
-    setMentionsPosition(checkMentionPosition);
+    // Parse active mention user IDs directly from the controlled-mentions
+    // value format: {@}[DisplayName](userId)
+    // Using displayName.includes() is unreliable — the same name can appear as
+    // plain text, and deletions may not remove the entry correctly.
+    const mentionTokenRegex = /\{@\}\[([^\]]*)\]\(([^)]*)\)/g;
+    const activeUserIds = new Set<string>();
+    let match: RegExpExecArray | null;
+    while ((match = mentionTokenRegex.exec(inputMessage)) !== null) {
+      activeUserIds.add(match[2]); // userId is capture group 2
+    }
+    setMentionNames((prev) =>
+      prev.filter((item) => activeUserIds.has(item.id))
+    );
+    setMentionsPosition((prev) =>
+      prev.filter((item) => activeUserIds.has(item.userId))
+    );
   }, [inputMessage]);
 
   const onPressBack = useCallback(() => {
@@ -193,8 +216,15 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
     if (inputMessage.trim() === '') {
       return;
     }
-    setInputMessage('');
-    Keyboard.dismiss();
+    const uniqueMentionIds = [...new Set(mentionNames.map((item) => item.id))];
+    if (uniqueMentionIds.length > MAX_MENTION_USERS) {
+      Alert.alert(
+        'Too many users mentioned',
+        'You can only mention up to 30 users per post.',
+        [{ text: 'OK' }]
+      );
+      return;
+    }
     const comment = replaceTriggerValues(
       inputMessage,
       ({ name }) => `@${name}`
@@ -205,41 +235,30 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
           comment,
           postId,
           replyCommentId,
-          mentionNames?.map((item) => item.id),
+          uniqueMentionIds,
           mentionsPosition,
           'post'
         );
       } catch (error) {
-        if (error.message.includes(text_contain_blocked_word)) {
-          dispatch(
-            showToastMessage({
-              toastMessage: comment_contains_inapproproate_word,
-            })
-          );
-          return;
-        }
+        showCommentErrorToast(error);
+        return;
       }
     } else {
       try {
         await createComment(
           comment,
           postId,
-          mentionNames?.map((item) => item.id),
+          uniqueMentionIds,
           mentionsPosition,
           'post'
         );
       } catch (error) {
-        if (error.message.includes(text_contain_blocked_word)) {
-          dispatch(
-            showToastMessage({
-              toastMessage: comment_contains_inapproproate_word,
-            })
-          );
-          return;
-        }
+        showCommentErrorToast(error);
+        return;
       }
     }
     setInputMessage('');
+    Keyboard.dismiss();
     setMentionNames([]);
     setMentionsPosition([]);
     onCloseReply();
@@ -248,8 +267,11 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
   const renderFooterComponent = () => {
     return (
       <View style={styles.commentListFooter}>
-        {renderSuggestions({ type: 'comment' })}
-        <View>
+        {renderSuggestions({
+          type: 'comment',
+          bottom: inputBarHeight,
+        })}
+        <View onLayout={(e) => setInputBarHeight(e.nativeEvent.layout.height)}>
           {replyUserName.length > 0 && (
             <View style={styles.replyLabelWrap}>
               <Text style={styles.replyLabel}>
@@ -267,15 +289,16 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
               </TouchableOpacity>
             </View>
           )}
-          {!disabledInteraction && (
+          {!disabledInteraction && !isVisitorOrBot && (
             <View style={styles.InputWrap}>
               <MyAvatar style={styles.myAvatar} />
               <View style={styles.inputContainer}>
                 {renderInput({
                   multiline: true,
+                  scrollEnabled: true,
                   placeholder: 'Say something nice...',
                   placeholderTextColor: themeStyles.colors.baseShade3,
-                  style: styles.input,
+                  style: [styles.input, { lineHeight: 20 }],
                 })}
               </View>
 
@@ -379,7 +402,7 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
                 postData?.targetType === 'community' && postData?.targetId
               }
               postType="post"
-              disabledInteraction={false}
+              disabledInteraction={disabledInteraction}
               ListHeaderComponent={
                 postData && (
                   <AmityPostContentComponent

package/src/social/features/post/Detail/styles.ts

@@ -94,6 +94,7 @@ export const useStyles = (theme: MyMD3Theme) => {
       paddingHorizontal: Platform.OS === 'android' ? 6 : 12,
       backgroundColor: theme.colors.baseShade4,
       borderRadius: 20,
+      maxHeight: 5 * 20 + (Platform.OS === 'android' ? 2 * 2 : 10 * 2),
     },
     mentionText: {
       color: theme.colors.primary,

package/src/social/features/post/TargetSelection/TargetSelection.tsx

@@ -8,6 +8,7 @@ import TargetSelectionPage, {
 
 import { useNavigation } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { serializeCommunity } from '../../../utils';
 
 const AmityPostTargetSelectionPage = ({
   postType,
@@ -29,14 +30,14 @@ const AmityPostTargetSelectionPage = ({
     if (postType === AmityPostTargetSelectionPageType.post) {
       if (AmityPostTargetSelectionPageBehavior.goToPostComposerPage) {
         return AmityPostTargetSelectionPageBehavior.goToPostComposerPage({
-          community,
+          community: serializeCommunity(community),
           targetId,
           targetType,
         });
       }
 
       return navigation.navigate('CreatePost', {
-        community,
+        community: serializeCommunity(community),
         targetType,
         targetId,
       });

package/src/social/features/post/components/Content/Content.tsx

@@ -18,9 +18,12 @@ import { IMentionPosition } from '../../../../../core/types';
 import { RootStackParamList } from '../../../../../core/routes/RouteParamList';
 import { ComponentID, ElementID, PageID } from '../../../../enums';
 import AvatarElement from '../../../../elements/CommonElements/AvatarElement';
-import { useAmityComponent, useIsCommunityModerator } from '../../../../hooks';
 import ModeratorBadgeElement from '../../../../elements/ModeratorBadgeElement/ModeratorBadgeElement';
+import { BrandBadge } from '../../../../elements/BrandBadge';
 import AmityPostEngagementActionsComponent from '../EngagementActions';
+
+import { useAmityComponent, useUser, isModerator } from '../../../../hooks';
+
 import {
   AmityPostCategory,
   AmityPostContentComponentStyleEnum,
@@ -32,6 +35,7 @@ import { PostMenu } from '../../../../components/PostMenu';
 import PinBadge from '../../../../elements/PinBadge';
 import AnnouncementBadge from '../../../../elements/AnnouncementBadge';
 import { Typography } from '../../../../../core/components/Typography/Typography';
+import useAuth from '../../../../../core/hooks/useAuth';
 
 type AmityPostContentComponentProps = {
   post: Amity.Post;
@@ -71,6 +75,7 @@ const AmityPostContentComponent: FC<AmityPostContentComponentProps> = ({
     componentId: componentId,
   });
   const styles = useStyles(themeStyles);
+  const { isVisitorOrBot } = useAuth();
   const [textPost, setTextPost] = useState<string>('');
   const [communityData, setCommunityData] = useState<Amity.Community>(null);
   const navigation =
@@ -94,10 +99,8 @@ const AmityPostContentComponent: FC<AmityPostContentComponentProps> = ({
   } = post ?? {};
   const mentionPosition = metadata?.mentioned;
 
-  const { isCommunityModerator } = useIsCommunityModerator({
-    communityId: targetType === 'community' && targetId,
-    userId: creator?.userId,
-  });
+  const creatorUser = useUser(creator?.userId || '');
+  const isCommunityModerator = isModerator(creatorUser?.roles);
 
   useEffect(() => {
     if (mentionPosition) {
@@ -178,20 +181,46 @@ const AmityPostContentComponent: FC<AmityPostContentComponentProps> = ({
       >
         <Pressable style={styles.headerSection} onPress={onPressPost}>
           <View style={styles.user}>
-            <AvatarElement
-              style={styles.avatar as ImageStyle}
-              avatarId={creator?.avatarFileId}
-              pageID={pageId}
-              elementID={ElementID.WildCardElement}
-              componentID={componentId}
-              avatarCustomUrl={creator?.avatarCustomUrl}
-            />
+            {creator?.userId ? (
+              <TouchableOpacity
+                onPress={(e) => {
+                  e.stopPropagation();
+                  handleDisplayNamePress();
+                }}
+              >
+                <AvatarElement
+                  style={styles.avatar as ImageStyle}
+                  avatarId={creator?.avatarFileId}
+                  pageID={pageId}
+                  elementID={ElementID.WildCardElement}
+                  componentID={componentId}
+                  avatarCustomUrl={creator?.avatarCustomUrl}
+                  targetType="user"
+                  displayName={creator?.displayName}
+                />
+              </TouchableOpacity>
+            ) : (
+              <AvatarElement
+                style={styles.avatar as ImageStyle}
+                avatarId={creator?.avatarFileId}
+                pageID={pageId}
+                elementID={ElementID.WildCardElement}
+                componentID={componentId}
+                avatarCustomUrl={creator?.avatarCustomUrl}
+                targetType="user"
+                displayName={creator?.displayName}
+              />
+            )}
 
             <View style={styles.fillSpace}>
               <View style={styles.headerRow}>
                 <TouchableOpacity
                   style={
-                    targetType === 'community' ? styles.headerTextContainer : {}
+                    targetType === 'community' &&
+                    isCommunityNameShown &&
+                    !!communityData?.displayName
+                      ? styles.headerTextContainer // global feed: cap at 40% to leave room for community name
+                      : styles.headerTextContainerUser // community feed: fill available width
                   }
                   onPress={handleDisplayNamePress}
                 >
@@ -203,6 +232,14 @@ const AmityPostContentComponent: FC<AmityPostContentComponentProps> = ({
                     {creator?.displayName}
                   </Typography.BodyBold>
                 </TouchableOpacity>
+                {creator?.isBrand && (
+                  <BrandBadge
+                    width={20}
+                    height={20}
+                    accessible={true}
+                    accessibilityLabel="Brand verified"
+                  />
+                )}
                 {communityData?.displayName && isCommunityNameShown && (
                   <View style={styles.communityNameContainer}>
                     <SvgXml
@@ -257,10 +294,11 @@ const AmityPostContentComponent: FC<AmityPostContentComponentProps> = ({
             category === AmityPostCategory.PIN_AND_ANNOUNCEMENT) && (
             <PinBadge componentId={ComponentID.post_content} />
           )}
-          {AmityPostContentComponentStyle ===
-            AmityPostContentComponentStyleEnum.feed && (
-            <PostMenu post={post} pageId={pageId} componentId={componentId} />
-          )}
+          {!isVisitorOrBot &&
+            AmityPostContentComponentStyle ===
+              AmityPostContentComponentStyleEnum.feed && (
+              <PostMenu post={post} pageId={pageId} componentId={componentId} />
+            )}
         </Pressable>
         <View>
           <View style={styles.bodySection}>

package/src/social/features/post/components/Content/styles.ts

@@ -26,7 +26,10 @@ export const useStyles = (theme: MyMD3Theme) => {
       flex: 1,
     },
     headerTextContainer: {
-      maxWidth: '60%',
+      maxWidth: '40%',
+    },
+    headerTextContainerUser: {
+      flexShrink: 1,
     },
     headerText: {
       color: theme.colors.base,
@@ -211,7 +214,7 @@ export const useStyles = (theme: MyMD3Theme) => {
     },
 
     timeRow: {
-      marginTop: 4,
+      marginTop: 2,
       flexDirection: 'row',
       alignItems: 'center',
     },