@amityco/react-native-social-uikit 4.0.0-e24bae8.0 → 4.0.0-e3111902.0

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/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/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)) {

package/src/v4/{component/CommunityCategoryChips/CommunityCategoryChips.tsx → features/feed/components/CommunityCategories/CommunityCategories.tsx}

@@ -1,26 +1,26 @@
 import React from 'react';
 import { Text, View, ViewProps, ScrollView } from 'react-native';
-import { CommunityCategoryChip } from './CommunityCategoryChip/CommunityCategoryChip';
-import type { MyMD3Theme } from 'src/providers/amity-ui-kit-provider';
+import { CommunityCategory } from '../../elements/CommunityCategory/CommunityCategory';
 import { useStyles } from './styles';
+import { ComponentID, PageID } from '../../../../enum';
 
-type CommunityCategoryChipsProps = ViewProps & {
-  themeStyles: MyMD3Theme;
-  categoryIds: string[];
+type CommunityCategoriesProps = ViewProps & {
+  categories: Amity.Category[];
+  pageId?: PageID;
+  componentId?: ComponentID;
   allVisible?: boolean;
 };
 
 const MAX_VISIBLE_CATEGORIES = 2;
 
-export const CommunityCategoryChips: React.FC<CommunityCategoryChipsProps> = ({
-  categoryIds,
-  themeStyles,
+export function CommunityCategories({
+  categories,
   allVisible,
   ...props
-}) => {
-  const styles = useStyles(themeStyles);
-  const visibleCategories = categoryIds.slice(0, MAX_VISIBLE_CATEGORIES);
-  const hiddenCategoriesCount = categoryIds.length - MAX_VISIBLE_CATEGORIES;
+}: CommunityCategoriesProps) {
+  const { styles } = useStyles();
+  const visibleCategories = categories.slice(0, MAX_VISIBLE_CATEGORIES);
+  const hiddenCategoriesCount = categories.length - MAX_VISIBLE_CATEGORIES;
   const showMoreText =
     hiddenCategoriesCount > 0 ? `+${hiddenCategoriesCount}` : '';
   const showMore = hiddenCategoriesCount > 0;
@@ -51,7 +51,7 @@ export const CommunityCategoryChips: React.FC<CommunityCategoryChipsProps> = ({
   };
 
   // Choose all categories or just the visible ones based on allVisible
-  const displayCategories = allVisible ? categoryIds : visibleCategories;
+  const displayCategories = allVisible ? categories : visibleCategories;
   // Only show more indicator if not showing all categories
   const displayShowMore = !allVisible && showMore;
 
@@ -63,23 +63,21 @@ export const CommunityCategoryChips: React.FC<CommunityCategoryChipsProps> = ({
           showsHorizontalScrollIndicator={false}
           contentContainerStyle={styles.scrollableContainer}
         >
-          {displayCategories.map((id, index) => (
-            <CommunityCategoryChip
+          {displayCategories.map((category, index) => (
+            <CommunityCategory
               key={index}
-              categoryId={id}
+              categoryName={category.name}
               maxWidth={getMaxWidthForItem(displayCategories.length)}
-              themeStyles={themeStyles}
             />
           ))}
         </ScrollView>
       ) : (
         <>
-          {displayCategories.map((id, index) => (
-            <CommunityCategoryChip
+          {displayCategories.map((category, index) => (
+            <CommunityCategory
               key={index}
-              categoryId={id}
+              categoryName={category.name}
               maxWidth={getMaxWidthForItem(displayCategories.length)}
-              themeStyles={themeStyles}
             />
           ))}
           {displayShowMore && (
@@ -91,4 +89,4 @@ export const CommunityCategoryChips: React.FC<CommunityCategoryChipsProps> = ({
       )}
     </View>
   );
-};
+}

package/src/v4/features/feed/components/CommunityCategories/index.ts

@@ -0,0 +1 @@
+export { CommunityCategories } from './CommunityCategories';

package/src/v4/{component/CommunityCategoryChips → features/feed/components/CommunityCategories}/styles.ts

@@ -1,7 +1,9 @@
 import { StyleSheet } from 'react-native';
+import { useTheme } from 'react-native-paper';
 import { MyMD3Theme } from 'src/providers/amity-ui-kit-provider';
 
-export const useStyles = (theme: MyMD3Theme) => {
+export const useStyles = () => {
+  const theme = useTheme<MyMD3Theme>();
   const styles = StyleSheet.create({
     container: {
       flexDirection: 'row',
@@ -27,5 +29,5 @@ export const useStyles = (theme: MyMD3Theme) => {
       color: theme.colors.base,
     },
   });
-  return styles;
+  return { styles, theme };
 };

package/src/v4/features/feed/components/index.ts

@@ -0,0 +1 @@
+export * from './CommunityCategories';

package/src/v4/features/feed/elements/CommunityCategory/CommunityCategory.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { DimensionValue, Text, View } from 'react-native';
+import { useStyles } from './styles';
+import { useAmityElement } from '../../../../hook';
+import { ComponentID, ElementID, PageID } from '../../../../enum';
+
+type CommunityCategoryProps = {
+  categoryName: string;
+  style?: object;
+  maxWidth?: number | string;
+  pageId?: PageID;
+  componentId?: ComponentID;
+};
+
+export function CommunityCategory({
+  categoryName,
+  style,
+  maxWidth,
+  pageId,
+  componentId,
+}: CommunityCategoryProps) {
+  const { styles } = useStyles();
+  const { accessibilityId, isExcluded } = useAmityElement({
+    pageId,
+    componentId,
+    elementId: ElementID.community_category,
+  });
+
+  if (isExcluded) return null;
+
+  return (
+    <View
+      testID={accessibilityId}
+      style={[
+        styles.chipContainer,
+        maxWidth ? { maxWidth: maxWidth as DimensionValue } : null,
+        style,
+      ]}
+    >
+      <Text style={styles.chipText} numberOfLines={1}>
+        {categoryName}
+      </Text>
+    </View>
+  );
+}

package/src/v4/features/feed/elements/CommunityCategory/index.ts

@@ -0,0 +1 @@
+export { CommunityCategory } from './CommunityCategory';

package/src/v4/features/feed/elements/CommunityCategory/styles.ts

@@ -0,0 +1,20 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from 'react-native-paper';
+import { MyMD3Theme } from 'src/providers/amity-ui-kit-provider';
+
+export const useStyles = () => {
+  const theme = useTheme<MyMD3Theme>();
+  const styles = StyleSheet.create({
+    chipContainer: {
+      backgroundColor: theme.colors.baseShade4,
+      paddingHorizontal: 6,
+      borderRadius: 20,
+    },
+    chipText: {
+      fontSize: 13,
+      lineHeight: 18,
+      color: theme.colors.base,
+    },
+  });
+  return { styles, theme };
+};

package/src/v4/features/feed/elements/index.ts

@@ -0,0 +1 @@
+export * from './CommunityCategory';