@amityco/react-native-social-uikit 4.1.0 → 4.1.1-d7da0c5c.0

package/src/social/features/chat/features/group/edit-profile/hooks/useEditGroupProfile.ts

@@ -0,0 +1,150 @@
+// useEditGroupProfile — RN port of AmityUiKitWeb
+// v4/chat/features/group/edit-profile/hooks/useEditGroupProfile. Owns the
+// edit-group-profile form: the display name, the group avatar, dirty/valid
+// tracking, and the save mutation.
+//
+// RN adaptations from web:
+//   - Web `react-hook-form` + `zod` (`useForm({ values })`) → plain `useState`
+//     seeded from the live channel once it loads (an effect keyed on the channel
+//     id), matching the sibling RN chat hooks. `values` re-sync becomes that
+//     seeding effect; `isDirty`/`isValid`/`isSubmitting` are computed by hand.
+//   - Web `useChannelObject` → an inline `ChannelRepository.getChannel` live
+//     subscription (gated on `useAuth().isConnected`, like `useConversation`).
+//   - Web's `AvatarPicker` owned the file pick + upload; the RN AvatarPicker is
+//     presentational (`imageUrl` + `onPick`), so the pick + upload run here via
+//     the repo's `useImagePicker` (same hook the user-profile edit uses). It
+//     returns an uploaded `Amity.File`; we keep its `fileId`. Avatar *removal*
+//     (web's nullable avatar) is not supported by the RN picker.
+//   - Web `useUpdateChannelQuery` → `ChannelRepository.updateChannel` directly.
+//   - Web `useNotifications('chat')` → the redux toast (`useToast`).
+
+// 1. React / RN imports
+import { useEffect, useMemo, useState } from 'react';
+
+// 2. Third-party imports
+import { ChannelRepository } from '@amityco/ts-sdk-react-native';
+import { useNavigation } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+
+// 3. Internal imports (relative)
+import useAuth from '../../../../../../../core/hooks/useAuth';
+import useFile from '../../../../../../../core/hooks/useFile';
+import { useString } from '../../../../../../../core/localization';
+import { useToast } from '../../../../../../../core/stores/slices/toastSlice';
+import useImagePicker from '../../../../../../hooks/useImagePicker';
+
+// Web imports GROUP_NAME_MAX_LENGTH from chat/constants (= 100); inlined to match
+// the GroupNameField element port.
+const GROUP_NAME_MAX_LENGTH = 100;
+
+// 4. Types
+export type EditGroupProfileProps = {
+  channelId: string;
+};
+
+// 5. Hook
+export function useEditGroupProfile({ channelId }: EditGroupProfileProps) {
+  const { isConnected } = useAuth();
+  const { showToast } = useToast();
+  const navigation = useNavigation<NativeStackNavigationProp<any>>();
+  const { openImageGallery, imageUri, isLoading, uploadedImage } =
+    useImagePicker();
+
+  const updateSuccessToast = useString('amity_chat_group_edit_profile');
+  const updateFailedToast = useString('amity_chat_group_edit_profile_failed');
+
+  const [channel, setChannel] = useState<Amity.Channel | undefined>(undefined);
+  const [name, setName] = useState('');
+  const [avatarFileId, setAvatarFileId] = useState<string | undefined>(
+    undefined
+  );
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Live channel object (web `useChannelObject`).
+  useEffect(() => {
+    if (!isConnected || !channelId) return undefined;
+    const unsub = ChannelRepository.getChannel(channelId, ({ data }) => {
+      if (data) setChannel(data);
+    });
+    return () => {
+      unsub();
+    };
+  }, [isConnected, channelId]);
+
+  // Seed the form once the channel loads (web's `useForm({ values })` re-sync).
+  // Keyed on the channel id so later live updates don't clobber in-progress edits.
+  const initialName = channel?.displayName ?? '';
+  const initialAvatarFileId = channel?.avatarFileId;
+  useEffect(() => {
+    if (!channel) return;
+    setName(channel.displayName ?? '');
+    setAvatarFileId(channel.avatarFileId);
+  }, [channel?.channelId]);
+
+  // Adopt a freshly uploaded avatar's fileId.
+  useEffect(() => {
+    if (uploadedImage?.fileId) {
+      setAvatarFileId(uploadedImage.fileId);
+    }
+  }, [uploadedImage]);
+
+  // Preview: the just-picked local uri wins; otherwise resolve the stored fileId.
+  const resolvedAvatarUrl = useFile({ fileId: avatarFileId ?? '' });
+  const imageUrl = imageUri ?? resolvedAvatarUrl;
+
+  const trimmedName = name.trim();
+  const isValid =
+    trimmedName.length >= 1 && trimmedName.length <= GROUP_NAME_MAX_LENGTH;
+  const isDirty = useMemo(
+    () =>
+      name !== initialName ||
+      (avatarFileId ?? undefined) !== (initialAvatarFileId ?? undefined),
+    [name, avatarFileId, initialName, initialAvatarFileId]
+  );
+
+  const isFormValid = !isSubmitting && !isLoading && isDirty && isValid;
+
+  function handleClose() {
+    navigation.goBack();
+  }
+
+  function handlePickAvatar() {
+    openImageGallery({ mediaType: 'photo', quality: 1, selectionLimit: 1 });
+  }
+
+  async function handleSave() {
+    if (!isFormValid || !isConnected || !channelId) return;
+    setIsSubmitting(true);
+    try {
+      await ChannelRepository.updateChannel(channelId, {
+        displayName: trimmedName,
+        avatarFileId,
+      });
+      showToast({
+        message: updateSuccessToast,
+        type: 'success',
+        variant: 'custom',
+      });
+      navigation.goBack();
+    } catch {
+      showToast({
+        message: updateFailedToast,
+        type: 'failed',
+        variant: 'custom',
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  return {
+    name,
+    onChangeName: setName,
+    imageUrl,
+    isUploading: isLoading,
+    isFormValid,
+    handlePickAvatar,
+    handleClose,
+    handleSave,
+  };
+}

package/src/social/features/chat/features/group/edit-profile/index.ts

@@ -0,0 +1,2 @@
+export { EditGroupProfile } from './EditGroupProfile';
+export type { EditGroupProfileProps } from './hooks/useEditGroupProfile';

package/src/social/features/chat/features/group/edit-profile/styles.ts

@@ -0,0 +1,26 @@
+// Styles for EditGroupProfile — ported from AmityUiKitWeb
+// v4/chat/features/group/edit-profile/EditGroupProfile.module.css.
+// rem → px×16; colours via design tokens (no hardcoded hex).
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../core/design/tokens/amity-color-tokens';
+
+export const useStyles = () => {
+  const token = useToken();
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
+    },
+    // .editGroupProfile__avatarWrapper — center, 1rem vertical padding.
+    avatarWrapper: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: 16,
+    },
+  });
+
+  return { styles, token };
+};

package/src/social/features/chat/features/group/members/GroupMembers.tsx

@@ -0,0 +1,47 @@
+// GroupMembers — ported from AmityUiKitWeb v4/chat/features/group/members.
+// The group member-list feature entry: a Header over the Members/Moderators tabs.
+// `channelId` mirrors web's page prop; `onBack`/`onAddMember` are optional
+// navigation callbacks supplied by the hosting page (navigation wiring is out of
+// scope for this batch).
+
+// 1. React / RN imports
+import { View } from 'react-native';
+
+// 2. Internal imports
+import { Header } from './components/Header';
+import { MemberTabs } from './components/MemberTabs';
+import { useGroupMembers } from './hooks/useGroupMembers';
+import { useStyles } from './styles';
+
+// 3. Types
+export type GroupMembersProps = {
+  channelId: string;
+  onBack?: () => void;
+  onAddMember?: () => void;
+};
+
+// 4. Named function component
+export function GroupMembers({
+  channelId,
+  onBack,
+  onAddMember,
+}: GroupMembersProps) {
+  const { styles } = useStyles();
+  const { isViewerModerator, handleBack, handleOpenAddMember } =
+    useGroupMembers({
+      channelId,
+      onBack,
+      onAddMember,
+    });
+
+  return (
+    <View style={styles.groupMembers}>
+      <Header
+        onBack={handleBack}
+        isViewerModerator={isViewerModerator}
+        onAddMember={handleOpenAddMember}
+      />
+      <MemberTabs channelId={channelId} />
+    </View>
+  );
+}

package/src/social/features/chat/features/group/members/components/Header/Header.tsx

@@ -0,0 +1,51 @@
+// Header — ported from AmityUiKitWeb
+// v4/chat/features/group/members/components/Header.
+//
+// The member-list top bar: back + centered title, plus a trailing "add member"
+// button shown only to moderators. Web's `Button.Icon` (Plus) → the RN Button
+// atom rendered icon-only (icon `plus-r`), fed into the chat TopBar's trailing
+// slot.
+
+// 1. React / RN imports
+
+// 2. Internal imports
+import { TopBar } from '../../../../../elements/TopBar';
+import { Button } from '../../../../../../../../core/design/atoms/Button';
+import { useString } from '../../../../../../../../core/localization';
+
+// 3. Types
+type HeaderProps = {
+  isViewerModerator: boolean;
+  onBack: () => void;
+  onAddMember: () => void;
+};
+
+// 4. Named function component
+export function Header({
+  isViewerModerator,
+  onBack,
+  onAddMember,
+}: HeaderProps) {
+  const title = useString('amity_chat_member_list_title');
+  return (
+    <TopBar
+      title={title}
+      leadingType="back"
+      onLeading={onBack}
+      trailing={
+        isViewerModerator ? (
+          // web members Header: Button.Icon ghost/secondary/32 with <Plus/>
+          // (Regular). Was a filled secondary Button (blue surface + border).
+          <Button.Icon
+            icon="plus-r"
+            styleType="ghost"
+            hierarchy="secondary"
+            size={32}
+            onPress={onAddMember}
+            accessibilityLabel={title}
+          />
+        ) : undefined
+      }
+    />
+  );
+}

package/src/social/features/chat/features/group/members/components/Header/index.ts

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

package/src/social/features/chat/features/group/members/components/MemberItem/MemberItem.tsx

@@ -0,0 +1,94 @@
+// MemberItem — ported from AmityUiKitWeb
+// v4/chat/features/group/members/components/MemberItem.
+//
+// A single member row: avatar (with moderator badge) + display name, an optional
+// "you" suffix, a read-only muted indicator (shown to moderators), and a trailing
+// action-menu slot. Web rendered its own `ActionMenu` from a `getActions` array;
+// RN keeps the slot generic via the `trailing` prop so both the members list
+// (which passes AmityGroupMemberActionComponent) and the banned list (which
+// passes a small unban menu) reuse this row — matching web's shared usage.
+//
+// RN adaptations: web read the avatar synchronously from the SDK; RN resolves
+// `avatarFileId` through `useFile`. Web `BrandBadge` has no RN element and is
+// dropped (as in the create UserItem).
+
+// 1. React / RN imports
+import { type ReactNode } from 'react';
+import { View } from 'react-native';
+
+// 2. Internal imports
+import { Avatar } from '../../../../../elements/Avatar';
+import { Typography } from '../../../../../../../../core/design/components/Typography';
+import { Skeleton } from '../../../../../../../../core/design/components/Skeleton';
+import { AmityIcon } from '../../../../../../../../core/design/icons';
+import { AmityColorToken } from '../../../../../../../../core/design/tokens/amity-color-tokens';
+import { useString } from '../../../../../../../../core/localization';
+import useFile from '../../../../../../../../core/hooks/useFile';
+import { useStyles } from './styles';
+
+// 3. Types
+type MemberItemProps = {
+  user: Amity.InternalUser;
+  isModerator: boolean;
+  isCurrentUser: boolean;
+  isMuted?: boolean;
+  isViewerModerator?: boolean;
+  trailing?: ReactNode;
+};
+
+// 4. Named function component
+export function MemberItem({
+  user,
+  isModerator,
+  isCurrentUser,
+  isMuted = false,
+  isViewerModerator = false,
+  trailing,
+}: MemberItemProps) {
+  const { styles } = useStyles();
+  const displayName = user.displayName ?? user.userId;
+  const youSuffix = useString('amity_chat_member_you_suffix');
+  const avatarUrl = useFile({ fileId: user.avatarFileId ?? '' });
+
+  return (
+    <View style={styles.memberItem}>
+      <Avatar.User
+        avatarUrl={avatarUrl}
+        displayName={displayName}
+        size="md"
+        isModerator={isModerator}
+      />
+      <View style={styles.nameRow}>
+        <Typography variant="bodyBold" style={styles.name} numberOfLines={1}>
+          {displayName}
+        </Typography>
+        {isCurrentUser ? (
+          <Typography variant="bodyBold" style={styles.youSuffix}>
+            {youSuffix}
+          </Typography>
+        ) : null}
+        {isViewerModerator && isMuted ? (
+          <AmityIcon
+            name="volume-slash-r"
+            size={20}
+            tokenColor={AmityColorToken.TextListTextDescriptionDefaultDefault}
+          />
+        ) : null}
+      </View>
+      {trailing ? <View style={styles.trailing}>{trailing}</View> : null}
+    </View>
+  );
+}
+
+// 5. Compound variant — loading skeleton row.
+function MemberItemSkeleton() {
+  const { styles } = useStyles();
+  return (
+    <View style={styles.skeletonRow}>
+      <Skeleton circle width={40} height={40} />
+      <Skeleton width={140} height={10} />
+    </View>
+  );
+}
+
+MemberItem.Skeleton = MemberItemSkeleton;

package/src/social/features/chat/features/group/members/components/MemberItem/index.ts

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

package/src/social/features/chat/features/group/members/components/MemberItem/styles.ts

@@ -0,0 +1,55 @@
+// Styles for MemberItem — ported from AmityUiKitWeb MemberItem.module.css.
+// Geometry mirrors the create UserItem: gap 0.5rem→8, padding 8/16, height 56,
+// name-row gap 0.125rem→2. Colours via design tokens (no hardcoded hex).
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../../../core/design/tokens/amity-color-tokens';
+
+export const useStyles = () => {
+  const token = useToken();
+
+  const styles = StyleSheet.create({
+    memberItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      gap: 8,
+      width: '100%',
+      paddingVertical: 8,
+      paddingHorizontal: 16,
+      height: 56,
+      backgroundColor: token(AmityColorToken.SurfaceListDefaultDefault),
+    },
+    nameRow: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 2,
+      minWidth: 0,
+    },
+    name: {
+      flexShrink: 1,
+      minWidth: 0,
+      color: token(AmityColorToken.TextListHeaderDefaultDefault),
+    },
+    youSuffix: {
+      flexShrink: 0,
+      marginLeft: 2,
+      color: token(AmityColorToken.TextListHeaderDefaultDefault),
+    },
+    trailing: {
+      flexShrink: 0,
+    },
+    skeletonRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      paddingVertical: 8,
+      paddingHorizontal: 16,
+      height: 56,
+    },
+  });
+
+  return { styles, token };
+};

package/src/social/features/chat/features/group/members/components/MemberList/MemberList.tsx

@@ -0,0 +1,144 @@
+// MemberList — ported from AmityUiKitWeb
+// v4/chat/features/group/members/components/MemberList.
+//
+// The searchable member/moderator list. Web used an IntersectionObserver sentinel
+// + `useChannelMembersCollection`; RN uses that same collection hook (direct SDK
+// subscription) + a FlatList `onEndReached`. Web built the per-member action
+// array inline and rendered its own ActionMenu; RN delegates that to the curated
+// AmityGroupMemberActionComponent, passed into MemberItem's generic `trailing`
+// slot. The current user is ordered first and global-banned users filtered out,
+// matching web. `isViewerModerator` comes from the shared useChannelMyMembership.
+
+// 1. React / RN imports
+import { useMemo, type ReactElement } from 'react';
+import { FlatList, Pressable } from 'react-native';
+
+// 2. Internal imports
+import { MemberItem } from '../MemberItem';
+import { AmityGroupMemberActionComponent } from '../../../../../components/AmityGroupMemberActionComponent';
+import { EmptyState } from '../../../../../features/shared/components/EmptyState';
+import { AmityIcon } from '../../../../../../../../core/design/icons';
+import { AmityColorToken } from '../../../../../../../../core/design/tokens/amity-color-tokens';
+import { MemberRoles } from '../../../../../../../../core/constants';
+import { isModerator } from '../../../../../../../../core/utils/role';
+import { useChannelMembersCollection } from '../../../../../hooks/collections';
+import { useChannelMyMembership } from '../../../../../hooks/useChannelMyMembership';
+import { useCurrentUserId } from '../../../../../hooks/useCurrentUserId';
+import { useStyles } from './styles';
+
+// Local constants (mirror AmityUiKitWeb v4/chat/constants).
+const LIST_PAGE_LIMIT = 20;
+const LIST_SKELETON_ROW_COUNT = 9;
+
+// 3. Types
+type MemberListProps = {
+  channelId: string;
+  search: string;
+  onlyModerators: boolean;
+};
+
+// 4. Named function component
+export function MemberList({
+  channelId,
+  search,
+  onlyModerators,
+}: MemberListProps) {
+  const { styles } = useStyles();
+  const currentUserId = useCurrentUserId();
+  const { isViewerModerator } = useChannelMyMembership(channelId);
+
+  const { members, isLoadingFirstPage, isLoading, hasMore, loadMore } =
+    useChannelMembersCollection({
+      channelId,
+      search,
+      memberships: ['member', 'muted'],
+      roles: onlyModerators ? [MemberRoles.CHANNEL_MODERATOR] : undefined,
+      limit: LIST_PAGE_LIMIT,
+    });
+
+  const visibleMembers = useMemo(
+    () => members.filter((m) => !m.user?.isGlobalBanned),
+    [members]
+  );
+
+  const orderedMembers = useMemo(() => {
+    if (!currentUserId) return visibleMembers;
+    const self = visibleMembers.find((m) => m.userId === currentUserId);
+    if (!self) return visibleMembers;
+    if (onlyModerators && !isModerator(self.roles)) return visibleMembers;
+    const rest = visibleMembers.filter((m) => m.userId !== currentUserId);
+    return [self, ...rest];
+  }, [visibleMembers, currentUserId, onlyModerators]);
+
+  if (orderedMembers.length === 0 && !isLoading && !isLoadingFirstPage) {
+    return <EmptyState variant="no-members" />;
+  }
+
+  const footer: ReactElement | null =
+    isLoadingFirstPage || isLoading ? (
+      <>
+        {Array.from({ length: LIST_SKELETON_ROW_COUNT }).map((_, i) => (
+          <MemberItem.Skeleton key={`skeleton-${i}`} />
+        ))}
+      </>
+    ) : null;
+
+  return (
+    <FlatList
+      style={styles.memberList}
+      data={orderedMembers}
+      keyExtractor={(member) => member.userId}
+      renderItem={({ item: member }) => {
+        if (!member.user || !member.userId) return null;
+        const isCurrentUser = member.userId === currentUserId;
+        const isMemberModerator = isModerator(member.roles);
+        const memberUser = member.user;
+
+        return (
+          <MemberItem
+            user={memberUser}
+            isModerator={isMemberModerator}
+            isCurrentUser={isCurrentUser}
+            isMuted={!!member.isMuted}
+            isViewerModerator={isViewerModerator}
+            trailing={
+              isCurrentUser ? undefined : (
+                <AmityGroupMemberActionComponent
+                  channelId={channelId}
+                  user={memberUser}
+                  isMemberModerator={isMemberModerator}
+                  isViewerModerator={isViewerModerator}
+                  isMuted={!!member.isMuted}
+                  // eslint-disable-next-line react/no-unstable-nested-components -- Popover's anchor is a render-prop, not a component definition.
+                  anchor={({ openPopover }) => (
+                    <Pressable
+                      style={styles.actionButton}
+                      onPress={openPopover}
+                      accessibilityRole="button"
+                      accessibilityLabel={`Actions for ${
+                        memberUser.displayName ?? memberUser.userId
+                      }`}
+                    >
+                      <AmityIcon
+                        name="ellipsis-r"
+                        size={24}
+                        tokenColor={
+                          AmityColorToken.IconListLeadingDefaultDefault
+                        }
+                      />
+                    </Pressable>
+                  )}
+                />
+              )
+            }
+          />
+        );
+      }}
+      onEndReachedThreshold={0.7}
+      onEndReached={() => {
+        if (hasMore && !isLoadingFirstPage && !isLoading) loadMore();
+      }}
+      ListFooterComponent={footer}
+    />
+  );
+}

package/src/social/features/chat/features/group/members/components/MemberList/index.ts

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

package/src/social/features/chat/features/group/members/components/MemberList/styles.ts

@@ -0,0 +1,17 @@
+// Styles for MemberList — ported from AmityUiKitWeb MemberList.module.css.
+// The web list is a flex column; RN uses a FlatList that fills its parent.
+
+import { StyleSheet } from 'react-native';
+
+export const useStyles = () => {
+  const styles = StyleSheet.create({
+    memberList: {
+      flex: 1,
+    },
+    actionButton: {
+      padding: 4,
+    },
+  });
+
+  return { styles };
+};