@amityco/react-native-social-uikit 4.0.0-36607be.0 → 4.0.0-3e7b2eb7.0

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

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

@@ -180,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

@@ -121,8 +121,8 @@ const DetailStyle: FC<AmityPostEngagementActionsSubComponentType> = ({
           </Text>
         )}
         <Text style={styles.commentCountText}>
-          {formatNumber(postData?.commentsCount)}{' '}
-          {renderCommentText(postData?.commentsCount)}
+          {formatNumber(postData?.localCommentCount)}{' '}
+          {renderCommentText(postData?.localCommentCount)}
         </Text>
       </View>
       <View style={[styles.actionSection, styles.detailActionSection]}>

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

@@ -129,7 +129,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/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/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;
 

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

@@ -41,6 +41,7 @@ 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;
@@ -68,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);
@@ -93,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,
@@ -105,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(() => {
@@ -273,6 +281,8 @@ function CommunityProfileActions({ pageId, communityId, styles }) {
 
   const hasStoryPermission = useStoryPermission(communityId);
 
+  const hasPostPermission = usePostPermission({ community });
+
   const openBottomSheet = () => setIsBottomSheetVisible(true);
 
   const closeBottomSheet = () => setIsBottomSheetVisible(false);
@@ -350,7 +360,7 @@ function CommunityProfileActions({ pageId, communityId, styles }) {
     });
   };
 
-  if (!community?.isJoined) return null;
+  if (!hasPostPermission) return null;
 
   return (
     <Fragment>

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

@@ -31,7 +31,6 @@ const AmitySocialGlobalSearchPage = () => {
       />
     </View>
   );
-
   const isCommunity = searchType === TabName.Communities;
   if (isExcluded) return null;
   return (

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useCallback, useState } from 'react';
-import { LogBox, SafeAreaView, StyleSheet } from 'react-native';
+import { useCallback, useRef, useState } from 'react';
+import { SafeAreaView, StyleSheet, View } from 'react-native';
 import CustomSocialTab from '../../../../v4/component/CustomSocialTab/CustomSocialTab';
 import { useUiKitConfig } from '../../../../v4/hook';
 import {
@@ -12,15 +12,11 @@ import {
 import { useTheme } from 'react-native-paper';
 import { useBehaviour } from '../../../../v4/providers/BehaviourProvider';
 import AmitySocialHomeTopNavigationComponent from '../../../../v4/PublicApi/Components/AmitySocialHomeTopNavigationComponent/AmitySocialHomeTopNavigationComponent';
-import AmityEmptyNewsFeedComponent from '../../../../v4/PublicApi/Components/AmityEmptyNewsFeedComponent/AmityEmptyNewsFeedComponent';
 import AmityMyCommunitiesComponent from '../../../../v4/PublicApi/Components/AmityMyCommunitiesComponent/AmityMyCommunitiesComponent';
 import AmityNewsFeedComponent from '../../../../v4/PublicApi/Components/AmityNewsFeedComponent/AmityNewsFeedComponent';
 import AmityExploreComponent from '../../../../v4/PublicApi/Components/AmityExploreComponent/AmityExploreComponent';
-import NewsFeedLoadingComponent from '../../../../v4/component/NewsFeedLoadingComponent/NewsFeedLoadingComponent';
-import { useCustomRankingGlobalFeed } from '../../../../v4/hook/useCustomRankingGlobalFeed';
 import { MyMD3Theme } from '../../../../providers/amity-ui-kit-provider';
 
-LogBox.ignoreAllLogs(true);
 const AmitySocialHomePage = () => {
   const theme = useTheme() as MyMD3Theme;
   const styles = StyleSheet.create({
@@ -31,8 +27,6 @@ const AmitySocialHomePage = () => {
   });
 
   const { AmitySocialHomePageBehaviour } = useBehaviour();
-  const { itemWithAds: globalFeedPosts, loading } =
-    useCustomRankingGlobalFeed();
 
   const [newsFeedTab] = useUiKitConfig({
     page: PageID.social_home_page,
@@ -56,11 +50,13 @@ const AmitySocialHomePage = () => {
   }) as string[];
 
   const [activeTab, setActiveTab] = useState<string>(newsFeedTab);
+  const visitedTabs = useRef<Set<string>>(new Set([newsFeedTab]));
 
   const onTabChange = useCallback(
     (tabName: string) => {
       if (AmitySocialHomePageBehaviour.onChooseTab)
         return AmitySocialHomePageBehaviour.onChooseTab(tabName);
+      visitedTabs.current.add(tabName);
       setActiveTab(tabName);
     },
     [AmitySocialHomePageBehaviour]
@@ -70,30 +66,10 @@ const AmitySocialHomePage = () => {
     onTabChange(exploreTab);
   }, [exploreTab, onTabChange]);
 
-  const renderNewsFeed = () => {
-    if (loading) return <NewsFeedLoadingComponent />;
-    if (activeTab === exploreTab)
-      return <AmityExploreComponent pageId={PageID.social_home_page} />;
-
-    if (activeTab === newsFeedTab) {
-      if (!loading && globalFeedPosts?.length === 0)
-        return (
-          <AmityEmptyNewsFeedComponent
-            pageId={PageID.social_home_page}
-            onPressExploreCommunity={onPressExploreCommunity}
-          />
-        );
-      return <AmityNewsFeedComponent pageId={PageID.social_home_page} />;
-    }
-    if (activeTab === myCommunitiesTab)
-      return (
-        <AmityMyCommunitiesComponent
-          pageId={PageID.social_home_page}
-          componentId={ComponentID.my_communities}
-        />
-      );
-    return null;
-  };
+  const tabStyle = (tab: string) => ({
+    flex: 1,
+    display: activeTab === tab ? ('flex' as const) : ('none' as const),
+  });
 
   return (
     <SafeAreaView
@@ -108,7 +84,25 @@ const AmitySocialHomePage = () => {
         onTabChange={onTabChange}
         activeTab={activeTab}
       />
-      {renderNewsFeed()}
+      <View style={tabStyle(newsFeedTab)}>
+        <AmityNewsFeedComponent
+          pageId={PageID.social_home_page}
+          onPressExploreCommunity={onPressExploreCommunity}
+        />
+      </View>
+      {visitedTabs.current.has(exploreTab) && (
+        <View style={tabStyle(exploreTab)}>
+          <AmityExploreComponent pageId={PageID.social_home_page} />
+        </View>
+      )}
+      {visitedTabs.current.has(myCommunitiesTab) && (
+        <View style={tabStyle(myCommunitiesTab)}>
+          <AmityMyCommunitiesComponent
+            pageId={PageID.social_home_page}
+            componentId={ComponentID.my_communities}
+          />
+        </View>
+      )}
     </SafeAreaView>
   );
 };

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

@@ -152,7 +152,9 @@ function UserProfile({
         </TouchableOpacity>
       ),
       headerLeft: () => {
-        return isShowBackButton ? <BackButton onPress={handleGoBack} /> : null;
+        return isShowBackButton ? (
+          <BackButton goBack={false} onPress={handleGoBack} />
+        ) : null;
       },
     });
   }, [
@@ -174,17 +176,32 @@ function UserProfile({
   }, [client]);
 
   useEffect(() => {
-    if (!user?.avatarFileId) {
-      return setAvatar(defaultAvatarUri);
-    }
-    (async () => {
+    const loadAvatar = async () => {
+      if (!user) {
+        setAvatar(defaultAvatarUri);
+        return;
+      }
+
+      if (user.avatarCustomUrl) {
+        setAvatar(user.avatarCustomUrl);
+        return;
+      }
+
+      if (!user.avatarFileId) {
+        setAvatar(defaultAvatarUri);
+        return;
+      }
+
       const avatarUrl = await getImage({
         fileId: user.avatarFileId,
         imageSize: ImageSizeState.small,
       });
+
       setAvatar(avatarUrl ?? defaultAvatarUri);
-    })();
-  }, [getImage, user?.avatarFileId]);
+    };
+
+    loadAvatar();
+  }, [getImage, user]);
 
   useFocusEffect(
     useCallback(() => {

package/src/v4/PublicApi/Pages/AmityViewStoryPage/Components/AmityViewStoryItem.tsx

@@ -595,6 +595,7 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
             <CommentList
               postId={currentStory?.storyId}
               postType="story"
+              disabledComment={!communityData?.allowCommentInStory}
               disabledInteraction={!communityData?.isJoined}
               onNavigate={onClose}
             />