@amityco/react-native-social-uikit 4.0.0-42bcb43.0 → 4.0.0-48d9564c.0

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,38 @@ 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);
       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 +154,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,
     },
   });
 };

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

@@ -35,6 +35,7 @@ interface OverlayImageProps {
     originalPath: string,
     thumbNail: string
   ) => void;
+  onUploadError?: (hasError: boolean, source: string) => void;
   index?: number;
   isUploaded: boolean;
   fileId?: string;
@@ -50,6 +51,7 @@ const LoadingVideo = ({
   onClose,
   index,
   onLoadFinish,
+  onUploadError,
   isUploaded = false,
   thumbNail,
   onPlay,
@@ -129,23 +131,30 @@ const LoadingVideo = ({
       } else {
         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);
       setIsUploadError(true);
+      onUploadError?.(true, source);
     }
   }, [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 {
@@ -216,7 +225,7 @@ const LoadingVideo = ({
       ) : (
         <TouchableOpacity
           style={styles.closeButton}
-          disabled={loading || isProcess}
+          disabled={(loading || isProcess) && !isUploadError}
           onPress={handleDelete}
         >
           <SvgXml xml={closeIcon(theme.colors.base)} width="12" height="12" />

package/src/v4/component/MyStories/StoryCircleItem.tsx

@@ -31,13 +31,13 @@ const StoryCircleItem: FC<IStoryCircleItem> = ({
   const styles = useStyles();
   const storyRingColor: string[] = storyTarget?.hasUnseen
     ? (getUiKitConfig({
-      page: PageID.StoryPage,
-      component: ComponentID.StoryTab,
-      element: ElementID.StoryRing,
-    })?.progress_color as string[]) ?? ['#e2e2e2', '#e2e2e2']
+        page: PageID.StoryPage,
+        component: ComponentID.StoryTab,
+        element: ElementID.StoryRing,
+      })?.progress_color as string[]) ?? ['#e2e2e2', '#e2e2e2']
     : storyTarget?.failedStoriesCount > 0
-      ? ['#DE1029', '#DE1029']
-      : ['#e2e2e2', '#e2e2e2'];
+    ? ['#DE1029', '#DE1029']
+    : ['#e2e2e2', '#e2e2e2'];
 
   useEffect(() => {
     if (storyTarget.targetType !== 'community') return;
@@ -68,8 +68,8 @@ const StoryCircleItem: FC<IStoryCircleItem> = ({
         source={
           avatarUrl
             ? {
-              uri: avatarUrl,
-            }
+                uri: avatarUrl,
+              }
             : require('../../assets/images/userAvatar.png')
         }
         style={styles.communityAvatar}

package/src/v4/component/PreviewLink/LinkPreview.tsx

@@ -21,7 +21,7 @@ export const LinkPreview = React.memo(
 
       const fetchData = async () => {
         setData(undefined);
-        const newData = await getPreviewData(text, 5000);
+        const newData = await getPreviewData(text);
         if (!isCancelled) {
           setData(newData);
         }
@@ -37,8 +37,8 @@ export const LinkPreview = React.memo(
 
     const renderImageNode = React.useCallback(
       (image: PreviewDataImage) => {
-        const imageUrl = image?.url
-          ? { uri: image.url }
+        const imageUrl = image
+          ? { uri: image }
           : require('../../assets/images/previewLinkDefaultBackground.png');
 
         return (

package/src/v4/component/PreviewLink/utils.ts

@@ -2,6 +2,7 @@ import { decode } from 'html-entities';
 import { Image } from 'react-native';
 
 import { PreviewData, PreviewDataImage, Size } from './types';
+import { Client } from '@amityco/ts-sdk-react-native';
 
 export const getActualImageUrl = (baseUrl: string, imageUrl?: string) => {
   let actualImageUrl = imageUrl?.trim();
@@ -54,7 +55,7 @@ export const getImageSize = (url: string) => {
 
 // Functions below use functions from the same file and mocks are not working
 /* istanbul ignore next */
-export const getPreviewData = async (text: string, requestTimeout = 5000) => {
+export const getPreviewData = async (text: string) => {
   const previewData: PreviewData = {
     description: undefined,
     image: undefined,
@@ -77,114 +78,14 @@ export const getPreviewData = async (text: string, requestTimeout = 5000) => {
       url = 'https://' + url;
     }
 
-    let abortControllerTimeout: number;
-    const abortController = new AbortController();
+    const request = await Client.fetchLinkPreview(url);
 
-    const request = fetch(url, {
-      headers: {
-        'User-Agent':
-          'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36',
-      },
-      signal: abortController.signal,
-    });
-
-    abortControllerTimeout = setTimeout(() => {
-      abortController.abort();
-    }, requestTimeout);
-
-    const response = await request;
-
-    clearTimeout(abortControllerTimeout);
-
-    previewData.link = url;
-
-    const contentType = response.headers.get('content-type') ?? '';
-
-    if (REGEX_IMAGE_CONTENT_TYPE.test(contentType)) {
-      const image = await getPreviewDataImage(url);
-      previewData.image = image;
-      return previewData;
-    }
-
-    const html = await response.text();
-
-    // Some pages return undefined
-    if (!html) return previewData;
-
-    const head = html.substring(0, html.indexOf('<body'));
-
-    // Get page title
-    const title = REGEX_TITLE.exec(head);
-    previewData.title = getHtmlEntitiesDecodedText(title?.[1]);
-
-    let matches: RegExpMatchArray | null;
-    const meta: RegExpMatchArray[] = [];
-    while ((matches = REGEX_META.exec(head)) !== null) {
-      // @ts-ignore
-      meta.push([...matches]);
-    }
-
-    const metaPreviewData = meta.reduce<{
-      description?: string;
-      imageUrl?: string;
-      title?: string;
-    }>(
-      (acc, curr) => {
-        // Verify that we have property/name and content
-        // Note that if a page will specify property, name and content in the same meta, regex will fail
-        if (!curr[2] || !curr[3]) return acc;
-
-        // Only take the first occurrence
-        // For description take the meta description tag into consideration
-        const description =
-          !acc.description &&
-          (getContent(curr[2], curr[3], 'og:description') ||
-            getContent(curr[2], curr[3], 'description'));
-        const ogImage =
-          !acc.imageUrl && getContent(curr[2], curr[3], 'og:image');
-        const ogTitle = !acc.title && getContent(curr[2], curr[3], 'og:title');
-
-        return {
-          description: description
-            ? getHtmlEntitiesDecodedText(description)
-            : acc.description,
-          imageUrl: ogImage ? getActualImageUrl(url, ogImage) : acc.imageUrl,
-          title: ogTitle ? getHtmlEntitiesDecodedText(ogTitle) : acc.title,
-        };
-      },
-      { title: previewData.title }
-    );
-
-    previewData.description = metaPreviewData.description;
-    previewData.image = await getPreviewDataImage(metaPreviewData.imageUrl);
-    previewData.title = metaPreviewData.title;
-
-    if (!previewData.image) {
-      let imageMatches: RegExpMatchArray | null;
-      const tags: RegExpMatchArray[] = [];
-      while ((imageMatches = REGEX_IMAGE_TAG.exec(html)) !== null) {
-        // @ts-ignore
-        tags.push([...imageMatches]);
-      }
-
-      let images: PreviewDataImage[] = [];
-
-      for (const tag of tags
-        .filter((t) => !t[1].startsWith('data'))
-        .slice(0, 5)) {
-        const image = await getPreviewDataImage(getActualImageUrl(url, tag[1]));
-
-        if (!image) continue;
-
-        images = [...images, image];
-      }
-
-      previewData.image = images.sort(
-        (a, b) => b.height * b.width - a.height * a.width
-      )[0];
-    }
-
-    return previewData;
+    return {
+      description: request.description || undefined,
+      image: request.image || undefined,
+      link: url,
+      title: request.title || undefined,
+    };
   } catch {
     return previewData;
   }

package/src/v4/component/TargetSelectionPage/TargetSelectionPage.tsx

@@ -13,11 +13,12 @@ import type { MyMD3Theme } from '../../../providers/amity-ui-kit-provider';
 import CloseButtonIconElement from '../../PublicApi/Elements/CloseButtonIconElement/CloseButtonIconElement';
 import { PageID, ComponentID, ElementID } from '../../enum';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { useNavigation } from '@react-navigation/native';
 import TextKeyElement from '../../PublicApi/Elements/TextKeyElement/TextKeyElement';
 import { Typography } from '../Typography/Typography';
 import { useStyles } from './styles';
 import { Illustration } from '../../../v4/PublicApi/Components/AmityEmptyNewsFeedComponent/Elements';
+import { useNavigation } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
 export type FeedParams = {
   targetId: string;
@@ -48,21 +49,23 @@ interface ITargetSelectionPage {
     postSetting,
     needApprovalOnPostCreation,
   }: FeedParams) => void;
+  onClickClose?: () => void;
 }
 
 const TargetSelectionPage = ({
   pageId,
   hideMyTimelineTarget = false,
   onSelectFeed,
+  onClickClose,
 }: ITargetSelectionPage) => {
   const { client } = useAuth();
-  const navigation = useNavigation();
+
   const defaultTheme = useTheme() as MyMD3Theme;
 
   const user = useUser((client as Amity.Client).userId);
   const { communities, onNextCommunityPage, loading } = useCommunities();
   const { themeStyles, accessibilityId } = useAmityPage({ pageId });
-
+  const navigation = useNavigation<NativeStackNavigationProp<any>>();
   const theme = themeStyles || defaultTheme;
   const styles = useStyles(theme);
 
@@ -102,7 +105,12 @@ const TargetSelectionPage = ({
       <View style={styles.header}>
         <TouchableOpacity
           style={styles.closeButton}
-          onPress={() => navigation.goBack()}
+          onPress={() => {
+            onClickClose?.();
+            if (navigation.canGoBack()) {
+              navigation.goBack();
+            }
+          }}
         >
           <CloseButtonIconElement style={styles.closeIcon} pageID={pageId} />
         </TouchableOpacity>

package/src/v4/elements/ActionButton/ActionButton.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 import { useAmityElement } from '../../../v4/hook';
 import { ComponentID, ElementID, PageID } from '../../../v4/enum';
-import Button, { BUTTON_SIZE, ButtonProps } from '../../../v4/component/Button/Button';
+import Button, {
+  BUTTON_SIZE,
+  ButtonProps,
+} from '../../../v4/component/Button/Button';
 import { useStyles } from './styles';
 
 type ActionButtonProps = ButtonProps & {

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