@amityco/react-native-social-uikit 4.1.1-e85011d9.0 → 4.1.1-fb84f89a.0

package/src/social/features/post/Composer/PostComposer.tsx

@@ -1,5 +1,6 @@
 import {
   Alert,
+  FlatList,
   Keyboard,
   KeyboardAvoidingView,
   Platform,
@@ -37,18 +38,22 @@ import uiSlice from '../../../../core/stores/slices/uiSlice';
 import { amityPostsFormatter } from '../../../../core/utils/post';
 import useAuth from '../../../../core/hooks/useAuth';
 import globalfeedSlice from '../../../../core/stores/slices/globalfeedSlice';
-import { createPostToFeed, editPost } from '../../../../core/legacy/feed';
-import { usePostByIds } from '../../../../core/hooks/usePostByIds';
+import {
+  createPostToFeed,
+  editPost,
+  getPostById,
+} from '../../../../core/legacy/feed';
 import TextKeyElement from '../../../elements/TextKeyElement/TextKeyElement';
 import AmityMediaAttachmentComponent from '../components/MediaAttachment';
 import AmityDetailedMediaAttachmentComponent from '../components/DetailedMediaAttachment';
 import { useKeyboardStatus } from '../../../hooks';
 import ImagePicker, {
+  launchImageLibrary,
   type Asset,
   launchCamera,
-  launchImageLibrary,
 } from 'react-native-image-picker';
-import { SelectedMediaComponent } from '../../../components/SelectedMediaComponent';
+import LoadingImage from '../../../components/LoadingImage';
+import LoadingVideo from '../../../components/LoadingVideo';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { RootStackParamList } from '../../../../core/routes/RouteParamList';
 import {
@@ -192,19 +197,22 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
     []
   );
 
-  // Load the edited post's child media the same way the web UIKit does
-  // (usePostByIds → batch getPostByIds), instead of the racy per-id fetch.
-  const childrenPosts = usePostByIds(post?.children ?? []);
-
   const getPostInfo = useCallback(
-    async (response: Amity.Post[]) => {
+    async (postArray: string[]) => {
       try {
+        const response = await Promise.all(
+          postArray.map(async (id: string) => {
+            const { data } = await getPostById(id);
+            return data;
+          })
+        );
+
         const images: IDisplayImage[] = [];
         const videos: IDisplayImage[] = [];
 
         for (const item of response) {
           if (item?.dataType === 'image') {
-            const fileId = (item as Amity.Post<'image'>)?.data?.fileId;
+            const fileId = item?.data?.fileId;
             const url = await getImage({
               fileId: fileId,
               imageSize: ImageSizeState.full,
@@ -217,9 +225,8 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
               postId: item.postId,
             });
           } else if (item?.dataType === 'video') {
-            const videoData = (item as Amity.Post<'video'>)?.data;
-            const fileId = videoData?.videoFileId?.original;
-            const thumbnailFileId = videoData?.thumbnailFileId;
+            const fileId = item?.data?.videoFileId?.original;
+            const thumbnailFileId = item?.data?.thumbnailFileId;
             const fileUrls = await Promise.allSettled(
               [fileId, thumbnailFileId].map(async (id) => {
                 return await getImage({
@@ -260,8 +267,8 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
   }, []);
 
   useEffect(() => {
-    if (childrenPosts.length > 0) getPostInfo(childrenPosts);
-  }, [getPostInfo, childrenPosts]);
+    post?.children && getPostInfo(post?.children);
+  }, [getPostInfo, post?.children]);
 
   const getMentionPositions = useCallback(
     (text: string, mentioneeIds: string[]) => {
@@ -576,50 +583,65 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
     ]);
   }, [displayImages.length, displayVideos.length, pickCamera]);
 
-  // Open the native OS camera roll (matches the web UIKit's native file
-  // picker). Appends the picked media, de-duplicating by uri and capping at 10.
-  const pickFromLibrary = useCallback(
-    async (mediaType: 'photo' | 'video') => {
-      const isPhoto = mediaType === 'photo';
-      const current = isPhoto ? displayImages.length : displayVideos.length;
-      if (current >= 10)
-        return Alert.alert(
-          'Maximum upload limit reached',
-          `You've reached the upload limit of 10 ${
-            isPhoto ? 'images' : 'videos'
-          }. Any additional ${isPhoto ? 'images' : 'videos'} will not be saved.`
-        );
-      const result: ImagePicker.ImagePickerResponse = await launchImageLibrary({
-        mediaType,
-        quality: 1,
-        selectionLimit: 10 - current,
-      });
-      if (result.didCancel || !result.assets?.length) return;
-      const uris = result.assets
-        .map((a: Asset) => a.uri)
-        .filter(Boolean) as string[];
-      const mediaOj = processMedia(uris);
-      if (!mediaOj) return;
-      const setter = isPhoto ? setDisplayImages : setDisplayVideos;
-      setter((prev) => {
-        const existingUrls = new Set(prev.map((m) => m.url));
-        const additions = mediaOj.filter((m) => !existingUrls.has(m.url));
-        const updated = [...prev, ...additions];
-        return updated.length > 10 ? updated.slice(0, 10) : updated;
+  const onPressImage = useCallback(async () => {
+    if (displayImages.length === 10)
+      return Alert.alert(
+        'Maximum upload limit reached',
+        "You've reached the upload limit of 10 images. Any additional images will not be saved."
+      );
+    const result: ImagePicker.ImagePickerResponse = await launchImageLibrary({
+      mediaType: 'photo',
+      quality: 1,
+      selectionLimit: 10 - displayImages.length,
+    });
+    if (!result.didCancel && result.assets && result.assets.length > 0) {
+      const imageUriArr: string[] = result.assets.map(
+        (item: Asset) => item.uri
+      ) as string[];
+      const mediaOj = processMedia(imageUriArr);
+      setDisplayImages((prev) => {
+        const updatedArray = [...prev, ...mediaOj];
+        if (updatedArray.length > 10) {
+          Alert.alert(
+            'Maximum number of images exceeded',
+            'Maximum number of images that can be uploaded is 10. The rest images will be discarded'
+          );
+          return updatedArray.slice(0, 10);
+        }
+        return updatedArray;
       });
-    },
-    [displayImages.length, displayVideos.length, processMedia]
-  );
-
-  const onPressImage = useCallback(
-    () => pickFromLibrary('photo'),
-    [pickFromLibrary]
-  );
+    }
+  }, [displayImages.length, processMedia]);
 
-  const onPressVideo = useCallback(
-    () => pickFromLibrary('video'),
-    [pickFromLibrary]
-  );
+  const onPressVideo = useCallback(async () => {
+    if (displayVideos.length === 10)
+      return Alert.alert(
+        'Maximum upload limit reached',
+        "You've reached the upload limit of 10 videos. Any additional videos will not be saved."
+      );
+    const result: ImagePicker.ImagePickerResponse = await launchImageLibrary({
+      mediaType: 'video',
+      quality: 1,
+      selectionLimit: 10 - displayVideos.length,
+    });
+    if (!result.didCancel && result.assets && result.assets.length > 0) {
+      const videoUriArr: string[] = result.assets.map(
+        (item: Asset) => item.uri
+      ) as string[];
+      const mediaOj = processMedia(videoUriArr);
+      setDisplayVideos((prev) => {
+        const updatedArray = [...prev, ...mediaOj];
+        if (updatedArray.length > 10) {
+          Alert.alert(
+            'Maximum number of videos exceeded',
+            'Maximum number of videos that can be uploaded is 10. The rest videos will be discarded'
+          );
+          return updatedArray.slice(0, 10);
+        }
+        return updatedArray;
+      });
+    }
+  }, [displayVideos.length, processMedia]);
 
   const handleImageUploadError = useCallback(
     (hasError: boolean, source: string) => {
@@ -730,11 +752,6 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
     []
   );
 
-  // PDT-4310 / PDT-4312: at the 10-attachment cap the camera + gallery icons
-  // are disabled until the user removes a frame.
-  const isMediaCapReached =
-    displayImages.length >= 10 || displayVideos.length >= 10;
-
   const renderDetailedAttachment = useCallback(() => {
     if (isEditMode) return null;
     if (shouldShowDetailAttachment) {
@@ -745,7 +762,6 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
           onPressVideo={onPressVideo}
           chosenMediaType={chosenMediaType}
           onHeightChange={setAttachmentBarHeight}
-          disabled={isMediaCapReached}
         />
       );
     }
@@ -756,13 +772,11 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
         onPressVideo={onPressVideo}
         chosenMediaType={chosenMediaType}
         onHeightChange={setAttachmentBarHeight}
-        disabled={isMediaCapReached}
       />
     );
   }, [
     chosenMediaType,
     isEditMode,
-    isMediaCapReached,
     onPressCamera,
     onPressImage,
     onPressVideo,
@@ -821,25 +835,54 @@ const AmityPostComposerPage: FC<AmityPostComposerPageType> = ({
           })}
           <View style={styles.imageContainer}>
             {displayImages.length > 0 && (
-              <SelectedMediaComponent
-                mediaType="image"
-                media={displayImages}
-                onClose={handleOnCloseImage}
-                onLoadFinish={handleOnFinishImage}
-                onUploadError={handleImageUploadError}
-                isEditMode={isEditMode}
-                setIsUploading={setIsUploading}
+              <FlatList
+                nestedScrollEnabled={true}
+                scrollEnabled={false}
+                data={displayImages}
+                renderItem={({ item, index }) => {
+                  if (!item) return null;
+                  return (
+                    <LoadingImage
+                      source={item.url}
+                      onClose={handleOnCloseImage}
+                      index={index} //TODO: Fix this without index
+                      onLoadFinish={handleOnFinishImage}
+                      onUploadError={handleImageUploadError}
+                      isUploaded={item.isUploaded}
+                      fileId={item.fileId}
+                      fileCount={displayImages.length}
+                      isEditMode={isEditMode}
+                      postId={item.postId}
+                      setIsUploading={setIsUploading}
+                    />
+                  );
+                }}
+                numColumns={3}
               />
             )}
             {displayVideos.length > 0 && (
-              <SelectedMediaComponent
-                mediaType="video"
-                media={displayVideos}
-                onClose={handleOnCloseVideo}
-                onLoadFinish={handleOnFinishVideo}
-                onUploadError={handleVideoUploadError}
-                isEditMode={isEditMode}
-                setIsUploading={setIsUploading}
+              <FlatList
+                data={displayVideos}
+                renderItem={({ item, index }) => {
+                  if (!item) return null;
+                  return (
+                    <LoadingVideo
+                      source={item.url}
+                      onClose={handleOnCloseVideo}
+                      index={index} //TODO: Fix this without index
+                      onLoadFinish={handleOnFinishVideo}
+                      onUploadError={handleVideoUploadError}
+                      isUploaded={item.isUploaded}
+                      fileId={item.fileId}
+                      thumbNail={item.thumbNail as string}
+                      fileCount={displayVideos.length}
+                      isEditMode={isEditMode}
+                      postId={item.postId}
+                      setIsUploading={setIsUploading}
+                    />
+                  );
+                }}
+                numColumns={3}
               />
             )}
           </View>

package/src/social/features/post/components/DetailedMediaAttachment/DetailedMediaAttachment.tsx

@@ -18,9 +18,6 @@ type AmityDetailedMediaAttachmentComponentType = {
   onPressVideo: () => void;
   chosenMediaType?: mediaAttachment;
   onHeightChange?: (height: number) => void;
-  /** When the 10-attachment cap is reached, the camera + gallery icons are
-   * disabled and untappable (PDT-4310 / PDT-4312). */
-  disabled?: boolean;
 };
 
 const AmityDetailedMediaAttachmentComponent: FC<
@@ -31,7 +28,6 @@ const AmityDetailedMediaAttachmentComponent: FC<
   onPressVideo,
   chosenMediaType,
   onHeightChange,
-  disabled = false,
 }) => {
   const pageId = PageID.post_composer_page;
   const componentId = ComponentID.detailed_media_attachment;
@@ -95,9 +91,8 @@ const AmityDetailedMediaAttachmentComponent: FC<
           <Pressable
             testID={cameraElement.accessibilityId}
             accessibilityLabel={cameraElement.accessibilityId}
-            style={[styles.mediaAttachmentBtn, disabled && { opacity: 0.4 }]}
+            style={styles.mediaAttachmentBtn}
             onPress={onPressCamera}
-            disabled={disabled}
           >
             <View style={styles.iconContainer}>
               <SvgXml
@@ -120,9 +115,8 @@ const AmityDetailedMediaAttachmentComponent: FC<
             <Pressable
               testID={imageElement.accessibilityId}
               accessibilityLabel={imageElement.accessibilityId}
-              style={[styles.mediaAttachmentBtn, disabled && { opacity: 0.4 }]}
+              style={styles.mediaAttachmentBtn}
               onPress={onPressImage}
-              disabled={disabled}
             >
               <View style={styles.iconContainer}>
                 <SvgXml
@@ -145,9 +139,8 @@ const AmityDetailedMediaAttachmentComponent: FC<
             <Pressable
               testID={videoElement.accessibilityId}
               accessibilityLabel={videoElement.accessibilityId}
-              style={[styles.mediaAttachmentBtn, disabled && { opacity: 0.4 }]}
+              style={styles.mediaAttachmentBtn}
               onPress={onPressVideo}
-              disabled={disabled}
             >
               <View style={styles.iconContainer}>
                 <SvgXml

package/src/social/features/post/components/MediaAttachment/MediaAttachment.tsx

@@ -17,9 +17,6 @@ type AmityMediaAttachmentComponentType = {
   onPressVideo: () => void;
   chosenMediaType?: mediaAttachment;
   onHeightChange?: (height: number) => void;
-  /** When the 10-attachment cap is reached, the camera + gallery icons are
-   * disabled and untappable (PDT-4310 / PDT-4312). */
-  disabled?: boolean;
 };
 
 const AmityMediaAttachmentComponent: FC<AmityMediaAttachmentComponentType> = ({
@@ -28,7 +25,6 @@ const AmityMediaAttachmentComponent: FC<AmityMediaAttachmentComponentType> = ({
   onPressVideo,
   chosenMediaType,
   onHeightChange,
-  disabled = false,
 }) => {
   const pageId = PageID.post_composer_page;
   const componentId = ComponentID.media_attachment;
@@ -93,9 +89,8 @@ const AmityMediaAttachmentComponent: FC<AmityMediaAttachmentComponentType> = ({
             testID={cameraElement.accessibilityId}
             accessibilityLabel={cameraElement.accessibilityId}
             onPress={onPressCamera}
-            disabled={disabled}
           >
-            <View style={[styles.iconContainer, disabled && { opacity: 0.4 }]}>
+            <View style={styles.iconContainer}>
               <SvgXml
                 xml={camera()}
                 width={24}
@@ -112,11 +107,8 @@ const AmityMediaAttachmentComponent: FC<AmityMediaAttachmentComponentType> = ({
               testID={imageElement.accessibilityId}
               accessibilityLabel={imageElement.accessibilityId}
               onPress={onPressImage}
-              disabled={disabled}
             >
-              <View
-                style={[styles.iconContainer, disabled && { opacity: 0.4 }]}
-              >
+              <View style={styles.iconContainer}>
                 <SvgXml
                   xml={photo()}
                   width={24}
@@ -132,11 +124,8 @@ const AmityMediaAttachmentComponent: FC<AmityMediaAttachmentComponentType> = ({
               testID={videoElement.accessibilityId}
               accessibilityLabel={videoElement.accessibilityId}
               onPress={onPressVideo}
-              disabled={disabled}
             >
-              <View
-                style={[styles.iconContainer, disabled && { opacity: 0.4 }]}
-              >
+              <View style={styles.iconContainer}>
                 <SvgXml
                   xml={video()}
                   width={24}

package/lib/commonjs/core/hooks/usePostByIds.js

@@ -1,38 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.usePostByIds = void 0;
-var _react = require("react");
-var _tsSdkReactNative = require("@amityco/ts-sdk-react-native");
-/**
- * Resolve a list of post ids to their loaded post objects — the same approach
- * the web UIKit uses (core/hooks/usePostByIds) to load an edited post's child
- * media. Uses the batch `getPostByIds` API, which is properly awaited, instead
- * of the racy per-id live-object fetch.
- */
-const usePostByIds = postIds => {
-  const [posts, setPosts] = (0, _react.useState)([]);
-  // Depend on a stable string key so a fresh `[]`/array identity each render
-  // doesn't re-trigger the effect (and loop).
-  const key = (postIds ?? []).join(',');
-  (0, _react.useEffect)(() => {
-    let active = true;
-    async function run() {
-      if (!key) {
-        setPosts(prev => prev.length ? [] : prev);
-        return;
-      }
-      const response = await _tsSdkReactNative.PostRepository.getPostByIds(key.split(','));
-      if (active) setPosts(response.data);
-    }
-    run();
-    return () => {
-      active = false;
-    };
-  }, [key]);
-  return posts;
-};
-exports.usePostByIds = usePostByIds;
-//# sourceMappingURL=usePostByIds.js.map

package/lib/commonjs/core/hooks/usePostByIds.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","require","_tsSdkReactNative","usePostByIds","postIds","posts","setPosts","useState","key","join","useEffect","active","run","prev","length","response","PostRepository","getPostByIds","split","data","exports"],"sourceRoot":"../../../../src","sources":["core/hooks/usePostByIds.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACO,MAAME,YAAY,GAAIC,OAAiB,IAAK;EACjD,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAC,eAAQ,EAAe,EAAE,CAAC;EACpD;EACA;EACA,MAAMC,GAAG,GAAG,CAACJ,OAAO,IAAI,EAAE,EAAEK,IAAI,CAAC,GAAG,CAAC;EAErC,IAAAC,gBAAS,EAAC,MAAM;IACd,IAAIC,MAAM,GAAG,IAAI;IACjB,eAAeC,GAAGA,CAAA,EAAG;MACnB,IAAI,CAACJ,GAAG,EAAE;QACRF,QAAQ,CAAEO,IAAI,IAAMA,IAAI,CAACC,MAAM,GAAG,EAAE,GAAGD,IAAK,CAAC;QAC7C;MACF;MACA,MAAME,QAAQ,GAAG,MAAMC,gCAAc,CAACC,YAAY,CAACT,GAAG,CAACU,KAAK,CAAC,GAAG,CAAC,CAAC;MAClE,IAAIP,MAAM,EAAEL,QAAQ,CAACS,QAAQ,CAACI,IAAI,CAAC;IACrC;IACAP,GAAG,CAAC,CAAC;IACL,OAAO,MAAM;MACXD,MAAM,GAAG,KAAK;IAChB,CAAC;EACH,CAAC,EAAE,CAACH,GAAG,CAAC,CAAC;EAET,OAAOH,KAAK;AACd,CAAC;AAACe,OAAA,CAAAjB,YAAA,GAAAA,YAAA","ignoreList":[]}