@amityco/react-native-social-uikit 4.0.0-36607be.0 → 4.0.0-3e7b2eb7.0

package/src/v4/assets/icons/lock.tsx

@@ -1,9 +1,10 @@
-export const icon = (
-  color: string = '#292B32'
-) => `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 14.1562C9.625 14.1562 9.34375 13.875 9.34375 13.5V12C9.34375 11.6484 9.625 11.3438 10 11.3438C10.3516 11.3438 10.6562 11.6484 10.6562 12V13.5C10.6562 13.875 10.3516 14.1562 10 14.1562ZM15.25 10.125V15.375C15.25 16.0078 14.7344 16.5 14.125 16.5H5.875C5.24219 16.5 4.75 16.0078 4.75 15.375V10.125C4.75 9.51562 5.24219 9 5.875 9H6.625V7.875C6.625 6.02344 8.125 4.5 10 4.5C11.875 4.52344 13.375 6.04688 13.375 7.92188V9H14.125C14.7344 9 15.25 9.51562 15.25 10.125ZM7.75 9H12.25V7.875C12.25 6.65625 11.2188 5.625 10 5.625C8.75781 5.625 7.75 6.65625 7.75 7.875V9ZM14.125 10.125H5.875V15.375H14.125V10.125Z" fill="${color}"/>
-</svg>
-
+export const icon =
+  () => `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 20 20">
+      <path
+        fill="currentColor"
+        d="M15.5 8c.813 0 1.5.688 1.5 1.5v7a1.5 1.5 0 01-1.5 1.5h-11A1.48 1.48 0 013 16.5v-7A1.5 1.5 0 014.5 8h1V6.5C5.5 4.031 7.5 2 10 2c2.5.031 4.5 2.063 4.5 4.563V8h1zM7 6.5V8h6V6.5c0-1.625-1.375-3-3-3-1.656 0-3 1.375-3 3zm8.5 10v-7h-11v7h11z"
+      ></path>
+    </svg>
 `;
 
 export default icon;

package/src/v4/component/Avatar/Avatar.tsx

@@ -54,12 +54,15 @@ function Avatar({ uri, imageProps, iconProps, userAvatarProps }: AvatarProps) {
         {...imageProps}
         onError={() => setImageError(true)}
       />
+      {userAvatarProps?.roles && isModerator(userAvatarProps?.roles) && (
+        <ModeratorBadge style={styles.moderatorBadge} />
+      )}
     </TouchableOpacity>
   ) : iconProps ? (
     <SvgXml {...iconProps} />
   ) : (
     <TouchableOpacity
-      style={[styles.defaultUserAvatar, userAvatarProps.style]}
+      style={[styles.defaultUserAvatar, userAvatarProps?.style]}
       activeOpacity={0.7}
       onPress={() => {
         if (userAvatarProps?.shouldRedirectToUserProfile) {
@@ -72,7 +75,7 @@ function Avatar({ uri, imageProps, iconProps, userAvatarProps }: AvatarProps) {
       <Typography.Body style={styles.firstChar}>
         {userAvatarProps.userName?.trim()?.charAt(0).toUpperCase()}
       </Typography.Body>
-      {userAvatarProps.roles && isModerator(userAvatarProps.roles) && (
+      {userAvatarProps?.roles && isModerator(userAvatarProps.roles) && (
         <ModeratorBadge style={styles.moderatorBadge} />
       )}
     </TouchableOpacity>

package/src/v4/component/CommunityRowItem/CommunityRowItem.tsx

@@ -6,11 +6,11 @@ import { View } from 'react-native';
 import CommunityJoinedButtonElement from '../../elements/CommunityJoinedButtonElement/CommunityJoinedButtonElement';
 import CommunityJoinButtonElement from '../../elements/CommunityJoinButtonElement/CommunityJoinButtonElement';
 import CommunityDisplayname from '../../elements/CommunityDisplayname/CommunityDisplayname';
-import CommunityCategory from '../../elements/CommunityCatetory/CommunityCategory';
 import CommunityMemeberCount from '../../elements/CommunityMemeberCount/CommunityMemeberCount';
 import { useStyles } from './styles';
 import CommunityPrivateBadge from '../../elements/CommunityPrivateBadge/CommunityPrivateBadge';
 import CommunityOfficialBadge from '../../elements/CommunityOfficialBadge/CommunityOfficialBadge';
+import { CommunityCategories } from '../../../v4/features/feed/components';
 
 type CommunityRowItemProps = {
   pageId?: PageID;
@@ -34,7 +34,7 @@ const CommunityRowItem: FC<CommunityRowItemProps> = ({
       <CommunityRowImage
         pageId={pageId}
         componentId={componentId}
-        fileId={community.avatarFileId}
+        fileUrl={community.avatar?.fileUrl}
         label={label}
       />
       <View style={styles.detailWrap}>
@@ -54,8 +54,8 @@ const CommunityRowItem: FC<CommunityRowItemProps> = ({
         </View>
         <View style={styles.detailBottomWrap}>
           <View style={styles.detailBottomWrapLeft}>
-            <CommunityCategory
-              categoryIds={community.categoryIds}
+            <CommunityCategories
+              categories={community.categories}
               pageId={pageId}
               componentId={componentId}
             />

package/src/v4/component/CommunitySearchResult/CommunitySearchResult.tsx

@@ -108,7 +108,9 @@ const CommunitySearchResult: FC<CommunitySearchResultProps> = ({
             />
           </Pressable>
         )}
-        keyExtractor={(item, index) => item.communityId + index}
+        keyExtractor={(item, index) =>
+          (item.communityId ?? index).toString() + '_' + index
+        }
         onEndReachedThreshold={0.5}
         style={styles.list}
         contentContainerStyle={styles.listContent}

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/PollContent/PollResults.tsx

@@ -80,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/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/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

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

@@ -19,6 +19,8 @@ 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';
+import { CommunityPostSettings } from '@amityco/ts-sdk-react-native';
+import { usePostPermission } from '../../../v4/hook/usePostPermission';
 
 export type FeedParams = {
   targetId: string;
@@ -76,7 +78,7 @@ const TargetSelectionPage = ({
   });
 
   const renderItem = ({ item }: { item: Amity.Community }) => {
-    return (
+    const target = (
       <TargetItem
         key={item.communityId}
         displayName={item.displayName}
@@ -88,12 +90,20 @@ const TargetSelectionPage = ({
             targetName: item.displayName,
             targetType: 'community',
             community: item,
+            postSetting: item.postSetting,
+            isPublic: item.isPublic,
           })
         }
         avatarElementId={ElementID.community_avatar}
         avatarFileId={item.avatarFileId}
       />
     );
+
+    if (item?.postSetting === CommunityPostSettings.ONLY_ADMIN_CAN_POST) {
+      return <AdminOnlyCommunity community={item}>{target}</AdminOnlyCommunity>;
+    }
+
+    return target;
   };
 
   return (
@@ -135,6 +145,7 @@ const TargetSelectionPage = ({
                 targetType: 'user',
               })
             }
+            avatarCustomUrl={user?.avatarCustomUrl}
             avatarFileId={user?.avatarFileId}
           />
           <View style={styles.divider}>
@@ -166,3 +177,14 @@ const TargetSelectionPage = ({
 };
 
 export default React.memo(TargetSelectionPage);
+
+type AdminOnlyCommunityProps = {
+  community: Amity.Community;
+  children: React.ReactNode;
+};
+
+function AdminOnlyCommunity({ community, children }: AdminOnlyCommunityProps) {
+  const hasPostPermission = usePostPermission({ community });
+
+  return hasPostPermission ? children : null;
+}

package/src/v4/elements/CommunityJoinButtonElement/CommunityJoinButtonElement.tsx

@@ -27,9 +27,13 @@ const CommunityJoinButton: FC<CommunityJoinButtonType> = ({
     elementId: ElementID.community_join_button,
   });
 
-  const { refresh } = useCustomRankingGlobalFeed();
+  const { refresh, globalFeedPosts } = useCustomRankingGlobalFeed({
+    enabled: false,
+  });
   const { joinCommunity, isPending } = useJoinCommunity({
-    onSuccess: () => setTimeout(() => refresh(), 3000),
+    onSuccess: () => {
+      globalFeedPosts.length === 0 && refresh();
+    },
   });
 
   const handleJoinCommunity = () => {

package/src/v4/elements/CommunityRowImage/CommunityRowImage.tsx

@@ -1,67 +1,40 @@
-import React, { FC, memo, useEffect, useState } from 'react';
+import React, { FC, memo } from 'react';
 import LinearGradient from 'react-native-linear-gradient';
 import { ComponentID, ElementID, PageID } from '../../enum';
-import { useAmityElement, useConfigImageUri, useFile } from '../../hook';
+import { useAmityElement } from '../../hook';
 import { Image, View } from 'react-native';
 import { useStyles } from './styles';
 import { Typography } from '../../component/Typography/Typography';
 import { SvgXml } from 'react-native-svg';
 import { community as communityIcon } from '../../assets/icons';
+import { getFileUrlWithSize } from '../../../v4/utils';
 
 type CommunityRowImageyProps = {
-  fileId?: string;
+  fileUrl?: string;
   pageId?: PageID;
   componentId?: ComponentID;
   label?: string;
 };
 
 const CommunityRowImagey: FC<CommunityRowImageyProps> = ({
-  fileId,
+  fileUrl,
   pageId = PageID.WildCardPage,
   componentId = ComponentID.WildCardComponent,
   label,
 }) => {
-  // TODO: add state loading and loading skeleton
   const elementId = ElementID.community_row_image;
   const styles = useStyles();
-  const [image, setImage] = useState<string | undefined>(undefined);
   const { accessibilityId } = useAmityElement({
     pageId,
     componentId,
     elementId,
   });
 
-  const { uri } = useConfigImageUri({
-    configPath: {
-      page: pageId,
-      component: componentId,
-      element: elementId,
-    },
-    configKey: 'image',
-  });
-
-  const { getImage } = useFile();
-
-  useEffect(() => {
-    const getImageUrl = async () => {
-      if (!fileId) return;
-
-      if (!fileId && uri) {
-        setImage(uri);
-      } else if (fileId) {
-        const url = await getImage({ fileId });
-        setImage(url);
-      }
-    };
-
-    getImageUrl();
-  }, [uri, fileId, getImage]);
-
   return (
     <View testID={accessibilityId} style={styles.container}>
-      {image ? (
+      {fileUrl ? (
         <Image
-          source={{ uri: image as string }}
+          source={{ uri: getFileUrlWithSize(fileUrl) }}
           style={styles.image}
           resizeMode="cover"
         />

package/src/v4/enum/roomStatus.ts

@@ -5,4 +5,5 @@ export const RoomStatus = {
   ended: 'ended',
   waitingReconnect: 'waitingReconnect',
   terminated: 'terminated',
+  error: 'error',
 } as const satisfies Record<Amity.RoomStatus, Amity.RoomStatus>;

package/src/v4/features/community/AddMember/hooks/useAddMember.ts

@@ -6,6 +6,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import { useUserCollection } from '../../../../../v4/hook/collections/useUserCollection';
 import { useSearchUserByDisplayNameCollection } from '../../../../../v4/hook/collections/useSearchUserByDisplayNameCollection';
+import { SearchUsersByEnum } from '@amityco/ts-sdk-react-native';
 
 type UseAddMemberProps = {
   communityId?: string;
@@ -47,6 +48,7 @@ function useAddMember({ communityId }: UseAddMemberProps = {}) {
     params: {
       displayName: values.search,
       limit: 20,
+      searchBy: [SearchUsersByEnum.DISPLAY_NAME],
     },
     enabled: !!values.search && !communityId,
   });

package/src/v4/features/community/Membership/components/MemberItem/MemberItem.tsx

@@ -221,6 +221,7 @@ function MemberItem({ member, communityId, refreshMembers }: MemberItemProps) {
           uri={member.user?.avatarCustomUrl}
           roles={member.roles}
           userName={member.user?.displayName ?? member.user?.userId}
+          userId={member.userId}
         />
         <Typography.BodyBold
           style={styles.userName}

package/src/v4/features/community/Setting/hooks/useCommunitySetting.ts

@@ -18,7 +18,9 @@ export function useCommunitySetting(community: Amity.Community) {
     >();
   const { AmityCommunitySettingPageBehavior } = useBehaviour();
   const { showToast } = useToast();
-  const { refresh } = useCustomRankingGlobalFeed();
+  const { refresh, globalFeedPosts } = useCustomRankingGlobalFeed({
+    enabled: false,
+  });
 
   const { mutate: leaveCommunity } = useMutation({
     mutationFn: async () =>
@@ -26,7 +28,7 @@ export function useCommunitySetting(community: Amity.Community) {
     onSuccess: () => {
       navigation.goBack();
       showToast({ message: 'Successfully left the group', type: 'success' });
-      setTimeout(() => refresh(), 3000);
+      globalFeedPosts.length === 0 && setTimeout(() => refresh(), 3000);
     },
     onError: (error) => {
       if (error.message.includes(ERROR_CODE.ONLY_ONE_MODERATOR)) {