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

package/src/v4/hook/useGlobalBehavior.ts

@@ -0,0 +1,40 @@
+import { useCallback } from 'react';
+import useAuth from '../../hooks/useAuth';
+import { useBehaviour } from '../providers/BehaviourProvider';
+import { useToast } from '../stores/slices/toast';
+import { VISITOR_USER_ACTION_TOAST } from '../constants';
+
+const TOAST_DURATION = 3000;
+
+/**
+ * Mirrors the Web UIKit's useGlobalBehavior: gate a restricted action behind
+ * the visitor/bot check. For signed-in users the default behaviour runs; for
+ * visitors the AmityGlobalBehaviour.handleVisitorUserAction override is
+ * called when provided, otherwise a "create an account or sign in" toast is
+ * shown.
+ */
+export const useGlobalBehavior = () => {
+  const { isVisitorOrBot } = useAuth();
+  const { AmityGlobalBehaviour } = useBehaviour();
+  const { showToast } = useToast();
+
+  const handleGlobalBehavior = useCallback(
+    ({ defaultBehavior }: { defaultBehavior?: () => void }) => {
+      if (isVisitorOrBot) {
+        if (AmityGlobalBehaviour?.handleVisitorUserAction) {
+          return AmityGlobalBehaviour.handleVisitorUserAction();
+        }
+        return showToast({
+          message: VISITOR_USER_ACTION_TOAST,
+          type: 'informative',
+          duration: TOAST_DURATION,
+        });
+      }
+      return defaultBehavior?.();
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isVisitorOrBot, AmityGlobalBehaviour]
+  );
+
+  return { handleGlobalBehavior, isVisitorOrBot };
+};

package/src/v4/hook/useImagePicker.ts

@@ -9,7 +9,10 @@ import {
 
 import { isValidImageType } from '../utils';
 import { useCameraPermission } from './usePermissions';
-import { deleteAmityFile, uploadImageFile } from '../../providers/file-provider';
+import {
+  deleteAmityFile,
+  uploadImageFile,
+} from '../../providers/file-provider';
 
 export type UseImagePickerResponse = {
   progress: number;

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,48 @@
+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, isVisitorOrBot } = useAuth();
+  const [hasPostPermission, setHasPostPermission] = useState(false);
+
+  const isOnlyAdminCanPost =
+    community?.postSetting === CommunityPostSettings.ONLY_ADMIN_CAN_POST;
+
+  useEffect(() => {
+    if (isVisitorOrBot) return;
+    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,
+    isVisitorOrBot,
+  ]);
+
+  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,12 @@ const useSearch = (
 
   const searchAllUsers = useCallback((text: string) => {
     return UserRepository.searchUserByDisplayName(
-      { displayName: text, limit: 5 },
+      {
+        displayName: text,
+        limit: 5,
+        searchBy: [SearchUsersByEnum.DISPLAY_NAME],
+        matchType: UserRepository.AmityUserSearchMatchType.PARTIAL,
+      },
       ({ data, error, hasNextPage, onNextPage }) => {
         if (error) return null;
         hasNextPage

package/src/v4/hook/useStoryPermission.ts

@@ -1,26 +1,22 @@
 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();
+  const { client, isVisitorOrBot } = useAuth();
   const { socialSettings } = useSocialSettings();
   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);
+  const hasStoryPermission =
+    !isVisitorOrBot &&
+    (!communityId
+      ? socialSettings?.story?.allowAllUserToCreateStory
+      : socialSettings?.story?.allowAllUserToCreateStory ||
+        isGlobalAdmin ||
+        checkStoryPermission(client, communityId));
 
-  return hasStoryPermission;
+  return { hasStoryPermission };
 }

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/providers/BehaviourProvider.tsx

@@ -14,6 +14,7 @@ export const BehaviourProvider = ({
 }: IBehavioudProviderProps) => {
   const defaultBehaviour = useMemo(
     () => ({
+      AmityGlobalBehaviour: {},
       AmitySocialHomePageBehaviour: {},
       AmityGlobalFeedComponentBehavior: {},
       AmityPostContentComponentBehavior: {},
@@ -31,6 +32,7 @@ export const BehaviourProvider = ({
       AmityCommunitySettingPageBehavior: {},
       AmityCommunityMembershipPageBehavior: {},
       AmityCommunityNotificationSettingPageBehavior: {},
+      AmityPostComposerPageBehavior: {},
     }),
     []
   );

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,9 +83,10 @@ export default function PageRenderer({ children }: PageRendererProps) {
           <Stack.Navigator
             id={undefined}
             screenOptions={{
+              headerShown: false,
               headerShadowVisible: false,
               contentStyle: {
-                backgroundColor: 'white',
+                backgroundColor: theme.colors.background,
               },
               headerStyle: {
                 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,43 @@ 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';
+import { VisitorUsageLimit } from '../screen/VisitorUsageLimit';
+import { useBehaviour } from '../providers/BehaviourProvider';
 
 export default function AmitySocialUIKitV4Navigator() {
   const Stack = createNativeStackNavigator<RootStackParamList>();
-  const { isConnected } = useAuth();
+  const { isConnected, isGlobalBan, isVisitorUsageLimitReached } = useAuth();
+  const { AmityGlobalBehaviour } = useBehaviour();
   const theme = useTheme() as MyMD3Theme;
 
   const styles = useStyles();
+
+  const handleVisitorUsageLimitReached =
+    AmityGlobalBehaviour?.handleVisitorUsageLimitReached;
+  const hasHandledUsageLimit = React.useRef(false);
+
+  React.useEffect(() => {
+    if (!isVisitorUsageLimitReached) {
+      hasHandledUsageLimit.current = false;
+      return;
+    }
+    // Customer override replaces the default full-page swap; guard so rapid
+    // repeat events trigger a single navigation.
+    if (handleVisitorUsageLimitReached && !hasHandledUsageLimit.current) {
+      hasHandledUsageLimit.current = true;
+      handleVisitorUsageLimitReached();
+    }
+  }, [isVisitorUsageLimitReached, handleVisitorUsageLimitReached]);
+
+  if (isGlobalBan) return <GlobalBan />;
+
+  // Default usage-limit handling: replace the whole navigation tree with the
+  // dead-end error page so back-navigation cannot escape it.
+  if (isVisitorUsageLimitReached && !handleVisitorUsageLimitReached) {
+    return <VisitorUsageLimit />;
+  }
+
   return (
     <NavigationIndependentTree>
       <NavigationContainer>
@@ -285,6 +315,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/CreateStory/CreateStoryScreen.tsx

@@ -32,11 +32,32 @@ const CreateStoryScreen = ({ navigation, route }) => {
     return null;
   }
 
+  const handleCreateStory = () => {
+    const state = navigation.getState();
+    const routes = state.routes;
+    const currentIndex = state.index;
+
+    if (currentIndex > 0) {
+      const previousRoute = routes[currentIndex - 1];
+      const previousRouteName = previousRoute.name;
+
+      if (
+        previousRouteName === 'ViewStory' ||
+        previousRouteName === 'StoryTargetSelection'
+      ) {
+        navigation.pop(2);
+        return;
+      }
+    }
+
+    navigation.goBack();
+  };
+
   return (
     <AmityCreateStoryPage
       targetId={targetId}
       targetType={targetType}
-      onCreateStory={() => navigation.goBack()}
+      onCreateStory={handleCreateStory}
     />
   );
 };

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}
     />
   );
 };