@amityco/react-native-social-uikit 4.0.0-03e2bf8.0 → 4.0.0-0871dfa8.0

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

@@ -15,7 +15,7 @@ import {
   subscribeTopic,
 } from '@amityco/ts-sdk-react-native';
 import { useStyles } from './styles';
-import { useAmityComponent } from '../../../../hook';
+import { useAmityComponent, useGlobalBehavior } from '../../../../hook';
 import { PageID, ComponentID } from '../../../../enum';
 import { SvgXml } from 'react-native-svg';
 import { likeReaction } from '../../../../../svg/svg-xml-list';
@@ -43,6 +43,7 @@ const FeedStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
   });
   const styles = useStyles(themeStyles);
   const { AmityGlobalFeedComponentBehavior } = useBehaviour();
+  const { handleGlobalBehavior } = useGlobalBehavior();
   const navigation =
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
   const [postData, setPostData] = useState<Amity.Post>(null);
@@ -54,7 +55,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();
@@ -79,6 +80,10 @@ const FeedStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
     }
   }, [isLike, postData, postId]);
 
+  const onPressReaction = useCallback(() => {
+    handleGlobalBehavior({ defaultBehavior: addReactionToPost });
+  }, [addReactionToPost, handleGlobalBehavior]);
+
   const onPressComment = useCallback(() => {
     if (AmityGlobalFeedComponentBehavior.goToPostDetailPage) {
       return AmityGlobalFeedComponentBehavior.goToPostDetailPage();
@@ -101,7 +106,7 @@ const FeedStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
   return (
     <Pressable onPress={onPressComment} style={styles.actionSection}>
       <View style={styles.row}>
-        <TouchableOpacity onPress={addReactionToPost} style={styles.likeBtn}>
+        <TouchableOpacity onPress={onPressReaction} style={styles.likeBtn}>
           {isLike ? (
             <SvgXml
               xml={likeReaction(themeStyles.colors.background)}
@@ -129,7 +134,7 @@ const FeedStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
             height={20}
             resizeMode="contain"
           />
-          <Text style={styles.btnText}>{postData?.commentsCount}</Text>
+          <Text style={styles.btnText}>{postData?.localCommentCount}</Text>
         </TouchableOpacity>
       </View>
       <View style={styles.commentBtn} />

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/Components/AmityRecommenedCommunityComponent/RecommenedCommunityItems/RecommenedCommunityItems.tsx

@@ -1,7 +1,6 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { Image, View } from 'react-native';
-import { ComponentID, ImageSizeState, PageID } from '../../../../enum';
-import { useFile } from '../../../../hook';
+import { ComponentID, PageID } from '../../../../enum';
 import { useStyles } from './styles';
 
 import CommunityJoinedButton from '../../../../elements/CommunityJoinedButtonElement/CommunityJoinedButtonElement';
@@ -10,9 +9,10 @@ import { SvgXml } from 'react-native-svg';
 import { community as communityIcon } from '../../../../assets/icons';
 import CommunityPrivateBadge from '../../../../elements/CommunityPrivateBadge/CommunityPrivateBadge';
 import CommunityOfficialBadge from '../../../../elements/CommunityOfficialBadge/CommunityOfficialBadge';
-import CommunityCategory from '../../../../elements/CommunityCatetory/CommunityCategory';
 import CommunityMemeberCount from '../../../../elements/CommunityMemeberCount/CommunityMemeberCount';
 import CommunityDisplayname from '../../../../elements/CommunityDisplayname/CommunityDisplayname';
+import { getFileUrlWithSize } from '../../../../utils';
+import { CommunityCategories } from '../../../../../v4/features/feed/components';
 
 type RecommendedCommunityItemProps = {
   pageId?: PageID;
@@ -22,31 +22,15 @@ type RecommendedCommunityItemProps = {
 export const RecommendedCommunityItem: React.FC<
   RecommendedCommunityItemProps
 > = ({ community, pageId = PageID.WildCardPage }) => {
-  const { getImage } = useFile();
   const componentId = ComponentID.recommended_communities;
   const styles = useStyles();
-  const [imageUrl, setImageUrl] = React.useState<string | undefined>(undefined);
-
-  useEffect(() => {
-    const fetchImage = async () => {
-      if (!community.avatarFileId) return;
-
-      const url = await getImage({
-        fileId: community.avatarFileId,
-        imageSize: ImageSizeState.large,
-      });
-
-      setImageUrl(url);
-    };
-    fetchImage();
-  }, [community.avatarFileId, getImage]);
 
   return (
     <View style={styles.container}>
-      {community.avatarFileId && imageUrl ? (
+      {community.avatar?.fileUrl ? (
         <Image
           style={styles.image}
-          source={{ uri: imageUrl }}
+          source={{ uri: getFileUrlWithSize(community.avatar?.fileUrl) }}
           resizeMode="cover"
         />
       ) : (
@@ -72,8 +56,8 @@ export const RecommendedCommunityItem: React.FC<
         </View>
         <View style={styles.detailBottomWrap}>
           <View style={styles.detailBottomWrapLeft}>
-            <CommunityCategory
-              categoryIds={community.categoryIds}
+            <CommunityCategories
+              categories={community.categories}
               pageId={pageId}
               componentId={componentId}
             />

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

@@ -15,6 +15,7 @@ import AmityCreatePostMenuComponent from '../AmityCreatePostMenuComponent/AmityC
 import TextKeyElement from '../../Elements/TextKeyElement/TextKeyElement';
 import { usePopup } from '../../../hook/usePopup';
 import Popup from '../../../component/PopupMenu/PopupMenu';
+import useAuth from '../../../../hooks/useAuth';
 
 type AmitySocialHomeTopNavigationComponentType = {
   activeTab: string;
@@ -29,6 +30,7 @@ const AmitySocialHomeTopNavigationComponent: FC<
   const theme = componentConfig.themeStyles;
   const { AmitySocialHomeTopNavigationComponentBehaviour } = useBehaviour();
   const { isOpen, setIsOpen, toggle } = usePopup();
+  const { isVisitorOrBot } = useAuth();
 
   const [myCommunitiesTab] = useUiKitConfig({
     page: PageID.social_home_page,
@@ -169,7 +171,7 @@ const AmitySocialHomeTopNavigationComponent: FC<
           >
             <Image source={searchIcon} style={styles.icon} />
           </TouchableOpacity>
-          {activeTab !== exploreTab && (
+          {!isVisitorOrBot && activeTab !== exploreTab && (
             <TouchableOpacity
               style={styles.iconBtn}
               onPress={onPressCreate}

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

@@ -39,8 +39,4 @@ const AmityStoryTabComponent: FC<AmityStoryTabComponentType> = ({
   return null;
 };
 
-export const AmityStoryTabComponentStyle = {
-  height: 130,
-};
-
 export default memo(AmityStoryTabComponent);

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

@@ -16,7 +16,7 @@ const AmityThumbnailActionComponent = ({
   onChangeThumbnail,
   onDeleteThumbnail,
   pageId = PageID.WildCardPage,
-}: AmityThumbnailActionComponentProps): JSX.Element => {
+}: AmityThumbnailActionComponentProps): React.ReactElement => {
   const componentId = ComponentID.thumbnail_action;
   const { themeStyles } = useAmityComponent({ pageId, componentId });
   const styles = useStyles(themeStyles);

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/Elements/ModeratorBadgeElement/ModeratorBadgeElement.tsx

@@ -1,10 +1,10 @@
 import { TextProps, Text, View } from 'react-native';
 import React, { FC, memo } from 'react';
 import { ComponentID, ElementID, PageID } from '../../../enum/enumUIKitID';
-import { useAmityElement } from '../../../hook';
+import { useAmityElement, useUser } from '../../../hook';
 import ImageElement from '../CommonElements/ImageElement';
 import { useStyles } from './styles';
-import { useIsCommunityModerator } from '../../../hook';
+import { isModerator } from '../../../hook/isModerator';
 
 type ModeratorBadgeElementType = Partial<TextProps> & {
   pageID: PageID;
@@ -20,10 +20,7 @@ const ModeratorBadgeElement: FC<ModeratorBadgeElementType> = ({
   communityId,
   ...props
 }) => {
-  const { isCommunityModerator } = useIsCommunityModerator({
-    communityId,
-    userId,
-  });
+  const user = useUser(userId || '');
   const elementID = ElementID.moderator_badge;
   const { isExcluded, config, accessibilityId, themeStyles } = useAmityElement({
     pageId: pageID,
@@ -32,7 +29,7 @@ const ModeratorBadgeElement: FC<ModeratorBadgeElementType> = ({
   });
   const styles = useStyles(themeStyles);
   if (isExcluded) return null;
-  if (!isCommunityModerator || !communityId || !userId) return null;
+  if (!isModerator(user?.roles) || !communityId || !userId) return null;
   const text = (config?.text as string) ?? '';
 
   return (

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;
@@ -69,6 +69,9 @@ const AmityCommunityProfilePage: React.FC<ICommunityProfilePage> = ({
 
   const animatedOpacity = useRef(new Animated.Value(0)).current;
   const animatedTranslateY = useRef(new Animated.Value(15)).current;
+  const stickyHeaderAnimation = useRef<Animated.CompositeAnimation | null>(
+    null
+  );
 
   const scrollY = useRef(new Animated.Value(0)).current;
   const feedRef = useRef<AmityCommunityFeedRef>(null);
@@ -94,7 +97,7 @@ const AmityCommunityProfilePage: React.FC<ICommunityProfilePage> = ({
       animatedTranslateY.setValue(15);
 
       // Run entrance animation
-      Animated.parallel([
+      stickyHeaderAnimation.current = Animated.parallel([
         Animated.timing(animatedOpacity, {
           toValue: 1,
           duration: 200,
@@ -106,8 +109,12 @@ const AmityCommunityProfilePage: React.FC<ICommunityProfilePage> = ({
           easing: Easing.out(Easing.ease),
           useNativeDriver: true,
         }),
-      ]).start();
+      ]);
+      stickyHeaderAnimation.current.start();
     }
+    return () => {
+      stickyHeaderAnimation.current?.stop();
+    };
   }, [isScrolledPastHeader, animatedOpacity, animatedTranslateY]);
 
   const handleLoadMore = useCallback(() => {
@@ -265,14 +272,16 @@ function CommunityProfileActions({ pageId, communityId, styles }) {
     AmityPostTargetSelectionPageBehavior,
     AmityPollTargetSelectionPageBehavior,
     AmityStoryTargetSelectionPageBehavior,
-    // AmityLivestreamPostTargetSelectionPageBehavior,
+    AmityLivestreamPostTargetSelectionPageBehavior,
   } = useBehaviour();
   const navigation =
     useNavigation<
       NativeStackNavigationProp<RootStackParamList, 'CreatePost'>
     >();
 
-  const hasStoryPermission = useStoryPermission(communityId);
+  const { hasStoryPermission } = useStoryPermission(communityId);
+
+  const hasPostPermission = usePostPermission({ community });
 
   const openBottomSheet = () => setIsBottomSheetVisible(true);
 
@@ -311,26 +320,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 +360,7 @@ function CommunityProfileActions({ pageId, communityId, styles }) {
     });
   };
 
-  if (!community?.isJoined) return null;
+  if (!hasPostPermission) return null;
 
   return (
     <Fragment>
@@ -398,7 +407,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 +418,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,