@amityco/react-native-social-uikit 4.0.0-RC.23 → 4.0.0-RC.24

package/lib/typescript/src/v4/hook/index.d.ts

@@ -14,7 +14,7 @@ export * from './useCommunities';
 export * from './useCommunity';
 export * from './useCategory';
 export * from './useUiKitReference';
-export * from './useIsCommunityModerator';
+export * from './isModerator';
 export * from './useSearch';
 export * from './useTimeDifference';
 export * from './useReaction';

package/lib/typescript/src/v4/hook/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/v4/hook/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,sBAAsB,CAAC;AACrC,cAAc,WAAW,CAAC;AAC1B,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iCAAiC,CAAC;AAChD,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uDAAuD,CAAC;AACtE,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/v4/hook/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,sBAAsB,CAAC;AACrC,cAAc,WAAW,CAAC;AAC1B,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iCAAiC,CAAC;AAChD,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uDAAuD,CAAC;AACtE,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC"}

package/lib/typescript/src/v4/hook/isModerator.d.ts

@@ -0,0 +1,2 @@
+export declare const isModerator: (userRoles?: string[]) => boolean;
+//# sourceMappingURL=isModerator.d.ts.map

package/lib/typescript/src/v4/hook/isModerator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"isModerator.d.ts","sourceRoot":"","sources":["../../../../../src/v4/hook/isModerator.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,WAAW,GAAI,YAAY,MAAM,EAAE,YAa/C,CAAC"}

package/lib/typescript/src/v4/hook/useStoryPermission.d.ts

@@ -1,2 +1,4 @@
-export declare function useStoryPermission(communityId?: string): boolean;
+export declare function useStoryPermission(communityId?: string): {
+    hasStoryPermission: boolean;
+};
 //# sourceMappingURL=useStoryPermission.d.ts.map

package/lib/typescript/src/v4/hook/useStoryPermission.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useStoryPermission.d.ts","sourceRoot":"","sources":["../../../../../src/v4/hook/useStoryPermission.ts"],"names":[],"mappings":"AASA,wBAAgB,kBAAkB,CAAC,WAAW,CAAC,EAAE,MAAM,WAgBtD"}
+{"version":3,"file":"useStoryPermission.d.ts","sourceRoot":"","sources":["../../../../../src/v4/hook/useStoryPermission.ts"],"names":[],"mappings":"AAKA,wBAAgB,kBAAkB,CAAC,WAAW,CAAC,EAAE,MAAM;;EActD"}

package/lib/typescript/src/v4/utils/permissions.d.ts

@@ -3,5 +3,5 @@ export declare const checkEditCommunityPermission: (communityId?: string) => boo
 export declare const checkEditRolePermission: (communityId: string) => boolean;
 export declare const isModerator: (roles?: string[]) => boolean;
 export declare const isAdmin: (roles?: string[]) => boolean;
-export declare const checkStoryPermission: (client: Amity.Client, communityId: string) => boolean;
+export declare const checkStoryPermission: (client: Amity.Client | null | undefined, communityId?: string) => boolean;
 //# sourceMappingURL=permissions.d.ts.map

package/lib/typescript/src/v4/utils/permissions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"permissions.d.ts","sourceRoot":"","sources":["../../../../../src/v4/utils/permissions.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,8BAA8B,GAAI,aAAa,MAAM,YAOjE,CAAC;AAEF,eAAO,MAAM,4BAA4B,GAAI,cAAc,MAAM,YAOhE,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,aAAa,MAAM,YAQ1D,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,QAAO,MAAM,EAAO,YAW/C,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,QAAO,MAAM,EAAO,YAI3C,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,KAAK,CAAC,MAAM,EACpB,aAAa,MAAM,YASpB,CAAC"}
+{"version":3,"file":"permissions.d.ts","sourceRoot":"","sources":["../../../../../src/v4/utils/permissions.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,8BAA8B,GAAI,aAAa,MAAM,YAOjE,CAAC;AAEF,eAAO,MAAM,4BAA4B,GAAI,cAAc,MAAM,YAOhE,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,aAAa,MAAM,YAQ1D,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,QAAO,MAAM,EAAO,YAW/C,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,QAAO,MAAM,EAAO,YAI3C,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,KAAK,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,EACvC,cAAc,MAAM,KACnB,OAaF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amityco/react-native-social-uikit",
-  "version": "4.0.0-RC.23",
+  "version": "4.0.0-RC.24",
   "description": "Social UIKit",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/CustomText/index.tsx

@@ -9,13 +9,14 @@ interface CustomTextProps {
   ellipsizeMode?: 'tail' | 'head' | 'middle' | 'clip' | undefined;
 }
 
-const CustomText: React.FC<CustomTextProps> = (
-  { children, style, numberOfLines, ellipsizeMode = 'tail' }: CustomTextProps,
-  props
-) => {
+const CustomText: React.FC<CustomTextProps> = ({
+  children,
+  style,
+  numberOfLines,
+  ellipsizeMode = 'tail',
+}) => {
   return (
     <Text
-      {...props}
       style={[styles.text, style]}
       numberOfLines={numberOfLines}
       ellipsizeMode={ellipsizeMode}

package/src/components/Social/PostList/Components/RenderTextWithMention.tsx

@@ -27,7 +27,7 @@ const RenderTextWithMention: React.FC<IrenderTextWithMention> = ({
     });
   };
   let currentPosition = 0;
-  const result: (string | JSX.Element)[][] = mentionPositionArr.map(
+  const result: (string | React.ReactElement)[][] = mentionPositionArr.map(
     ({ index, length, userId }, i) => {
       // Add non-highlighted text before the mention
       const nonHighlightedText = textPost.slice(currentPosition, index);

package/src/components/StoryKit/src/Story.tsx

@@ -45,7 +45,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) => {

package/src/components/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/redux/slices/bottomSheetSlice.ts

@@ -1,17 +1,18 @@
 import { ComponentID, PageID } from '../../v4/enum';
 import { PayloadAction, createSlice } from '@reduxjs/toolkit';
 import { RootState, useUIKitDispatch, useUIKitSelector } from '../store';
+import { ReactElement } from 'react';
 
 export interface BottomSheetState {
   open: boolean;
-  content: JSX.Element | null;
+  content: ReactElement | null;
   height?: number;
   pageId?: PageID;
   componentId?: ComponentID;
 }
 
 type OpenBottomSheetPayload = {
-  content: JSX.Element;
+  content: ReactElement;
   height?: number;
 };
 

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

@@ -1,11 +1,8 @@
 import React, { memo, useState, FC } from 'react';
 import { View } from 'react-native';
 import { ComponentID, PageID } from '../../../enum';
-import {
-  useAmityComponent,
-  useCommunity,
-  useIsCommunityModerator,
-} from '../../../hook';
+import { useAmityComponent, useCommunity, useUser } from '../../../hook';
+import { isModerator } from '../../../hook/isModerator';
 import { useStyles } from './styles';
 import CommunityCover from '../../../elements/CommunityCover/CommunityCover';
 import CommunityPrivateBadge from '../../../elements/CommunityPrivateBadge/CommunityPrivateBadge';
@@ -61,10 +58,8 @@ const AmityCommunityHeaderComponent: FC<AmityCommunityHeaderComponentProps> = ({
     componentId,
   });
 
-  const { isCommunityModerator } = useIsCommunityModerator({
-    communityId: community?.communityId,
-    userId: client?.userId,
-  });
+  const currentUser = useUser(client?.userId || '');
+  const isCommunityModerator = isModerator(currentUser?.roles);
 
   const styles = useStyles(themeStyles);
 

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

@@ -18,13 +18,13 @@ interface AmityCreatePostMenuComponentProps {
 const AmityCreatePostMenuComponent = ({
   pageId = PageID.WildCardPage,
   componentId = ComponentID.WildCardComponent,
-}: AmityCreatePostMenuComponentProps): JSX.Element => {
+}: AmityCreatePostMenuComponentProps): React.ReactElement => {
   const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
   const { themeStyles } = useAmityComponent({ pageId, componentId });
 
   const { AmityCreatePostMenuComponentBehavior } = useBehaviour();
 
-  const hasStoryPermission = useStoryPermission();
+  const { hasStoryPermission } = useStoryPermission();
 
   const styles = StyleSheet.create({
     container: {

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

@@ -17,7 +17,7 @@ import PostContent from '../../../../v4/component/PostContent';
 import FormDescription from '../../../../v4/elements/FormDescription';
 import { usePostCollection } from '../../../../v4/hook/collections/usePostCollection';
 import ActionButton from '../../../../v4/elements/ActionButton';
-import { useIsCommunityModerator } from '../../../../v4/hook';
+import { isModerator, useUser } from '../../../../v4/hook';
 import { usePendingPostQuery } from '../../../../v4/hook/usePendingPostQuery';
 import { SvgXml } from 'react-native-svg';
 import { Title } from '../../../../v4/elements';
@@ -48,10 +48,8 @@ const usePendingPostList = ({
     },
   });
 
-  const { isCommunityModerator } = useIsCommunityModerator({
-    communityId: community.communityId,
-    userId: client.userId,
-  });
+  const currentUser = useUser(client.userId || '');
+  const isCommunityModerator = isModerator(currentUser?.roles);
 
   useEffect(() => {
     onPendingPostCountChange?.(collection.data.length);

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

@@ -45,7 +45,7 @@ type AmityPostCommentComponentType = {
   disabledInteraction?: boolean;
   setReplyUserName?: (arg: string) => void;
   setReplyCommentId?: (arg: string) => void;
-  ListHeaderComponent?: JSX.Element;
+  ListHeaderComponent?: React.ReactElement;
 };
 
 const commentListLimit = 10;

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

@@ -18,7 +18,8 @@ import { IMentionPosition } from '../../../types/type';
 import { RootStackParamList } from '../../../routes/RouteParamList';
 import { ComponentID, ElementID, PageID } from '../../../enum';
 import AvatarElement from '../../Elements/CommonElements/AvatarElement';
-import { useAmityComponent, useIsCommunityModerator } from '../../../hook';
+import { useAmityComponent, useUser } from '../../../hook';
+import { isModerator } from '../../../hook/isModerator';
 import ModeratorBadgeElement from '../../Elements/ModeratorBadgeElement/ModeratorBadgeElement';
 import AmityPostEngagementActionsComponent from '../AmityPostEngagementActionsComponent/AmityPostEngagementActionsComponent';
 import {
@@ -93,10 +94,8 @@ const AmityPostContentComponent: FC<AmityPostContentComponentProps> = ({
   } = post ?? {};
   const mentionPosition = metadata?.mentioned;
 
-  const { isCommunityModerator } = useIsCommunityModerator({
-    communityId: targetType === 'community' && targetId,
-    userId: creator?.userId,
-  });
+  const creatorUser = useUser(creator?.userId || '');
+  const isCommunityModerator = isModerator(creatorUser?.roles);
 
   useEffect(() => {
     if (mentionPosition) {

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

@@ -279,7 +279,7 @@ function CommunityProfileActions({ pageId, communityId, styles }) {
       NativeStackNavigationProp<RootStackParamList, 'CreatePost'>
     >();
 
-  const hasStoryPermission = useStoryPermission(communityId);
+  const { hasStoryPermission } = useStoryPermission(communityId);
 
   const hasPostPermission = usePostPermission({ community });
 

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

@@ -23,9 +23,10 @@ import {
 import {
   TSearchItem,
   useAmityPage,
-  useIsCommunityModerator,
   useRequestPermission,
+  useUser,
 } from '../../../hook';
+import { isModerator } from '../../../hook/isModerator';
 import { useStyles } from './styles';
 import { AmityPostComposerMode, AmityPostComposerPageType } from '../../types';
 import { IDisplayImage, IMentionPosition } from '../../../../v4/types/type';
@@ -88,10 +89,8 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
   const dispatch = useUIKitDispatch();
   const { addPostToGlobalFeed, updateByPostId } = globalfeedSlice.actions;
 
-  const { isCommunityModerator } = useIsCommunityModerator({
-    communityId: community?.communityId,
-    userId: (client as Amity.Client)?.userId,
-  });
+  const currentUser = useUser((client as Amity.Client)?.userId || '');
+  const isCommunityModerator = isModerator(currentUser?.roles);
   const { showToastMessage, hideToastMessage } = uiSlice.actions;
   const [inputMessage, setInputMessage] = useState<string>(
     (post?.data as Amity.ContentDataText)?.text ?? ''

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

@@ -34,7 +34,7 @@ const AmityViewStoryPage: FC<IAmityViewStoryPage> = ({
 }) => {
   const { client } = useAuth();
   const userId = (client as Amity.Client).userId;
-  const hasStoryPermission = useStoryPermission(targetId);
+  const { hasStoryPermission } = useStoryPermission(targetId);
   const styles = useStyles();
   const { getStories, stories, loading } = useStory();
   const { getImage } = useFile();

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

@@ -30,7 +30,7 @@ const CommunityStories = ({ communityId, community }: ICommunityStories) => {
     useNavigation() as NativeStackNavigationProp<RootStackParamList>;
   const styles = useStyles();
   const { getUiKitConfig } = useConfig();
-  const hasStoryPermission = useStoryPermission(communityId);
+  const { hasStoryPermission } = useStoryPermission(communityId);
   const { getStoryTarget, storyTarget, stories, getStories } = useStory();
   const { getImage } = useFile();
   const [avatarUrl, setAvatarUrl] = useState(undefined);
@@ -185,6 +185,8 @@ const CommunityStories = ({ communityId, community }: ICommunityStories) => {
     return null;
   }
 
+  if (!hasStoryPermission && stories.length === 0) return null;
+
   return (
     <View style={styles.container}>
       <View style={styles.storyItemWrap}>{renderCommunityStory()}</View>

package/src/v4/component/MyStories/StoryCircleItem.tsx

@@ -27,7 +27,8 @@ const StoryCircleItem: FC<IStoryCircleItem> = ({
   const theme = useTheme() as MyMD3Theme;
   const [avatarUrl, setAvatarUrl] = useState(null);
   const [communityData, setCommunityData] = useState<Amity.Community>(null);
-  const hasStoryPermission = useStoryPermission(storyTarget.targetId);
+  const [communityLoading, setCommunityLoading] = useState(true);
+  const { hasStoryPermission } = useStoryPermission(storyTarget.targetId);
   const { getImage } = useFile();
   const { getUiKitConfig } = useConfig();
   const styles = useStyles();
@@ -43,13 +44,17 @@ const StoryCircleItem: FC<IStoryCircleItem> = ({
       : ['#e2e2e2', '#e2e2e2'];
 
   useEffect(() => {
-    if (storyTarget.targetType !== 'community') return;
-    CommunityRepository.getCommunity(
+    if (storyTarget.targetType !== 'community') return null;
+    const unsubscribe = CommunityRepository.getCommunity(
       storyTarget.targetId,
       async ({ error, loading, data }) => {
-        if (error) return;
+        if (error) {
+          setCommunityLoading(false);
+          return;
+        }
         if (!loading) {
           setCommunityData(data);
+          setCommunityLoading(false);
           const avatarImage = await getImage({
             fileId: data.avatarFileId,
             imageSize: ImageSizeState.small,
@@ -58,9 +63,17 @@ const StoryCircleItem: FC<IStoryCircleItem> = ({
         }
       }
     );
+    return () => unsubscribe();
   }, [getImage, storyTarget.targetId, storyTarget.targetType]);
 
   if (storyTarget.targetType !== 'community') return null;
+
+  // Global story feed: only show stories from communities the user has joined.
+  // Public community stories are visible on the community profile page,
+  // but must NOT appear in the global story feed for non-members.
+  // Private community stories are never returned by the SDK for non-members,
+  // but we guard here as an extra safety net.
+  if (!communityLoading && !communityData?.isJoined) return null;
   return (
     <TouchableOpacity
       key={storyTarget.targetId}

package/src/v4/component/MyStories/StoryTargetView.tsx

@@ -24,9 +24,11 @@ const StoryTargetView: FC<IStorytargetView> = ({
   setViewStory,
   onClose,
 }) => {
-  const cube = useRef<CubeNavigationHorizontal | AndroidCubeEffect>();
+  const cube = useRef<CubeNavigationHorizontal | AndroidCubeEffect | null>(
+    null
+  );
   const communityId = globalStoryTargets[currentCommunityIndex].targetId;
-  const hasStoryPermission = useStoryPermission(communityId);
+  const { hasStoryPermission } = useStoryPermission(communityId);
 
   const navigation =
     useNavigation() as NativeStackNavigationProp<RootStackParamList>;

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

@@ -18,7 +18,7 @@ import { useStyles } from './styles';
 import { getCommunityById } from '../../../providers/Social/communities-sdk';
 import { useNavigation } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { useIsCommunityModerator } from '../../hook';
+import { isModerator, useUser } from '../../hook';
 import {
   deletePostById,
   reportTargetById,
@@ -69,11 +69,7 @@ export function PostMenu({ pageId, componentId, post }: PostMenuProps) {
   const { postId, targetType, targetId } = post ?? {};
 
   const myId = (client as Amity.Client).userId;
-
-  const { isCommunityModerator: isIAmModerator } = useIsCommunityModerator({
-    communityId: targetType === 'community' && targetId,
-    userId: myId,
-  });
+  const currentUser = useUser(myId);
 
   useEffect(() => {
     if (targetType === 'community' && targetId) {
@@ -254,7 +250,8 @@ export function PostMenu({ pageId, componentId, post }: PostMenuProps) {
                   },
                 ],
               },
-              (post?.creator?.userId === myId || isIAmModerator) &&
+              (post?.creator?.userId === myId ||
+                isModerator(currentUser?.roles)) &&
                 ((childrenPost?.dataType !== 'room' &&
                   childrenPost?.dataType !== 'poll') ||
                   (childrenPost?.dataType === 'poll' &&
@@ -312,7 +309,8 @@ export function PostMenu({ pageId, componentId, post }: PostMenuProps) {
                   </Typography.BodyBold>
                 </TouchableOpacity>
               )}
-            {(post?.creator?.userId === myId || isIAmModerator) && (
+            {(post?.creator?.userId === myId ||
+              isModerator(currentUser?.roles)) && (
               <TouchableOpacity style={styles.menuItem} onPress={onDeletePost}>
                 <SvgXml
                   width="24"

package/src/v4/component/RenderTextWithMention/RenderTextWithMention.tsx

@@ -88,8 +88,8 @@ const RenderTextWithMention: React.FC<IrenderTextWithMention> = ({
   }
 
   let currentPosition = 0;
-  const result: (string | JSX.Element)[][] = heightlightTextPositions.map(
-    ({ index, length, userId, link }, i) => {
+  const result: (string | React.ReactElement)[][] =
+    heightlightTextPositions.map(({ index, length, userId, link }, i) => {
       // Add non-highlighted text before the mention
       const nonHighlightedText = textPost.slice(currentPosition, index);
       // Add highlighted text
@@ -109,8 +109,7 @@ const RenderTextWithMention: React.FC<IrenderTextWithMention> = ({
 
       // Return an array of non-highlighted and highlighted text
       return [nonHighlightedText, highlightedText];
-    }
-  );
+    });
 
   // Add any remaining non-highlighted text after the mentions
   const remainingText = textPost.slice(currentPosition);

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/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/DeleteThumbnailButton/DeleteThumbnailButton.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/features/community/Setting/elements/CloseCommunityDescription/CloseCommunityDescription.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { TouchableOpacityProps } from 'react-native';
+import { TextProps } from 'react-native';
 import { useAmityElement } from '../../../../../../v4/hook';
 import { ComponentID, ElementID, PageID } from '../../../../../../v4/enum';
 import { useStyles } from './styles';
 import { Typography } from '../../../../../../v4/component/Typography/Typography';
 
-type CloseCommunityDescriptionProps = TouchableOpacityProps & {
+type CloseCommunityDescriptionProps = TextProps & {
   pageId?: PageID;
   componentId?: ComponentID;
   elementId?: ElementID;

package/src/v4/hook/index.ts

@@ -14,7 +14,7 @@ export * from './useCommunities';
 export * from './useCommunity';
 export * from './useCategory';
 export * from './useUiKitReference';
-export * from './useIsCommunityModerator';
+export * from './isModerator';
 export * from './useSearch';
 export * from './useTimeDifference';
 export * from './useReaction';

package/src/v4/hook/isModerator.ts

@@ -0,0 +1,19 @@
+import { MemberRoles } from '../constants';
+
+const { COMMUNITY_MODERATOR, CHANNEL_MODERATOR, MODERATOR, SUPER_MODERATOR } =
+  MemberRoles;
+
+export const isModerator = (userRoles?: string[]) => {
+  if (!userRoles?.length) {
+    return false;
+  }
+
+  const roles: string[] = [
+    COMMUNITY_MODERATOR,
+    CHANNEL_MODERATOR,
+    MODERATOR,
+    SUPER_MODERATOR,
+  ];
+
+  return userRoles.some((role) => roles.includes(role));
+};

package/src/v4/hook/useStoryPermission.ts

@@ -1,11 +1,7 @@
 import useAuth from '../../hooks/useAuth';
 import { useUser } from './useUser';
 import useSocialSettings from '../core/hooks/useSocialSettings';
-import {
-  isAdmin,
-  isModerator,
-  checkStoryPermission,
-} from '../utils/permissions';
+import { checkStoryPermission, isAdmin } from '../utils/permissions';
 
 export function useStoryPermission(communityId?: string) {
   const { client } = useAuth();
@@ -13,14 +9,12 @@ export function useStoryPermission(communityId?: string) {
   const user = useUser(client?.userId || '');
 
   const isGlobalAdmin = isAdmin(user?.roles);
-  const isModeratorUser = isModerator(user?.roles);
 
   const hasStoryPermission = !communityId
     ? socialSettings?.story?.allowAllUserToCreateStory
     : socialSettings?.story?.allowAllUserToCreateStory ||
       isGlobalAdmin ||
-      isModeratorUser ||
       checkStoryPermission(client, communityId);
 
-  return hasStoryPermission;
+  return { hasStoryPermission };
 }