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

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

@@ -8,10 +8,6 @@ import {
 } from '../../../providers/file-provider';
 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 +19,7 @@ interface OverlayImageProps {
     index: number,
     originalPath: string
   ) => void;
+  onUploadError?: (hasError: boolean, source: string) => void;
   index?: number;
   isUploaded: boolean;
   fileId?: string;
@@ -36,6 +33,7 @@ const LoadingImage = ({
   onClose,
   index,
   onLoadFinish,
+  onUploadError,
   isUploaded = false,
   fileId = '',
   isEditMode = false,
@@ -43,9 +41,6 @@ const LoadingImage = ({
   postId,
   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 +79,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 +152,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('white')} 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

@@ -18,8 +18,6 @@ import { useStyles } from './styles';
 import Video from 'react-native-video';
 import { useNavigation } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { useTheme } from 'react-native-paper';
-import type { MyMD3Theme } from '../../../providers/amity-ui-kit-provider';
 import uiSlice from '../../../redux/slices/uiSlice';
 import { createVideoThumbnail } from 'react-native-compressor';
 import { useUIKitDispatch } from '../../../redux/store';
@@ -35,6 +33,7 @@ interface OverlayImageProps {
     originalPath: string,
     thumbNail: string
   ) => void;
+  onUploadError?: (hasError: boolean, source: string) => void;
   index?: number;
   isUploaded: boolean;
   fileId?: string;
@@ -50,6 +49,7 @@ const LoadingVideo = ({
   onClose,
   index,
   onLoadFinish,
+  onUploadError,
   isUploaded = false,
   thumbNail,
   onPlay,
@@ -59,7 +59,6 @@ const LoadingVideo = ({
   postId,
   setIsUploading,
 }: OverlayImageProps) => {
-  const theme = useTheme() as MyMD3Theme;
   const dispatch = useUIKitDispatch();
   const { showToastMessage } = uiSlice.actions;
   const [loading, setLoading] = useState(true);
@@ -129,23 +128,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,10 +222,10 @@ 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" />
+          <SvgXml xml={closeIcon('white')} width="12" height="12" />
         </TouchableOpacity>
       )}
     </View>

package/src/v4/component/MyAvatar/MyAvatar.tsx

@@ -15,13 +15,19 @@ const MyAvatar: FC<MyAvatarProp> = (props) => {
 
   useEffect(() => {
     UserRepository.getUser(myId, async ({ data, loading, error }) => {
-      if (!loading && !error) {
-        const avatar = await getImage({
-          fileId: data?.avatarFileId,
-          imageSize: ImageSizeState.small,
-        });
-        setAvatarUrl(avatar ?? defaultAvatarUri);
+      if (loading || error || !data) return;
+
+      if (data.avatarCustomUrl) {
+        setAvatarUrl(data.avatarCustomUrl);
+        return;
       }
+
+      const avatar = await getImage({
+        fileId: data.avatarFileId,
+        imageSize: ImageSizeState.small,
+      });
+
+      setAvatarUrl(avatar ?? defaultAvatarUri);
     });
   }, [getImage, myId]);
 

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

@@ -2,12 +2,13 @@ import { Image, Text, TouchableOpacity, View } from 'react-native';
 import React, { FC, useEffect, useState } from 'react';
 import { SvgXml } from 'react-native-svg';
 import {
+  errorIcon,
   officialIcon,
   privateIcon,
   storyRing,
 } from '../../../svg/svg-xml-list';
 import { ComponentID, ElementID, ImageSizeState, PageID } from '../../enum';
-import { useFile } from '../../hook';
+import { useFile, useStoryPermission } from '../../hook';
 import useConfig from '../../hook/useConfig';
 import { useStyles } from './styles';
 import { CommunityRepository } from '@amityco/ts-sdk-react-native';
@@ -26,18 +27,20 @@ const StoryCircleItem: FC<IStoryCircleItem> = ({
   const theme = useTheme() as MyMD3Theme;
   const [avatarUrl, setAvatarUrl] = useState(null);
   const [communityData, setCommunityData] = useState<Amity.Community>(null);
+  const hasStoryPermission = useStoryPermission(storyTarget.targetId);
   const { getImage } = useFile();
   const { getUiKitConfig } = useConfig();
   const styles = useStyles();
-  const storyRingColor: string[] = storyTarget?.hasUnseen
-    ? (getUiKitConfig({
-        page: PageID.StoryPage,
-        component: ComponentID.StoryTab,
-        element: ElementID.StoryRing,
-      })?.progress_color as string[]) ?? ['#e2e2e2', '#e2e2e2']
-    : storyTarget?.failedStoriesCount > 0
-    ? ['#DE1029', '#DE1029']
-    : ['#e2e2e2', '#e2e2e2'];
+  const storyRingColor: string[] =
+    hasStoryPermission && storyTarget?.failedStoriesCount > 0
+      ? ['#DE1029', '#DE1029']
+      : storyTarget?.hasUnseen
+      ? (getUiKitConfig({
+          page: PageID.StoryPage,
+          component: ComponentID.StoryTab,
+          element: ElementID.StoryRing,
+        })?.progress_color as string[]) ?? ['#e2e2e2', '#e2e2e2']
+      : ['#e2e2e2', '#e2e2e2'];
 
   useEffect(() => {
     if (storyTarget.targetType !== 'community') return;
@@ -80,12 +83,16 @@ const StoryCircleItem: FC<IStoryCircleItem> = ({
         height={68}
         xml={storyRing(storyRingColor[0], storyRingColor[1])}
       />
-      {communityData?.isOfficial && (
+      {hasStoryPermission && storyTarget?.failedStoriesCount > 0 ? (
+        <View style={styles.errorIcon}>
+          <SvgXml width={16} height={16} xml={errorIcon()} />
+        </View>
+      ) : communityData?.isOfficial ? (
         <SvgXml
           style={styles.officialIcon}
           xml={officialIcon(theme.colors.primary)}
         />
-      )}
+      ) : null}
       <View style={styles.textRow}>
         {!communityData?.isPublic && (
           <SvgXml width={17} height={17} xml={privateIcon(theme.colors.base)} />

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

@@ -82,6 +82,11 @@ export const useStyles = () => {
       left: 45,
       top: 42,
     },
+    errorIcon: {
+      position: 'absolute',
+      left: 45,
+      bottom: 24,
+    },
     scrollContainer: {
       paddingVertical: 4,
     },

package/src/v4/component/PollContent/PollResults.tsx

@@ -26,18 +26,23 @@ export function PollResults({ options, totalVotes }: PollResultsProps) {
       100
     ).toFixed(2);
 
-  const voteBy = (option: Amity.PollAnswer) => {
-    if (option.voteCount === 1 && option.isVotedByUser) return 'Voted by you';
-    if (option.voteCount > 1) {
-      const voteCount = option.isVotedByUser
-        ? option.voteCount - 1
-        : option.voteCount;
-      const formattedCount = formatVoteCount(voteCount);
-      return `Voted by ${formattedCount} participant${
-        voteCount > 1 ? 's' : ''
-      }${option.isVotedByUser ? ' and you' : ''}`;
+  const voteBy = (option: Amity.PollAnswer): string => {
+    const { voteCount, isVotedByUser } = option;
+
+    if (voteCount === 0) return 'No votes';
+
+    if (isVotedByUser) {
+      const otherVotes = voteCount - 1;
+      if (otherVotes === 0) return 'Voted by you';
+
+      const formattedCount = formatVoteCount(otherVotes);
+      const plural = otherVotes > 1 ? 's' : '';
+      return `Voted by ${formattedCount} participant${plural} and you`;
     }
-    return 'No votes';
+
+    const formattedCount = formatVoteCount(voteCount);
+    const plural = voteCount > 1 ? 's' : '';
+    return `Voted by ${formattedCount} participant${plural}`;
   };
 
   return (
@@ -75,6 +80,7 @@ export function PollResults({ options, totalVotes }: PollResultsProps) {
                   targetType="user"
                   style={styles.optionAvatar}
                   avatarId={user?.avatarFileId}
+                  avatarCustomUrl={user?.avatarCustomUrl}
                   elementID={ElementID.WildCardElement}
                 />
               )}

package/src/v4/component/RenderTextWithMention/RenderTextWithMention.tsx

@@ -1,4 +1,4 @@
-import { Text, Linking } from 'react-native';
+import { Text, Linking, TouchableOpacity } from 'react-native';
 import { useStyles } from './styles';
 import React, { memo, useCallback } from 'react';
 import { useNavigation } from '@react-navigation/native';
@@ -6,6 +6,7 @@ import { IMentionPosition } from '../../types/type';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { RootStackParamList } from '../../routes/RouteParamList';
 import ReadMore from '@fawazahmed/react-native-read-more';
+import { URL_REGEX } from '../../../v4/constants';
 
 interface IrenderTextWithMention {
   mentionPositionArr: IMentionPosition[];
@@ -28,10 +29,9 @@ const RenderTextWithMention: React.FC<IrenderTextWithMention> = ({
   const navigation =
     useNavigation() as NativeStackNavigationProp<RootStackParamList>;
   const linkArr = useCallback((text: string): LinkInfo[] => {
-    const urlRegex = /(https?:\/\/|www\.)[^\s]+/g;
     const links: LinkInfo[] = [];
     let match;
-    while ((match = urlRegex.exec(text)) !== null) {
+    while ((match = URL_REGEX.exec(text)) !== null) {
       links.push({
         link: match[0],
         index: match.index,
@@ -54,8 +54,14 @@ const RenderTextWithMention: React.FC<IrenderTextWithMention> = ({
     },
     [navigation]
   );
-  const handleLinkClick = useCallback((url: string) => {
-    Linking.openURL(url);
+  const handleLinkClick = useCallback(async (url: string) => {
+    try {
+      const hasProtocol = /^(https?|ftp|mailto):/.test(url);
+      const formattedUrl = hasProtocol ? url : `https://${url}`;
+      await Linking.openURL(formattedUrl);
+    } catch (error) {
+      console.warn('Failed to open URL:', error);
+    }
   }, []);
 
   const handleOnClick = useCallback(
@@ -88,14 +94,14 @@ const RenderTextWithMention: React.FC<IrenderTextWithMention> = ({
       const nonHighlightedText = textPost.slice(currentPosition, index);
       // Add highlighted text
       const highlightedText = (
-        <Text
-          selectable
+        <TouchableOpacity
           onPress={() => handleOnClick(link, userId)}
           key={`highlighted-${i}`}
-          style={styles.mentionText}
         >
-          {textPost.slice(index, index + length)}
-        </Text>
+          <Text style={styles.mentionText} selectable>
+            {textPost.slice(index, index + length)}
+          </Text>
+        </TouchableOpacity>
       );
 
       // Update currentPosition for the next iteration

package/src/v4/component/SearchResultItem/SearchResultItem.tsx

@@ -91,6 +91,9 @@ const SearchResultItem: FC<SearchResultItemType> = ({
         pageID={pageId}
         componentID={componentId}
         elementID={ElementID.community_avatar}
+        avatarCustomUrl={
+          searchType === TabName.Users ? item?.avatarCustomUrl : undefined
+        }
         targetType={searchType === TabName.Communities ? 'community' : 'user'}
       />
       <View style={styles.profileInfoContainer}>

package/src/v4/component/Social/CommentList/CommentList.tsx

@@ -9,7 +9,6 @@ import {
 } from 'react-native';
 import React, { FC, useEffect, useState, useRef, memo } from 'react';
 import { UserInterface, IMentionPosition } from '../../../../types';
-import { getAmityUser } from '../../../../providers/user-provider';
 import { CommentRepository } from '@amityco/ts-sdk-react-native';
 import CommentListItem from '../CommentListItem/CommentListItem';
 import {
@@ -30,6 +29,8 @@ import useMention from '../../../hook/useMention';
 import { replaceTriggerValues } from 'react-native-controlled-mentions';
 import MyAvatar from '../../MyAvatar/MyAvatar';
 import { useToast } from '../../../../v4/stores/slices/toast';
+import { Typography } from '../../Typography/Typography';
+import { lock } from '../../../../v4/assets/icons';
 
 interface ICommentListProp {
   postId: string;
@@ -37,6 +38,7 @@ interface ICommentListProp {
   disabledInteraction?: boolean;
   onNavigate?: () => void;
   withAvatar?: boolean;
+  disabledComment?: boolean;
 }
 
 interface IComment {
@@ -64,6 +66,7 @@ const CommentList: FC<ICommentListProp> = ({
   disabledInteraction,
   onNavigate,
   withAvatar,
+  disabledComment,
 }) => {
   const styles = useStyles();
   const theme = useTheme() as MyMD3Theme;
@@ -103,10 +106,10 @@ const CommentList: FC<ICommentListProp> = ({
         referenceType: postType,
         limit: commentListLimit,
       },
-      async ({ error, loading, data, hasNextPage, onNextPage }) => {
+      ({ error, loading, data, hasNextPage, onNextPage }) => {
         if (error) return;
         if (!loading) {
-          data && data.length > 0 && (await queryComment(data));
+          data && data.length > 0 && queryComment(data);
           onNextPageRef.current = hasNextPage ? onNextPage : null;
         }
       }
@@ -129,34 +132,31 @@ const CommentList: FC<ICommentListProp> = ({
   }, [inputMessage]);
 
   const queryComment = async (comments: Amity.InternalComment[]) => {
-    const formattedCommentList = await Promise.all(
-      comments.map(async (item: Amity.Comment) => {
-        const { userObject } = await getAmityUser(item.userId);
-        let formattedUserObject: UserInterface;
+    const formattedCommentList = comments.map((item: Amity.Comment) => {
+      let formattedUserObject: UserInterface;
 
-        formattedUserObject = {
-          userId: userObject.data.userId,
-          displayName: userObject.data.displayName,
-          avatarFileId: userObject.data.avatarFileId,
-        };
+      formattedUserObject = {
+        userId: item?.creator?.userId,
+        displayName: item?.creator?.displayName,
+        avatarFileId: item?.creator?.avatarFileId,
+      };
 
-        return {
-          commentId: item.commentId,
-          data: item.data as Record<string, any>,
-          dataType: item.dataType || 'text',
-          myReactions: item.myReactions as string[],
-          reactions: item.reactions as Record<string, number>,
-          user: formattedUserObject as UserInterface,
-          updatedAt: item.updatedAt,
-          editedAt: item.editedAt,
-          createdAt: item.createdAt,
-          childrenComment: item.children,
-          childrenNumber: item.childrenNumber,
-          referenceId: item.referenceId,
-          mentionPosition: item?.metadata?.mentioned ?? [],
-        };
-      })
-    );
+      return {
+        commentId: item.commentId,
+        data: item.data as Record<string, any>,
+        dataType: item.dataType || 'text',
+        myReactions: item.myReactions as string[],
+        reactions: item.reactions as Record<string, number>,
+        user: formattedUserObject as UserInterface,
+        updatedAt: item.updatedAt,
+        editedAt: item.editedAt,
+        createdAt: item.createdAt,
+        childrenComment: item.children,
+        childrenNumber: item.childrenNumber,
+        referenceId: item.referenceId,
+        mentionPosition: item?.metadata?.mentioned ?? [],
+      };
+    });
     setCommentList([...formattedCommentList]);
   };
 
@@ -251,35 +251,47 @@ const CommentList: FC<ICommentListProp> = ({
             </TouchableOpacity>
           </View>
         )}
-        {!disabledInteraction && (
-          <View style={styles.inputWrap}>
-            {withAvatar && <MyAvatar />}
-            <View style={styles.inputContainer}>
-              {renderInput({
-                multiline: true,
-                style: styles.textInput,
-                placeholder: 'Say something nice...',
-                placeholderTextColor: theme.colors.baseShade3,
-              })}
+        {!disabledInteraction &&
+          (disabledComment ? (
+            <View style={styles.disabledCommentWrap}>
+              <SvgXml
+                width={20}
+                height={20}
+                xml={lock()}
+                color={theme.colors.baseShade2}
+              />
+              <Typography.Body style={styles.disabledCommentText}>
+                Comments are disabled for this story
+              </Typography.Body>
             </View>
-
-            <TouchableOpacity
-              disabled={inputMessage.length > 0 ? false : true}
-              onPress={handleSend}
-              style={styles.postBtn}
-            >
-              <Text
-                style={
-                  inputMessage.length > 0
-                    ? styles.postBtnText
-                    : styles.postDisabledBtn
-                }
+          ) : (
+            <View style={styles.inputWrap}>
+              {withAvatar && <MyAvatar />}
+              <View style={styles.inputContainer}>
+                {renderInput({
+                  multiline: true,
+                  style: styles.textInput,
+                  placeholder: 'Say something nice...',
+                  placeholderTextColor: theme.colors.baseShade3,
+                })}
+              </View>
+              <TouchableOpacity
+                disabled={inputMessage.length > 0 ? false : true}
+                onPress={handleSend}
+                style={styles.postBtn}
               >
-                Post
-              </Text>
-            </TouchableOpacity>
-          </View>
-        )}
+                <Text
+                  style={
+                    inputMessage.length > 0
+                      ? styles.postBtnText
+                      : styles.postDisabledBtn
+                  }
+                >
+                  Post
+                </Text>
+              </TouchableOpacity>
+            </View>
+          ))}
       </KeyboardAvoidingView>
     );
   };
@@ -299,6 +311,7 @@ const CommentList: FC<ICommentListProp> = ({
               commentDetail={item}
               onClickReply={handleClickReply}
               postType={postType}
+              disabledComment={disabledComment}
               disabledInteraction={disabledInteraction}
               onNavigate={onNavigate}
             />

package/src/v4/component/Social/CommentList/styles.ts

@@ -123,6 +123,18 @@ export const useStyles = () => {
     commentListFooter: {
       width: width,
     },
+    disabledCommentWrap: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 16,
+      gap: 8,
+      borderTopWidth: 1,
+      borderTopColor: theme.colors.baseShade4,
+    },
+    disabledCommentText: {
+      color: theme.colors.baseShade2,
+    },
   });
 
   return styles;