@amityco/react-native-social-uikit 4.0.0-1fa7ca8.0 → 4.0.0-3473a9ea.0

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

@@ -43,9 +43,7 @@ const PostContent: React.FC<IPostContent> = ({
   const [imagePosts, setImagePosts] = useState<string[]>([]);
   const [videoPosts, setVideoPosts] = useState<IVideoPost[]>([]);
   const [pollIds, setPollIds] = useState<{ pollId: string }[]>([]);
-  const [livestreamId, setLivestreamId] = useState<Amity.Stream['streamId'][]>(
-    []
-  );
+  const [livestreamId, setLivestreamId] = useState<Amity.Room['roomId'][]>([]);
 
   const [imagePostsFullSize, setImagePostsFullSize] = useState<MediaUri[]>([]);
   const [videoPostsFullSize, setVideoPostsFullSize] = useState<MediaUri[]>([]);
@@ -96,7 +94,7 @@ const PostContent: React.FC<IPostContent> = ({
       const images: string[] = [];
       const videos: IVideoPost[] = [];
       const polls: { pollId: string }[] = [];
-      const livestreams: Amity.Stream['streamId'][] = [];
+      const livestreams: Amity.Room['roomId'][] = [];
 
       response.forEach((item) => {
         if (item?.dataType === 'image' && item?.data?.fileId) {
@@ -119,9 +117,9 @@ const PostContent: React.FC<IPostContent> = ({
           if (!polls.some((poll) => poll.pollId === item.data.pollId)) {
             polls.push(item.data);
           }
-        } else if (item?.dataType === 'liveStream') {
-          if (!livestreams.includes(item.data.streamId)) {
-            livestreams.push(item.data.streamId);
+        } else if (item?.dataType === 'room') {
+          if (!livestreams.includes(item.data.roomId)) {
+            livestreams.push(item.data.roomId);
           }
         }
       });
@@ -344,7 +342,7 @@ const PostContent: React.FC<IPostContent> = ({
         <LivestreamContent
           post={post}
           onPressPost={onPressPost}
-          streamId={livestreamId[0]}
+          roomId={livestreamId[0]}
         />
       ) : (
         renderMediaPosts()

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

@@ -18,7 +18,7 @@ import { useStyles } from './styles';
 import { getCommunityById } from '../../../providers/Social/communities-sdk';
 import { useNavigation } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { useIsCommunityModerator } from '../../hook';
+import { isModerator, useUser } from '../../hook';
 import {
   deletePostById,
   reportTargetById,
@@ -69,11 +69,7 @@ export function PostMenu({ pageId, componentId, post }: PostMenuProps) {
   const { postId, targetType, targetId } = post ?? {};
 
   const myId = (client as Amity.Client).userId;
-
-  const { isCommunityModerator: isIAmModerator } = useIsCommunityModerator({
-    communityId: targetType === 'community' && targetId,
-    userId: myId,
-  });
+  const currentUser = useUser(myId);
 
   useEffect(() => {
     if (targetType === 'community' && targetId) {
@@ -254,8 +250,9 @@ export function PostMenu({ pageId, componentId, post }: PostMenuProps) {
                   },
                 ],
               },
-              (post?.creator?.userId === myId || isIAmModerator) &&
-                ((childrenPost?.dataType !== 'liveStream' &&
+              (post?.creator?.userId === myId ||
+                isModerator(currentUser?.roles)) &&
+                ((childrenPost?.dataType !== 'room' &&
                   childrenPost?.dataType !== 'poll') ||
                   (childrenPost?.dataType === 'poll' &&
                     pollData?.status === 'open')) &&
@@ -280,7 +277,7 @@ export function PostMenu({ pageId, componentId, post }: PostMenuProps) {
               </TouchableOpacity>
             )}
             {post?.creator?.userId === myId &&
-              childrenPost?.dataType !== 'liveStream' &&
+              childrenPost?.dataType !== 'room' &&
               childrenPost?.dataType !== 'poll' && (
                 <TouchableOpacity
                   onPress={goToEditPost}
@@ -312,7 +309,8 @@ export function PostMenu({ pageId, componentId, post }: PostMenuProps) {
                   </Typography.BodyBold>
                 </TouchableOpacity>
               )}
-            {(post?.creator?.userId === myId || isIAmModerator) && (
+            {(post?.creator?.userId === myId ||
+              isModerator(currentUser?.roles)) && (
               <TouchableOpacity style={styles.menuItem} onPress={onDeletePost}>
                 <SvgXml
                   width="24"

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/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(
@@ -82,20 +88,20 @@ const RenderTextWithMention: React.FC<IrenderTextWithMention> = ({
   }
 
   let currentPosition = 0;
-  const result: (string | JSX.Element)[][] = heightlightTextPositions.map(
-    ({ index, length, userId, link }, i) => {
+  const result: (string | React.ReactElement)[][] =
+    heightlightTextPositions.map(({ index, length, userId, link }, i) => {
       // Add non-highlighted text before the mention
       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
@@ -103,8 +109,7 @@ const RenderTextWithMention: React.FC<IrenderTextWithMention> = ({
 
       // Return an array of non-highlighted and highlighted text
       return [nonHighlightedText, highlightedText];
-    }
-  );
+    });
 
   // Add any remaining non-highlighted text after the mentions
   const remainingText = textPost.slice(currentPosition);

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;

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

@@ -69,6 +69,7 @@ export interface ICommentList {
   onClickReply: (user: UserInterface, commentId: string) => void;
   postType: Amity.CommentReferenceType;
   disabledInteraction?: boolean;
+  disabledComment?: boolean;
   onNavigate?: () => void;
 }
 
@@ -79,6 +80,7 @@ const CommentListItem = ({
   postType,
   disabledInteraction,
   onNavigate,
+  disabledComment,
 }: ICommentList) => {
   const theme = useTheme() as MyMD3Theme;
   const styles = useStyles();
@@ -345,7 +347,7 @@ const CommentListItem = ({
                   </Typography.CaptionBold>
                 </TouchableOpacity>
                 <TouchableOpacity
-                  onPress={onHandleReply}
+                  onPress={disabledComment ? undefined : onHandleReply}
                   style={styles.likeBtn}
                 >
                   <Typography.CaptionBold style={styles.btnText}>

package/src/v4/component/StoryKit/src/Story.tsx

@@ -22,7 +22,9 @@ export const Story = ({
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const [currentPage, setCurrentPage] = useState<number>(0);
   const [selectedData, setSelectedData] = useState<IUserStory[]>([]);
-  const cube = useRef<CubeNavigationHorizontal | AndroidCubeEffect>();
+  const cube = useRef<CubeNavigationHorizontal | AndroidCubeEffect | null>(
+    null
+  );
   // Component Functions
   const _handleStoryItemPress = (item: IUserStory, index?: number) => {
     if (item?.stories?.length === 0) return;

package/src/v4/component/StoryKit/src/StoryCircleListItem.tsx

@@ -25,7 +25,7 @@ const StoryCircleListItem = ({
   const styles = useStyles();
   const [, setIsPressed] = useState(item?.seen);
   const prevSeen = usePrevious(item?.seen);
-  const hasStoryPermission = useStoryPermission(item.user_id);
+  const { hasStoryPermission } = useStoryPermission(item.user_id);
   const { getUiKitConfig } = useConfig();
   const storyRingColor: string[] = item?.seen
     ? ['#e2e2e2', '#e2e2e2']

package/src/v4/component/StoryKit/src/StoryListItem.tsx

@@ -61,7 +61,7 @@ export const StoryListItem = ({
   isModerator,
 }: StoryListItemProps) => {
   const styles = useStyles();
-  const hasStoryPermission = useStoryPermission(userId);
+  const { hasStoryPermission } = useStoryPermission(userId);
   const { getUiKitConfig } = useConfig();
   const storyReactionBgColor =
     (getUiKitConfig({

package/src/v4/component/StoryKit/src/helpers/StateHelpers.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 
-export function usePrevious(value: any) {
-  const ref = useRef();
+export function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<T | undefined>(undefined);
   useEffect(() => {
     ref.current = value;
   });

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

@@ -18,6 +18,7 @@ interface ITargetItem {
   isBadgeShow?: boolean;
   isPrivate?: boolean;
   onSelect: () => void;
+  avatarCustomUrl?: string;
 }
 
 const TargetItem = ({
@@ -30,6 +31,7 @@ const TargetItem = ({
   isBadgeShow,
   isPrivate,
   onSelect,
+  avatarCustomUrl,
 }: ITargetItem) => {
   const theme = useTheme() as MyMD3Theme;
 
@@ -72,6 +74,7 @@ const TargetItem = ({
         elementID={avatarElementId}
         avatarId={avatarFileId}
         targetType="community"
+        avatarCustomUrl={avatarCustomUrl}
       />
       {isPrivate && (
         <ImageElement