@amityco/react-native-social-uikit 4.0.0-eaa97a5.0 → 4.0.0-eb58afc.0

package/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,84 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { SvgXml } from 'react-native-svg';
+import { errorPage } from '../../v4/assets/icons';
+
+export interface ErrorBoundaryProps {
+  children: ReactNode;
+  fallback?: ReactNode;
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+  onReset?: () => void;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    this.props.onError?.(error, errorInfo);
+  }
+
+  handleReset = (): void => {
+    this.setState({ hasError: false, error: null });
+    this.props.onReset?.();
+  };
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <View style={styles.container}>
+          <SvgXml xml={errorPage('#EBECEF')} />
+          <View>
+            <Text style={styles.title}>Something went wrong</Text>
+
+            <Text style={styles.description}>
+              The content you're looking for is unavailable.
+            </Text>
+          </View>
+        </View>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 16,
+    flexDirection: 'column',
+  },
+  title: {
+    color: '#A5A9B5',
+    textAlign: 'center',
+    fontSize: 20,
+  },
+  description: {
+    color: '#A5A9B5',
+    textAlign: 'center',
+    fontSize: 15,
+  },
+});
+
+export default ErrorBoundary;

package/src/components/ErrorBoundary/index.ts

@@ -0,0 +1,2 @@
+export { ErrorBoundary, type ErrorBoundaryProps } from './ErrorBoundary';
+export { default } from './ErrorBoundary';

package/src/components/Social/PostList/index.tsx

@@ -415,11 +415,16 @@ export default function PostList({
     <View key={postId} style={styles.postWrap}>
       <View style={styles.headerSection}>
         <View style={styles.user}>
-          {user?.avatarFileId ? (
+          {user?.avatarCustomUrl ? (
+            <Image
+              style={styles.avatar as ImageStyle}
+              source={{ uri: user.avatarCustomUrl }}
+            />
+          ) : user?.avatarFileId ? (
             <Image
               style={styles.avatar as ImageStyle}
               source={{
-                uri: `https://api.${apiRegion}.amity.co/api/v3/files/${user?.avatarFileId}/download`,
+                uri: `https://api.${apiRegion}.amity.co/api/v3/files/${user.avatarFileId}/download`,
               }}
             />
           ) : (

package/src/components/Toast/Toast.tsx

@@ -53,6 +53,7 @@ const Toast: FC = () => {
       alignSelf: 'center',
       flexDirection: 'row',
       alignItems: 'center',
+      gap: 12,
     },
     message: {
       lineHeight: 24,

package/src/hooks/useAuth.ts

@@ -13,6 +13,7 @@ const useAuth = (): AuthContextInterface => {
     error,
     sessionState,
     apiRegion,
+    isGlobalBan,
   } = useContext(AuthContext);
 
   return {
@@ -24,6 +25,7 @@ const useAuth = (): AuthContextInterface => {
     isConnected,
     sessionState,
     apiRegion,
+    isGlobalBan,
   };
 };
 

package/src/hooks/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/index.tsx

@@ -26,6 +26,7 @@ if (!(BackHandler as any).removeEventListener) {
 }
 
 import AmityUiKitProvider from './providers/amity-ui-kit-provider';
+import { ErrorBoundary } from './components/ErrorBoundary';
 import AmityUiKitSocial from './v4/routes/AmitySocialUIKitV4Navigator';
 import AmityPageRenderer from './v4/routes/AmityPageRenderer';
 import PostDetail from './v4/screen/PostDetail';
@@ -123,6 +124,7 @@ export function multiply(a: number, b: number): Promise<number> {
 }
 export {
   AmityUiKitProvider,
+  ErrorBoundary,
   AmityUiKitSocial,
   AmityStoryTabComponent,
   AmityStoryTabComponentEnum,

package/src/providers/Social/communities-sdk.ts

@@ -83,7 +83,7 @@ export async function checkCommunityPermission(
   apiRegion: string
 ): Promise<any> {
   const url: string = `https://api.${apiRegion}.amity.co/api/v3/communities/${communityId}/permissions/me`;
-  const accessToken = client.token.accessToken;
+  const accessToken = client?.token?.accessToken;
 
   try {
     const response = await fetch(url, {

package/src/providers/amity-ui-kit-provider.tsx

@@ -17,6 +17,8 @@ import { AdEngineProvider } from '../v4/providers/AdEngineProvider';
 import BottomSheetComponent from '../v4/component/BottomSheetComponent/BottomSheetComponent';
 import Toast from '../v4/component/Toast';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { ErrorBoundary } from '../components/ErrorBoundary';
 
 export type CusTomTheme = typeof DefaultTheme;
 export interface IAmityUIkitProvider {
@@ -143,32 +145,36 @@ export default function AmityUiKitProvider({
   };
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <Provider store={store} context={AmityUIKitReduxContext}>
-        <AuthContextProvider
-          userId={userId}
-          displayName={displayName || userId}
-          apiKey={apiKey}
-          apiRegion={apiRegion}
-          apiEndpoint={apiEndpoint}
-          authToken={authToken}
-          fcmToken={fcmToken}
-        >
-          <AdEngineProvider>
-            <ConfigProvider configs={configData}>
-              <BehaviourProvider behaviour={behaviour}>
-                <ExploreProvider>
-                  <PaperProvider theme={globalTheme}>
-                    {children}
-                    <BottomSheetComponent />
-                    <Toast />
-                  </PaperProvider>
-                </ExploreProvider>
-              </BehaviourProvider>
-            </ConfigProvider>
-          </AdEngineProvider>
-        </AuthContextProvider>
-      </Provider>
-    </QueryClientProvider>
+    <ErrorBoundary>
+      <SafeAreaProvider>
+        <QueryClientProvider client={queryClient}>
+          <Provider store={store} context={AmityUIKitReduxContext}>
+            <AuthContextProvider
+              userId={userId}
+              displayName={displayName || userId}
+              apiKey={apiKey}
+              apiRegion={apiRegion}
+              apiEndpoint={apiEndpoint}
+              authToken={authToken}
+              fcmToken={fcmToken}
+            >
+              <AdEngineProvider>
+                <ConfigProvider configs={configData}>
+                  <BehaviourProvider behaviour={behaviour}>
+                    <ExploreProvider>
+                      <PaperProvider theme={globalTheme}>
+                        {children}
+                        <BottomSheetComponent />
+                        <Toast />
+                      </PaperProvider>
+                    </ExploreProvider>
+                  </BehaviourProvider>
+                </ConfigProvider>
+              </AdEngineProvider>
+            </AuthContextProvider>
+          </Provider>
+        </QueryClientProvider>
+      </SafeAreaProvider>
+    </ErrorBoundary>
   );
 }

package/src/providers/auth-provider.tsx

@@ -4,8 +4,7 @@ import { Client } from '@amityco/ts-sdk-react-native';
 import type { AuthContextInterface } from '../types/auth.interface';
 import { Alert, Platform } from 'react-native';
 import type { IAmityUIkitProvider } from './amity-ui-kit-provider';
-// @ts-ignore
-// import { setupAmityVideoPlayer } from '@amityco/video-player-react-native';
+import { ERROR_CODE } from '../v4/constants';
 
 export const AuthContext = React.createContext<AuthContextInterface>({
   client: null,
@@ -18,6 +17,7 @@ export const AuthContext = React.createContext<AuthContextInterface>({
   apiRegion: 'sg',
   authToken: '',
   fcmToken: undefined,
+  isGlobalBan: false,
 });
 
 export const AuthContextProvider: FC<IAmityUIkitProvider> = ({
@@ -37,6 +37,7 @@ export const AuthContextProvider: FC<IAmityUIkitProvider> = ({
   const client: Amity.Client = Client.createClient(apiKey, apiRegion, {
     apiEndpoint: { http: apiEndpoint },
   });
+  const [isGlobalBan, setIsGlobalBan] = useState(false);
 
   const sessionHandler: Amity.SessionHandler = {
     sessionWillRenewAccessToken(renewal) {
@@ -45,8 +46,11 @@ export const AuthContextProvider: FC<IAmityUIkitProvider> = ({
   };
 
   useEffect(() => {
-    return Client.onSessionStateChange((state: Amity.SessionStates) =>
-      setSessionState(state)
+    return Client.onSessionStateChange(
+      (state: Amity.SessionStates, reason: Amity.TokenTerminationReason) => {
+        setSessionState(state);
+        setIsGlobalBan(reason === 'globalBan');
+      }
     );
   }, []);
 
@@ -77,8 +81,14 @@ export const AuthContextProvider: FC<IAmityUIkitProvider> = ({
     if (authToken?.length > 0) {
       loginParam = { ...loginParam, authToken: authToken };
     }
-    const response = await Client.login(loginParam, sessionHandler);
-    if (!response) return;
+    try {
+      const response = await Client.login(loginParam, sessionHandler);
+      if (!response) return;
+    } catch (err) {
+      if (err?.message?.includes(ERROR_CODE.GLOBAL_BAN)) {
+        setIsGlobalBan(true);
+      }
+    }
 
     // setupAmityVideoPlayer();
 
@@ -149,11 +159,11 @@ export const AuthContextProvider: FC<IAmityUIkitProvider> = ({
         isConnected,
         sessionState,
         apiRegion: apiRegion.toLowerCase(),
+        isGlobalBan,
       }}
     >
       {children}
     </AuthContext.Provider>
-    //
   );
 };
 export default AuthContextProvider;

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/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,11 @@ 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],
+        },
         (data) => {
           setUsersObject(data);
         }

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

@@ -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/v4/PublicApi/Components/AmityCommunityHeaderComponent/AmityCommunityHeaderComponent.tsx

@@ -11,7 +11,6 @@ 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 +23,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;
@@ -135,10 +135,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;
@@ -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(
@@ -78,33 +86,41 @@ 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)
         }
       />

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

@@ -10,10 +10,7 @@ import AmityStoryTabComponent from '../AmityStoryTabComponent/AmityStoryTabCompo
 import { AmityStoryTabComponentEnum } from '../../types';
 import { usePostImpression } from '../../../../v4/hook/usePostImpression';
 import { useStyle } from './styles';
-import {
-  isAmityAd,
-  useCustomRankingGlobalFeed,
-} from '../../../hook/useCustomRankingGlobalFeed';
+import { isAmityAd } from '../../../hook/useCustomRankingGlobalFeed';
 import PostAdComponent from '../../../component/PostAdComponent/PostAdComponent';
 import Divider from '../../../component/Divider';
 
@@ -21,6 +18,10 @@ type AmityGlobalFeedComponentType = {
   pageId?: PageID;
   isShowStoryTab?: boolean;
   GlobalFeedHeaderComponent?: React.ReactElement;
+  itemWithAds: (Amity.Post | Amity.Ad)[] | undefined;
+  refresh: () => void;
+  loading: boolean;
+  onNextPage: (() => void) | null;
 };
 
 export const globalFeedPageLimit = 20;
@@ -29,9 +30,11 @@ const AmityGlobalFeedComponent: FC<AmityGlobalFeedComponentType> = ({
   pageId,
   isShowStoryTab = true,
   GlobalFeedHeaderComponent,
+  itemWithAds,
+  refresh,
+  loading,
+  onNextPage,
 }) => {
-  const { itemWithAds, refresh, loading, onNextPage } =
-    useCustomRankingGlobalFeed();
   const componentId = ComponentID.global_feed_component;
   const { isExcluded, themeStyles, accessibilityId } = useAmityComponent({
     pageId,