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

package/src/v4/elements/CommunityRowImage/CommunityRowImage.tsx

@@ -1,67 +1,40 @@
-import React, { FC, memo, useEffect, useState } from 'react';
+import React, { FC, memo } from 'react';
 import LinearGradient from 'react-native-linear-gradient';
 import { ComponentID, ElementID, PageID } from '../../enum';
-import { useAmityElement, useConfigImageUri, useFile } from '../../hook';
+import { useAmityElement } from '../../hook';
 import { Image, View } from 'react-native';
 import { useStyles } from './styles';
 import { Typography } from '../../component/Typography/Typography';
 import { SvgXml } from 'react-native-svg';
 import { community as communityIcon } from '../../assets/icons';
+import { getFileUrlWithSize } from '../../../v4/utils';
 
 type CommunityRowImageyProps = {
-  fileId?: string;
+  fileUrl?: string;
   pageId?: PageID;
   componentId?: ComponentID;
   label?: string;
 };
 
 const CommunityRowImagey: FC<CommunityRowImageyProps> = ({
-  fileId,
+  fileUrl,
   pageId = PageID.WildCardPage,
   componentId = ComponentID.WildCardComponent,
   label,
 }) => {
-  // TODO: add state loading and loading skeleton
   const elementId = ElementID.community_row_image;
   const styles = useStyles();
-  const [image, setImage] = useState<string | undefined>(undefined);
   const { accessibilityId } = useAmityElement({
     pageId,
     componentId,
     elementId,
   });
 
-  const { uri } = useConfigImageUri({
-    configPath: {
-      page: pageId,
-      component: componentId,
-      element: elementId,
-    },
-    configKey: 'image',
-  });
-
-  const { getImage } = useFile();
-
-  useEffect(() => {
-    const getImageUrl = async () => {
-      if (!fileId) return;
-
-      if (!fileId && uri) {
-        setImage(uri);
-      } else if (fileId) {
-        const url = await getImage({ fileId });
-        setImage(url);
-      }
-    };
-
-    getImageUrl();
-  }, [uri, fileId, getImage]);
-
   return (
     <View testID={accessibilityId} style={styles.container}>
-      {image ? (
+      {fileUrl ? (
         <Image
-          source={{ uri: image as string }}
+          source={{ uri: getFileUrlWithSize(fileUrl) }}
           style={styles.image}
           resizeMode="cover"
         />

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/elements/ImageViewer/ImageViewer.tsx

@@ -27,7 +27,7 @@ const ImageViewer: FC<ImageViewerProps> = ({
   images,
   onNextImage,
   onPreviousImage,
-  onClose = () => { },
+  onClose = () => {},
 }) => {
   const [active, setActive] = useState(currentImageIndex);
   const scrollViewRef = useRef<ScrollView>(null);

package/src/v4/elements/VideoViewer/VideoViewer.tsx

@@ -27,7 +27,7 @@ const VideoViewer: FC<VideoViewerProps> = ({
   images,
   onNextImage,
   onPreviousImage,
-  onClose = () => { },
+  onClose = () => {},
 }) => {
   const [active, setActive] = useState(currentImageIndex);
   const scrollViewRef = useRef<ScrollView>(null);

package/src/v4/engine/AssetDownloader.ts

@@ -60,7 +60,7 @@ class AssetDownloader {
 
     try {
       // Begin download
-      const accessToken = this.client.token.accessToken;
+      const accessToken = this?.client?.token?.accessToken;
       const downloadOptions = {
         fromUrl: url,
         headers: {

package/src/v4/enum/roomStatus.ts

@@ -0,0 +1,9 @@
+export const RoomStatus = {
+  idle: 'idle',
+  live: 'live',
+  recorded: 'recorded',
+  ended: 'ended',
+  waitingReconnect: 'waitingReconnect',
+  terminated: 'terminated',
+  error: 'error',
+} as const satisfies Record<Amity.RoomStatus, Amity.RoomStatus>;

package/src/v4/features/community/AddMember/hooks/useAddMember.ts

@@ -6,6 +6,10 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import { useUserCollection } from '../../../../../v4/hook/collections/useUserCollection';
 import { useSearchUserByDisplayNameCollection } from '../../../../../v4/hook/collections/useSearchUserByDisplayNameCollection';
+import {
+  SearchUsersByEnum,
+  UserRepository,
+} from '@amityco/ts-sdk-react-native';
 
 type UseAddMemberProps = {
   communityId?: string;
@@ -47,6 +51,8 @@ function useAddMember({ communityId }: UseAddMemberProps = {}) {
     params: {
       displayName: values.search,
       limit: 20,
+      searchBy: [SearchUsersByEnum.DISPLAY_NAME],
+      matchType: UserRepository.AmityUserSearchMatchType.PARTIAL,
     },
     enabled: !!values.search && !communityId,
   });

package/src/v4/features/community/Membership/components/MemberItem/MemberItem.tsx

@@ -9,8 +9,17 @@ import { useBottomSheet } from '../../../../../../redux/slices/bottomSheetSlice'
 import MenuAction from '../../../../../../v4/elements/MenuAction';
 import { MemberRoles } from '../../../../../../v4/constants';
 import { useToast } from '../../../../../../v4/stores/slices/toast';
-import { demote, promote, report, trash, unreport } from '../../../../../../v4/assets/icons';
-import { checkEditRolePermission, isModerator } from '../../../../../../v4/utils/permissions';
+import {
+  demote,
+  promote,
+  report,
+  trash,
+  unreport,
+} from '../../../../../../v4/assets/icons';
+import {
+  checkEditRolePermission,
+  isModerator,
+} from '../../../../../../v4/utils/permissions';
 import {
   useRolesQuery,
   useMembersQuery,
@@ -212,6 +221,7 @@ function MemberItem({ member, communityId, refreshMembers }: MemberItemProps) {
           uri={member.user?.avatarCustomUrl}
           roles={member.roles}
           userName={member.user?.displayName ?? member.user?.userId}
+          userId={member.userId}
         />
         <Typography.BodyBold
           style={styles.userName}

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/features/community/Setting/hooks/useCommunitySetting.ts

@@ -18,7 +18,9 @@ export function useCommunitySetting(community: Amity.Community) {
     >();
   const { AmityCommunitySettingPageBehavior } = useBehaviour();
   const { showToast } = useToast();
-  const { refresh } = useCustomRankingGlobalFeed();
+  const { refresh, globalFeedPosts } = useCustomRankingGlobalFeed({
+    enabled: false,
+  });
 
   const { mutate: leaveCommunity } = useMutation({
     mutationFn: async () =>
@@ -26,7 +28,7 @@ export function useCommunitySetting(community: Amity.Community) {
     onSuccess: () => {
       navigation.goBack();
       showToast({ message: 'Successfully left the group', type: 'success' });
-      setTimeout(() => refresh(), 3000);
+      globalFeedPosts.length === 0 && setTimeout(() => refresh(), 3000);
     },
     onError: (error) => {
       if (error.message.includes(ERROR_CODE.ONLY_ONE_MODERATOR)) {

package/src/v4/features/community/shared/components/Privacy/index.tsx

@@ -5,7 +5,10 @@ import { Radio } from '../../../../../../v4/component/core/Radio';
 import { ElementID, PageID } from '../../../../../../v4/enum';
 import FormLabel from '../../../../../../v4/elements/FormLabel';
 import { AmityCommunityPrivacyEnum } from '../../types';
-import { public as $public, private as $private } from '../../../../../../v4/assets/icons';
+import {
+  public as $public,
+  private as $private,
+} from '../../../../../../v4/assets/icons';
 import { Title } from '../../../../../../v4/elements';
 import FormDescription from '../../../../../../v4/elements/FormDescription';
 import CommunityPrivacyIcon from '../../../../../../v4/elements/CommunityPrivacyIcon';

package/src/v4/{component/CommunityCategoryChips/CommunityCategoryChips.tsx → features/feed/components/CommunityCategories/CommunityCategories.tsx}

@@ -1,26 +1,26 @@
 import React from 'react';
 import { Text, View, ViewProps, ScrollView } from 'react-native';
-import { CommunityCategoryChip } from './CommunityCategoryChip/CommunityCategoryChip';
-import type { MyMD3Theme } from 'src/providers/amity-ui-kit-provider';
+import { CommunityCategory } from '../../elements/CommunityCategory/CommunityCategory';
 import { useStyles } from './styles';
+import { ComponentID, PageID } from '../../../../enum';
 
-type CommunityCategoryChipsProps = ViewProps & {
-  themeStyles: MyMD3Theme;
-  categoryIds: string[];
+type CommunityCategoriesProps = ViewProps & {
+  categories: Amity.Category[];
+  pageId?: PageID;
+  componentId?: ComponentID;
   allVisible?: boolean;
 };
 
 const MAX_VISIBLE_CATEGORIES = 2;
 
-export const CommunityCategoryChips: React.FC<CommunityCategoryChipsProps> = ({
-  categoryIds,
-  themeStyles,
+export function CommunityCategories({
+  categories = [],
   allVisible,
   ...props
-}) => {
-  const styles = useStyles(themeStyles);
-  const visibleCategories = categoryIds.slice(0, MAX_VISIBLE_CATEGORIES);
-  const hiddenCategoriesCount = categoryIds.length - MAX_VISIBLE_CATEGORIES;
+}: CommunityCategoriesProps) {
+  const { styles } = useStyles();
+  const visibleCategories = categories.slice(0, MAX_VISIBLE_CATEGORIES);
+  const hiddenCategoriesCount = categories.length - MAX_VISIBLE_CATEGORIES;
   const showMoreText =
     hiddenCategoriesCount > 0 ? `+${hiddenCategoriesCount}` : '';
   const showMore = hiddenCategoriesCount > 0;
@@ -51,7 +51,7 @@ export const CommunityCategoryChips: React.FC<CommunityCategoryChipsProps> = ({
   };
 
   // Choose all categories or just the visible ones based on allVisible
-  const displayCategories = allVisible ? categoryIds : visibleCategories;
+  const displayCategories = allVisible ? categories : visibleCategories;
   // Only show more indicator if not showing all categories
   const displayShowMore = !allVisible && showMore;
 
@@ -63,23 +63,21 @@ export const CommunityCategoryChips: React.FC<CommunityCategoryChipsProps> = ({
           showsHorizontalScrollIndicator={false}
           contentContainerStyle={styles.scrollableContainer}
         >
-          {displayCategories.map((id, index) => (
-            <CommunityCategoryChip
+          {displayCategories.map((category, index) => (
+            <CommunityCategory
               key={index}
-              categoryId={id}
+              categoryName={category.name}
               maxWidth={getMaxWidthForItem(displayCategories.length)}
-              themeStyles={themeStyles}
             />
           ))}
         </ScrollView>
       ) : (
         <>
-          {displayCategories.map((id, index) => (
-            <CommunityCategoryChip
+          {displayCategories.map((category, index) => (
+            <CommunityCategory
               key={index}
-              categoryId={id}
+              categoryName={category.name}
               maxWidth={getMaxWidthForItem(displayCategories.length)}
-              themeStyles={themeStyles}
             />
           ))}
           {displayShowMore && (
@@ -91,4 +89,4 @@ export const CommunityCategoryChips: React.FC<CommunityCategoryChipsProps> = ({
       )}
     </View>
   );
-};
+}

package/src/v4/features/feed/components/CommunityCategories/index.ts

@@ -0,0 +1 @@
+export { CommunityCategories } from './CommunityCategories';

package/src/v4/{component/CommunityCategoryChips → features/feed/components/CommunityCategories}/styles.ts

@@ -1,7 +1,9 @@
 import { StyleSheet } from 'react-native';
+import { useTheme } from 'react-native-paper';
 import { MyMD3Theme } from 'src/providers/amity-ui-kit-provider';
 
-export const useStyles = (theme: MyMD3Theme) => {
+export const useStyles = () => {
+  const theme = useTheme<MyMD3Theme>();
   const styles = StyleSheet.create({
     container: {
       flexDirection: 'row',
@@ -27,5 +29,5 @@ export const useStyles = (theme: MyMD3Theme) => {
       color: theme.colors.base,
     },
   });
-  return styles;
+  return { styles, theme };
 };

package/src/v4/features/feed/components/index.ts

@@ -0,0 +1 @@
+export * from './CommunityCategories';

package/src/v4/features/feed/elements/CommunityCategory/CommunityCategory.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { DimensionValue, Text, View } from 'react-native';
+import { useStyles } from './styles';
+import { useAmityElement } from '../../../../hook';
+import { ComponentID, ElementID, PageID } from '../../../../enum';
+
+type CommunityCategoryProps = {
+  categoryName: string;
+  style?: object;
+  maxWidth?: number | string;
+  pageId?: PageID;
+  componentId?: ComponentID;
+};
+
+export function CommunityCategory({
+  categoryName,
+  style,
+  maxWidth,
+  pageId,
+  componentId,
+}: CommunityCategoryProps) {
+  const { styles } = useStyles();
+  const { accessibilityId, isExcluded } = useAmityElement({
+    pageId,
+    componentId,
+    elementId: ElementID.community_category,
+  });
+
+  if (isExcluded) return null;
+
+  return (
+    <View
+      testID={accessibilityId}
+      style={[
+        styles.chipContainer,
+        maxWidth ? { maxWidth: maxWidth as DimensionValue } : null,
+        style,
+      ]}
+    >
+      <Text style={styles.chipText} numberOfLines={1}>
+        {categoryName}
+      </Text>
+    </View>
+  );
+}

package/src/v4/features/feed/elements/CommunityCategory/index.ts

@@ -0,0 +1 @@
+export { CommunityCategory } from './CommunityCategory';

package/src/v4/features/feed/elements/CommunityCategory/styles.ts

@@ -0,0 +1,20 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from 'react-native-paper';
+import { MyMD3Theme } from 'src/providers/amity-ui-kit-provider';
+
+export const useStyles = () => {
+  const theme = useTheme<MyMD3Theme>();
+  const styles = StyleSheet.create({
+    chipContainer: {
+      backgroundColor: theme.colors.baseShade4,
+      paddingHorizontal: 6,
+      borderRadius: 20,
+    },
+    chipText: {
+      fontSize: 13,
+      lineHeight: 18,
+      color: theme.colors.base,
+    },
+  });
+  return { styles, theme };
+};

package/src/v4/features/feed/elements/index.ts

@@ -0,0 +1 @@
+export * from './CommunityCategory';

package/src/v4/features/room/hooks/useRoom.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+import { RoomRepository } from '@amityco/ts-sdk-react-native';
+
+export function useRoom(roomId: string) {
+  const [room, setRoom] = useState<Amity.Room | null>(null);
+
+  useEffect(() => {
+    let unsubscribe: Amity.Unsubscriber;
+    if (roomId) {
+      unsubscribe = RoomRepository.getRoom(roomId, ({ data }) => {
+        setRoom(data);
+      });
+    }
+    return () => {
+      unsubscribe && unsubscribe();
+    };
+  }, [roomId]);
+
+  return room;
+}

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';
@@ -30,3 +30,6 @@ export * from './usePendingPostQuery';
 export * from './useMembersQuery';
 export * from './useRolesQuery';
 export * from './useFlagUserQuery';
+export * from './usePostSubscription';
+export * from './useRoomSubscription';
+export * from './useGlobalBehavior';

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/useAmityGlobalSearchViewModel.ts

@@ -1,5 +1,6 @@
 import {
   CommunityRepository,
+  SearchUsersByEnum,
   UserRepository,
 } from '@amityco/ts-sdk-react-native';
 import { useState, useEffect } from 'react';
@@ -65,7 +66,12 @@ export const useAmityGlobalSearchViewModel = (
     } else if (searchType === TabName.Users && searchValue?.length >= 3) {
       setSearchResult(null);
       const unsubscribeUser = UserRepository.searchUserByDisplayName(
-        { displayName: searchValue, limit: 20 },
+        {
+          displayName: searchValue,
+          limit: 20,
+          searchBy: [SearchUsersByEnum.DISPLAY_NAME],
+          matchType: UserRepository.AmityUserSearchMatchType.PARTIAL,
+        },
         ({ error, loading, data, hasNextPage, onNextPage }) => {
           if (error) return setSearchResult(null);
           if (!loading) {

package/src/v4/hook/useCustomRankingGlobalFeed.ts

@@ -1,5 +1,9 @@
-import { FeedRepository, PostRepository } from '@amityco/ts-sdk-react-native';
+import {
+  FeedRepository,
+  PostStructureType,
+} from '@amityco/ts-sdk-react-native';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { InteractionManager } from 'react-native';
 import globalFeedSlice from '../../redux/slices/globalfeedSlice';
 import { globalFeedPageLimit } from '../../v4/PublicApi/Components/AmityGlobalFeedComponent/AmityGlobalFeedComponent';
 import {
@@ -17,11 +21,18 @@ export const isAmityAd = (
   return (item as Amity.Ad)?.adId !== undefined;
 };
 
-export const useCustomRankingGlobalFeed = () => {
+type UseCustomRankingGlobalFeed = {
+  enabled?: boolean;
+};
+
+export const useCustomRankingGlobalFeed = ({
+  enabled = true,
+}: UseCustomRankingGlobalFeed = {}) => {
   const { isConnected } = useAuth();
   const dispatch = useUIKitDispatch();
   const unsubscribeRef = useRef<() => void | null>(null);
   const onNextPageRef = useRef<() => void | null>(null);
+  const interactionHandleRef = useRef<{ cancel: () => void } | null>(null);
 
   const { setNewGlobalFeed } = globalFeedSlice.actions;
 
@@ -39,70 +50,67 @@ export const useCustomRankingGlobalFeed = () => {
     getItemId: (item) => (item as Amity.Post).postId.toString(),
   });
 
-  const processPosts = async (posts: Amity.Post[]) => {
-    const results = await Promise.all(
-      posts.map((post) => {
-        if (post?.children.length > 0) {
-          return new Promise((resolve) => {
-            const unsubscribe = PostRepository.getPost(
-              post?.children[0],
-              ({ error: $error, loading, data }) => {
-                if (!$error && !loading) {
-                  if (
-                    data?.dataType === 'image' ||
-                    data?.dataType === 'video' ||
-                    // data?.dataType === 'liveStream' ||
-                    data?.dataType === 'poll'
-                  ) {
-                    resolve(post);
-                  } else {
-                    resolve(null);
-                  }
-                } else {
-                  resolve(null);
-                }
-              }
-            );
-
-            unsubscribe();
-          });
-        } else {
-          return post;
-        }
-      })
-    );
-
-    return results.filter((result) => result !== null) as Amity.Post<any>[];
-  };
+  const hasInitialDataRef = useRef(false);
 
   const fetchCustomRanking = useCallback(() => {
     if (!isConnected) return null;
 
-    return FeedRepository.getCustomRankingGlobalFeed(
-      { limit: globalFeedPageLimit },
-      ({ data, loading, error: $error, onNextPage }) => {
-        setFetching(loading);
+    hasInitialDataRef.current = false;
 
-        if (!loading && data) {
-          processPosts(data).then((posts) => dispatch(setNewGlobalFeed(posts)));
+    return FeedRepository.getGlobalFeed(
+      { limit: globalFeedPageLimit },
+      ({ data, loading: isLoading, error: $error, onNextPage }) => {
+        if (isLoading) {
+          // Only show loading state on initial fetch, not on pagination
+          if (!hasInitialDataRef.current) {
+            setFetching(true);
+          }
+          return;
         }
 
         if (onNextPage) onNextPageRef.current = onNextPage;
-
         if ($error) setError($error);
+
+        if (data) {
+          const filtered = data.filter(
+            (post) =>
+              post.structureType !== PostStructureType.AUDIO &&
+              post.structureType !== PostStructureType.FILE &&
+              post.structureType !== PostStructureType.MIXED
+          );
+          interactionHandleRef.current?.cancel();
+          interactionHandleRef.current =
+            InteractionManager.runAfterInteractions(() => {
+              dispatch(setNewGlobalFeed(filtered));
+              setFetching(false);
+              hasInitialDataRef.current = true;
+              interactionHandleRef.current = null;
+            });
+        } else {
+          setFetching(false);
+        }
       }
     );
   }, [dispatch, setNewGlobalFeed, isConnected]);
 
   useEffect(() => {
+    if (!enabled) return undefined;
+
     unsubscribeRef.current = fetchCustomRanking();
 
-    return () => unsubscribeRef.current?.();
-  }, [fetchCustomRanking]);
+    return () => {
+      unsubscribeRef.current?.();
+      interactionHandleRef.current?.cancel();
+      interactionHandleRef.current = null;
+    };
+  }, [fetchCustomRanking, enabled]);
 
   const refresh = useCallback(() => {
     if (unsubscribeRef.current) unsubscribeRef.current?.();
+    interactionHandleRef.current?.cancel();
+    interactionHandleRef.current = null;
     onNextPageRef.current = null;
+    hasInitialDataRef.current = false;
 
     unsubscribeRef.current = fetchCustomRanking();
   }, [fetchCustomRanking]);
@@ -113,5 +121,6 @@ export const useCustomRankingGlobalFeed = () => {
     itemWithAds,
     onNextPage: onNextPageRef.current,
     error,
+    globalFeedPosts: postList,
   };
 };