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

package/src/providers/file-provider.tsx

@@ -38,29 +38,51 @@ export async function uploadImageFile(
   perCentCallback?: (percent: number) => void
 ): Promise<Amity.File<'image'>[]> {
   return await new Promise(async (resolve, reject) => {
-    const formData = new FormData();
-    const parts = filePath.split('/');
-    const fileName = parts[parts.length - 1];
-    const fileType = Platform.OS === 'ios' ? 'image/jpeg' : 'image/jpg';
-    const uri =
-      Platform.OS === 'android' ? filePath : filePath.replace('file://', '');
+    try {
+      const formData = new FormData();
+      const parts = filePath.split('/');
+      const fileName = parts[parts.length - 1];
+      const fileType = Platform.OS === 'ios' ? 'image/jpeg' : 'image/jpg';
+      const uri =
+        Platform.OS === 'android' ? filePath : filePath.replace('file://', '');
 
-    formData.append('files', {
-      name: fileName,
-      type: fileType,
-      uri: uri,
-    });
+      formData.append('files', {
+        name: fileName,
+        type: fileType,
+        uri: uri,
+      });
 
-    const { data: file } = await FileRepository.uploadImage(
-      formData,
-      (percent) => {
-        perCentCallback && perCentCallback(percent);
+      const { data: file } = await FileRepository.uploadImage(
+        formData,
+        (percent) => {
+          perCentCallback && perCentCallback(percent);
+        }
+      );
+
+      if (file) {
+        resolve(file);
+      } else {
+        reject({ message: 'Upload failed - no file data returned' });
+      }
+    } catch (error: any) {
+      if (
+        error?.message?.includes('INVALID_IMAGE') ||
+        error?.message?.includes('Inappropriate')
+      ) {
+        reject({
+          message: 'Inappropriate image',
+          details: 'Please choose a different image to upload.',
+          code: 'INVALID_IMAGE',
+        });
+      } else {
+        reject({
+          message: 'Upload failed',
+          details:
+            error?.message ||
+            "We couldn't complete your upload. Please try again.",
+          originalError: error,
+        });
       }
-    );
-    if (file) {
-      resolve(file);
-    } else {
-      reject('Upload error');
     }
   });
 }

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/redux/slices/globalfeedSlice.ts

@@ -21,23 +21,28 @@ const globalFeedSlice = createSlice({
   initialState,
   reducers: {
     setNewGlobalFeed: (state, action: PayloadAction<Amity.Post<any>[]>) => {
-      state.postList = [...action.payload];
+      const seen = new Set<string>();
+      state.postList = action.payload.filter((post) => {
+        if (seen.has(post.postId)) return false;
+        seen.add(post.postId);
+        return true;
+      });
     },
     updateGlobalFeed: (state, action: PayloadAction<Amity.Post<any>[]>) => {
-      const getUniqueArrayById = (arr: (Amity.Post<any> | Amity.Ad)[]) => {
-        const uniqueIds = new Set(
-          state.postList.map((post) =>
-            isAmityAd(post) ? post.adId : post.postId
-          )
-        );
-        return arr.filter(
-          (post) => !uniqueIds.has(isAmityAd(post) ? post.adId : post.postId)
-        );
-      };
-      state.postList = [
-        ...state.postList,
-        ...getUniqueArrayById(action.payload),
-      ];
+      const uniqueIds = new Set(
+        state.postList.map((post) =>
+          isAmityAd(post) ? post.adId : post.postId
+        )
+      );
+      const newUnique: (Amity.Post<any> | Amity.Ad)[] = [];
+      for (const post of action.payload) {
+        const id = isAmityAd(post) ? post.adId : post.postId;
+        if (!uniqueIds.has(id)) {
+          uniqueIds.add(id);
+          newUnique.push(post);
+        }
+      }
+      state.postList = [...state.postList, ...newUnique];
     },
     setPaginationData: (
       state,
@@ -46,7 +51,12 @@ const globalFeedSlice = createSlice({
       state.paginationData = action.payload;
     },
     addPostToGlobalFeed: (state, action: PayloadAction<Amity.Post<any>>) => {
-      state.postList = [action.payload, ...state.postList];
+      const alreadyExists = state.postList.some(
+        (item) => !isAmityAd(item) && item.postId === action.payload.postId
+      );
+      if (!alreadyExists) {
+        state.postList = [action.payload, ...state.postList];
+      }
     },
     updateByPostId: (
       state,

package/src/screens/CommunitySearch/index.tsx

@@ -15,6 +15,7 @@ import { useNavigation } from '@react-navigation/native';
 import CustomTab from '../../components/CustomTab';
 import {
   CommunityRepository,
+  SearchUsersByEnum,
   UserRepository,
 } from '@amityco/ts-sdk-react-native';
 import type { ISearchItem } from '../../components/SearchItem';
@@ -83,7 +84,12 @@ export default function CommunitySearch() {
   const searchAccounts = (text: string = '') => {
     if (text.length > 2) {
       const unsubscribe = UserRepository.searchUserByDisplayName(
-        { displayName: text, limit: 20 },
+        {
+          displayName: text,
+          limit: 20,
+          searchBy: [SearchUsersByEnum.DISPLAY_NAME],
+          matchType: UserRepository.AmityUserSearchMatchType.PARTIAL,
+        },
         (data) => {
           setUsersObject(data);
         }

package/src/screens/CreateLivestream/CreateLivestream.tsx

@@ -16,7 +16,7 @@ import { useStyles } from './styles';
 import useImagePicker from '../../../src/hooks/useImagePicker';
 import { uploadImageFile } from '../../../src/providers/file-provider';
 
-import { StreamRepository, PostRepository } from '@amityco/ts-sdk-react-native';
+import { PostRepository, RoomRepository } from '@amityco/ts-sdk-react-native';
 import BottomSheet, { BottomSheetMethods } from '@devvie/bottom-sheet';
 
 // import {
@@ -55,7 +55,7 @@ const CreateLivestream = ({ navigation, route }) => {
 
   const [title, setTitle] = useState<string>('');
   const [description, setDescription] = useState<string>('');
-  const [stream, setStream] = useState<Amity.Stream | null>(null);
+  const [room, setRoom] = useState<Amity.Room | null>(null);
   const [isLive, setIsLive] = useState<boolean>(false);
   const [timer] = useState<number | null>(null);
 
@@ -141,16 +141,16 @@ const CreateLivestream = ({ navigation, route }) => {
   }, []);
 
   const createStreamPost = useCallback(
-    (newStream: Amity.Stream) => {
+    (newRoom: Amity.Room) => {
       const params = {
         targetId,
         targetType,
-        dataType: 'liveStream' as Amity.PostContentType,
+        dataType: 'room' as Amity.PostContentType,
         data: {
-          text: `${newStream.title}${
-            newStream.description ? `\n\n${newStream.description}` : ''
+          text: `${newRoom.title}${
+            newRoom.description ? `\n\n${newRoom.description}` : ''
           }`,
-          streamId: newStream.streamId,
+          roomId: newRoom.roomId,
         },
       };
 
@@ -168,18 +168,18 @@ const CreateLivestream = ({ navigation, route }) => {
 
       if (imageUri) fileId = await uploadFile(imageUri);
 
-      const { data: newStream } = await StreamRepository.createStream({
+      const { data: newRoom } = await RoomRepository.createRoom({
         title,
         description: description || undefined,
         thumbnailFileId: fileId,
       });
 
-      if (newStream) {
-        const { data: newPost } = await createStreamPost(newStream);
-        setStream(newStream);
+      if (newRoom) {
+        const { data: newPost } = await createStreamPost(newRoom);
+        setRoom(newRoom);
         setPost(newPost);
 
-        streamRef?.current.startPublish(newStream.streamId);
+        streamRef?.current.startPublish(newRoom.roomId);
       }
     } else emptyTitleAlert();
   }, [title, description, createStreamPost, imageUri, uploadFile]);
@@ -193,17 +193,17 @@ const CreateLivestream = ({ navigation, route }) => {
   // };
 
   const onStopStream = useCallback(async () => {
-    if (stream) {
+    if (room) {
       setIsEnding(true);
       try {
-        await StreamRepository.disposeStream(stream.streamId);
+        await RoomRepository.stopRoom(room.roomId);
       } catch (e) {
-        console.log('disposeStream error', e);
+        console.log('stopRoom error', e);
       }
 
       streamRef?.current.stopPublish();
       setIsLive(false);
-      setStream(null);
+      setRoom(null);
       setTitle(undefined);
       setDescription(undefined);
       setTime(0);
@@ -214,7 +214,7 @@ const CreateLivestream = ({ navigation, route }) => {
         postId: post.postId,
       });
     }
-  }, [stream, timer, post, navigation]);
+  }, [room, timer, post, navigation]);
 
   const onSwitchCamera = () => {
     streamRef?.current.switchCamera();

package/src/screens/LivestreamPlayer/index.tsx

@@ -7,14 +7,11 @@ import {
 } from 'react-native';
 import { useStyles } from './styles';
 
-// @ts-ignore
-// import { AmityStreamPlayer } from '@amityco/video-player-react-native';
-
 import LivestreamEndedView from '../../v4/component/LivestreamContent/LivestreamEndedThumbnail';
 import { Animated } from 'react-native';
 import { SvgXml } from 'react-native-svg';
 import { closeIcon, playIcon, stopIcon } from '../../svg/svg-xml-list';
-import { StreamRepository } from '@amityco/ts-sdk-react-native';
+import { RoomRepository } from '@amityco/ts-sdk-react-native';
 
 const LiveStreamPlayer = ({ navigation, route }) => {
   const ref = useRef<any>(null);
@@ -24,9 +21,9 @@ const LiveStreamPlayer = ({ navigation, route }) => {
 
   const [isPlaying, setIsPlaying] = useState(true);
 
-  const { streamId } = route.params;
+  const { roomId } = route.params;
 
-  const [livestream, setLivestream] = useState<Amity.Stream>();
+  const [livestream, setLivestream] = useState<Amity.Room>();
 
   const onClosePlayer = () => {
     navigation.goBack();
@@ -59,15 +56,12 @@ const LiveStreamPlayer = ({ navigation, route }) => {
 
   useEffect(() => {
     const getLivestream = () => {
-      return StreamRepository.getStreamById(
-        streamId,
-        ({ data, loading, error }) => {
-          if (error) console.error('Error fetching livestream', error);
-          if (!loading && data) {
-            setLivestream({ ...data });
-          }
+      return RoomRepository.getRoom(roomId, ({ data, loading, error }) => {
+        if (error) console.error('Error fetching livestream', error);
+        if (!loading && data) {
+          setLivestream({ ...data });
         }
-      );
+      });
     };
 
     const unsubscribe = getLivestream();
@@ -75,7 +69,7 @@ const LiveStreamPlayer = ({ navigation, route }) => {
     return () => {
       unsubscribe();
     };
-  }, [streamId]);
+  }, [roomId]);
 
   return (
     <View style={styles.container}>

package/src/snippet/AmityGlobalFeedComponent.tsx

@@ -25,6 +25,11 @@ import config from '../../uikit.config.json';
     },
   }}
 >
-  <AmityGlobalFeedComponent />
+  <AmityGlobalFeedComponent
+    itemWithAds={[]}
+    refresh={() => Promise.resolve()}
+    loading={false}
+    onNextPage={() => null}
+  />
 </AmityUiKitProvider>;
 /* end_sample_code */

package/src/svg/svg-xml-list.ts

@@ -396,7 +396,7 @@ export const editThumbnailIcon = (
 export const livestreamIcon = (
   color: string = '#292B32'
 ) => `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.41406 8.80469L8.02734 8.41797C7.92188 8.3125 7.78125 8.24219 7.64062 8.24219C7.46484 8.24219 7.28906 8.3125 7.18359 8.45312C6.30469 9.47266 5.8125 10.8086 5.8125 12.25C5.8125 13.7266 6.30469 15.0625 7.18359 16.082C7.28906 16.2227 7.46484 16.293 7.64062 16.293C7.78125 16.293 7.92188 16.2227 8.02734 16.1172L8.41406 15.7305C8.51953 15.625 8.58984 15.5195 8.58984 15.3438C8.58984 15.2383 8.55469 15.0977 8.48438 15.0273C7.85156 14.2539 7.5 13.3047 7.5 12.2852C7.5 11.2305 7.85156 10.2812 8.48438 9.50781C8.55469 9.4375 8.58984 9.29688 8.58984 9.19141C8.58984 9.01562 8.51953 8.91016 8.41406 8.80469ZM5.63672 6.0625L5.25 5.67578C5.14453 5.57031 5.00391 5.53516 4.82812 5.53516C4.65234 5.53516 4.51172 5.60547 4.40625 5.71094C2.75391 7.50391 1.875 9.82422 1.875 12.25C1.875 14.7109 2.75391 16.9961 4.40625 18.8242C4.51172 18.9297 4.65234 19.0352 4.82812 19.0352C5.00391 19.0352 5.14453 18.9648 5.25 18.8594L5.63672 18.4727C5.84766 18.2617 5.84766 17.9453 5.63672 17.6992C4.33594 16.2578 3.5625 14.3594 3.5625 12.2852C3.5625 10.1758 4.33594 8.27734 5.63672 6.83594C5.84766 6.58984 5.84766 6.27344 5.63672 6.0625ZM19.5586 5.71094C19.4531 5.60547 19.3125 5.5 19.1367 5.5C18.9609 5.5 18.8203 5.57031 18.75 5.67578L18.3281 6.0625C18.1172 6.27344 18.1172 6.58984 18.3281 6.83594C19.6289 8.27734 20.4023 10.1758 20.4023 12.25C20.4023 14.3594 19.6289 16.2578 18.3281 17.6992C18.1172 17.9453 18.1172 18.2617 18.3281 18.4727L18.75 18.8594C18.8203 18.9648 18.9609 19 19.1367 19C19.3125 19 19.4531 18.9297 19.5586 18.8242C21.2109 16.9961 22.125 14.7109 22.125 12.25C22.125 9.82422 21.2109 7.50391 19.5586 5.71094ZM12 10.2812C10.9102 10.2812 10.0312 11.1953 10.0312 12.25C10.0312 13.3398 10.9102 14.2188 12 14.2188C13.0547 14.2188 13.9688 13.3398 13.9688 12.25C13.9688 11.1953 13.0547 10.2812 12 10.2812ZM15.9375 8.41797L15.5508 8.80469C15.4453 8.91016 15.375 9.01562 15.375 9.19141C15.375 9.29688 15.4102 9.4375 15.4805 9.50781C16.1133 10.2812 16.4648 11.2305 16.4648 12.25C16.4648 13.3047 16.1133 14.2539 15.4805 15.0273C15.4102 15.0977 15.375 15.2383 15.375 15.3438C15.375 15.5195 15.4453 15.625 15.5508 15.7305L15.9375 16.1172C16.043 16.2227 16.1836 16.293 16.3242 16.293C16.5 16.293 16.6758 16.2227 16.7812 16.082C17.6602 15.0625 18.1523 13.7266 18.1523 12.2852C18.1523 10.8086 17.6602 9.47266 16.7812 8.45312C16.6758 8.3125 16.5 8.24219 16.3242 8.24219C16.1836 8.24219 16.043 8.3125 15.9375 8.41797Z" fill=${color}/>
+<path d="M8.41406 8.80469C8.51953 8.91016 8.58984 9.01562 8.58984 9.19141C8.58984 9.29688 8.55469 9.4375 8.48438 9.50781C7.85156 10.2812 7.5 11.2305 7.5 12.2852C7.5 13.3047 7.85156 14.2539 8.48438 15.0273C8.55469 15.0977 8.58984 15.2383 8.58984 15.3438C8.58984 15.5195 8.51953 15.625 8.41406 15.7305L8.02734 16.1172C7.92188 16.2227 7.78125 16.293 7.64062 16.293C7.46484 16.293 7.28906 16.2227 7.18359 16.082C6.30469 15.0625 5.8125 13.7266 5.8125 12.25C5.8125 10.8086 6.30469 9.47266 7.18359 8.45312C7.28906 8.3125 7.46484 8.24219 7.64062 8.24219C7.78125 8.24219 7.92188 8.3125 8.02734 8.41797L8.41406 8.80469ZM5.63672 6.0625C5.84766 6.27344 5.84766 6.58984 5.63672 6.83594C4.33594 8.27734 3.5625 10.1758 3.5625 12.2852C3.5625 14.3594 4.33594 16.2578 5.63672 17.6992C5.84766 17.9453 5.84766 18.2617 5.63672 18.4727L5.25 18.8594C5.14453 18.9648 5.00391 19.0352 4.82812 19.0352C4.65234 19.0352 4.51172 18.9297 4.40625 18.8242C2.75391 16.9961 1.875 14.7109 1.875 12.25C1.875 9.82422 2.75391 7.50391 4.40625 5.71094C4.51172 5.60547 4.65234 5.53516 4.82812 5.53516C5.00391 5.53516 5.14453 5.57031 5.25 5.67578L5.63672 6.0625ZM19.5586 5.71094C21.2109 7.50391 22.125 9.82422 22.125 12.25C22.125 14.7109 21.2109 16.9961 19.5586 18.8242C19.4531 18.9297 19.3125 19 19.1367 19C18.9609 19 18.8203 18.9648 18.75 18.8594L18.3281 18.4727C18.1172 18.2617 18.1172 17.9453 18.3281 17.6992C19.6289 16.2578 20.4023 14.3594 20.4023 12.25C20.4023 10.1758 19.6289 8.27734 18.3281 6.83594C18.1172 6.58984 18.1172 6.27344 18.3281 6.0625L18.75 5.67578C18.8203 5.57031 18.9609 5.5 19.1367 5.5C19.3125 5.5 19.4531 5.60547 19.5586 5.71094ZM12 10.2812C13.0547 10.2812 13.9688 11.1953 13.9688 12.25C13.9688 13.3398 13.0547 14.2188 12 14.2188C10.9102 14.2188 10.0312 13.3398 10.0312 12.25C10.0312 11.1953 10.9102 10.2812 12 10.2812ZM15.9375 8.41797C16.043 8.3125 16.1836 8.24219 16.3242 8.24219C16.5 8.24219 16.6758 8.3125 16.7812 8.45312C17.6602 9.47266 18.1523 10.8086 18.1523 12.2852C18.1523 13.7266 17.6602 15.0625 16.7812 16.082C16.6758 16.2227 16.5 16.293 16.3242 16.293C16.1836 16.293 16.043 16.2227 15.9375 16.1172L15.5508 15.7305C15.4453 15.625 15.375 15.5195 15.375 15.3438C15.375 15.2383 15.4102 15.0977 15.4805 15.0273C16.1133 14.2539 16.4648 13.3047 16.4648 12.25C16.4648 11.2305 16.1133 10.2812 15.4805 9.50781C15.4102 9.4375 15.375 9.29688 15.375 9.19141C15.375 9.01562 15.4453 8.91016 15.5508 8.80469L15.9375 8.41797Z" fill=${color}/>
 </svg>
 `;
 
@@ -429,3 +429,9 @@ export const infoIcon = (
 ): string => `<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M8 2.25006C4.25 2.25006 1.25 5.28131 1.25 9.00006C1.25 12.7501 4.25 15.7501 8 15.7501C11.7188 15.7501 14.75 12.7501 14.75 9.00006C14.75 5.28131 11.6875 2.25006 8 2.25006ZM8 1.25006C12.25 1.25006 15.75 4.75006 15.75 9.00006C15.75 13.2813 12.25 16.7501 8 16.7501C3.71875 16.7501 0.25 13.2813 0.25 9.00006C0.25 4.75006 3.71875 1.25006 8 1.25006ZM6.875 12.0001H7.25V8.25006H6.875C6.65625 8.25006 6.5 8.09381 6.5 7.87506V7.62506C6.5 7.43756 6.65625 7.25006 6.875 7.25006H8.375C8.5625 7.25006 8.75 7.43756 8.75 7.62506V12.0001H9.125C9.3125 12.0001 9.5 12.1876 9.5 12.3751V12.6251C9.5 12.8438 9.3125 13.0001 9.125 13.0001H6.875C6.65625 13.0001 6.5 12.8438 6.5 12.6251V12.3751C6.5 12.1876 6.65625 12.0001 6.875 12.0001ZM8 4.50006C8.53125 4.50006 9 4.96881 9 5.50006C9 6.06256 8.53125 6.50006 8 6.50006C7.4375 6.50006 7 6.06256 7 5.50006C7 4.96881 7.4375 4.50006 8 4.50006Z" fill="${color}"/>
 </svg>`;
+export const errorIcon = (
+  color: string = '#fff'
+): string => `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="7.25" fill="#FA4D30" stroke="#fff" strokeWidth="1.5"></circle>
+<path d="M9.25 10.75C9.25 11.453 8.687 12 8 12c-.703 0-1.25-.547-1.25-1.25 0-.688.547-1.25 1.25-1.25.688 0 1.25.563 1.25 1.25zM6.89 4.406A.378.378 0 017.267 4h1.453c.219 0 .39.188.375.406l-.203 4.25A.387.387 0 018.516 9H7.469a.387.387 0 01-.375-.344l-.203-4.25z" fill="${color}"/>
+</svg>`;

package/src/types/auth.interface.ts

@@ -9,4 +9,5 @@ export type AuthContextInterface = {
   apiRegion: string;
   authToken?: string;
   fcmToken?: string;
+  isGlobalBan: boolean;
 };

package/src/types/user.interface.ts

@@ -11,4 +11,5 @@ export interface UserInterface {
   userId: string;
   displayName: string;
   avatarFileId: string;
+  avatarCustomUrl?: string;
 }

package/src/util/postTypeChecker.ts

@@ -8,7 +8,7 @@ export const isTextPost = (
 
 export const isStreamPost = (
   post?: Amity.Post | null
-): post is Amity.Post<'liveStream'> => {
+): post is Amity.Post<'room'> => {
   return !!(
     post &&
     post.data &&

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

@@ -1,17 +1,13 @@
 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';
 import CommunityName from '../../../elements/CommunityName/CommunityName';
 import CommunityVerifyBadge from '../../../elements/CommunityVerifyBadge/CommunityVerifyBadge';
-import CommunityCategory from '../../../elements/CommunityCatetory/CommunityCategory';
 import CommunityDescription from '../../../elements/CommunityDescription/CommunityDescription';
 import CommunityInfo from '../../../elements/CommunityInfo/CommunityInfo';
 import CommunityJoinButtonElement from '../../../elements/CommunityJoinButtonElement/CommunityJoinButtonElement';
@@ -24,6 +20,7 @@ import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { RootStackParamList } from '../../../../v4/routes/RouteParamList';
 import { Client } from '@amityco/ts-sdk-react-native';
+import { CommunityCategories } from '../../../../v4/features/feed/components';
 
 export interface AmityCommunityHeaderRef {
   height: number;
@@ -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);
 
@@ -135,10 +130,10 @@ const AmityCommunityHeaderComponent: FC<AmityCommunityHeaderComponentProps> = ({
               <CommunityVerifyBadge pageId={pageId} componentId={componentId} />
             )}
           </View>
-          <CommunityCategory
+          <CommunityCategories
             pageId={pageId}
             componentId={componentId}
-            categoryIds={community.categoryIds}
+            categories={community.categories}
             allVisible={true}
             style={styles.categoryWrap}
           />

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

@@ -1,13 +1,14 @@
 import React, { useCallback, memo } from 'react';
 import { StyleSheet, View } from 'react-native';
-import { ComponentID, ElementID, PageID } from '../../../enum/enumUIKitID';
+import { ComponentID, PageID } from '../../../enum/enumUIKitID';
 import { useAmityComponent, useStoryPermission } from '../../../hook';
 import { useBehaviour } from '../../../providers/BehaviourProvider';
 import { useNavigation } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { RootStackParamList } from '../../../../v4/routes/RouteParamList';
-import ButtonWithIconElement from '../../Elements/ButtonWithIconElement/ButtonWithIconElement';
 import { AmityPostTargetSelectionPageType } from '../../../enum';
+import { livestream, poll, post, story } from '../../../../v4/assets/icons';
+import MenuAction from '../../../../v4/elements/MenuAction';
 
 interface AmityCreatePostMenuComponentProps {
   pageId?: PageID;
@@ -17,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: {
@@ -32,6 +33,13 @@ const AmityCreatePostMenuComponent = ({
       backgroundColor: themeStyles.colors.background,
       borderRadius: 12,
     },
+    menu: {
+      gap: 12,
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
   });
 
   const onPressCreatePost = useCallback(
@@ -62,14 +70,14 @@ const AmityCreatePostMenuComponent = ({
           navigation.navigate('PollTargetSelection');
         },
 
-        // [AmityPostTargetSelectionPageType.livestream]: () => {
-        //   if (
-        //     AmityCreatePostMenuComponentBehavior.goToSelectLivestreamPostTargetPage
-        //   ) {
-        //     AmityCreatePostMenuComponentBehavior.goToSelectLivestreamPostTargetPage();
-        //   }
-        //   navigation.navigate('LivestreamPostTargetSelection');
-        // },
+        [AmityPostTargetSelectionPageType.livestream]: () => {
+          if (
+            AmityCreatePostMenuComponentBehavior.goToSelectLivestreamPostTargetPage
+          ) {
+            AmityCreatePostMenuComponentBehavior.goToSelectLivestreamPostTargetPage();
+          }
+          navigation.navigate('LivestreamPostTargetSelection');
+        },
       };
       postTypeHandlers[postType]?.();
     },
@@ -78,36 +86,44 @@ const AmityCreatePostMenuComponent = ({
 
   return (
     <View style={styles.container}>
-      <ButtonWithIconElement
-        pageId={pageId}
-        componentId={componentId}
-        elementId={ElementID.create_post_button}
-        onClick={() => onPressCreatePost(AmityPostTargetSelectionPageType.post)}
+      <MenuAction
+        onPress={() => onPressCreatePost(AmityPostTargetSelectionPageType.post)}
+        style={styles.menu}
+        label="Post"
+        iconProps={{
+          xml: post(),
+        }}
       />
       {hasStoryPermission && (
-        <ButtonWithIconElement
-          pageId={pageId}
-          componentId={componentId}
-          elementId={ElementID.create_story_button}
-          onClick={() =>
+        <MenuAction
+          style={styles.menu}
+          label="Story"
+          iconProps={{
+            xml: story(),
+          }}
+          onPress={() =>
             onPressCreatePost(AmityPostTargetSelectionPageType.story)
           }
         />
       )}
-      <ButtonWithIconElement
-        pageId={pageId}
-        componentId={componentId}
-        elementId={ElementID.create_poll_button}
-        onClick={() => onPressCreatePost(AmityPostTargetSelectionPageType.poll)}
+      <MenuAction
+        style={styles.menu}
+        label="Poll"
+        iconProps={{
+          xml: poll(),
+        }}
+        onPress={() => onPressCreatePost(AmityPostTargetSelectionPageType.poll)}
       />
-      {/* <ButtonWithIconElement
-        pageId={pageId}
-        componentId={componentId}
-        elementId={ElementID.create_livestream_button}
-        onClick={() =>
+      <MenuAction
+        style={styles.menu}
+        label="Livestream"
+        iconProps={{
+          xml: livestream(),
+        }}
+        onPress={() =>
           onPressCreatePost(AmityPostTargetSelectionPageType.livestream)
         }
-      /> */}
+      />
     </View>
   );
 };