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

package/src/v4/component/Social/CommentList/CommentList.tsx

@@ -9,7 +9,6 @@ import {
 } from 'react-native';
 import React, { FC, useEffect, useState, useRef, memo } from 'react';
 import { UserInterface, IMentionPosition } from '../../../../types';
-import { getAmityUser } from '../../../../providers/user-provider';
 import { CommentRepository } from '@amityco/ts-sdk-react-native';
 import CommentListItem from '../CommentListItem/CommentListItem';
 import {
@@ -30,6 +29,9 @@ import useMention from '../../../hook/useMention';
 import { replaceTriggerValues } from 'react-native-controlled-mentions';
 import MyAvatar from '../../MyAvatar/MyAvatar';
 import { useToast } from '../../../../v4/stores/slices/toast';
+import { Typography } from '../../Typography/Typography';
+import { lock } from '../../../../v4/assets/icons';
+import useAuth from '../../../../hooks/useAuth';
 
 interface ICommentListProp {
   postId: string;
@@ -37,6 +39,7 @@ interface ICommentListProp {
   disabledInteraction?: boolean;
   onNavigate?: () => void;
   withAvatar?: boolean;
+  disabledComment?: boolean;
 }
 
 interface IComment {
@@ -64,7 +67,11 @@ const CommentList: FC<ICommentListProp> = ({
   disabledInteraction,
   onNavigate,
   withAvatar,
+  disabledComment,
 }) => {
+  // Web parity: visitors never see the comment composer
+  const { isVisitorOrBot } = useAuth();
+  const hideComposer = disabledInteraction || isVisitorOrBot;
   const styles = useStyles();
   const theme = useTheme() as MyMD3Theme;
   const onNextPageRef = useRef<() => void | null>(null);
@@ -103,10 +110,10 @@ const CommentList: FC<ICommentListProp> = ({
         referenceType: postType,
         limit: commentListLimit,
       },
-      async ({ error, loading, data, hasNextPage, onNextPage }) => {
+      ({ error, loading, data, hasNextPage, onNextPage }) => {
         if (error) return;
         if (!loading) {
-          data && data.length > 0 && (await queryComment(data));
+          data && data.length > 0 && queryComment(data);
           onNextPageRef.current = hasNextPage ? onNextPage : null;
         }
       }
@@ -129,34 +136,31 @@ const CommentList: FC<ICommentListProp> = ({
   }, [inputMessage]);
 
   const queryComment = async (comments: Amity.InternalComment[]) => {
-    const formattedCommentList = await Promise.all(
-      comments.map(async (item: Amity.Comment) => {
-        const { userObject } = await getAmityUser(item.userId);
-        let formattedUserObject: UserInterface;
+    const formattedCommentList = comments.map((item: Amity.Comment) => {
+      let formattedUserObject: UserInterface;
 
-        formattedUserObject = {
-          userId: userObject.data.userId,
-          displayName: userObject.data.displayName,
-          avatarFileId: userObject.data.avatarFileId,
-        };
+      formattedUserObject = {
+        userId: item?.creator?.userId,
+        displayName: item?.creator?.displayName,
+        avatarFileId: item?.creator?.avatarFileId,
+      };
 
-        return {
-          commentId: item.commentId,
-          data: item.data as Record<string, any>,
-          dataType: item.dataType || 'text',
-          myReactions: item.myReactions as string[],
-          reactions: item.reactions as Record<string, number>,
-          user: formattedUserObject as UserInterface,
-          updatedAt: item.updatedAt,
-          editedAt: item.editedAt,
-          createdAt: item.createdAt,
-          childrenComment: item.children,
-          childrenNumber: item.childrenNumber,
-          referenceId: item.referenceId,
-          mentionPosition: item?.metadata?.mentioned ?? [],
-        };
-      })
-    );
+      return {
+        commentId: item.commentId,
+        data: item.data as Record<string, any>,
+        dataType: item.dataType || 'text',
+        myReactions: item.myReactions as string[],
+        reactions: item.reactions as Record<string, number>,
+        user: formattedUserObject as UserInterface,
+        updatedAt: item.updatedAt,
+        editedAt: item.editedAt,
+        createdAt: item.createdAt,
+        childrenComment: item.children,
+        childrenNumber: item.childrenNumber,
+        referenceId: item.referenceId,
+        mentionPosition: item?.metadata?.mentioned ?? [],
+      };
+    });
     setCommentList([...formattedCommentList]);
   };
 
@@ -251,35 +255,47 @@ const CommentList: FC<ICommentListProp> = ({
             </TouchableOpacity>
           </View>
         )}
-        {!disabledInteraction && (
-          <View style={styles.inputWrap}>
-            {withAvatar && <MyAvatar />}
-            <View style={styles.inputContainer}>
-              {renderInput({
-                multiline: true,
-                style: styles.textInput,
-                placeholder: 'Say something nice...',
-                placeholderTextColor: theme.colors.baseShade3,
-              })}
+        {!hideComposer &&
+          (disabledComment ? (
+            <View style={styles.disabledCommentWrap}>
+              <SvgXml
+                width={20}
+                height={20}
+                xml={lock()}
+                color={theme.colors.baseShade2}
+              />
+              <Typography.Body style={styles.disabledCommentText}>
+                Comments are disabled for this story
+              </Typography.Body>
             </View>
-
-            <TouchableOpacity
-              disabled={inputMessage.length > 0 ? false : true}
-              onPress={handleSend}
-              style={styles.postBtn}
-            >
-              <Text
-                style={
-                  inputMessage.length > 0
-                    ? styles.postBtnText
-                    : styles.postDisabledBtn
-                }
+          ) : (
+            <View style={styles.inputWrap}>
+              {withAvatar && <MyAvatar />}
+              <View style={styles.inputContainer}>
+                {renderInput({
+                  multiline: true,
+                  style: styles.textInput,
+                  placeholder: 'Say something nice...',
+                  placeholderTextColor: theme.colors.baseShade3,
+                })}
+              </View>
+              <TouchableOpacity
+                disabled={inputMessage.length > 0 ? false : true}
+                onPress={handleSend}
+                style={styles.postBtn}
               >
-                Post
-              </Text>
-            </TouchableOpacity>
-          </View>
-        )}
+                <Text
+                  style={
+                    inputMessage.length > 0
+                      ? styles.postBtnText
+                      : styles.postDisabledBtn
+                  }
+                >
+                  Post
+                </Text>
+              </TouchableOpacity>
+            </View>
+          ))}
       </KeyboardAvoidingView>
     );
   };
@@ -299,6 +315,7 @@ const CommentList: FC<ICommentListProp> = ({
               commentDetail={item}
               onClickReply={handleClickReply}
               postType={postType}
+              disabledComment={disabledComment}
               disabledInteraction={disabledInteraction}
               onNavigate={onNavigate}
             />

package/src/v4/component/Social/CommentList/styles.ts

@@ -123,6 +123,18 @@ export const useStyles = () => {
     commentListFooter: {
       width: width,
     },
+    disabledCommentWrap: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 16,
+      gap: 8,
+      borderTopWidth: 1,
+      borderTopColor: theme.colors.baseShade4,
+    },
+    disabledCommentText: {
+      color: theme.colors.baseShade2,
+    },
   });
 
   return styles;

package/src/v4/component/Social/CommentListItem/CommentListItem.tsx

@@ -42,6 +42,7 @@ import { useNavigation } from '@react-navigation/native';
 import ReplyCommentList from '../../../../components/Social/ReplyCommentList';
 import { CommentRepository } from '@amityco/ts-sdk-react-native';
 import { useTimeDifference } from '../../../hook/useTimeDifference';
+import { useGlobalBehavior } from '../../../hook/useGlobalBehavior';
 import { LinkPreview } from '../../PreviewLink';
 import { Typography } from '../../Typography/Typography';
 import { pen, report, trash, unreport } from '../../../assets/icons';
@@ -69,6 +70,7 @@ export interface ICommentList {
   onClickReply: (user: UserInterface, commentId: string) => void;
   postType: Amity.CommentReferenceType;
   disabledInteraction?: boolean;
+  disabledComment?: boolean;
   onNavigate?: () => void;
 }
 
@@ -79,6 +81,7 @@ const CommentListItem = ({
   postType,
   disabledInteraction,
   onNavigate,
+  disabledComment,
 }: ICommentList) => {
   const theme = useTheme() as MyMD3Theme;
   const styles = useStyles();
@@ -284,6 +287,13 @@ const CommentListItem = ({
     onClickReply && onClickReply(user, commentId);
   };
 
+  // Web parity: visitors see Like/Reply but taps show the sign-in toast
+  const { handleGlobalBehavior, isVisitorOrBot } = useGlobalBehavior();
+  const onPressLike = () =>
+    handleGlobalBehavior({ defaultBehavior: addReactionToComment });
+  const onPressReply = () =>
+    handleGlobalBehavior({ defaultBehavior: onHandleReply });
+
   const onPressCommentReaction = () => {
     onNavigate && onNavigate();
     navigation.navigate('ReactionList', {
@@ -334,10 +344,7 @@ const CommentListItem = ({
                     </Typography.Caption>
                   )}
                 </View>
-                <TouchableOpacity
-                  onPress={() => addReactionToComment()}
-                  style={styles.likeBtn}
-                >
+                <TouchableOpacity onPress={onPressLike} style={styles.likeBtn}>
                   <Typography.CaptionBold
                     style={isLike ? styles.likedText : styles.btnText}
                   >
@@ -345,20 +352,22 @@ const CommentListItem = ({
                   </Typography.CaptionBold>
                 </TouchableOpacity>
                 <TouchableOpacity
-                  onPress={onHandleReply}
+                  onPress={disabledComment ? undefined : onPressReply}
                   style={styles.likeBtn}
                 >
                   <Typography.CaptionBold style={styles.btnText}>
                     Reply
                   </Typography.CaptionBold>
                 </TouchableOpacity>
-                <TouchableOpacity onPress={openModal}>
-                  <SvgXml
-                    xml={threeDots(theme.colors.baseShade2)}
-                    width="20"
-                    height="20"
-                  />
-                </TouchableOpacity>
+                {!isVisitorOrBot && (
+                  <TouchableOpacity onPress={openModal}>
+                    <SvgXml
+                      xml={threeDots(theme.colors.baseShade2)}
+                      width="20"
+                      height="20"
+                    />
+                  </TouchableOpacity>
+                )}
               </View>
 
               {likeReaction > 0 && (

package/src/v4/component/Social/ReplyCommentList/index.tsx

@@ -30,6 +30,7 @@ import {
 import { Pressable } from 'react-native';
 import useAuth from '../../../../hooks/useAuth';
 import { useTimeDifference } from '../../../../hooks/useTimeDifference';
+import { useGlobalBehavior } from '../../../hook/useGlobalBehavior';
 import {
   isReportTarget,
   reportTargetById,
@@ -140,6 +141,11 @@ export default function ReplyCommentList({
       await addCommentReaction(commentId, 'like');
     }
   };
+  // Web parity: visitors see Like but taps show the sign-in toast
+  const { handleGlobalBehavior, isVisitorOrBot } = useGlobalBehavior();
+  const onPressLike = () =>
+    handleGlobalBehavior({ defaultBehavior: addReactionToComment });
+
   const deletePostObject = () => {
     Alert.alert(
       'Delete this post',
@@ -237,10 +243,7 @@ export default function ReplyCommentList({
             )}
           </View>
           <View style={styles.actionSection}>
-            <TouchableOpacity
-              onPress={() => addReactionToComment()}
-              style={styles.likeBtn}
-            >
+            <TouchableOpacity onPress={onPressLike} style={styles.likeBtn}>
               {isLike ? (
                 <SvgXml
                   xml={likedXml(theme.colors.primary)}
@@ -256,13 +259,15 @@ export default function ReplyCommentList({
               </Text>
             </TouchableOpacity>
 
-            <TouchableOpacity onPress={openModal} style={styles.threeDots}>
-              <SvgXml
-                xml={threeDots(theme.colors.base)}
-                width="20"
-                height="16"
-              />
-            </TouchableOpacity>
+            {!isVisitorOrBot && (
+              <TouchableOpacity onPress={openModal} style={styles.threeDots}>
+                <SvgXml
+                  xml={threeDots(theme.colors.base)}
+                  width="20"
+                  height="16"
+                />
+              </TouchableOpacity>
+            )}
           </View>
           <View>
             {childrenComment && childrenComment.length > 0 && (

package/src/v4/component/StoryKit/src/Story.tsx

@@ -22,7 +22,9 @@ export const Story = ({
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const [currentPage, setCurrentPage] = useState<number>(0);
   const [selectedData, setSelectedData] = useState<IUserStory[]>([]);
-  const cube = useRef<CubeNavigationHorizontal | AndroidCubeEffect>();
+  const cube = useRef<CubeNavigationHorizontal | AndroidCubeEffect | null>(
+    null
+  );
   // Component Functions
   const _handleStoryItemPress = (item: IUserStory, index?: number) => {
     if (item?.stories?.length === 0) return;

package/src/v4/component/StoryKit/src/StoryCircleListItem.tsx

@@ -25,7 +25,7 @@ const StoryCircleListItem = ({
   const styles = useStyles();
   const [, setIsPressed] = useState(item?.seen);
   const prevSeen = usePrevious(item?.seen);
-  const hasStoryPermission = useStoryPermission(item.user_id);
+  const { hasStoryPermission } = useStoryPermission(item.user_id);
   const { getUiKitConfig } = useConfig();
   const storyRingColor: string[] = item?.seen
     ? ['#e2e2e2', '#e2e2e2']

package/src/v4/component/StoryKit/src/StoryListItem.tsx

@@ -61,7 +61,7 @@ export const StoryListItem = ({
   isModerator,
 }: StoryListItemProps) => {
   const styles = useStyles();
-  const hasStoryPermission = useStoryPermission(userId);
+  const { hasStoryPermission } = useStoryPermission(userId);
   const { getUiKitConfig } = useConfig();
   const storyReactionBgColor =
     (getUiKitConfig({

package/src/v4/component/StoryKit/src/helpers/StateHelpers.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 
-export function usePrevious(value: any) {
-  const ref = useRef();
+export function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<T | undefined>(undefined);
   useEffect(() => {
     ref.current = value;
   });

package/src/v4/component/TargetSelectionPage/TargetItem/TargetItem.tsx

@@ -18,6 +18,7 @@ interface ITargetItem {
   isBadgeShow?: boolean;
   isPrivate?: boolean;
   onSelect: () => void;
+  avatarCustomUrl?: string;
 }
 
 const TargetItem = ({
@@ -30,6 +31,7 @@ const TargetItem = ({
   isBadgeShow,
   isPrivate,
   onSelect,
+  avatarCustomUrl,
 }: ITargetItem) => {
   const theme = useTheme() as MyMD3Theme;
 
@@ -72,6 +74,7 @@ const TargetItem = ({
         elementID={avatarElementId}
         avatarId={avatarFileId}
         targetType="community"
+        avatarCustomUrl={avatarCustomUrl}
       />
       {isPrivate && (
         <ImageElement

package/src/v4/component/TargetSelectionPage/TargetSelectionPage.tsx

@@ -13,11 +13,14 @@ import type { MyMD3Theme } from '../../../providers/amity-ui-kit-provider';
 import CloseButtonIconElement from '../../PublicApi/Elements/CloseButtonIconElement/CloseButtonIconElement';
 import { PageID, ComponentID, ElementID } from '../../enum';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { useNavigation } from '@react-navigation/native';
 import TextKeyElement from '../../PublicApi/Elements/TextKeyElement/TextKeyElement';
 import { Typography } from '../Typography/Typography';
 import { useStyles } from './styles';
 import { Illustration } from '../../../v4/PublicApi/Components/AmityEmptyNewsFeedComponent/Elements';
+import { useNavigation } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { CommunityPostSettings } from '@amityco/ts-sdk-react-native';
+import { usePostPermission } from '../../../v4/hook/usePostPermission';
 
 export type FeedParams = {
   targetId: string;
@@ -48,21 +51,23 @@ interface ITargetSelectionPage {
     postSetting,
     needApprovalOnPostCreation,
   }: FeedParams) => void;
+  onClickClose?: () => void;
 }
 
 const TargetSelectionPage = ({
   pageId,
   hideMyTimelineTarget = false,
   onSelectFeed,
+  onClickClose,
 }: ITargetSelectionPage) => {
   const { client } = useAuth();
-  const navigation = useNavigation();
+
   const defaultTheme = useTheme() as MyMD3Theme;
 
   const user = useUser((client as Amity.Client).userId);
   const { communities, onNextCommunityPage, loading } = useCommunities();
   const { themeStyles, accessibilityId } = useAmityPage({ pageId });
-
+  const navigation = useNavigation<NativeStackNavigationProp<any>>();
   const theme = themeStyles || defaultTheme;
   const styles = useStyles(theme);
 
@@ -73,7 +78,7 @@ const TargetSelectionPage = ({
   });
 
   const renderItem = ({ item }: { item: Amity.Community }) => {
-    return (
+    const target = (
       <TargetItem
         key={item.communityId}
         displayName={item.displayName}
@@ -85,12 +90,20 @@ const TargetSelectionPage = ({
             targetName: item.displayName,
             targetType: 'community',
             community: item,
+            postSetting: item.postSetting,
+            isPublic: item.isPublic,
           })
         }
         avatarElementId={ElementID.community_avatar}
         avatarFileId={item.avatarFileId}
       />
     );
+
+    if (item?.postSetting === CommunityPostSettings.ONLY_ADMIN_CAN_POST) {
+      return <AdminOnlyCommunity community={item}>{target}</AdminOnlyCommunity>;
+    }
+
+    return target;
   };
 
   return (
@@ -102,7 +115,12 @@ const TargetSelectionPage = ({
       <View style={styles.header}>
         <TouchableOpacity
           style={styles.closeButton}
-          onPress={() => navigation.goBack()}
+          onPress={() => {
+            onClickClose?.();
+            if (navigation.canGoBack()) {
+              navigation.goBack();
+            }
+          }}
         >
           <CloseButtonIconElement style={styles.closeIcon} pageID={pageId} />
         </TouchableOpacity>
@@ -127,6 +145,7 @@ const TargetSelectionPage = ({
                 targetType: 'user',
               })
             }
+            avatarCustomUrl={user?.avatarCustomUrl}
             avatarFileId={user?.avatarFileId}
           />
           <View style={styles.divider}>
@@ -158,3 +177,14 @@ const TargetSelectionPage = ({
 };
 
 export default React.memo(TargetSelectionPage);
+
+type AdminOnlyCommunityProps = {
+  community: Amity.Community;
+  children: React.ReactNode;
+};
+
+function AdminOnlyCommunity({ community, children }: AdminOnlyCommunityProps) {
+  const hasPostPermission = usePostPermission({ community });
+
+  return hasPostPermission ? children : null;
+}

package/src/v4/component/Toast/index.tsx

@@ -8,8 +8,8 @@ import { informative, failed, success } from '../../assets/icons';
 import { CircularProgressIndicator } from '../CircularProgressIndicator';
 
 const Toast = () => {
-  const { styles, theme } = useStyles();
   const { hideToast, toast } = useToast();
+  const { styles, theme } = useStyles(toast.bottomPosition);
   const timeoutRef = useRef<number | null>(null);
   const fadeIn = useRef(new Animated.Value(0)).current;
 

package/src/v4/component/Toast/styles.ts

@@ -3,7 +3,7 @@ import { useTheme } from 'react-native-paper';
 import type { MyMD3Theme } from '../../../providers/amity-ui-kit-provider';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-export const useStyles = () => {
+export const useStyles = (bottomPosition: number = 16) => {
   const theme = useTheme<MyMD3Theme>();
   const { bottom } = useSafeAreaInsets();
 
@@ -13,7 +13,7 @@ export const useStyles = () => {
       zIndex: 999,
       width: '90%',
       borderRadius: 8,
-      bottom: bottom + 16,
+      bottom: bottom + bottomPosition,
       paddingVertical: 16,
       alignSelf: 'center',
       flexDirection: 'row',

package/src/v4/constants/index.ts

@@ -24,8 +24,21 @@ export const ERROR_CODE = {
   IMAGE_NUDITY: '500000',
   ONLY_ONE_MODERATOR: '400317',
   ONLY_ONE_MEMBER: '400318',
+  GLOBAL_BAN: '400312',
+  VISITOR_USAGE_LIMIT_EXCEEDED: '400323',
 };
 
+export const VISITOR_USAGE_LIMIT_MESSAGE = {
+  TITLE: "You've reached your daily limit.",
+  SUBTITLE: 'Create an account or sign in to keep exploring the community.',
+  SIGN_IN: 'Sign in',
+  TOAST: 'Create an account or sign in to continue.',
+};
+
+// Web parity: amity_social_label_create_account_or_sign_in
+export const VISITOR_USER_ACTION_TOAST =
+  'Create an account or sign in to continue.';
+
 export const COMMENT_ERROR_MESSAGE = {
   BLOCKED_WORD:
     'Your comment contains inappropriate word. Please review and delete it.',
@@ -105,3 +118,6 @@ export const QUERY_KEY = {
   POSTS_COLLECTION: 'posts-collections',
   PINNED_POSTS_COLLECTION: 'pinned-posts-collections',
 };
+
+export const URL_REGEX =
+  /(?:(?:https?|ftp):\/\/(?:[a-zA-Z0-9.-]+|[\d.]+)(?::\d{1,5})?(?:\/(?:[^\s<>|()]*(?:\([^\s<>|()]*\)[^\s<>|()]*)*)*)?|mailto:[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}|www\.(?:[a-zA-Z0-9.-]+)(?:\/(?:[^\s<>|()]*(?:\([^\s<>|()]*\)[^\s<>|()]*)*)*)?(?!\.))/g;

package/src/v4/elements/ActionButton/ActionButton.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 import { useAmityElement } from '../../../v4/hook';
 import { ComponentID, ElementID, PageID } from '../../../v4/enum';
-import Button, { BUTTON_SIZE, ButtonProps } from '../../../v4/component/Button/Button';
+import Button, {
+  BUTTON_SIZE,
+  ButtonProps,
+} from '../../../v4/component/Button/Button';
 import { useStyles } from './styles';
 
 type ActionButtonProps = ButtonProps & {

package/src/v4/elements/ChangeThumbnailButton/ChangeThumbnailButton.tsx

@@ -16,7 +16,7 @@ const ChangeThumbnailButton = ({
   pageId = PageID.WildCardPage,
   componentId = ComponentID.WildCardComponent,
   ...props
-}: ChangeThumbnailButtonProps): JSX.Element => {
+}: ChangeThumbnailButtonProps): React.ReactElement => {
   const { themeStyles, config } = useAmityElement({
     pageId,
     componentId,

package/src/v4/elements/CommunityCreatePostButton/CommunityCreatePostButton.tsx

@@ -31,7 +31,7 @@ function CommunityCreatePostButton({
         xml={plus()}
         width={32}
         height={32}
-        color={themeStyles.colors.base}
+        color={themeStyles.colors.background}
       />
     </TouchableOpacity>
   );

package/src/v4/elements/CommunityJoinButtonElement/CommunityJoinButtonElement.tsx

@@ -1,7 +1,11 @@
 import React, { FC, memo } from 'react';
 import { TouchableOpacityProps } from 'react-native';
 import { ComponentID, ElementID, PageID } from '../../enum/enumUIKitID';
-import { useAmityElement, useJoinCommunity } from '../../hook';
+import {
+  useAmityElement,
+  useGlobalBehavior,
+  useJoinCommunity,
+} from '../../hook';
 import { Button, BUTTON_SIZE } from '../../component/Button/Button';
 import { plus } from '../../assets/icons';
 import { useCustomRankingGlobalFeed } from '../../../v4/hook/useCustomRankingGlobalFeed';
@@ -27,14 +31,22 @@ const CommunityJoinButton: FC<CommunityJoinButtonType> = ({
     elementId: ElementID.community_join_button,
   });
 
-  const { refresh } = useCustomRankingGlobalFeed();
+  const { refresh, globalFeedPosts } = useCustomRankingGlobalFeed({
+    enabled: false,
+  });
   const { joinCommunity, isPending } = useJoinCommunity({
-    onSuccess: () => setTimeout(() => refresh(), 3000),
+    onSuccess: () => {
+      globalFeedPosts.length === 0 && refresh();
+    },
   });
 
+  const { handleGlobalBehavior } = useGlobalBehavior();
+
   const handleJoinCommunity = () => {
     if (!communityId) return;
-    joinCommunity(communityId);
+    handleGlobalBehavior({
+      defaultBehavior: () => joinCommunity(communityId),
+    });
   };
 
   if (isExcluded) return null;