@amityco/react-native-social-uikit 4.0.0-e833198.0 → 4.0.0-fe73f9e.0

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

@@ -28,107 +28,107 @@ const AmityCommunityProfileTabComponent: FC<
   currentTab,
   onTabChange,
 }) => {
-    const elementId = ElementID.community_profile_tab;
+  const elementId = ElementID.community_profile_tab;
 
-    const { themeStyles, accessibilityId } = useAmityElement({
-      pageId,
-      componentId,
-      elementId,
-    });
+  const { themeStyles, accessibilityId } = useAmityElement({
+    pageId,
+    componentId,
+    elementId,
+  });
 
-    const styles = StyleSheet.create({
-      container: {
-        backgroundColor: themeStyles?.colors.background,
-        flexDirection: 'row',
-        width: '100%',
-        paddingHorizontal: 16,
-        justifyContent: 'space-between',
-        borderBottomColor: themeStyles?.colors.baseShade4,
-        borderBottomWidth: 1,
-      },
-    });
+  const styles = StyleSheet.create({
+    container: {
+      backgroundColor: themeStyles?.colors.background,
+      flexDirection: 'row',
+      width: '100%',
+      paddingHorizontal: 16,
+      justifyContent: 'space-between',
+      borderBottomColor: themeStyles?.colors.baseShade4,
+      borderBottomWidth: 1,
+    },
+  });
 
-    const getActiveColor = useCallback(
-      (isActive: boolean) => {
-        return isActive
-          ? themeStyles?.colors.base
-          : themeStyles?.colors.baseShade2;
-      },
-      [themeStyles]
-    );
+  const getActiveColor = useCallback(
+    (isActive: boolean) => {
+      return isActive
+        ? themeStyles?.colors.base
+        : themeStyles?.colors.baseShade2;
+    },
+    [themeStyles]
+  );
 
-    return (
-      <View
-        style={styles.container}
-        testID={accessibilityId}
-        accessibilityLabel={accessibilityId}
+  return (
+    <View
+      style={styles.container}
+      testID={accessibilityId}
+      accessibilityLabel={accessibilityId}
+    >
+      <Pressable
+        onPress={() => onTabChange(CommunityProfileTab.community_feed)}
       >
-        <Pressable
-          onPress={() => onTabChange(CommunityProfileTab.community_feed)}
-        >
-          <IconTab
-            themeStyles={themeStyles}
-            icon={
-              <SvgXml
-                xml={feed(
-                  getActiveColor(
-                    currentTab === CommunityProfileTab.community_feed
-                  )
-                )}
-              />
-            }
-            isActive={currentTab === CommunityProfileTab.community_feed}
-          />
-        </Pressable>
-        <Pressable onPress={() => onTabChange(CommunityProfileTab.community_pin)}>
-          <IconTab
-            themeStyles={themeStyles}
-            icon={
-              <SvgXml
-                xml={pin(
-                  getActiveColor(currentTab === CommunityProfileTab.community_pin)
-                )}
-              />
-            }
-            isActive={currentTab === CommunityProfileTab.community_pin}
-          />
-        </Pressable>
-        <Pressable
-          onPress={() => onTabChange(CommunityProfileTab.community_image_feed)}
-        >
-          <IconTab
-            themeStyles={themeStyles}
-            icon={
-              <SvgXml
-                xml={image(
-                  getActiveColor(
-                    currentTab === CommunityProfileTab.community_image_feed
-                  )
-                )}
-              />
-            }
-            isActive={currentTab === CommunityProfileTab.community_image_feed}
-          />
-        </Pressable>
-        <Pressable
-          onPress={() => onTabChange(CommunityProfileTab.community_video_feed)}
-        >
-          <IconTab
-            themeStyles={themeStyles}
-            icon={
-              <SvgXml
-                xml={video(
-                  getActiveColor(
-                    currentTab === CommunityProfileTab.community_video_feed
-                  )
-                )}
-              />
-            }
-            isActive={currentTab === CommunityProfileTab.community_video_feed}
-          />
-        </Pressable>
-      </View>
-    );
-  };
+        <IconTab
+          themeStyles={themeStyles}
+          icon={
+            <SvgXml
+              xml={feed(
+                getActiveColor(
+                  currentTab === CommunityProfileTab.community_feed
+                )
+              )}
+            />
+          }
+          isActive={currentTab === CommunityProfileTab.community_feed}
+        />
+      </Pressable>
+      <Pressable onPress={() => onTabChange(CommunityProfileTab.community_pin)}>
+        <IconTab
+          themeStyles={themeStyles}
+          icon={
+            <SvgXml
+              xml={pin(
+                getActiveColor(currentTab === CommunityProfileTab.community_pin)
+              )}
+            />
+          }
+          isActive={currentTab === CommunityProfileTab.community_pin}
+        />
+      </Pressable>
+      <Pressable
+        onPress={() => onTabChange(CommunityProfileTab.community_image_feed)}
+      >
+        <IconTab
+          themeStyles={themeStyles}
+          icon={
+            <SvgXml
+              xml={image(
+                getActiveColor(
+                  currentTab === CommunityProfileTab.community_image_feed
+                )
+              )}
+            />
+          }
+          isActive={currentTab === CommunityProfileTab.community_image_feed}
+        />
+      </Pressable>
+      <Pressable
+        onPress={() => onTabChange(CommunityProfileTab.community_video_feed)}
+      >
+        <IconTab
+          themeStyles={themeStyles}
+          icon={
+            <SvgXml
+              xml={video(
+                getActiveColor(
+                  currentTab === CommunityProfileTab.community_video_feed
+                )
+              )}
+            />
+          }
+          isActive={currentTab === CommunityProfileTab.community_video_feed}
+        />
+      </Pressable>
+    </View>
+  );
+};
 
 export default memo(AmityCommunityProfileTabComponent);

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

@@ -1,5 +1,5 @@
 import React, { FC, memo, useCallback, useRef, useState } from 'react';
-import { FlatList } from 'react-native';
+import { FlatList, View } from 'react-native';
 
 import { RefreshControl } from 'react-native';
 import AmityPostContentComponent from '../AmityPostContentComponent/AmityPostContentComponent';
@@ -20,6 +20,7 @@ import Divider from '../../../component/Divider';
 type AmityGlobalFeedComponentType = {
   pageId?: PageID;
   isShowStoryTab?: boolean;
+  GlobalFeedHeaderComponent?: React.ReactElement;
 };
 
 export const globalFeedPageLimit = 20;
@@ -27,6 +28,7 @@ export const globalFeedPageLimit = 20;
 const AmityGlobalFeedComponent: FC<AmityGlobalFeedComponentType> = ({
   pageId,
   isShowStoryTab = true,
+  GlobalFeedHeaderComponent,
 }) => {
   const { itemWithAds, refresh, loading, onNextPage } =
     useCustomRankingGlobalFeed();
@@ -100,12 +102,15 @@ const AmityGlobalFeedComponent: FC<AmityGlobalFeedComponentType> = ({
       }
       keyboardShouldPersistTaps="handled"
       ListHeaderComponent={
-        !refreshing &&
-        !loading &&
-        isShowStoryTab && (
-          <AmityStoryTabComponent
-            type={AmityStoryTabComponentEnum.globalFeed}
-          />
+        !refreshing && !loading && isShowStoryTab ? (
+          <View>
+            {GlobalFeedHeaderComponent}
+            <AmityStoryTabComponent
+              type={AmityStoryTabComponentEnum.globalFeed}
+            />
+          </View>
+        ) : (
+          GlobalFeedHeaderComponent
         )
       }
       viewabilityConfig={{ viewAreaCoveragePercentThreshold: 60 }}

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

@@ -158,8 +158,6 @@ const AmityPostContentComponent: FC<AmityPostContentComponentProps> = ({
     });
   };
 
-  if (post?.structureType === 'liveStream') return null;
-
   return (
     <View>
       {(category === AmityPostCategory.ANNOUNCEMENT ||

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

@@ -74,10 +74,10 @@ const AmityReactionListComponent: FC<AmityReactionListComponentType> = ({
         selectedReactionIndex === 0
           ? allReactionList
           : selectedReactionIndex === 1
-            ? likeReactionList
-            : selectedReactionIndex === 2
-              ? loveReactionList
-              : null;
+          ? likeReactionList
+          : selectedReactionIndex === 2
+          ? loveReactionList
+          : null;
       if (currentUsers?.length > 0) {
         const userList = currentUsers.map((item) => item.userId);
         try {
@@ -95,7 +95,7 @@ const AmityReactionListComponent: FC<AmityReactionListComponentType> = ({
       }
     })();
 
-    return () => { };
+    return () => {};
   }, [
     allReactionList,
     likeReactionList,
@@ -231,10 +231,10 @@ const AmityReactionListComponent: FC<AmityReactionListComponentType> = ({
         {loading
           ? renderContentLoading()
           : hasError
-            ? errorContent()
-            : reactors
-              ? renderReactionList()
-              : null}
+          ? errorContent()
+          : reactors
+          ? renderReactionList()
+          : null}
       </View>
     </Modal>
   );

package/src/v4/PublicApi/Pages/AmityLivestreamPostTargetSelectionPage/AmityLivestreamPostTargetSelectionPage.tsx

@@ -37,10 +37,16 @@ const AmityLivestreamPostTargetSelectionPage = () => {
     navigation.navigate('CreateLivestream', context);
   };
 
+  const onClickClose = () => {
+    if (AmityLivestreamPostTargetSelectionPageBehavior?.onClickClose) {
+      AmityLivestreamPostTargetSelectionPageBehavior.onClickClose();
+    }
+  };
   return (
     <TargetSelectionPage
       onSelectFeed={onSelectFeed}
       pageId={PageID.livestream_post_target_selection_page}
+      onClickClose={onClickClose}
     />
   );
 };

package/src/v4/PublicApi/Pages/AmityPollTargetSelectionPage/AmityPollTargetSelectionPage.tsx

@@ -28,11 +28,16 @@ const AmityPollTargetSelectionPage = () => {
     }
     navigation.navigate('PollPostComposer', context);
   };
-
+  const onClickClose = () => {
+    if (AmityPollTargetSelectionPageBehavior?.onClickClose) {
+      AmityPollTargetSelectionPageBehavior.onClickClose();
+    }
+  };
   return (
     <TargetSelectionPage
       onSelectFeed={onSelectFeed}
       pageId={PageID.select_poll_target_page}
+      onClickClose={onClickClose}
     />
   );
 };

package/src/v4/PublicApi/Pages/AmityPostComposerPage/AmityPostComposerPage.tsx

@@ -60,6 +60,7 @@ import { getPostErrorMessage } from '../../../utils/errors';
 import { MAXIMUM_POST_CHARACTERS } from '../../../constants';
 import { replaceTriggerValues } from 'react-native-controlled-mentions';
 import { useUIKitDispatch } from '../../../../redux/store';
+import { useBehaviour } from '../../../../v4/providers/BehaviourProvider';
 
 const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
   mode,
@@ -75,6 +76,7 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
     shouldCall: true,
   });
   const pageId = PageID.post_composer_page;
+  const { AmityPostComposerPageBehavior } = useBehaviour();
   const { isExcluded, themeStyles, accessibilityId } = useAmityPage({ pageId });
   const styles = useStyles(themeStyles);
   const { getImage } = useFile();
@@ -105,12 +107,16 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
   const [deletedPostIds, setDeletedPostIds] = useState<string[]>([]);
   const [isUploading, setIsUploading] = useState(false);
   const [hasChangedAttachment, setHasChangedAttachment] = useState(false);
+  const [imageErrors, setImageErrors] = useState<Set<string>>(new Set());
+  const [videoErrors, setVideoErrors] = useState<Set<string>>(new Set());
   const privateCommunityId = !community?.isPublic && community?.communityId;
   const title = isEditMode
     ? 'Edit Post'
     : community?.displayName ?? 'My Timeline';
   const isInputValid =
     !isUploading &&
+    imageErrors.size === 0 &&
+    videoErrors.size === 0 &&
     inputMessage.trim().length <= MAXIMUM_POST_CHARACTERS &&
     (inputMessage.trim().length > 0 ||
       displayImages.length > 0 ||
@@ -286,17 +292,20 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
 
   const onPressClose = useCallback(() => {
     const routes = navigation.getState().routes;
+    if (AmityPostComposerPageBehavior?.onPressPost) {
+      AmityPostComposerPageBehavior.onPressPost();
+    }
     if (routes[routes.length - 2].name === 'PostTargetSelection') {
       navigation.pop(2);
     } else navigation.pop();
-  }, [navigation]);
+  }, [navigation, AmityPostComposerPageBehavior]);
 
   const onClose = useCallback(() => {
     Alert.alert(
       'Discard this post',
       'The post will be permanently deleted. It cannot be undone',
       [
-        { text: 'Keey Editing', style: 'cancel' },
+        { text: 'Keep Editing', style: 'cancel' },
         {
           text: 'Discard',
           style: 'destructive',
@@ -593,10 +602,45 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
     }
   }, [displayVideos.length, processMedia]);
 
+  const handleImageUploadError = useCallback(
+    (hasError: boolean, source: string) => {
+      setImageErrors((prev) => {
+        const newSet = new Set(prev);
+        if (hasError) {
+          newSet.add(source);
+        } else {
+          newSet.delete(source);
+        }
+        return newSet;
+      });
+    },
+    []
+  );
+
+  const handleVideoUploadError = useCallback(
+    (hasError: boolean, source: string) => {
+      setVideoErrors((prev) => {
+        const newSet = new Set(prev);
+        if (hasError) {
+          newSet.add(source);
+        } else {
+          newSet.delete(source);
+        }
+        return newSet;
+      });
+    },
+    []
+  );
+
   const handleOnCloseImage = useCallback(
     (originalPath: string, _, postId: string) => {
       setHasChangedAttachment(true);
       setDeletedPostIds((prev) => [...prev, postId]);
+      setImageErrors((prev) => {
+        const newSet = new Set(prev);
+        newSet.delete(originalPath);
+        return newSet;
+      });
       setDisplayImages((prevData) => {
         const newData = prevData.filter(
           (item: IDisplayImage) => item.url !== originalPath
@@ -610,6 +654,11 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
     (originalPath: string, _, postId: string) => {
       setHasChangedAttachment(true);
       setDeletedPostIds((prev) => [...prev, postId]);
+      setVideoErrors((prev) => {
+        const newSet = new Set(prev);
+        newSet.delete(originalPath);
+        return newSet;
+      });
       setDisplayVideos((prevData) => {
         const newData = prevData.filter(
           (item: IDisplayImage) => item.url !== originalPath
@@ -755,6 +804,7 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
                       onClose={handleOnCloseImage}
                       index={index} //TODO: Fix this without index
                       onLoadFinish={handleOnFinishImage}
+                      onUploadError={handleImageUploadError}
                       isUploaded={item.isUploaded}
                       fileId={item.fileId}
                       fileCount={displayImages.length}
@@ -778,6 +828,7 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
                       onClose={handleOnCloseVideo}
                       index={index} //TODO: Fix this without index
                       onLoadFinish={handleOnFinishVideo}
+                      onUploadError={handleVideoUploadError}
                       isUploaded={item.isUploaded}
                       fileId={item.fileId}
                       thumbNail={item.thumbNail as string}

package/src/v4/PublicApi/Pages/AmityPostTargetSelectionPage/AmityPostTargetSelectionPage.tsx

@@ -81,10 +81,17 @@ const AmityPostTargetSelectionPage = ({
     }
   };
 
+  const onClickClose = () => {
+    if (AmityPostTargetSelectionPageBehavior?.onClickClose) {
+      AmityPostTargetSelectionPageBehavior.onClickClose();
+    }
+  };
+
   return (
     <TargetSelectionPage
       pageId={PageID.select_post_target_page}
       onSelectFeed={onSelectFeed}
+      onClickClose={onClickClose}
     />
   );
 };

package/src/v4/PublicApi/Pages/AmitySocialHomePage/AmitySocialHomePage.tsx

@@ -3,7 +3,11 @@ import { useCallback, useState } from 'react';
 import { LogBox, SafeAreaView, StyleSheet } from 'react-native';
 import CustomSocialTab from '../../../../v4/component/CustomSocialTab/CustomSocialTab';
 import { useUiKitConfig } from '../../../../v4/hook';
-import { ComponentID, ElementID, PageID } from '../../../../v4/enum/enumUIKitID';
+import {
+  ComponentID,
+  ElementID,
+  PageID,
+} from '../../../../v4/enum/enumUIKitID';
 
 import { useTheme } from 'react-native-paper';
 import { useBehaviour } from '../../../../v4/providers/BehaviourProvider';

package/src/v4/PublicApi/Pages/AmityStoryTargetSelectionPage/AmityStoryTargetSelectionPage.tsx

@@ -24,11 +24,18 @@ const AmityStoryTargetSelectionPage = () => {
     });
   };
 
+  const onClickClose = () => {
+    if (AmityStoryTargetSelectionPageBehavior?.onClickClose) {
+      AmityStoryTargetSelectionPageBehavior.onClickClose();
+    }
+  };
+
   return (
     <TargetSelectionPage
       pageId={PageID.select_story_target_page}
       onSelectFeed={onSelectFeed}
       hideMyTimelineTarget={true}
+      onClickClose={onClickClose}
     />
   );
 };

package/src/v4/component/LoadingImage/index.tsx

@@ -10,8 +10,6 @@ import { closeIcon, toastIcon } from '../../../svg/svg-xml-list';
 import { useStyles } from './styles';
 import { useTheme } from 'react-native-paper';
 import type { MyMD3Theme } from '../../../providers/amity-ui-kit-provider';
-import uiSlice from '../../../redux/slices/uiSlice';
-import { useUIKitDispatch } from '../../../redux/store';
 
 interface OverlayImageProps {
   source: string;
@@ -23,6 +21,7 @@ interface OverlayImageProps {
     index: number,
     originalPath: string
   ) => void;
+  onUploadError?: (hasError: boolean, source: string) => void;
   index?: number;
   isUploaded: boolean;
   fileId?: string;
@@ -36,6 +35,7 @@ const LoadingImage = ({
   onClose,
   index,
   onLoadFinish,
+  onUploadError,
   isUploaded = false,
   fileId = '',
   isEditMode = false,
@@ -44,8 +44,6 @@ const LoadingImage = ({
   setIsUploading,
 }: OverlayImageProps) => {
   const theme = useTheme() as MyMD3Theme;
-  const dispatch = useUIKitDispatch();
-  const { showToastMessage } = uiSlice.actions;
   const [loading, setLoading] = useState(true);
   const [progress, setProgress] = useState(0);
   const [isProcess, setIsProcess] = useState<boolean>(false);
@@ -84,33 +82,39 @@ const LoadingImage = ({
             source
           );
       } else {
+        setIsUploading(false);
         handleLoadEnd();
-        dispatch(showToastMessage({ toastMessage: 'Failed to upload file' }));
+        setIsProcess(false);
         setIsUploadError(true);
+        onUploadError?.(true, source);
       }
     } catch (error) {
       handleLoadEnd();
-      dispatch(showToastMessage({ toastMessage: 'Failed to upload file' }));
+      setIsProcess(false);
+      setIsUploading(false);
       setIsUploadError(true);
+      onUploadError?.(true, source);
     }
   }, [
-    dispatch,
     handleLoadEnd,
     index,
     onLoadFinish,
+    onUploadError,
     setIsUploading,
-    showToastMessage,
     source,
   ]);
 
   const handleDelete = async () => {
-    if (!fileId) return null;
-    if (!isEditMode) {
+    if (fileId && !isEditMode) {
       await deleteAmityFile(fileId);
     }
     onClose && onClose(source, fileId, postId);
   };
   useEffect(() => {
+    setIsUploadError(false);
+    onUploadError?.(false, source);
+    setProgress(0);
+    setIsProcess(false);
     if (isUploaded) {
       setLoading(false);
     } else {
@@ -151,19 +155,21 @@ const LoadingImage = ({
           )}
         </View>
       )}
-      {!loading && isUploadError ? (
-        <TouchableOpacity style={styles.overlay} onPress={onRetryUpload}>
-          <SvgXml xml={toastIcon()} width="24" height="24" />
-        </TouchableOpacity>
-      ) : (
-        <TouchableOpacity
-          style={styles.closeButton}
-          disabled={loading || isProcess}
-          onPress={handleDelete}
-        >
-          <SvgXml xml={closeIcon(theme.colors.base)} width="12" height="12" />
-        </TouchableOpacity>
+      {!loading && isUploadError && (
+        <View style={styles.failedOverlay}>
+          <TouchableOpacity style={styles.errorOverlay} onPress={onRetryUpload}>
+            <SvgXml xml={toastIcon()} width="28" height="28" />
+          </TouchableOpacity>
+        </View>
       )}
+
+      <TouchableOpacity
+        style={styles.closeButton}
+        disabled={(loading || isProcess) && !isUploadError}
+        onPress={handleDelete}
+      >
+        <SvgXml xml={closeIcon(theme.colors.base)} width="12" height="12" />
+      </TouchableOpacity>
     </View>
   );
 };

package/src/v4/component/LoadingImage/styles.ts

@@ -18,12 +18,28 @@ export const useStyles = () => {
       height: '100%',
       resizeMode: 'cover',
       borderRadius: 5,
+      position: 'relative',
     },
     overlay: {
       ...StyleSheet.absoluteFillObject,
       justifyContent: 'center',
       alignItems: 'center',
     },
+    failedOverlay: {
+      ...StyleSheet.absoluteFillObject,
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: 'rgba(0, 0, 0, 0.4)',
+      borderRadius: 5,
+    },
+    errorOverlay: {
+      position: 'absolute',
+      top: '50%',
+      left: 0,
+      right: 0,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
     progressBar: {
       marginVertical: 10,
     },
@@ -40,6 +56,7 @@ export const useStyles = () => {
       padding: 7,
       backgroundColor: 'rgba(0, 0, 0, 0.4)',
       borderRadius: 72,
+      zIndex: 10,
     },
   });
 };