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

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

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

@@ -34,7 +34,7 @@ import AnnouncementBadge from '../../../../v4/elements/AnnouncementBadge';
 import { Typography } from '../../../../v4/component/Typography/Typography';
 
 type AmityPostContentComponentProps = {
-  post: Amity.Post & { structureType?: string };
+  post: Amity.Post;
   pageId?: PageID;
   AmityPostContentComponentStyle?: AmityPostContentComponentStyleEnum;
   isCommunityNameShown?: boolean;
@@ -158,8 +158,6 @@ const AmityPostContentComponent: FC<AmityPostContentComponentProps> = ({
     });
   };
 
-  if (post?.structureType === 'liveStream') return null;
-
   return (
     <View>
       {(category === AmityPostCategory.ANNOUNCEMENT ||
@@ -182,6 +180,7 @@ const AmityPostContentComponent: FC<AmityPostContentComponentProps> = ({
               pageID={pageId}
               elementID={ElementID.WildCardElement}
               componentID={componentId}
+              avatarCustomUrl={creator?.avatarCustomUrl}
             />
 
             <View style={styles.fillSpace}>

package/src/v4/PublicApi/Components/AmityPostEngagementActionsComponent/Components/DetailStyle.tsx

@@ -46,7 +46,7 @@ const DetailStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
         );
         setPostData(data);
         setTotalReactions(data.reactionsCount);
-        setIsLike(data.myReactions?.length > 0);
+        setIsLike(data?.myReactions?.length > 0);
       }
     });
     return () => {

package/src/v4/PublicApi/Components/AmityPostEngagementActionsComponent/Components/FeedStyle.tsx

@@ -54,7 +54,7 @@ const FeedStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
       if (!error && !loading) {
         setPostData(data);
         setTotalReactions(data.reactionsCount);
-        setIsLike(data.myReactions.length > 0);
+        setIsLike(data.myReactions?.length > 0);
       }
     });
     return () => unsubscribeRef?.current && unsubscribeRef?.current();

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

@@ -74,10 +74,10 @@ const AmityReactionListComponent: FC<AmityReactionListComponentType> = ({
         selectedReactionIndex === 0
           ? allReactionList
           : selectedReactionIndex === 1
-            ? likeReactionList
-            : selectedReactionIndex === 2
-              ? loveReactionList
-              : null;
+          ? likeReactionList
+          : selectedReactionIndex === 2
+          ? loveReactionList
+          : null;
       if (currentUsers?.length > 0) {
         const userList = currentUsers.map((item) => item.userId);
         try {
@@ -95,7 +95,7 @@ const AmityReactionListComponent: FC<AmityReactionListComponentType> = ({
       }
     })();
 
-    return () => { };
+    return () => {};
   }, [
     allReactionList,
     likeReactionList,
@@ -231,10 +231,10 @@ const AmityReactionListComponent: FC<AmityReactionListComponentType> = ({
         {loading
           ? renderContentLoading()
           : hasError
-            ? errorContent()
-            : reactors
-              ? renderReactionList()
-              : null}
+          ? errorContent()
+          : reactors
+          ? renderReactionList()
+          : null}
       </View>
     </Modal>
   );

package/src/v4/PublicApi/Elements/ButtonWithIconElement/styles.ts

@@ -6,6 +6,7 @@ export const useStyle = (themeStyle: MyMD3Theme) => {
     container: {
       display: 'flex',
       flexDirection: 'row',
+      alignItems: 'center',
       width: 200,
       paddingTop: 12,
       paddingBottom: 12,
@@ -13,8 +14,8 @@ export const useStyle = (themeStyle: MyMD3Theme) => {
       gap: 12,
     },
     icon: {
-      width: 20,
-      height: 20,
+      width: 24,
+      height: 24,
       tintColor: themeStyle.colors.base,
     },
     label: {

package/src/v4/PublicApi/Elements/CommonElements/AvatarElement.tsx

@@ -15,6 +15,7 @@ type AvatarElementType = Partial<ImageProps> & {
   targetType?: 'community' | 'user';
   // to bypass the default avatar
   defaultAvatar?: string;
+  avatarCustomUrl?: string;
 };
 
 const AvatarElement: FC<AvatarElementType> = ({
@@ -24,6 +25,8 @@ const AvatarElement: FC<AvatarElementType> = ({
   elementID,
   targetType,
   defaultAvatar,
+  avatarCustomUrl,
+
   ...props
 }) => {
   const { client } = useAuth();
@@ -33,25 +36,33 @@ const AvatarElement: FC<AvatarElementType> = ({
       ? defaultCommunityAvatarUri
       : defaultAvatarUri;
   }, [defaultAvatar, targetType]);
-
   const [avatarUrl, setAvatarUrl] = useState<string>(fallbackAvatar);
   const { excludes } = useConfig();
   const configId = `${pageID}/${componentID}/${elementID}`;
   const { getImage } = useFile();
 
   useLayoutEffect(() => {
-    if (!avatarId) {
-      setAvatarUrl(fallbackAvatar);
-      return;
-    }
-    (async () => {
+    const loadAvatar = async () => {
+      if (avatarCustomUrl) {
+        setAvatarUrl(avatarCustomUrl);
+        return;
+      }
+
+      if (!avatarId) {
+        setAvatarUrl(fallbackAvatar);
+        return;
+      }
+
       const avatar = await getImage({
         fileId: avatarId,
         imageSize: ImageSizeState.small,
       });
-      setAvatarUrl(avatar);
-    })();
-  }, [avatarId, fallbackAvatar, getImage]);
+
+      setAvatarUrl(avatar ?? fallbackAvatar);
+    };
+
+    loadAvatar();
+  }, [avatarId, fallbackAvatar, getImage, avatarCustomUrl]);
 
   if (excludes.includes(configId)) return null;
 
@@ -62,7 +73,9 @@ const AvatarElement: FC<AvatarElementType> = ({
       source={{
         uri: avatarUrl,
         headers: {
-          Authorization: `Bearer ${(client as Amity.Client).token.accessToken}`,
+          Authorization: `Bearer ${
+            (client as Amity.Client)?.token?.accessToken
+          }`,
         },
       }}
       {...props}

package/src/v4/PublicApi/Pages/AmityCommunityProfilePage/AmityCommunityProfilePage.tsx

@@ -35,13 +35,13 @@ import { RootStackParamList } from '../../../routes/RouteParamList';
 import CommunityCreatePostButton from '../../../elements/CommunityCreatePostButton/CommunityCreatePostButton';
 import { SvgXml } from 'react-native-svg';
 import { useBehaviour } from '../../../../v4/providers/BehaviourProvider';
-
-import { poll, post, story } from '../../../../v4/assets/icons';
+import { livestream, poll, post, story } from '../../../../v4/assets/icons';
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 
 import { useTheme } from 'react-native-paper';
 import { MyMD3Theme } from '../../../../providers/amity-ui-kit-provider';
 import AmityCommunityPinnedPostComponent from '../../../../v4/PublicApi/Components/AmityCommunityPinnedPostComponent/AmityCommunityPinnedPostComponent';
+import { usePostPermission } from '../../../../v4/hook/usePostPermission';
 
 type ICommunityProfilePage = {
   defaultCommunityId?: string;
@@ -265,7 +265,7 @@ function CommunityProfileActions({ pageId, communityId, styles }) {
     AmityPostTargetSelectionPageBehavior,
     AmityPollTargetSelectionPageBehavior,
     AmityStoryTargetSelectionPageBehavior,
-    // AmityLivestreamPostTargetSelectionPageBehavior,
+    AmityLivestreamPostTargetSelectionPageBehavior,
   } = useBehaviour();
   const navigation =
     useNavigation<
@@ -274,6 +274,8 @@ function CommunityProfileActions({ pageId, communityId, styles }) {
 
   const hasStoryPermission = useStoryPermission(communityId);
 
+  const hasPostPermission = usePostPermission({ community });
+
   const openBottomSheet = () => setIsBottomSheetVisible(true);
 
   const closeBottomSheet = () => setIsBottomSheetVisible(false);
@@ -311,26 +313,26 @@ function CommunityProfileActions({ pageId, communityId, styles }) {
     });
   };
 
-  // const handleCreateLivestream = () => {
-  //   closeBottomSheet();
-
-  //   if (
-  //     AmityLivestreamPostTargetSelectionPageBehavior.goToCreateLivestreamPage
-  //   ) {
-  //     return AmityLivestreamPostTargetSelectionPageBehavior.goToCreateLivestreamPage(
-  //       {
-  //         targetId: communityId,
-  //         targetType: 'community',
-  //         targetName: community?.displayName,
-  //       }
-  //     );
-  //   }
-  //   navigation.navigate('CreateLivestream', {
-  //     targetId: communityId,
-  //     targetType: 'community',
-  //     targetName: community?.displayName,
-  //   });
-  // };
+  const handleCreateLivestream = () => {
+    closeBottomSheet();
+
+    if (
+      AmityLivestreamPostTargetSelectionPageBehavior.goToCreateLivestreamPage
+    ) {
+      return AmityLivestreamPostTargetSelectionPageBehavior.goToCreateLivestreamPage(
+        {
+          targetId: communityId,
+          targetType: 'community',
+          targetName: community?.displayName,
+        }
+      );
+    }
+    navigation.navigate('CreateLivestream', {
+      targetId: communityId,
+      targetType: 'community',
+      targetName: community?.displayName,
+    });
+  };
 
   const handleCreatePoll = () => {
     closeBottomSheet();
@@ -351,7 +353,7 @@ function CommunityProfileActions({ pageId, communityId, styles }) {
     });
   };
 
-  if (!community?.isJoined) return null;
+  if (!hasPostPermission) return null;
 
   return (
     <Fragment>
@@ -398,7 +400,7 @@ function CommunityProfileActions({ pageId, communityId, styles }) {
               <SvgXml width={24} height={24} xml={poll()} color={colors.base} />
               <Text style={styles.bottomSheetOptionText}>Poll</Text>
             </TouchableOpacity>
-            {/* <TouchableOpacity
+            <TouchableOpacity
               onPress={handleCreateLivestream}
               style={styles.bottomSheetOption}
             >
@@ -409,7 +411,7 @@ function CommunityProfileActions({ pageId, communityId, styles }) {
                 color={colors.base}
               />
               <Text style={styles.bottomSheetOptionText}>Livestream</Text>
-            </TouchableOpacity> */}
+            </TouchableOpacity>
           </Animated.View>
         </Pressable>
       </Modal>

package/src/v4/PublicApi/Pages/AmityCommunityProfilePage/styles.ts

@@ -41,7 +41,7 @@ export const useStyles = (theme: MyMD3Theme) => {
       backgroundColor: theme.colors.background,
       borderTopLeftRadius: 20,
       borderTopRightRadius: 20,
-      padding: 10,
+      paddingHorizontal: 16,
       minHeight: 200,
       paddingBottom: insets.bottom + 10,
     },
@@ -57,7 +57,7 @@ export const useStyles = (theme: MyMD3Theme) => {
       flexDirection: 'row',
       alignItems: 'center',
       paddingVertical: 16,
-      paddingHorizontal: 16,
+      paddingHorizontal: 0,
     },
     bottomSheetOptionText: {
       fontSize: 16,