@amityco/react-native-social-uikit 4.0.0-1fa7ca8.0 → 4.0.0-3473a9ea.0

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/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,