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

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

package/src/v4/hook/usePaginator.ts

@@ -1,10 +1,9 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState, useTransition } from 'react';
 import { AdEngine } from '../engine/AdEngine';
 import {
   useAdSettings,
   useRecommendAds,
 } from '../../v4/providers/AdEngineProvider';
-import { useFocusEffect } from '@react-navigation/native';
 
 type ItemWithAd<T> = [T] | [T, Amity.Ad];
 
@@ -41,21 +40,19 @@ export const usePaginatorCore = <T>({
     newItems: T[],
     newItemIds: Set<string>
   ): Array<ItemWithAd<T>> => {
+    const newItemsMap = new Map<string, T>(
+      newItems.map((item) => [getItemId(item), item])
+    );
     return (itemWithAdsRef.current || [])
       .map((itemWithAd) => {
         const itemId = getItemId(itemWithAd[0]);
 
-        // Skip items not in new items list
         if (!newItemIds.has(itemId)) {
           return null;
         }
 
-        // Find the updated version of this item
-        const updatedItem = newItems.find(
-          (newItem) => getItemId(newItem) === itemId
-        );
+        const updatedItem = newItemsMap.get(itemId);
 
-        // Update the item while preserving its ad (if any)
         if (updatedItem) {
           if (itemWithAd.length === 1) {
             return [updatedItem] as [T];
@@ -86,13 +83,14 @@ export const usePaginatorCore = <T>({
     topIndex: number,
     prevItems: Array<ItemWithAd<T>>
   ): T[] => {
-    return newItems.slice(topIndex).filter((newItem) => {
-      const itemId = getItemId(newItem);
-      return !prevItems.some(
-        (prevItem) =>
-          prevItem && prevItem[0] && getItemId(prevItem[0]) === itemId
-      );
-    });
+    const prevItemIds = new Set<string>(
+      prevItems
+        .filter((item) => item && item[0])
+        .map((item) => getItemId(item[0]))
+    );
+    return newItems
+      .slice(topIndex)
+      .filter((newItem) => !prevItemIds.has(getItemId(newItem)));
   };
 
   const frequency = AdEngine.instance.getAdFrequencyByPlacement(placement);
@@ -142,7 +140,13 @@ export const usePaginatorCore = <T>({
         .slice(0, topIndex)
         .map((item) => [item]);
 
-      const prevItems = [...newestItems, ...prevItemWithAds];
+      const prevItemWithAdsIds = new Set(
+        prevItemWithAds.map((item) => getItemId(item[0]))
+      );
+      const dedupedNewestItems = newestItems.filter(
+        (item) => !prevItemWithAdsIds.has(getItemId(item[0]))
+      );
+      const prevItems = [...dedupedNewestItems, ...prevItemWithAds];
 
       // filteredNewItems is the newest items in the next page that are not in prevItems
       const filteredNewItems = filterNewItems(newItems, topIndex, prevItems);
@@ -174,14 +178,24 @@ export const usePaginatorCore = <T>({
 
       const newItemsWithAds = [...prevItems, ...suffixItems];
 
-      updateItemWithAds(newItemsWithAds);
+      const seenPostIds = new Set<string>();
+      const dedupedItemsWithAds = newItemsWithAds.filter((tuple) => {
+        const id = getItemId(tuple[0]);
+        if (seenPostIds.has(id)) return false;
+        seenPostIds.add(id);
+        return true;
+      });
 
-      if (newItemsWithAds.length === 0) {
+      updateItemWithAds(dedupedItemsWithAds);
+
+      if (dedupedItemsWithAds.length === 0) {
         setCurrentAdIndex(0);
         setCurrentIndex(0);
       }
 
-      const result = newItemsWithAds.flatMap((item) => item).filter(Boolean);
+      const result = dedupedItemsWithAds
+        .flatMap((item) => item)
+        .filter(Boolean);
       return result;
     } else if (frequency?.type === 'time-window') {
       const newItemIds = new Set(newItems.map((item) => getItemId(item)));
@@ -192,7 +206,13 @@ export const usePaginatorCore = <T>({
         .slice(0, topIndex)
         .map((item) => [item]);
 
-      const prevItems = [...newestItems, ...prevItemWithAds];
+      const twPrevItemWithAdsIds = new Set(
+        prevItemWithAds.map((item) => getItemId(item[0]))
+      );
+      const twDedupedNewestItems = newestItems.filter(
+        (item) => !twPrevItemWithAdsIds.has(getItemId(item[0]))
+      );
+      const prevItems = [...twDedupedNewestItems, ...prevItemWithAds];
       const filteredNewItems = filterNewItems(newItems, topIndex, prevItems);
       const suffixItems: Array<ItemWithAd<T>> = filteredNewItems.map(
         (newItem, index) => {
@@ -213,11 +233,21 @@ export const usePaginatorCore = <T>({
 
       setHasAppenedFirstRoundAds(true);
 
-      const newItemsWithAds = [...prevItems, ...suffixItems];
+      const seenTwPostIds = new Set<string>();
+      const dedupedTwItemsWithAds = [...prevItems, ...suffixItems].filter(
+        (tuple) => {
+          const id = getItemId(tuple[0]);
+          if (seenTwPostIds.has(id)) return false;
+          seenTwPostIds.add(id);
+          return true;
+        }
+      );
 
-      updateItemWithAds(newItemsWithAds);
+      updateItemWithAds(dedupedTwItemsWithAds);
 
-      const result = newItemsWithAds.flatMap((item) => item).filter(Boolean);
+      const result = dedupedTwItemsWithAds
+        .flatMap((item) => item)
+        .filter(Boolean);
       return result;
     }
     return newItems;
@@ -256,6 +286,7 @@ export const usePaginatorApi = <T>(params: {
   const [itemWithAds, setItemWithAds] = useState<
     (Amity.Ad | T)[] | undefined
   >();
+  const [_, startTransition] = useTransition();
 
   const { items, isLoading, ...rest } = params;
   const {
@@ -275,16 +306,14 @@ export const usePaginatorApi = <T>(params: {
     setHasAppenedFirstRoundAds(false);
   }, [coreReset]);
 
-  useFocusEffect(
-    useCallback(() => {
-      if (!adsLoaded || isLoading) return;
-
+  useEffect(() => {
+    if (!adsLoaded || isLoading) return;
+    startTransition(() => {
       const newItems = combineItemsWithAds(items);
-
       setItemWithAds(newItems);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [adsLoaded, items, isLoading])
-  );
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [adsLoaded, items, isLoading]);
 
   return { itemWithAds, reset };
 };

package/src/v4/hook/usePostPermission.ts

@@ -0,0 +1,46 @@
+import {
+  CommunityPostSettings,
+  CommunityRepository,
+} from '@amityco/ts-sdk-react-native';
+import { useEffect, useState } from 'react';
+import useAuth from '../../hooks/useAuth';
+import { isModerator } from '../utils/permissions';
+
+type UsePostPermissionParams = {
+  community?: Amity.Community;
+};
+
+export function usePostPermission({ community }: UsePostPermissionParams) {
+  const { client } = useAuth();
+  const [hasPostPermission, setHasPostPermission] = useState(false);
+
+  const isOnlyAdminCanPost =
+    community?.postSetting === CommunityPostSettings.ONLY_ADMIN_CAN_POST;
+
+  useEffect(() => {
+    if (!community?.communityId || !client?.userId) return;
+
+    CommunityRepository.Membership.searchMembers(
+      {
+        communityId: community.communityId,
+        search: client.userId,
+        limit: 1,
+        memberships: ['member'],
+        includeDeleted: false,
+      },
+      ({ data }) => {
+        const userRoles = data[0]?.roles ?? [];
+        setHasPostPermission(
+          isOnlyAdminCanPost ? isModerator(userRoles) : !!community?.isJoined
+        );
+      }
+    );
+  }, [
+    community?.communityId,
+    client?.userId,
+    isOnlyAdminCanPost,
+    community?.isJoined,
+  ]);
+
+  return hasPostPermission;
+}

package/src/v4/hook/usePostSubscription.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+import {
+  getPostTopic,
+  PostRepository,
+  subscribeTopic,
+} from '@amityco/ts-sdk-react-native';
+
+export const usePostSubscription = (postId: string) => {
+  const [subscribedPost, setSubscribedPost] = useState<Amity.Post>(null);
+
+  useEffect(() => {
+    let unsubscribe: () => void;
+    if (postId) {
+      unsubscribe = PostRepository.getPost(postId, ({ data }) => {
+        setSubscribedPost(data);
+      });
+    }
+    return () => {
+      unsubscribe && unsubscribe();
+    };
+  }, [postId]);
+
+  useEffect(() => {
+    let unsubscribe: () => void;
+    if (subscribedPost) {
+      unsubscribe = subscribeTopic(getPostTopic(subscribedPost));
+    }
+    return () => {
+      unsubscribe && unsubscribe();
+    };
+  }, [subscribedPost]);
+
+  return { subscribedPost };
+};

package/src/v4/hook/useRoomSubscription.ts

@@ -0,0 +1,19 @@
+import {
+  getRoomWatcherTopic,
+  subscribeTopic,
+} from '@amityco/ts-sdk-react-native';
+import { useEffect } from 'react';
+
+export const useRoomSubscription = ({ room }: { room?: Amity.Room | null }) => {
+  useEffect(() => {
+    const unsubscriber: Amity.Unsubscriber[] = [];
+
+    if (room?.roomId && room?.status !== 'recorded') {
+      unsubscriber.push(subscribeTopic(getRoomWatcherTopic(room)));
+    }
+
+    return () => unsubscriber.forEach((fn) => fn());
+  }, [room, room?.roomId]);
+
+  return null;
+};

package/src/v4/hook/useSearch.ts

@@ -1,5 +1,6 @@
 import {
   CommunityRepository,
+  SearchUsersByEnum,
   UserRepository,
 } from '@amityco/ts-sdk-react-native';
 import { useCallback, useEffect, useState, useRef } from 'react';
@@ -45,7 +46,11 @@ const useSearch = (
 
   const searchAllUsers = useCallback((text: string) => {
     return UserRepository.searchUserByDisplayName(
-      { displayName: text, limit: 5 },
+      {
+        displayName: text,
+        limit: 5,
+        searchBy: [SearchUsersByEnum.DISPLAY_NAME],
+      },
       ({ data, error, hasNextPage, onNextPage }) => {
         if (error) return null;
         hasNextPage

package/src/v4/index.tsx

@@ -11,7 +11,7 @@ export { default as AmityMyCommunitiesSearchPage } from './PublicApi/Pages/Amity
 export { default as AmityAllCategoriesPage } from './PublicApi/Pages/AmityAllCategoriesPage/AmityAllCategoriesPage';
 export { default as AmityCommunitiesByCategoryPage } from './PublicApi/Pages/AmityCommunitiesByCategoryPage/AmityCommunitiesByCategoryPage';
 export { default as AmityCommunityProfilePage } from './PublicApi/Pages/AmityCommunityProfilePage/AmityCommunityProfilePage';
-// export { default as AmityCreateLivestreamPage } from './PublicApi/Pages/AmityCreateLivestreamPage';
+export { default as AmityCreateLivestreamPage } from './PublicApi/Pages/AmityCreateLivestreamPage';
 export { default as AmityLivestreamPostTargetSelectionPage } from './PublicApi/Pages/AmityLivestreamPostTargetSelectionPage';
 export { default as AmityLivestreamTerminatedPage } from './PublicApi/Pages/AmityLivestreamTerminatedPage';
 export { default as AmityLivestreamPlayerPage } from './PublicApi/Pages/AmityLivestreamPlayerPage';

package/src/v4/routes/AmityPageRenderer.tsx

@@ -65,6 +65,7 @@ import AmityCommunityProfilePage from '../PublicApi/Pages/AmityCommunityProfileP
 import LivestreamTerminated from '../screen/LivestreamTerminated';
 import PollTargetSelection from '../screen/PollTargetSelection';
 import LivestreamPostTargetSelection from '../screen/LivestreamPostTargetSelection';
+import CommunityMembership from '../screen/CommunityMembership';
 
 interface PageRendererProps {
   children: React.JSX.Element;
@@ -82,6 +83,7 @@ export default function PageRenderer({ children }: PageRendererProps) {
           <Stack.Navigator
             id={undefined}
             screenOptions={{
+              headerShown: false,
               headerShadowVisible: false,
               contentStyle: {
                 backgroundColor: theme.colors.background,
@@ -192,6 +194,10 @@ export default function PageRenderer({ children }: PageRendererProps) {
               name="CommunityAddMember"
               component={CommunityAddMember}
             />
+            <Stack.Screen
+              name="CommunityMembership"
+              component={CommunityMembership}
+            />
             <Stack.Screen
               name="CommunityPostPermission"
               component={CommunityPostPermission}

package/src/v4/routes/AmitySocialUIKitV4Navigator.tsx

@@ -65,13 +65,17 @@ import CommunityCommentsNotificationSetting from '../../v4/screen/CommunityComme
 import CommunityStoriesNotificationSetting from '../../v4/screen/CommunityStoriesNotificationSetting';
 import CommunityLivestreamsNotificationSetting from '../../v4/screen/CommunityLivestreamsNotificationSetting';
 import CommunityPendingRequest from '../../v4/screen/CommunityPendingRequest';
+import { GlobalBan } from '../screen/GlobalBan';
 
 export default function AmitySocialUIKitV4Navigator() {
   const Stack = createNativeStackNavigator<RootStackParamList>();
-  const { isConnected } = useAuth();
+  const { isConnected, isGlobalBan } = useAuth();
   const theme = useTheme() as MyMD3Theme;
 
   const styles = useStyles();
+
+  if (isGlobalBan) return <GlobalBan />;
+
   return (
     <NavigationIndependentTree>
       <NavigationContainer>
@@ -285,6 +289,7 @@ export default function AmitySocialUIKitV4Navigator() {
                   params: { displayName },
                 },
               }: any) => ({
+                headerShown: true,
                 title: displayName,
                 headerLeft: () => <BackButton />,
               })}

package/src/v4/routes/RouteParamList.tsx

@@ -35,6 +35,7 @@ export type RootStackParamList = {
     postId: string;
     showEndPopup?: boolean;
     category?: AmityPostCategory;
+    isDeleted?: boolean;
   };
   UserProfile: {
     userId: string;
@@ -72,7 +73,7 @@ export type RootStackParamList = {
     targetType: string;
   };
   LivestreamPlayer: {
-    streamId: string;
+    roomId: string;
     post: Amity.Post;
   };
   LivestreamTerminated: {

package/src/v4/screen/FollowerList/Components/FollowerListItem.tsx

@@ -70,7 +70,7 @@ const FollowerListItem: FC<FollowerListItemType> = ({
           fileId: data.avatarFileId,
           imageSize: ImageSizeState.small,
         });
-        setAvatar(userAvatar ?? defaultAvatarUri);
+        setAvatar(data?.avatarCustomUrl ?? userAvatar ?? defaultAvatarUri);
       }
     });
   }, [getImage, userId]);

package/src/v4/screen/GlobalBan/GlobalBan.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useStyles } from './styles';
+import { Typography } from '../../../v4/component/Typography/Typography';
+import { View } from 'react-native';
+import { SvgXml } from 'react-native-svg';
+import { warning } from '../../../v4/assets/icons';
+
+export function GlobalBan() {
+  const { styles, theme } = useStyles();
+
+  return (
+    <SafeAreaView style={styles.container} edges={['top', 'left']}>
+      <View style={styles.container}>
+        <View style={styles.titleContainer}>
+          <Typography.TitleBold style={styles.title}>
+            Community
+          </Typography.TitleBold>
+        </View>
+        <View style={styles.contentContainer}>
+          <SvgXml
+            width={56}
+            height={56}
+            xml={warning()}
+            color={theme.colors.base}
+          />
+          <Typography.Headline style={styles.title}>
+            You've been banned.
+          </Typography.Headline>
+          <Typography.Body style={styles.body}>
+            Based on your previous activities, your account has been banned from
+            all feeds.
+          </Typography.Body>
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+}

package/src/v4/screen/GlobalBan/index.ts

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

package/src/v4/screen/GlobalBan/styles.ts

@@ -0,0 +1,39 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from 'react-native-paper';
+import type { MyMD3Theme } from 'src/providers/amity-ui-kit-provider';
+
+export const useStyles = () => {
+  const theme = useTheme<MyMD3Theme>();
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: theme.colors.background,
+    },
+    titleContainer: {
+      padding: 16,
+      borderBottomWidth: 1,
+      flexDirection: 'row',
+      justifyContent: 'center',
+      borderBottomColor: theme.colors.baseShade4,
+    },
+    title: {
+      color: theme.colors.base,
+    },
+    contentContainer: {
+      gap: 8,
+      flex: 1,
+      paddingVertical: 24,
+      alignItems: 'center',
+      paddingHorizontal: 16,
+      flexDirection: 'column',
+      justifyContent: 'center',
+    },
+    body: {
+      textAlign: 'center',
+      color: theme.colors.baseShade2,
+    },
+  });
+
+  return { styles, theme };
+};

package/src/v4/screen/PostDetail/index.tsx

@@ -34,6 +34,7 @@ const PostDetail: React.FC<IPostDetailPage> = ({ defaultPostId }) => {
       isFromComponent={!!defaultPostId && !postIdFromRoute}
       postId={postId}
       category={route?.params?.category}
+      isDeleted={route?.params?.isDeleted}
     />
   );
 };

package/src/v4/stores/slices/toast.ts

@@ -10,12 +10,14 @@ type ToastState = {
   message: string;
   type: 'failed' | 'success' | 'informative' | 'loading';
   duration?: number;
+  bottomPosition?: number;
 };
 const initialState: ToastState = {
   visible: false,
   message: '',
   type: 'loading',
   duration: 2500,
+  bottomPosition: 16,
 };
 
 const toastSlice = createSlice({
@@ -27,12 +29,15 @@ const toastSlice = createSlice({
       state.message = action.payload.message;
       state.type = action.payload.type;
       state.duration = action.payload.duration ?? initialState.duration;
+      state.bottomPosition =
+        action.payload.bottomPosition ?? initialState.bottomPosition;
     },
     hideToast: (state) => {
       state.visible = false;
       state.message = '';
       state.type = 'loading';
       state.duration = 2500;
+      state.bottomPosition = 16;
     },
   },
 });

package/uikit.config.json

@@ -287,7 +287,7 @@
       "image": "create_poll_button"
     },
     "social_home_page/create_post_menu/create_livestream_button": {
-      "text": "Livestream",
+      "text": "Live stream",
       "image": "create_livestream_button"
     },
     "select_post_target_page/*/close_button": {