@amityco/react-native-social-uikit 4.0.0-dc7783d.0 → 4.0.0-e24bae8.0

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

@@ -28,107 +28,107 @@ const AmityCommunityProfileTabComponent: FC<
   currentTab,
   onTabChange,
 }) => {
-    const elementId = ElementID.community_profile_tab;
+  const elementId = ElementID.community_profile_tab;
 
-    const { themeStyles, accessibilityId } = useAmityElement({
-      pageId,
-      componentId,
-      elementId,
-    });
+  const { themeStyles, accessibilityId } = useAmityElement({
+    pageId,
+    componentId,
+    elementId,
+  });
 
-    const styles = StyleSheet.create({
-      container: {
-        backgroundColor: themeStyles?.colors.background,
-        flexDirection: 'row',
-        width: '100%',
-        paddingHorizontal: 16,
-        justifyContent: 'space-between',
-        borderBottomColor: themeStyles?.colors.baseShade4,
-        borderBottomWidth: 1,
-      },
-    });
+  const styles = StyleSheet.create({
+    container: {
+      backgroundColor: themeStyles?.colors.background,
+      flexDirection: 'row',
+      width: '100%',
+      paddingHorizontal: 16,
+      justifyContent: 'space-between',
+      borderBottomColor: themeStyles?.colors.baseShade4,
+      borderBottomWidth: 1,
+    },
+  });
 
-    const getActiveColor = useCallback(
-      (isActive: boolean) => {
-        return isActive
-          ? themeStyles?.colors.base
-          : themeStyles?.colors.baseShade2;
-      },
-      [themeStyles]
-    );
+  const getActiveColor = useCallback(
+    (isActive: boolean) => {
+      return isActive
+        ? themeStyles?.colors.base
+        : themeStyles?.colors.baseShade2;
+    },
+    [themeStyles]
+  );
 
-    return (
-      <View
-        style={styles.container}
-        testID={accessibilityId}
-        accessibilityLabel={accessibilityId}
+  return (
+    <View
+      style={styles.container}
+      testID={accessibilityId}
+      accessibilityLabel={accessibilityId}
+    >
+      <Pressable
+        onPress={() => onTabChange(CommunityProfileTab.community_feed)}
       >
-        <Pressable
-          onPress={() => onTabChange(CommunityProfileTab.community_feed)}
-        >
-          <IconTab
-            themeStyles={themeStyles}
-            icon={
-              <SvgXml
-                xml={feed(
-                  getActiveColor(
-                    currentTab === CommunityProfileTab.community_feed
-                  )
-                )}
-              />
-            }
-            isActive={currentTab === CommunityProfileTab.community_feed}
-          />
-        </Pressable>
-        <Pressable onPress={() => onTabChange(CommunityProfileTab.community_pin)}>
-          <IconTab
-            themeStyles={themeStyles}
-            icon={
-              <SvgXml
-                xml={pin(
-                  getActiveColor(currentTab === CommunityProfileTab.community_pin)
-                )}
-              />
-            }
-            isActive={currentTab === CommunityProfileTab.community_pin}
-          />
-        </Pressable>
-        <Pressable
-          onPress={() => onTabChange(CommunityProfileTab.community_image_feed)}
-        >
-          <IconTab
-            themeStyles={themeStyles}
-            icon={
-              <SvgXml
-                xml={image(
-                  getActiveColor(
-                    currentTab === CommunityProfileTab.community_image_feed
-                  )
-                )}
-              />
-            }
-            isActive={currentTab === CommunityProfileTab.community_image_feed}
-          />
-        </Pressable>
-        <Pressable
-          onPress={() => onTabChange(CommunityProfileTab.community_video_feed)}
-        >
-          <IconTab
-            themeStyles={themeStyles}
-            icon={
-              <SvgXml
-                xml={video(
-                  getActiveColor(
-                    currentTab === CommunityProfileTab.community_video_feed
-                  )
-                )}
-              />
-            }
-            isActive={currentTab === CommunityProfileTab.community_video_feed}
-          />
-        </Pressable>
-      </View>
-    );
-  };
+        <IconTab
+          themeStyles={themeStyles}
+          icon={
+            <SvgXml
+              xml={feed(
+                getActiveColor(
+                  currentTab === CommunityProfileTab.community_feed
+                )
+              )}
+            />
+          }
+          isActive={currentTab === CommunityProfileTab.community_feed}
+        />
+      </Pressable>
+      <Pressable onPress={() => onTabChange(CommunityProfileTab.community_pin)}>
+        <IconTab
+          themeStyles={themeStyles}
+          icon={
+            <SvgXml
+              xml={pin(
+                getActiveColor(currentTab === CommunityProfileTab.community_pin)
+              )}
+            />
+          }
+          isActive={currentTab === CommunityProfileTab.community_pin}
+        />
+      </Pressable>
+      <Pressable
+        onPress={() => onTabChange(CommunityProfileTab.community_image_feed)}
+      >
+        <IconTab
+          themeStyles={themeStyles}
+          icon={
+            <SvgXml
+              xml={image(
+                getActiveColor(
+                  currentTab === CommunityProfileTab.community_image_feed
+                )
+              )}
+            />
+          }
+          isActive={currentTab === CommunityProfileTab.community_image_feed}
+        />
+      </Pressable>
+      <Pressable
+        onPress={() => onTabChange(CommunityProfileTab.community_video_feed)}
+      >
+        <IconTab
+          themeStyles={themeStyles}
+          icon={
+            <SvgXml
+              xml={video(
+                getActiveColor(
+                  currentTab === CommunityProfileTab.community_video_feed
+                )
+              )}
+            />
+          }
+          isActive={currentTab === CommunityProfileTab.community_video_feed}
+        />
+      </Pressable>
+    </View>
+  );
+};
 
 export default memo(AmityCommunityProfileTabComponent);

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/AmityGlobalFeedComponent/AmityGlobalFeedComponent.tsx

@@ -1,5 +1,5 @@
 import React, { FC, memo, useCallback, useRef, useState } from 'react';
-import { FlatList } from 'react-native';
+import { FlatList, View } from 'react-native';
 
 import { RefreshControl } from 'react-native';
 import AmityPostContentComponent from '../AmityPostContentComponent/AmityPostContentComponent';
@@ -20,6 +20,7 @@ import Divider from '../../../component/Divider';
 type AmityGlobalFeedComponentType = {
   pageId?: PageID;
   isShowStoryTab?: boolean;
+  GlobalFeedHeaderComponent?: React.ReactElement;
 };
 
 export const globalFeedPageLimit = 20;
@@ -27,6 +28,7 @@ export const globalFeedPageLimit = 20;
 const AmityGlobalFeedComponent: FC<AmityGlobalFeedComponentType> = ({
   pageId,
   isShowStoryTab = true,
+  GlobalFeedHeaderComponent,
 }) => {
   const { itemWithAds, refresh, loading, onNextPage } =
     useCustomRankingGlobalFeed();
@@ -100,12 +102,15 @@ const AmityGlobalFeedComponent: FC<AmityGlobalFeedComponentType> = ({
       }
       keyboardShouldPersistTaps="handled"
       ListHeaderComponent={
-        !refreshing &&
-        !loading &&
-        isShowStoryTab && (
-          <AmityStoryTabComponent
-            type={AmityStoryTabComponentEnum.globalFeed}
-          />
+        !refreshing && !loading && isShowStoryTab ? (
+          <View>
+            {GlobalFeedHeaderComponent}
+            <AmityStoryTabComponent
+              type={AmityStoryTabComponentEnum.globalFeed}
+            />
+          </View>
+        ) : (
+          GlobalFeedHeaderComponent
         )
       }
       viewabilityConfig={{ viewAreaCoveragePercentThreshold: 60 }}

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)}