@amityco/react-native-social-uikit 4.0.0-ca3519f.0 → 4.0.0-cfcb02e.0

package/src/screens/CreateLivestream/CreateLivestream.tsx

@@ -16,7 +16,7 @@ import { useStyles } from './styles';
 import useImagePicker from '../../../src/hooks/useImagePicker';
 import { uploadImageFile } from '../../../src/providers/file-provider';
 
-import { StreamRepository, PostRepository } from '@amityco/ts-sdk-react-native';
+import { PostRepository, RoomRepository } from '@amityco/ts-sdk-react-native';
 import BottomSheet, { BottomSheetMethods } from '@devvie/bottom-sheet';
 
 // import {
@@ -55,7 +55,7 @@ const CreateLivestream = ({ navigation, route }) => {
 
   const [title, setTitle] = useState<string>('');
   const [description, setDescription] = useState<string>('');
-  const [stream, setStream] = useState<Amity.Stream | null>(null);
+  const [room, setRoom] = useState<Amity.Room | null>(null);
   const [isLive, setIsLive] = useState<boolean>(false);
   const [timer] = useState<number | null>(null);
 
@@ -141,16 +141,16 @@ const CreateLivestream = ({ navigation, route }) => {
   }, []);
 
   const createStreamPost = useCallback(
-    (newStream: Amity.Stream) => {
+    (newRoom: Amity.Room) => {
       const params = {
         targetId,
         targetType,
-        dataType: 'liveStream' as Amity.PostContentType,
+        dataType: 'room' as Amity.PostContentType,
         data: {
-          text: `${newStream.title}${
-            newStream.description ? `\n\n${newStream.description}` : ''
+          text: `${newRoom.title}${
+            newRoom.description ? `\n\n${newRoom.description}` : ''
           }`,
-          streamId: newStream.streamId,
+          roomId: newRoom.roomId,
         },
       };
 
@@ -168,18 +168,18 @@ const CreateLivestream = ({ navigation, route }) => {
 
       if (imageUri) fileId = await uploadFile(imageUri);
 
-      const { data: newStream } = await StreamRepository.createStream({
+      const { data: newRoom } = await RoomRepository.createRoom({
         title,
         description: description || undefined,
         thumbnailFileId: fileId,
       });
 
-      if (newStream) {
-        const { data: newPost } = await createStreamPost(newStream);
-        setStream(newStream);
+      if (newRoom) {
+        const { data: newPost } = await createStreamPost(newRoom);
+        setRoom(newRoom);
         setPost(newPost);
 
-        streamRef?.current.startPublish(newStream.streamId);
+        streamRef?.current.startPublish(newRoom.roomId);
       }
     } else emptyTitleAlert();
   }, [title, description, createStreamPost, imageUri, uploadFile]);
@@ -193,17 +193,17 @@ const CreateLivestream = ({ navigation, route }) => {
   // };
 
   const onStopStream = useCallback(async () => {
-    if (stream) {
+    if (room) {
       setIsEnding(true);
       try {
-        await StreamRepository.disposeStream(stream.streamId);
+        await RoomRepository.stopRoom(room.roomId);
       } catch (e) {
-        console.log('disposeStream error', e);
+        console.log('stopRoom error', e);
       }
 
       streamRef?.current.stopPublish();
       setIsLive(false);
-      setStream(null);
+      setRoom(null);
       setTitle(undefined);
       setDescription(undefined);
       setTime(0);
@@ -214,7 +214,7 @@ const CreateLivestream = ({ navigation, route }) => {
         postId: post.postId,
       });
     }
-  }, [stream, timer, post, navigation]);
+  }, [room, timer, post, navigation]);
 
   const onSwitchCamera = () => {
     streamRef?.current.switchCamera();

package/src/screens/LivestreamPlayer/index.tsx

@@ -7,14 +7,11 @@ import {
 } from 'react-native';
 import { useStyles } from './styles';
 
-// @ts-ignore
-// import { AmityStreamPlayer } from '@amityco/video-player-react-native';
-
 import LivestreamEndedView from '../../v4/component/LivestreamContent/LivestreamEndedThumbnail';
 import { Animated } from 'react-native';
 import { SvgXml } from 'react-native-svg';
 import { closeIcon, playIcon, stopIcon } from '../../svg/svg-xml-list';
-import { StreamRepository } from '@amityco/ts-sdk-react-native';
+import { RoomRepository } from '@amityco/ts-sdk-react-native';
 
 const LiveStreamPlayer = ({ navigation, route }) => {
   const ref = useRef<any>(null);
@@ -24,9 +21,9 @@ const LiveStreamPlayer = ({ navigation, route }) => {
 
   const [isPlaying, setIsPlaying] = useState(true);
 
-  const { streamId } = route.params;
+  const { roomId } = route.params;
 
-  const [livestream, setLivestream] = useState<Amity.Stream>();
+  const [livestream, setLivestream] = useState<Amity.Room>();
 
   const onClosePlayer = () => {
     navigation.goBack();
@@ -59,15 +56,12 @@ const LiveStreamPlayer = ({ navigation, route }) => {
 
   useEffect(() => {
     const getLivestream = () => {
-      return StreamRepository.getStreamById(
-        streamId,
-        ({ data, loading, error }) => {
-          if (error) console.error('Error fetching livestream', error);
-          if (!loading && data) {
-            setLivestream({ ...data });
-          }
+      return RoomRepository.getRoom(roomId, ({ data, loading, error }) => {
+        if (error) console.error('Error fetching livestream', error);
+        if (!loading && data) {
+          setLivestream({ ...data });
         }
-      );
+      });
     };
 
     const unsubscribe = getLivestream();
@@ -75,7 +69,7 @@ const LiveStreamPlayer = ({ navigation, route }) => {
     return () => {
       unsubscribe();
     };
-  }, [streamId]);
+  }, [roomId]);
 
   return (
     <View style={styles.container}>

package/src/svg/svg-xml-list.ts

@@ -396,7 +396,7 @@ export const editThumbnailIcon = (
 export const livestreamIcon = (
   color: string = '#292B32'
 ) => `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.41406 8.80469L8.02734 8.41797C7.92188 8.3125 7.78125 8.24219 7.64062 8.24219C7.46484 8.24219 7.28906 8.3125 7.18359 8.45312C6.30469 9.47266 5.8125 10.8086 5.8125 12.25C5.8125 13.7266 6.30469 15.0625 7.18359 16.082C7.28906 16.2227 7.46484 16.293 7.64062 16.293C7.78125 16.293 7.92188 16.2227 8.02734 16.1172L8.41406 15.7305C8.51953 15.625 8.58984 15.5195 8.58984 15.3438C8.58984 15.2383 8.55469 15.0977 8.48438 15.0273C7.85156 14.2539 7.5 13.3047 7.5 12.2852C7.5 11.2305 7.85156 10.2812 8.48438 9.50781C8.55469 9.4375 8.58984 9.29688 8.58984 9.19141C8.58984 9.01562 8.51953 8.91016 8.41406 8.80469ZM5.63672 6.0625L5.25 5.67578C5.14453 5.57031 5.00391 5.53516 4.82812 5.53516C4.65234 5.53516 4.51172 5.60547 4.40625 5.71094C2.75391 7.50391 1.875 9.82422 1.875 12.25C1.875 14.7109 2.75391 16.9961 4.40625 18.8242C4.51172 18.9297 4.65234 19.0352 4.82812 19.0352C5.00391 19.0352 5.14453 18.9648 5.25 18.8594L5.63672 18.4727C5.84766 18.2617 5.84766 17.9453 5.63672 17.6992C4.33594 16.2578 3.5625 14.3594 3.5625 12.2852C3.5625 10.1758 4.33594 8.27734 5.63672 6.83594C5.84766 6.58984 5.84766 6.27344 5.63672 6.0625ZM19.5586 5.71094C19.4531 5.60547 19.3125 5.5 19.1367 5.5C18.9609 5.5 18.8203 5.57031 18.75 5.67578L18.3281 6.0625C18.1172 6.27344 18.1172 6.58984 18.3281 6.83594C19.6289 8.27734 20.4023 10.1758 20.4023 12.25C20.4023 14.3594 19.6289 16.2578 18.3281 17.6992C18.1172 17.9453 18.1172 18.2617 18.3281 18.4727L18.75 18.8594C18.8203 18.9648 18.9609 19 19.1367 19C19.3125 19 19.4531 18.9297 19.5586 18.8242C21.2109 16.9961 22.125 14.7109 22.125 12.25C22.125 9.82422 21.2109 7.50391 19.5586 5.71094ZM12 10.2812C10.9102 10.2812 10.0312 11.1953 10.0312 12.25C10.0312 13.3398 10.9102 14.2188 12 14.2188C13.0547 14.2188 13.9688 13.3398 13.9688 12.25C13.9688 11.1953 13.0547 10.2812 12 10.2812ZM15.9375 8.41797L15.5508 8.80469C15.4453 8.91016 15.375 9.01562 15.375 9.19141C15.375 9.29688 15.4102 9.4375 15.4805 9.50781C16.1133 10.2812 16.4648 11.2305 16.4648 12.25C16.4648 13.3047 16.1133 14.2539 15.4805 15.0273C15.4102 15.0977 15.375 15.2383 15.375 15.3438C15.375 15.5195 15.4453 15.625 15.5508 15.7305L15.9375 16.1172C16.043 16.2227 16.1836 16.293 16.3242 16.293C16.5 16.293 16.6758 16.2227 16.7812 16.082C17.6602 15.0625 18.1523 13.7266 18.1523 12.2852C18.1523 10.8086 17.6602 9.47266 16.7812 8.45312C16.6758 8.3125 16.5 8.24219 16.3242 8.24219C16.1836 8.24219 16.043 8.3125 15.9375 8.41797Z" fill=${color}/>
+<path d="M8.41406 8.80469C8.51953 8.91016 8.58984 9.01562 8.58984 9.19141C8.58984 9.29688 8.55469 9.4375 8.48438 9.50781C7.85156 10.2812 7.5 11.2305 7.5 12.2852C7.5 13.3047 7.85156 14.2539 8.48438 15.0273C8.55469 15.0977 8.58984 15.2383 8.58984 15.3438C8.58984 15.5195 8.51953 15.625 8.41406 15.7305L8.02734 16.1172C7.92188 16.2227 7.78125 16.293 7.64062 16.293C7.46484 16.293 7.28906 16.2227 7.18359 16.082C6.30469 15.0625 5.8125 13.7266 5.8125 12.25C5.8125 10.8086 6.30469 9.47266 7.18359 8.45312C7.28906 8.3125 7.46484 8.24219 7.64062 8.24219C7.78125 8.24219 7.92188 8.3125 8.02734 8.41797L8.41406 8.80469ZM5.63672 6.0625C5.84766 6.27344 5.84766 6.58984 5.63672 6.83594C4.33594 8.27734 3.5625 10.1758 3.5625 12.2852C3.5625 14.3594 4.33594 16.2578 5.63672 17.6992C5.84766 17.9453 5.84766 18.2617 5.63672 18.4727L5.25 18.8594C5.14453 18.9648 5.00391 19.0352 4.82812 19.0352C4.65234 19.0352 4.51172 18.9297 4.40625 18.8242C2.75391 16.9961 1.875 14.7109 1.875 12.25C1.875 9.82422 2.75391 7.50391 4.40625 5.71094C4.51172 5.60547 4.65234 5.53516 4.82812 5.53516C5.00391 5.53516 5.14453 5.57031 5.25 5.67578L5.63672 6.0625ZM19.5586 5.71094C21.2109 7.50391 22.125 9.82422 22.125 12.25C22.125 14.7109 21.2109 16.9961 19.5586 18.8242C19.4531 18.9297 19.3125 19 19.1367 19C18.9609 19 18.8203 18.9648 18.75 18.8594L18.3281 18.4727C18.1172 18.2617 18.1172 17.9453 18.3281 17.6992C19.6289 16.2578 20.4023 14.3594 20.4023 12.25C20.4023 10.1758 19.6289 8.27734 18.3281 6.83594C18.1172 6.58984 18.1172 6.27344 18.3281 6.0625L18.75 5.67578C18.8203 5.57031 18.9609 5.5 19.1367 5.5C19.3125 5.5 19.4531 5.60547 19.5586 5.71094ZM12 10.2812C13.0547 10.2812 13.9688 11.1953 13.9688 12.25C13.9688 13.3398 13.0547 14.2188 12 14.2188C10.9102 14.2188 10.0312 13.3398 10.0312 12.25C10.0312 11.1953 10.9102 10.2812 12 10.2812ZM15.9375 8.41797C16.043 8.3125 16.1836 8.24219 16.3242 8.24219C16.5 8.24219 16.6758 8.3125 16.7812 8.45312C17.6602 9.47266 18.1523 10.8086 18.1523 12.2852C18.1523 13.7266 17.6602 15.0625 16.7812 16.082C16.6758 16.2227 16.5 16.293 16.3242 16.293C16.1836 16.293 16.043 16.2227 15.9375 16.1172L15.5508 15.7305C15.4453 15.625 15.375 15.5195 15.375 15.3438C15.375 15.2383 15.4102 15.0977 15.4805 15.0273C16.1133 14.2539 16.4648 13.3047 16.4648 12.25C16.4648 11.2305 16.1133 10.2812 15.4805 9.50781C15.4102 9.4375 15.375 9.29688 15.375 9.19141C15.375 9.01562 15.4453 8.91016 15.5508 8.80469L15.9375 8.41797Z" fill=${color}/>
 </svg>
 `;
 

package/src/types/auth.interface.ts

@@ -9,4 +9,5 @@ export type AuthContextInterface = {
   apiRegion: string;
   authToken?: string;
   fcmToken?: string;
+  isGlobalBan: boolean;
 };

package/src/types/user.interface.ts

@@ -11,4 +11,5 @@ export interface UserInterface {
   userId: string;
   displayName: string;
   avatarFileId: string;
+  avatarCustomUrl?: string;
 }

package/src/util/postTypeChecker.ts

@@ -8,7 +8,7 @@ export const isTextPost = (
 
 export const isStreamPost = (
   post?: Amity.Post | null
-): post is Amity.Post<'liveStream'> => {
+): post is Amity.Post<'room'> => {
   return !!(
     post &&
     post.data &&

package/src/v4/PublicApi/Components/AmityCreatePostMenuComponent/AmityCreatePostMenuComponent.tsx

@@ -1,13 +1,14 @@
 import React, { useCallback, memo } from 'react';
 import { StyleSheet, View } from 'react-native';
-import { ComponentID, ElementID, PageID } from '../../../enum/enumUIKitID';
+import { ComponentID, PageID } from '../../../enum/enumUIKitID';
 import { useAmityComponent, useStoryPermission } from '../../../hook';
 import { useBehaviour } from '../../../providers/BehaviourProvider';
 import { useNavigation } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { RootStackParamList } from '../../../../v4/routes/RouteParamList';
-import ButtonWithIconElement from '../../Elements/ButtonWithIconElement/ButtonWithIconElement';
 import { AmityPostTargetSelectionPageType } from '../../../enum';
+import { livestream, poll, post, story } from '../../../../v4/assets/icons';
+import MenuAction from '../../../../v4/elements/MenuAction';
 
 interface AmityCreatePostMenuComponentProps {
   pageId?: PageID;
@@ -32,6 +33,13 @@ const AmityCreatePostMenuComponent = ({
       backgroundColor: themeStyles.colors.background,
       borderRadius: 12,
     },
+    menu: {
+      gap: 12,
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
   });
 
   const onPressCreatePost = useCallback(
@@ -62,14 +70,14 @@ const AmityCreatePostMenuComponent = ({
           navigation.navigate('PollTargetSelection');
         },
 
-        // [AmityPostTargetSelectionPageType.livestream]: () => {
-        //   if (
-        //     AmityCreatePostMenuComponentBehavior.goToSelectLivestreamPostTargetPage
-        //   ) {
-        //     AmityCreatePostMenuComponentBehavior.goToSelectLivestreamPostTargetPage();
-        //   }
-        //   navigation.navigate('LivestreamPostTargetSelection');
-        // },
+        [AmityPostTargetSelectionPageType.livestream]: () => {
+          if (
+            AmityCreatePostMenuComponentBehavior.goToSelectLivestreamPostTargetPage
+          ) {
+            AmityCreatePostMenuComponentBehavior.goToSelectLivestreamPostTargetPage();
+          }
+          navigation.navigate('LivestreamPostTargetSelection');
+        },
       };
       postTypeHandlers[postType]?.();
     },
@@ -78,36 +86,44 @@ const AmityCreatePostMenuComponent = ({
 
   return (
     <View style={styles.container}>
-      <ButtonWithIconElement
-        pageId={pageId}
-        componentId={componentId}
-        elementId={ElementID.create_post_button}
-        onClick={() => onPressCreatePost(AmityPostTargetSelectionPageType.post)}
+      <MenuAction
+        onPress={() => onPressCreatePost(AmityPostTargetSelectionPageType.post)}
+        style={styles.menu}
+        label="Post"
+        iconProps={{
+          xml: post(),
+        }}
       />
       {hasStoryPermission && (
-        <ButtonWithIconElement
-          pageId={pageId}
-          componentId={componentId}
-          elementId={ElementID.create_story_button}
-          onClick={() =>
+        <MenuAction
+          style={styles.menu}
+          label="Story"
+          iconProps={{
+            xml: story(),
+          }}
+          onPress={() =>
             onPressCreatePost(AmityPostTargetSelectionPageType.story)
           }
         />
       )}
-      <ButtonWithIconElement
-        pageId={pageId}
-        componentId={componentId}
-        elementId={ElementID.create_poll_button}
-        onClick={() => onPressCreatePost(AmityPostTargetSelectionPageType.poll)}
+      <MenuAction
+        style={styles.menu}
+        label="Poll"
+        iconProps={{
+          xml: poll(),
+        }}
+        onPress={() => onPressCreatePost(AmityPostTargetSelectionPageType.poll)}
       />
-      {/* <ButtonWithIconElement
-        pageId={pageId}
-        componentId={componentId}
-        elementId={ElementID.create_livestream_button}
-        onClick={() =>
+      <MenuAction
+        style={styles.menu}
+        label="Livestream"
+        iconProps={{
+          xml: livestream(),
+        }}
+        onPress={() =>
           onPressCreatePost(AmityPostTargetSelectionPageType.livestream)
         }
-      /> */}
+      />
     </View>
   );
 };

package/src/v4/PublicApi/Components/AmityPostCommentComponent/AmityPostCommentComponent.tsx

@@ -15,13 +15,11 @@ import { deleteCommentById } from '../../../../providers/Social/comment-sdk';
 import { ComponentID, PageID } from '../../../enum';
 import { useAmityComponent } from '../../../hook';
 import ContentLoader, { Circle, Rect } from 'react-content-loader/native';
-import uiSlice from '../../../../redux/slices/uiSlice';
 import { isAmityAd } from '../../../hook/useCustomRankingGlobalFeed';
 import CommentAdComponent from '../../../component/CommentAdComponent/CommentAdComponent';
 import { usePaginatorApi } from '../../../hook/usePaginator';
 import { useCommentAdImpression } from '../../../hook/useCommentAdImpression';
 import { useStyles } from './styles';
-import { useUIKitDispatch } from '../../../../redux/store';
 
 export interface IComment {
   commentId: string;
@@ -69,8 +67,6 @@ const AmityPostCommentComponent: FC<AmityPostCommentComponentType> = ({
     componentId,
   });
   const styles = useStyles();
-  const dispatch = useUIKitDispatch();
-  const { showToastMessage } = uiSlice.actions;
   const onNextPageRef = useRef<() => void | null>(null);
   const [commentList, setCommentList] = useState<IComment[]>([]);
   const [isLoading, setIsLoading] = useState(true);
@@ -95,11 +91,7 @@ const AmityPostCommentComponent: FC<AmityPostCommentComponentType> = ({
         referenceType: postType,
         limit: commentListLimit,
       },
-      async ({ error, loading, data, hasNextPage, onNextPage }) => {
-        if (error) {
-          dispatch(showToastMessage({ toastMessage: "Couldn't load comment" }));
-          return;
-        }
+      async ({ loading, data, hasNextPage, onNextPage }) => {
         if (!loading) {
           data && data.length > 0 && (await queryComment(data));
           onNextPageRef.current = hasNextPage ? onNextPage : null;
@@ -113,7 +105,7 @@ const AmityPostCommentComponent: FC<AmityPostCommentComponentType> = ({
       setCommentList([]);
       unsubComment();
     };
-  }, [dispatch, postId, postType, showToastMessage]);
+  }, [postId, postType]);
 
   const queryComment = async (comments: Amity.InternalComment[]) => {
     const formattedCommentList = await Promise.all(
@@ -124,7 +116,8 @@ const AmityPostCommentComponent: FC<AmityPostCommentComponentType> = ({
         formattedUserObject = {
           userId: userObject.data.userId,
           displayName: userObject.data.displayName,
-          avatarFileId: userObject.data.avatarFileId,
+          avatarFileId: userObject.data?.avatarFileId,
+          avatarCustomUrl: userObject.data?.avatarCustomUrl,
         };
 
         return {

package/src/v4/PublicApi/Components/AmityPostCommentComponent/CommentListItem/CommentListItem.tsx

@@ -48,6 +48,9 @@ import { LinkPreview } from '../../../../component/PreviewLink/LinkPreview';
 import AmityReactionListComponent from '../../AmityReactionListComponent/AmityReactionListComponent';
 import uiSlice from '../../../../../redux/slices/uiSlice';
 import { useUIKitDispatch } from '../../../../../redux/store';
+import { useNavigation } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { RootStackParamList } from '../../../../routes/RouteParamList';
 
 export interface IComment {
   commentId: string;
@@ -129,6 +132,8 @@ const CommentListItem = ({
   const [isEditComment, setIsEditComment] = useState<boolean>(false);
   const slideAnimation = useRef(new Animated.Value(0)).current;
   const [isReactionListVisible, setIsReactionListVisible] = useState(false);
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
   useEffect(() => {
     getReplyComments();
@@ -175,6 +180,7 @@ const CommentListItem = ({
             userId: userObject.data.userId,
             displayName: userObject.data.displayName,
             avatarFileId: userObject.data.avatarFileId,
+            avatarCustomUrl: userObject.data?.avatarCustomUrl,
           };
 
           return {
@@ -317,21 +323,41 @@ const CommentListItem = ({
   return (
     <View key={commentId} style={styles.commentWrap}>
       <View style={styles.headerSection}>
-        {user?.avatarFileId ? (
-          <Image
-            style={styles.avatar}
-            source={{
-              uri: `https://api.${apiRegion}.amity.co/api/v3/files/${user?.avatarFileId}/download`,
-            }}
-          />
-        ) : (
-          <View style={styles.avatar}>
-            <SvgXml xml={personXml} width="20" height="16" />
-          </View>
-        )}
+        <TouchableOpacity
+          onPress={() => {
+            user?.userId &&
+              navigation.navigate('UserProfile', {
+                userId: user?.userId || '',
+              });
+          }}
+        >
+          {user?.avatarFileId ? (
+            <Image
+              style={styles.avatar}
+              source={{
+                uri: user?.avatarCustomUrl
+                  ? user?.avatarCustomUrl
+                  : `https://api.${apiRegion}.amity.co/api/v3/files/${user?.avatarFileId}/download`,
+              }}
+            />
+          ) : (
+            <View style={styles.avatar}>
+              <SvgXml xml={personXml} width="20" height="16" />
+            </View>
+          )}
+        </TouchableOpacity>
         <View style={styles.rightSection}>
           <View style={styles.commentBubble}>
-            <Text style={styles.headerText}>{user?.displayName}</Text>
+            <TouchableOpacity
+              onPress={() => {
+                user?.userId &&
+                  navigation.navigate('UserProfile', {
+                    userId: user?.userId || '',
+                  });
+              }}
+            >
+              <Text style={styles.headerText}>{user?.displayName}</Text>
+            </TouchableOpacity>
             {targetType === 'community' && targetId && (
               <View style={{ marginVertical: 6 }}>
                 <ModeratorBadgeElement
@@ -410,7 +436,6 @@ const CommentListItem = ({
                 previewReplyCommentList[previewReplyCommentList.length - 1]
               }
               onDelete={onDelete}
-              onHandleReply={onHandleReply}
             />
           )}
           {isOpenReply && replyCommentList?.length > 0 && (
@@ -421,7 +446,6 @@ const CommentListItem = ({
                   commentId={item.commentId}
                   commentDetail={item}
                   onDelete={onDelete}
-                  onHandleReply={onHandleReply}
                 />
               )}
               keyExtractor={(item) => item.commentId}

package/src/v4/PublicApi/Components/AmityPostCommentComponent/CommentListItem/styles.ts

@@ -91,16 +91,17 @@ export const useStyles = () => {
     rowContainer: {
       flexDirection: 'row',
       alignItems: 'center',
+      gap: 8,
     },
     likedText: {
       color: theme.colors.primary,
-      fontSize: 14,
+      fontSize: 13,
       fontWeight: '600',
       marginLeft: 1,
     },
     btnText: {
       color: theme.colors.baseShade2,
-      fontSize: 14,
+      fontSize: 13,
       fontWeight: '600',
     },
     threeDots: {

package/src/v4/PublicApi/Components/AmityPostCommentComponent/ReplyCommentList/index.tsx

@@ -42,6 +42,9 @@ import AmityReactionListComponent from '../../AmityReactionListComponent/AmityRe
 import RenderTextWithMention from '../../../../component/RenderTextWithMention/RenderTextWithMention';
 import uiSlice from '../../../../../redux/slices/uiSlice';
 import { useUIKitDispatch } from '../../../../../redux/store';
+import { useNavigation } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { RootStackParamList } from '../../../../routes/RouteParamList';
 
 export interface IComment {
   commentId: string;
@@ -65,14 +68,12 @@ export interface IReplyCommentList {
   commentId: string;
   commentDetail: IComment;
   onDelete?: (commentId: string) => void;
-  onHandleReply?: (user: UserInterface, commentId: string) => void;
 }
 
 const ReplyCommentList = ({
   commentDetail,
   onDelete,
   commentId,
-  onHandleReply,
 }: IReplyCommentList) => {
   const {
     data,
@@ -99,7 +100,6 @@ const ReplyCommentList = ({
   const [likeReaction, setLikeReaction] = useState<number>(
     reactions.like ? reactions.like : 0
   );
-
   const { client, apiRegion } = useAuth();
   const [textComment, setTextComment] = useState<string>(data.text);
   const [isVisible, setIsVisible] = useState(false);
@@ -108,6 +108,8 @@ const ReplyCommentList = ({
   const [editCommentModal, setEditCommentModal] = useState<boolean>(false);
   const [isEditComment, setIsEditComment] = useState<boolean>(false);
   const slideAnimation = useRef(new Animated.Value(0)).current;
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
   const openModal = () => {
     setIsVisible(true);
@@ -215,28 +217,44 @@ const ReplyCommentList = ({
     setIsReactionListVisible(true);
   };
 
-  const onPressReply = () => {
-    onHandleReply && onHandleReply(user, commentId);
-  };
-
   return (
     <View key={commentId} style={styles.replyCommentWrap}>
       <View style={styles.replyHeaderSection}>
-        {user?.avatarFileId ? (
-          <Image
-            style={styles.avatar}
-            source={{
-              uri: `https://api.${apiRegion}.amity.co/api/v3/files/${user?.avatarFileId}/download`,
-            }}
-          />
-        ) : (
-          <View style={styles.avatar}>
-            <SvgXml xml={personXml} width="20" height="16" />
-          </View>
-        )}
+        <TouchableOpacity
+          onPress={() =>
+            user?.userId &&
+            navigation.navigate('UserProfile', {
+              userId: user?.userId || '',
+            })
+          }
+        >
+          {user?.avatarFileId ? (
+            <Image
+              style={styles.avatar}
+              source={{
+                uri: user?.avatarCustomUrl
+                  ? user?.avatarCustomUrl
+                  : `https://api.${apiRegion}.amity.co/api/v3/files/${user?.avatarFileId}/download`,
+              }}
+            />
+          ) : (
+            <View style={styles.avatar}>
+              <SvgXml xml={personXml} width="20" height="16" />
+            </View>
+          )}
+        </TouchableOpacity>
         <View style={styles.rightSection}>
           <View style={styles.commentBubble}>
-            <Text style={styles.headerText}>{user?.displayName}</Text>
+            <TouchableOpacity
+              onPress={() =>
+                user?.userId &&
+                navigation.navigate('UserProfile', {
+                  userId: user?.userId || '',
+                })
+              }
+            >
+              <Text style={styles.headerText}>{user?.displayName}</Text>
+            </TouchableOpacity>
             {targetType === 'community' && targetId && (
               <View style={{ marginVertical: 6 }}>
                 <ModeratorBadgeElement
@@ -276,9 +294,6 @@ const ReplyCommentList = ({
                   {!isLike ? 'Like' : 'Liked'}
                 </Text>
               </TouchableOpacity>
-              <TouchableOpacity onPress={onPressReply} style={styles.likeBtn}>
-                <Text style={styles.btnText}>Reply</Text>
-              </TouchableOpacity>
               <TouchableOpacity onPress={openModal} style={styles.threeDots}>
                 <SvgXml
                   xml={threeDots(theme.colors.base)}

package/src/v4/PublicApi/Components/AmityPostCommentComponent/ReplyCommentList/styles.ts

@@ -85,8 +85,8 @@ export const useStyles = () => {
     },
     likeBtn: {
       flexDirection: 'row',
-      paddingRight: 6,
-      paddingTop: 4,
+      marginRight: 8,
+      alignItems: 'center',
     },
     actionSection: {
       flex: 1,
@@ -97,18 +97,15 @@ export const useStyles = () => {
     },
     likedText: {
       color: theme.colors.primary,
-      fontSize: 15,
+      fontSize: 13,
       fontWeight: '600',
-      marginHorizontal: 4,
     },
     btnText: {
       color: theme.colors.baseShade2,
-      fontSize: 15,
+      fontSize: 13,
       fontWeight: '600',
-      marginHorizontal: 4,
     },
     threeDots: {
-      padding: 5,
       opacity: 0.5,
     },
     modalContainer: {
@@ -158,6 +155,7 @@ export const useStyles = () => {
     rowContainer: {
       flexDirection: 'row',
       alignItems: 'center',
+      gap: 8,
     },
   });