@amityco/react-native-social-uikit 4.1.1-fdf83f6b.0 → 4.2.0

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

@@ -1,237 +0,0 @@
-// 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/chat/features/group/create/index.ts

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

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

@@ -1,26 +0,0 @@
-// 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/chat/features/group/create/utils/generateDisplayName.ts

@@ -1,36 +0,0 @@
-// 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/chat/features/group/create/utils/index.ts

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

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

@@ -1,121 +0,0 @@
-// 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/chat/features/group/edit-notification/components/NotificationMode/NotificationMode.tsx

@@ -1,39 +0,0 @@
-// 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/chat/features/group/edit-notification/components/NotificationMode/index.ts

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

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

@@ -1,29 +0,0 @@
-// 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/chat/features/group/edit-notification/components/NotificationModeRow/NotificationModeRow.tsx

@@ -1,43 +0,0 @@
-// 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/chat/features/group/edit-notification/components/NotificationModeRow/index.ts

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

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

@@ -1,29 +0,0 @@
-// 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/chat/features/group/edit-notification/components/index.ts

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

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

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