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

package/src/social/features/chat/features/group/create/hooks/useCreateGroupChat.ts

@@ -0,0 +1,237 @@
+// useCreateGroupChat — state + actions for the create-group step. Ported from
+// AmityUiKitWeb v4/chat/features/group/create/hooks/useCreateGroupChat, keeping
+// the react-hook-form + zod + react-query shape so CreateGroupChat consumes it
+// via <Controller> unchanged.
+//
+// RN adaptations from web:
+//   - Navigation: web's ChatNavigationProvider (`pop`/`replace`/`push`) →
+//     React Navigation. `handleClose`→goBack, create success→`replace` into the
+//     group chat, `handleAddMember`→`navigate` to the select-member step. The
+//     destination routes (AmityGroupChatPage, AmitySelectGroupMemberPage)
+//     register in a later wave, so those nav calls are cast past the typed
+//     RootStackParamList (only AmityGroupChatPage is a confirmed name).
+//   - Current user: web `useUser({ userId })` (reactive) → `Client.getCurrentUser()`
+//     (the useCurrentUserId pattern); it already returns an `Amity.User`.
+//   - Toasts: web `useNotifications('chat')` → the redux `useToast` slice.
+//   - Confirm dialog: web `useConfirmContext().confirm` → RN `Alert.alert`.
+//   - Avatar: web's `AvatarPicker` took an SDK `File` via `{ value, onChange }`;
+//     the RN AvatarPicker is presentational (`imageUrl`/`onPick`/`isUploading`),
+//     so this hook owns the pick+upload: `launchImageLibrary` → FormData →
+//     `FileRepository.uploadImage` → `fileId` (the useMessageComposer pattern).
+//     The form stores `avatarFileId` (string|null) rather than a File object.
+
+import { useCallback, useState } from 'react';
+import { Alert } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import {
+  ChannelRepository,
+  FileRepository,
+  Client,
+} from '@amityco/ts-sdk-react-native';
+import { launchImageLibrary, type Asset } from 'react-native-image-picker';
+import { useMutation } from '@tanstack/react-query';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+
+import { useString } from '../../../../../../../core/localization';
+import { useToast } from '../../../../../../../core/stores/slices/toastSlice';
+import { appendFileToFormData } from '../../../../../../../core/utils/fileUpload';
+import type { RootStackParamList } from '../../../../../../../core/routes/RouteParamList';
+import { generateDisplayName } from '../utils/generateDisplayName';
+
+// Web reads GROUP_NAME_MAX_LENGTH from chat/constants; inlined to match the
+// GroupNameField element and keep the port self-contained.
+const GROUP_NAME_MAX_LENGTH = 100;
+
+// Route names. Web pushed ChatPageTypes descriptors; RN targets React Navigation
+// routes. Only AmityGroupChatPage is a confirmed name — the select route is an
+// assumption a later wave must confirm.
+const GROUP_CHAT_ROUTE = 'AmityGroupChatPage';
+const SELECT_GROUP_MEMBER_ROUTE = 'AmitySelectGroupMemberPage';
+
+// Web imported this from ~/v4/chat/pages/CreateGroupChatPage (absent in RN).
+export type CreateGroupChatPageProps = {
+  selectedUsers: Amity.User[];
+};
+
+type CreateChannelParams = Parameters<
+  typeof ChannelRepository.createChannel
+>[0];
+type CreateChannelResponse = Awaited<
+  ReturnType<typeof ChannelRepository.createChannel>
+>;
+
+const schema = z.object({
+  avatarFileId: z.string().nullable(),
+  name: z.string().trim().max(GROUP_NAME_MAX_LENGTH),
+  isPublic: z.boolean(),
+  members: z.array(z.custom<Amity.User>()).min(1),
+});
+
+export type CreateGroupChatForm = z.infer<typeof schema>;
+
+// Build the RN multipart file part the SDK's uploadImage expects (iOS file://
+// strip + { uri, name, type }), mirroring useMessageComposer's toFormData.
+function toFormData(asset: Asset): FormData {
+  const formData = new FormData();
+  appendFileToFormData(
+    formData,
+    'files',
+    asset.uri ?? '',
+    asset.fileName ?? 'upload',
+    asset.type ?? 'application/octet-stream'
+  );
+  return formData;
+}
+
+export function useCreateGroupChat({
+  selectedUsers,
+}: CreateGroupChatPageProps) {
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+  const { showToast } = useToast();
+  const currentUser = Client.getCurrentUser();
+
+  const leaveConfirmText = useString('amity_chat_group_leave_confirm_label');
+  const cancelText = useString('amity_chat_cancel');
+  const createSuccessToast = useString('amity_chat_create_group_success');
+  const createErrorToast = useString('amity_chat_create_group_error');
+  const leaveWithoutFinishingTitle = useString(
+    'amity_chat_leave_without_finishing_title'
+  );
+  const leaveWithoutFinishingContent = useString(
+    'amity_chat_leave_without_finishing_message'
+  );
+
+  const [avatarImageUrl, setAvatarImageUrl] = useState<string | undefined>(
+    undefined
+  );
+  const [isUploadingAvatar, setIsUploadingAvatar] = useState(false);
+
+  const form = useForm<CreateGroupChatForm>({
+    mode: 'onChange',
+    resolver: zodResolver(schema),
+    defaultValues: {
+      avatarFileId: null,
+      name: '',
+      isPublic: true,
+      members: selectedUsers,
+    },
+  });
+
+  const { mutateAsync } = useMutation<
+    CreateChannelResponse,
+    Error,
+    CreateChannelParams
+  >({
+    mutationFn: ChannelRepository.createChannel,
+  });
+
+  const navigateLater = navigation.navigate as unknown as (
+    name: string,
+    params?: object
+  ) => void;
+  const replaceLater = navigation.replace as unknown as (
+    name: string,
+    params?: object
+  ) => void;
+
+  const handlePickAvatar = useCallback(async () => {
+    if (isUploadingAvatar) return;
+    const response = await launchImageLibrary({
+      mediaType: 'photo',
+      selectionLimit: 1,
+    });
+    if (response.didCancel || response.errorCode) return;
+    const asset = response.assets?.[0];
+    if (!asset || !asset.uri) return;
+
+    const previousUrl = avatarImageUrl;
+    setAvatarImageUrl(asset.uri);
+    setIsUploadingAvatar(true);
+    try {
+      const uploaded = await FileRepository.uploadImage(toFormData(asset));
+      const fileId = uploaded?.data?.[0]?.fileId;
+      if (!fileId) throw new Error('Upload did not return a fileId.');
+      form.setValue('avatarFileId', fileId, { shouldValidate: true });
+    } catch {
+      // No dedicated avatar-upload-error string exists; revert the preview so
+      // the tile falls back to the placeholder rather than showing a wrong toast.
+      setAvatarImageUrl(previousUrl);
+      form.setValue('avatarFileId', null, { shouldValidate: true });
+    } finally {
+      setIsUploadingAvatar(false);
+    }
+  }, [avatarImageUrl, isUploadingAvatar, form]);
+
+  function handleClose() {
+    Alert.alert(leaveWithoutFinishingTitle, leaveWithoutFinishingContent, [
+      { text: cancelText, style: 'cancel' },
+      {
+        text: leaveConfirmText,
+        style: 'destructive',
+        onPress: () => navigation.goBack(),
+      },
+    ]);
+  }
+
+  function handleAddMember() {
+    navigateLater(SELECT_GROUP_MEMBER_ROUTE, {
+      selectedGroupMember: form.getValues('members'),
+    });
+  }
+
+  const handleCreate = form.handleSubmit(async (values) => {
+    const trimmed = values.name.trim();
+    const displayName =
+      trimmed ||
+      generateDisplayName([
+        ...(currentUser ? [currentUser] : []),
+        ...values.members,
+      ]);
+
+    await mutateAsync(
+      {
+        type: 'community',
+        displayName,
+        isPublic: values.isPublic,
+        userIds: values.members.map((u) => u.userId),
+        avatarFileId: values.avatarFileId ?? undefined,
+      },
+      {
+        onSuccess: (result) => {
+          const channelId = result?.data?.channelId;
+          if (channelId) {
+            showToast({
+              message: createSuccessToast,
+              type: 'success',
+              variant: 'custom',
+            });
+            replaceLater(GROUP_CHAT_ROUTE, { channelId });
+          }
+        },
+        onError: () => {
+          showToast({
+            message: createErrorToast,
+            type: 'failed',
+            variant: 'custom',
+          });
+        },
+      }
+    );
+  });
+
+  return {
+    form,
+    currentUser,
+    avatarImageUrl,
+    isUploadingAvatar,
+    handlePickAvatar,
+    handleClose,
+    handleAddMember,
+    handleCreate,
+    isFormValid: form.formState.isValid || form.formState.isSubmitting,
+  };
+}

package/src/social/features/chat/features/group/create/index.ts

@@ -0,0 +1,5 @@
+export { CreateGroupChat } from './CreateGroupChat';
+export type {
+  CreateGroupChatPageProps,
+  CreateGroupChatForm,
+} from './hooks/useCreateGroupChat';

package/src/social/features/chat/features/group/create/styles.ts

@@ -0,0 +1,26 @@
+// Styles for CreateGroupChat — ported from AmityUiKitWeb
+// v4/chat/features/group/create/CreateGroupChat.module.css.
+// Web `min-height: 100svh` → flex:1 (no svh in RN); avatar wrapper padding
+// 1rem→16, centered. 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({
+    createGroupChat: {
+      flex: 1,
+      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
+    },
+    avatarWrapper: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 16,
+    },
+  });
+
+  return { styles, token };
+};

package/src/social/features/chat/features/group/create/utils/generateDisplayName.ts

@@ -0,0 +1,36 @@
+// generateDisplayName — builds a default group display name from its members'
+// display names, comma-joined and capped at MAX_LENGTH. Ported verbatim from
+// AmityUiKitWeb v4/chat/features/group/create/utils/generateDisplayName; only the
+// `resolveString` import path is adapted to the RN core/localization barrel.
+
+import { resolveString } from '../../../../../../../core/localization';
+
+const MAX_LENGTH = 100;
+
+export function generateDisplayName(users: Amity.User[]): string {
+  if (users.length === 0) return '';
+
+  let buffer = '';
+  let isFirst = true;
+
+  for (const user of users) {
+    const displayName =
+      user.displayName ?? resolveString('amity_chat_unknown_user');
+    if (!isFirst) {
+      if (buffer.length + 2 + displayName.length > MAX_LENGTH) break;
+      buffer += ', ';
+    } else {
+      isFirst = false;
+    }
+
+    if (buffer.length + displayName.length <= MAX_LENGTH) {
+      buffer += displayName;
+    } else {
+      const remaining = MAX_LENGTH - buffer.length;
+      if (remaining > 0) buffer += displayName.slice(0, remaining);
+      break;
+    }
+  }
+
+  return buffer;
+}

package/src/social/features/chat/features/group/create/utils/index.ts

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

package/src/social/features/chat/features/group/edit-notification/EditGroupNotification.tsx

@@ -0,0 +1,121 @@
+// EditGroupNotification — RN port of AmityUiKitWeb
+// v4/chat/features/group/edit-notification/EditGroupNotification. A TopBar (with a
+// Save action) over a radio group of notification modes (default / silent /
+// subscribe), each rendering a title + description.
+//
+// RN adaptations from web:
+//   - `<form>`/`<div>` → View; the web submit `Button.Main` (ghost/primary) → the
+//     RN Button (hierarchy "tertiary" = ghost, tone "default" = primary) whose
+//     `onPress` calls `handleSave`.
+//   - Web wrapped the radios in `Selection.RadioGroup`; RN has no RadioGroup, so
+//     the react-hook-form `Controller` drives each `Selection.Radio` via
+//     `field.value`/`field.onChange` directly (the sibling edit-permission port's
+//     pattern).
+//   - All eight strings are resolved here (as on web) and the resolved title /
+//     description are passed into `NotificationMode`.
+
+// 1. React / RN imports
+import { View } from 'react-native';
+
+// 2. Third-party imports
+import { AmityChannelNotificationModeEnum } from '@amityco/ts-sdk-react-native';
+import { Controller } from 'react-hook-form';
+
+// 3. Internal imports (relative)
+import { Button } from '../../../../../../core/design/atoms/Button';
+import { Selection } from '../../../../../../core/design/atoms/Selection';
+import { useString } from '../../../../../../core/localization';
+import { TopBar } from '../../../elements/TopBar';
+import { NotificationMode } from './components/NotificationMode/NotificationMode';
+import {
+  useEditGroupNotification,
+  type EditGroupNotificationProps,
+} from './hooks/useEditGroupNotification';
+import { useStyles } from './styles';
+
+// 4. Named function component
+export function EditGroupNotification({
+  channelId,
+}: EditGroupNotificationProps) {
+  const { styles } = useStyles();
+  const { control, handleClose, handleSave, isFormValid } =
+    useEditGroupNotification({ channelId });
+
+  const pageTitle = useString('amity_chat_group_notifications');
+  const saveLabel = useString('amity_chat_group_edit_notification_save');
+  const defaultModeTitle = useString(
+    'amity_chat_group_notification_default_title'
+  );
+  const defaultModeDesc = useString(
+    'amity_chat_group_notification_default_desc'
+  );
+  const silentModeTitle = useString(
+    'amity_chat_group_notification_silent_title'
+  );
+  const silentModeDesc = useString('amity_chat_group_notification_silent_desc');
+  const subscribeModeTitle = useString(
+    'amity_chat_group_notification_subscribe_title'
+  );
+  const subscribeModeDesc = useString(
+    'amity_chat_group_notification_subscribe_desc'
+  );
+
+  const notificationModes = [
+    {
+      value: AmityChannelNotificationModeEnum.Default,
+      title: defaultModeTitle,
+      description: defaultModeDesc,
+    },
+    {
+      value: AmityChannelNotificationModeEnum.Silent,
+      title: silentModeTitle,
+      description: silentModeDesc,
+    },
+    {
+      value: AmityChannelNotificationModeEnum.Subscribe,
+      title: subscribeModeTitle,
+      description: subscribeModeDesc,
+    },
+  ];
+
+  return (
+    <View style={styles.container}>
+      <TopBar
+        title={pageTitle}
+        leadingType="back"
+        onLeading={handleClose}
+        trailing={
+          <Button
+            hierarchy="tertiary"
+            tone="default"
+            size="sm"
+            label={saveLabel}
+            disabled={!isFormValid}
+            onPress={handleSave}
+          />
+        }
+      />
+      <Controller
+        control={control}
+        name="notificationMode"
+        render={({ field: { value, onChange } }) => (
+          <View style={styles.radios}>
+            {notificationModes.map((mode) => (
+              <Selection.Radio
+                key={mode.value}
+                isSelected={value === mode.value}
+                onSelect={() => onChange(mode.value)}
+                accessibilityLabel={pageTitle}
+              >
+                <NotificationMode
+                  title={mode.title}
+                  description={mode.description}
+                />
+              </Selection.Radio>
+            ))}
+          </View>
+        )}
+      />
+    </View>
+  );
+}

package/src/social/features/chat/features/group/edit-notification/components/NotificationMode/NotificationMode.tsx

@@ -0,0 +1,39 @@
+// NotificationMode — RN port of AmityUiKitWeb
+// v4/chat/features/group/edit-notification/components/NotificationMode. A single
+// notification mode's title + description, rendered as a Selection.Radio label.
+//
+// RN adaptations from web:
+//   - `<div>` → View; Typography.BodyBold → variant "bodyBold"; Typography.Caption
+//     → variant "caption". Strings are resolved by the parent and passed in.
+
+// 1. React / RN imports
+import { View } from 'react-native';
+
+// 2. Internal imports (relative)
+import { Typography } from '../../../../../../../../core/design/components/Typography';
+import { useStyles } from './styles';
+
+// 3. Types
+type NotificationModeProps = {
+  title: string;
+  description: string;
+};
+
+// 4. Named function component
+export function NotificationMode({
+  title,
+  description,
+}: NotificationModeProps) {
+  const { styles } = useStyles();
+
+  return (
+    <View style={styles.container}>
+      <Typography variant="bodyBold" style={styles.title}>
+        {title}
+      </Typography>
+      <Typography variant="caption" style={styles.description}>
+        {description}
+      </Typography>
+    </View>
+  );
+}

package/src/social/features/chat/features/group/edit-notification/components/NotificationMode/index.ts

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

package/src/social/features/chat/features/group/edit-notification/components/NotificationMode/styles.ts

@@ -0,0 +1,29 @@
+// Styles for NotificationMode — ported from AmityUiKitWeb
+// v4/chat/features/group/edit-notification/components/NotificationMode/NotificationMode.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({
+    // .notificationMode — flex column, 0.125rem gap, fills the row.
+    container: {
+      flex: 1,
+      flexDirection: 'column',
+      gap: 2,
+      minWidth: 0,
+    },
+    title: {
+      color: token(AmityColorToken.TextListHeaderDefaultDefault),
+    },
+    description: {
+      color: token(AmityColorToken.TextListTextDescriptionDefaultDefault),
+    },
+  });
+
+  return { styles, token };
+};

package/src/social/features/chat/features/group/edit-notification/components/NotificationModeRow/NotificationModeRow.tsx

@@ -0,0 +1,43 @@
+// NotificationModeRow — RN port of AmityUiKitWeb
+// v4/chat/features/group/edit-notification/components/NotificationModeRow. A
+// notification mode's title + description rendered inline (web used a <span>).
+//
+// NOTE: like web, this component is NOT wired into the feature — it is not
+// re-exported from the components barrel and is rendered nowhere. It exists to
+// mirror the web tree 1:1 (it is a tracked port unit).
+//
+// RN adaptations from web:
+//   - `<span>` → View; Typography.BodyBold → variant "bodyBold"; Typography.Caption
+//     → variant "caption".
+
+// 1. React / RN imports
+import { View } from 'react-native';
+
+// 2. Internal imports (relative)
+import { Typography } from '../../../../../../../../core/design/components/Typography';
+import { useStyles } from './styles';
+
+// 3. Types
+type NotificationModeRowProps = {
+  title: string;
+  description: string;
+};
+
+// 4. Named function component
+export function NotificationModeRow({
+  title,
+  description,
+}: NotificationModeRowProps) {
+  const { styles } = useStyles();
+
+  return (
+    <View style={styles.container}>
+      <Typography variant="bodyBold" style={styles.title}>
+        {title}
+      </Typography>
+      <Typography variant="caption" style={styles.description}>
+        {description}
+      </Typography>
+    </View>
+  );
+}

package/src/social/features/chat/features/group/edit-notification/components/NotificationModeRow/index.ts

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

package/src/social/features/chat/features/group/edit-notification/components/NotificationModeRow/styles.ts

@@ -0,0 +1,29 @@
+// Styles for NotificationModeRow — ported from AmityUiKitWeb
+// v4/chat/features/group/edit-notification/components/NotificationModeRow/NotificationModeRow.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({
+    // .notificationModeRow — flex column, 0.125rem gap, fills the row.
+    container: {
+      flex: 1,
+      flexDirection: 'column',
+      gap: 2,
+      minWidth: 0,
+    },
+    title: {
+      color: token(AmityColorToken.TextListHeaderDefaultDefault),
+    },
+    description: {
+      color: token(AmityColorToken.TextListTextDescriptionDefaultDefault),
+    },
+  });
+
+  return { styles, token };
+};

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

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

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

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