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

package/src/social/features/chat/hooks/collections/useChannelsByIdsCollection.ts

@@ -0,0 +1,66 @@
+// useChannelsByIdsCollection — ported from AmityUiKitWeb
+// v4/chat/hooks/collections/useChannelCollection (the `{ channelIds }` variant).
+//
+// The message-search results list resolves each matched message's channel by id.
+// Web calls `useChannelCollection({ channelIds }, { shouldCall })` over
+// `ChannelRepository.getChannels`; the RN `useChannelsCollection` doesn't expose
+// `channelIds`, so this dedicated hook calls `ChannelRepository.getChannels`
+// directly with a channelIds filter. Gated on `useAuth().isConnected` and on a
+// non-empty id list. Callback: `{ data, loading, hasNextPage, onNextPage }`.
+
+import { useEffect, useRef, useState } from 'react';
+import { ChannelRepository } from '@amityco/ts-sdk-react-native';
+import useAuth from '../../../../../core/hooks/useAuth';
+
+export type UseChannelsByIdsCollectionResult = {
+  channels: Amity.Channel[];
+  loading: boolean;
+  hasNextPage: boolean;
+  loadMore: () => void;
+};
+
+export function useChannelsByIdsCollection(
+  channelIds: string[]
+): UseChannelsByIdsCollectionResult {
+  const [channels, setChannels] = useState<Amity.Channel[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [hasNextPage, setHasNextPage] = useState(false);
+  const onNextPageRef = useRef<(() => void) | undefined>(undefined);
+
+  const { isConnected } = useAuth();
+  const shouldCall = channelIds.length > 0;
+  const idsKey = channelIds.join(',');
+
+  useEffect(() => {
+    if (!isConnected || !shouldCall) {
+      setChannels([]);
+      setLoading(true);
+      setHasNextPage(false);
+      onNextPageRef.current = undefined;
+      return undefined;
+    }
+    setLoading(true);
+
+    const params: Amity.ChannelLiveCollection = { channelIds };
+
+    const unsub = ChannelRepository.getChannels(
+      params,
+      ({ data, loading: isLoading, hasNextPage: nextPage, onNextPage }) => {
+        setChannels(data);
+        setLoading(isLoading);
+        setHasNextPage(Boolean(nextPage));
+        onNextPageRef.current = onNextPage;
+      }
+    );
+
+    return () => {
+      unsub();
+    };
+  }, [isConnected, shouldCall, idsKey]);
+
+  function loadMore() {
+    onNextPageRef.current?.();
+  }
+
+  return { channels, loading, hasNextPage, loadMore };
+}

package/src/social/features/chat/hooks/collections/useChannelsCollection.ts

@@ -0,0 +1,98 @@
+// useChannelsCollection — ported from AmityUiKitWeb v4/chat/hooks/collections.
+// Subscribes to the SDK's live channel collection and exposes it as React state.
+//
+// Web wraps a shared `useChannelCollection` (react-query backed); here we call
+// `ChannelRepository.getChannels` directly — it's a live collection whose
+// callback delivers `{ data, loading, hasNextPage, onNextPage }`. We keep the
+// latest `onNextPage` in a ref so `loadMore()` stays stable, and re-subscribe
+// whenever the query params change, returning the unsubscriber for cleanup.
+
+import { useEffect, useRef, useState } from 'react';
+import { ChannelRepository } from '@amityco/ts-sdk-react-native';
+import useAuth from '../../../../../core/hooks/useAuth';
+
+export type UseChannelsCollectionParams = {
+  types?: Amity.ChannelType[];
+  membership?: 'all' | 'member' | 'notMember';
+  sortBy?: 'displayName' | 'firstCreated' | 'lastCreated' | 'lastActivity';
+  isDeleted?: boolean;
+  limit?: number;
+  /** Drop archived channels from the collection (web home list passes true). */
+  excludeArchives?: boolean;
+};
+
+export type UseChannelsCollectionResult = {
+  channels: Amity.Channel[];
+  loading: boolean;
+  hasNextPage: boolean;
+  loadMore: () => void;
+};
+
+const DEFAULT_LIMIT = 20;
+
+export function useChannelsCollection({
+  types,
+  membership = 'member',
+  sortBy = 'lastActivity',
+  isDeleted = false,
+  limit = DEFAULT_LIMIT,
+  excludeArchives,
+}: UseChannelsCollectionParams = {}): UseChannelsCollectionResult {
+  const [channels, setChannels] = useState<Amity.Channel[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [hasNextPage, setHasNextPage] = useState(false);
+  const onNextPageRef = useRef<(() => void) | undefined>(undefined);
+
+  // The SDK's ChannelRepository needs a connected client — calling getChannels
+  // before the session is 'established' throws. Gate the subscription on it.
+  const { isConnected } = useAuth();
+
+  // Re-subscribe on any query-param change. `types` is an array, so key on a
+  // stable string rather than its identity to avoid a resubscribe every render.
+  const typesKey = types?.join(',') ?? '';
+
+  useEffect(() => {
+    if (!isConnected) {
+      setLoading(true);
+      return undefined;
+    }
+    setLoading(true);
+
+    const params: Amity.ChannelLiveCollection = {
+      membership,
+      sortBy,
+      isDeleted,
+      limit,
+      ...(types ? { types } : {}),
+      ...(excludeArchives ? { excludeArchives: true } : {}),
+    };
+
+    const unsub = ChannelRepository.getChannels(
+      params,
+      ({ data, loading: isLoading, hasNextPage: nextPage, onNextPage }) => {
+        setChannels(data);
+        setLoading(isLoading);
+        setHasNextPage(Boolean(nextPage));
+        onNextPageRef.current = onNextPage;
+      }
+    );
+
+    return () => {
+      unsub();
+    };
+  }, [
+    isConnected,
+    typesKey,
+    membership,
+    sortBy,
+    isDeleted,
+    limit,
+    excludeArchives,
+  ]);
+
+  function loadMore() {
+    onNextPageRef.current?.();
+  }
+
+  return { channels, loading, hasNextPage, loadMore };
+}

package/src/social/features/chat/hooks/collections/useMessageSearchCollection.ts

@@ -0,0 +1,75 @@
+// useMessageSearchCollection — ported from AmityUiKitWeb
+// v4/chat/hooks/collections/useMessageSearchCollection.
+//
+// Web wraps `useLiveCollectionV4` over `MessageRepository.searchMessage` with
+// `{ query, limit: LIST_PAGE_LIMIT }`, gating on a trimmed query length. The RN
+// SDK exposes the same `MessageRepository.searchMessage(params, callback)` live
+// collection (callback: `{ data, loading, hasNextPage, onNextPage }`). We gate on
+// `useAuth().isConnected` and on the trimmed query reaching SEARCH_MIN_QUERY_LENGTH,
+// keep the latest `onNextPage` in a ref, and re-subscribe when the query changes.
+
+import { useEffect, useRef, useState } from 'react';
+import { MessageRepository } from '@amityco/ts-sdk-react-native';
+import useAuth from '../../../../../core/hooks/useAuth';
+import { LIST_PAGE_LIMIT, SEARCH_MIN_QUERY_LENGTH } from '../../constants';
+
+export type UseMessageSearchCollectionParams = {
+  query: string;
+};
+
+export type UseMessageSearchCollectionResult = {
+  messages: Amity.Message[];
+  loading: boolean;
+  hasNextPage: boolean;
+  loadMore: () => void;
+};
+
+export function useMessageSearchCollection({
+  query,
+}: UseMessageSearchCollectionParams): UseMessageSearchCollectionResult {
+  const [messages, setMessages] = useState<Amity.Message[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [hasNextPage, setHasNextPage] = useState(false);
+  const onNextPageRef = useRef<(() => void) | undefined>(undefined);
+
+  const { isConnected } = useAuth();
+
+  const trimmed = query.trim();
+  const shouldCall = trimmed.length >= SEARCH_MIN_QUERY_LENGTH;
+
+  useEffect(() => {
+    if (!isConnected || !shouldCall) {
+      setMessages([]);
+      setLoading(true);
+      setHasNextPage(false);
+      onNextPageRef.current = undefined;
+      return undefined;
+    }
+    setLoading(true);
+
+    const params: Amity.SearchMessageLiveCollection = {
+      query: trimmed,
+      limit: LIST_PAGE_LIMIT,
+    };
+
+    const unsub = MessageRepository.searchMessage(
+      params,
+      ({ data, loading: isLoading, hasNextPage: nextPage, onNextPage }) => {
+        setMessages(data);
+        setLoading(isLoading);
+        setHasNextPage(Boolean(nextPage));
+        onNextPageRef.current = onNextPage;
+      }
+    );
+
+    return () => {
+      unsub();
+    };
+  }, [isConnected, shouldCall, trimmed]);
+
+  function loadMore() {
+    onNextPageRef.current?.();
+  }
+
+  return { messages, loading, hasNextPage, loadMore };
+}

package/src/social/features/chat/hooks/collections/useMessagesCollection.ts

@@ -0,0 +1,96 @@
+// useMessagesCollection — ported from AmityUiKitWeb v4/chat/hooks/collections/useMessagesCollection.
+//
+// Web wraps MessageRepository.getMessages (a live collection) and gates on
+// `params.subChannelId && shouldFetch`. The RN SDK exposes the same
+// `MessageRepository.getMessages(params, callback)` live collection, whose
+// callback delivers `{ data, loading, error, hasNextPage, onNextPage }`.
+//
+// As with useChannelsCollection, the SDK needs a connected client before the
+// collection can run, so we additionally gate on useAuth().isConnected. We keep
+// the latest `onNextPage` in a ref so `loadMore()` stays stable, and re-subscribe
+// whenever the query params change, returning the unsubscriber for cleanup.
+
+import { useEffect, useRef, useState } from 'react';
+import { MessageRepository } from '@amityco/ts-sdk-react-native';
+import useAuth from '../../../../../core/hooks/useAuth';
+
+export type UseMessagesCollectionParams = Amity.MessagesLiveCollection;
+
+export type UseMessagesCollectionResult = {
+  messages: Amity.Message[];
+  loading: boolean;
+  hasNextPage: boolean;
+  loadMore: () => void;
+  error: unknown;
+};
+
+export function useMessagesCollection(
+  params: UseMessagesCollectionParams,
+  shouldFetch = true
+): UseMessagesCollectionResult {
+  const [messages, setMessages] = useState<Amity.Message[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [hasNextPage, setHasNextPage] = useState(false);
+  const [error, setError] = useState<unknown>(undefined);
+  const onNextPageRef = useRef<(() => void) | undefined>(undefined);
+
+  // The SDK's MessageRepository needs a connected client — calling getMessages
+  // before the session is 'established' throws. Gate the subscription on it.
+  const { isConnected } = useAuth();
+
+  const {
+    subChannelId,
+    limit,
+    sortBy,
+    includingTags,
+    excludingTags,
+    includeDeleted,
+  } = params;
+
+  useEffect(() => {
+    if (!isConnected || !subChannelId || !shouldFetch) {
+      setLoading(true);
+      return undefined;
+    }
+    setLoading(true);
+
+    const unsub = MessageRepository.getMessages(
+      params,
+      ({
+        data,
+        loading: isLoading,
+        error: err,
+        hasNextPage: nextPage,
+        onNextPage,
+      }) => {
+        setLoading(isLoading);
+        if (!isLoading && data) {
+          setMessages([...data]);
+          setHasNextPage(Boolean(nextPage));
+          onNextPageRef.current = nextPage ? onNextPage : undefined;
+        }
+        if (err) setError(err);
+      }
+    );
+
+    return () => {
+      unsub();
+    };
+    // `params` is rebuilt each render; key on its stable primitive fields.
+  }, [
+    isConnected,
+    shouldFetch,
+    subChannelId,
+    limit,
+    sortBy,
+    includingTags?.join(','),
+    excludingTags?.join(','),
+    includeDeleted,
+  ]);
+
+  function loadMore() {
+    onNextPageRef.current?.();
+  }
+
+  return { messages, loading, hasNextPage, loadMore, error };
+}

package/src/social/features/chat/hooks/collections/useSearchChannelsCollection.ts

@@ -0,0 +1,97 @@
+// useSearchChannelsCollection — ported from AmityUiKitWeb
+// v4/chat/hooks/collections/useSearchChannelsCollection.
+//
+// Web wraps a shared `useLiveCollectionV4` over `ChannelRepository.searchChannels`;
+// here we call `ChannelRepository.searchChannels(params, callback)` directly — a
+// live collection whose callback delivers `{ data, loading, hasNextPage, onNextPage }`
+// — mirroring the existing `useChannelsCollection`. We gate on `useAuth().isConnected`
+// (the repository throws before the session is established) and on the caller's
+// `shouldCall`, keep the latest `onNextPage` in a ref so `loadMore()` stays stable,
+// and re-subscribe whenever the query params change.
+
+import { useEffect, useRef, useState } from 'react';
+import { ChannelRepository } from '@amityco/ts-sdk-react-native';
+import useAuth from '../../../../../core/hooks/useAuth';
+
+export type UseSearchChannelsCollectionParams =
+  Amity.SearchChannelLiveCollection;
+
+export type UseSearchChannelsCollectionResult = {
+  channels: Amity.Channel[];
+  loading: boolean;
+  hasNextPage: boolean;
+  loadMore: () => void;
+};
+
+type UseSearchChannelsCollectionOptions = {
+  shouldCall?: boolean;
+};
+
+export function useSearchChannelsCollection(
+  params: UseSearchChannelsCollectionParams,
+  { shouldCall = true }: UseSearchChannelsCollectionOptions = {}
+): UseSearchChannelsCollectionResult {
+  const [channels, setChannels] = useState<Amity.Channel[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [hasNextPage, setHasNextPage] = useState(false);
+  const onNextPageRef = useRef<(() => void) | undefined>(undefined);
+
+  const { isConnected } = useAuth();
+
+  const {
+    query,
+    exactMatch,
+    isMemberOnly,
+    types,
+    tags,
+    sortBy,
+    orderBy,
+    limit,
+  } = params;
+
+  // `types`/`tags` are arrays rebuilt each render — key on a stable string.
+  const typesKey = types?.join(',') ?? '';
+  const tagsKey = tags?.join(',') ?? '';
+
+  useEffect(() => {
+    if (!isConnected || !shouldCall) {
+      setChannels([]);
+      setLoading(true);
+      setHasNextPage(false);
+      onNextPageRef.current = undefined;
+      return undefined;
+    }
+    setLoading(true);
+
+    const unsub = ChannelRepository.searchChannels(
+      params,
+      ({ data, loading: isLoading, hasNextPage: nextPage, onNextPage }) => {
+        setChannels(data);
+        setLoading(isLoading);
+        setHasNextPage(Boolean(nextPage));
+        onNextPageRef.current = onNextPage;
+      }
+    );
+
+    return () => {
+      unsub();
+    };
+  }, [
+    isConnected,
+    shouldCall,
+    query,
+    exactMatch,
+    isMemberOnly,
+    typesKey,
+    tagsKey,
+    sortBy,
+    orderBy,
+    limit,
+  ]);
+
+  function loadMore() {
+    onNextPageRef.current?.();
+  }
+
+  return { channels, loading, hasNextPage, loadMore };
+}

package/src/social/features/chat/hooks/index.ts

@@ -0,0 +1,11 @@
+export * from './collections';
+export * from './useMention';
+export * from './useCreateMessage';
+export * from './useEditMessage';
+export * from './useDeleteMessage';
+export * from './useChatNotifications';
+export * from './useChatNavigation';
+export * from './useNetworkOnline';
+export * from './useCurrentUserId';
+export * from './useChannelMyMembership';
+export * from '../features/shared/hooks';

package/src/social/features/chat/hooks/queries/index.ts

@@ -0,0 +1,4 @@
+export * from './useChannelArchiveQuery';
+export * from './useDeleteMessageQuery';
+export * from './useFlagMessageQuery';
+export * from './useSaveMediaMessageQuery';

package/src/social/features/chat/hooks/queries/useChannelArchiveQuery.ts

@@ -0,0 +1,99 @@
+// useChannelArchiveQuery — ported from AmityUiKitWeb
+// v4/chat/hooks/queries/useChannelArchiveQuery.
+// react-query mutations over ChannelRepository.archiveChannel / unarchiveChannel.
+//
+// RN adaptations from web:
+//   - Web `useNotifications('chat').success/error` → the redux toast (`useToast`).
+//   - Web `useConfirmContext().info` archive-limit dialog → RN `Alert.alert`
+//     (RN has no in-app ConfirmProvider; mirrors the pattern used by
+//     useSelectGroupMember / useGroupSetting).
+
+import { ChannelRepository } from '@amityco/ts-sdk-react-native';
+import { useMutation } from '@tanstack/react-query';
+import { Alert } from 'react-native';
+
+import { useString } from '../../../../../core/localization';
+import { useToast } from '../../../../../core/stores/slices/toastSlice';
+
+type Params = Parameters<typeof ChannelRepository.archiveChannel>;
+
+export type ChannelArchivePayload = {
+  channelId: Params[0];
+};
+
+type Response = Awaited<ReturnType<typeof ChannelRepository.archiveChannel>>;
+
+export function useChannelArchiveQuery() {
+  const { showToast } = useToast();
+  const archiveLimitTitle = useString('amity_chat_archive_limit_title');
+  const archiveLimitMessage = useString('amity_chat_archive_limit_message');
+  const okLabel = useString('amity_chat_button_ok');
+  const archiveErrorToast = useString('amity_chat_archive_error_toast');
+  const unarchiveErrorToast = useString('amity_chat_unarchive_error_toast');
+  const archivedSuccessToast = useString('amity_chat_archived_toast');
+  const unarchiveSuccessToast = useString('amity_chat_unarchived_toast');
+
+  const archiveMutation = useMutation<Response, Error, ChannelArchivePayload>({
+    mutationFn: ({ channelId }) => ChannelRepository.archiveChannel(channelId),
+    // PDT-4038: react-query PAUSES a mutation while offline instead of running it,
+    // so archiving with no connection silently queued and neither toast fired —
+    // then the queued call succeeded on reconnect and showed "Chat archived",
+    // which is the opposite of what QA expects. 'always' makes it run and fail now.
+    networkMode: 'always',
+    onSuccess: () => {
+      showToast({
+        message: archivedSuccessToast,
+        type: 'success',
+        variant: 'custom',
+      });
+    },
+    onError: (err) => {
+      if (err.message?.includes('Archive limit exceeded')) {
+        Alert.alert(archiveLimitTitle, archiveLimitMessage, [
+          { text: okLabel },
+        ]);
+        return;
+      }
+      showToast({
+        message: archiveErrorToast,
+        type: 'failed',
+        variant: 'custom',
+      });
+    },
+  });
+
+  const unarchiveMutation = useMutation<Response, Error, ChannelArchivePayload>(
+    {
+      mutationFn: ({ channelId }) =>
+        ChannelRepository.unarchiveChannel(channelId),
+      // PDT-4038: see the archive mutation above.
+      networkMode: 'always',
+      onSuccess: () => {
+        showToast({
+          message: unarchiveSuccessToast,
+          type: 'success',
+          variant: 'custom',
+        });
+      },
+      onError: () => {
+        showToast({
+          message: unarchiveErrorToast,
+          type: 'failed',
+          variant: 'custom',
+        });
+      },
+    }
+  );
+
+  async function archiveChannel(payload: ChannelArchivePayload): Promise<void> {
+    await archiveMutation.mutateAsync(payload);
+  }
+
+  async function unarchiveChannel(
+    payload: ChannelArchivePayload
+  ): Promise<void> {
+    await unarchiveMutation.mutateAsync(payload);
+  }
+
+  return { archiveChannel, unarchiveChannel };
+}

package/src/social/features/chat/hooks/queries/useDeleteMessageQuery.ts

@@ -0,0 +1,71 @@
+// useDeleteMessageQuery — RN port of AmityUiKitWeb
+// v4/chat/hooks/queries/useDeleteMessageQuery.ts. Confirms before deleting a
+// message, then runs the delete and reports failure through the chat toast.
+// The return shape (`requestDelete(message, { afterDelete })`) is preserved
+// verbatim from web so every call site ports unchanged.
+//
+// RN adaptations vs web:
+//   - Confirm UI: web used `useConfirmContext()` (ConfirmProvider renders a styled
+//     modal). RN has no ConfirmProvider, so this uses the platform `Alert.alert`
+//     — the same confirm mechanism the rest of this repo already uses
+//     (PostComposer, useUpload, useImagePicker). Web's `okButtonColor: 'alert'`
+//     maps to the iOS `destructive` button style; Android has no equivalent.
+//   - Strings are the same four keys web uses, so copy stays in sync.
+//   - Web closed its modal explicitly (`closeConfirm`) in every branch; Alert
+//     dismisses itself when a button is pressed, so there is nothing to close.
+
+import { Alert } from 'react-native';
+
+import { useString } from '../../../../../core/localization';
+import { useChatNotifications } from '../useChatNotifications';
+import { useDeleteMessage } from '../useDeleteMessage';
+
+export type RequestDeleteOptions = {
+  afterDelete?: () => void;
+};
+
+export type UseDeleteMessageQueryReturn = {
+  requestDelete: (
+    message: Amity.Message,
+    options?: RequestDeleteOptions
+  ) => void;
+};
+
+export function useDeleteMessageQuery(): UseDeleteMessageQueryReturn {
+  const { error } = useChatNotifications();
+  const deleteAlertTitle = useString('amity_chat_delete_alert_title');
+  const deleteAlertMessage = useString('amity_chat_delete_alert_message');
+  const deleteConfirm = useString('amity_chat_option_delete');
+  const cancelLabel = useString('amity_chat_cancel');
+  const { deleteMessage } = useDeleteMessage({
+    onError: (errorMsg) => error({ content: errorMsg }),
+  });
+
+  function requestDelete(
+    message: Amity.Message,
+    options?: RequestDeleteOptions
+  ) {
+    const messageId = message.messageId;
+    // Web bails before showing the confirm when there is no id (synthetic /
+    // not-yet-synced message) — callers handle those locally.
+    if (!messageId) return;
+
+    Alert.alert(deleteAlertTitle, deleteAlertMessage, [
+      { text: cancelLabel, style: 'cancel' },
+      {
+        text: deleteConfirm,
+        style: 'destructive',
+        onPress: async () => {
+          try {
+            await deleteMessage(messageId);
+            options?.afterDelete?.();
+          } catch {
+            // useDeleteMessage's onError already raised the toast.
+          }
+        },
+      },
+    ]);
+  }
+
+  return { requestDelete };
+}