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

package/src/chat/hooks/useMention.ts

@@ -1,163 +0,0 @@
-// useMention — RN port of AmityUiKitWeb v4/chat/hooks/useMention +
-// useChannelMentionSuggestion. Web relies on Lexical typeahead plugins; here the
-// hook is search-only and feeds the composer's mention overlay. Given an
-// `@query`, it searches channel members (ChannelRepository.Membership.searchMembers)
-// when a channelId is provided, otherwise all users
-// (UserRepository.searchUserByDisplayName), and returns suggestions the composer
-// maps into a TextEditor mention via `toMention`.
-//
-// SDK live collections need a connected client, so every subscription is gated
-// on useAuth().isConnected (same pattern as collections/useChannelsCollection).
-
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import {
-  ChannelRepository,
-  UserRepository,
-} from '@amityco/ts-sdk-react-native';
-
-import useAuth from '../../core/hooks/useAuth';
-import { resolveString } from '../../core/localization';
-
-export type MentionSuggestion = {
-  userId: string;
-  display: string;
-  avatarUrl?: string;
-  type: 'user' | 'channel';
-};
-
-export type UseMentionParams = {
-  /** Channel to scope member search to. Falls back to global user search when unset. */
-  channelId?: string;
-  /** Include the `@all` channel mention option (web gates this on moderator role). */
-  includeChannelMention?: boolean;
-  limit?: number;
-};
-
-export type UseMentionResult = {
-  query: string | null;
-  setQuery: (query: string | null) => void;
-  suggestions: MentionSuggestion[];
-  isSearching: boolean;
-  reset: () => void;
-  /** Map a picked suggestion into the shape TextEditor.insertMention expects. */
-  toMention: (suggestion: MentionSuggestion) => {
-    userId: string;
-    display: string;
-    type: 'user' | 'channel';
-  };
-};
-
-const DEFAULT_LIMIT = 20;
-const CHANNEL_ALL_ID = 'all';
-
-function isNonNullable<T>(value: T | null | undefined): value is T {
-  return value != null;
-}
-
-export function useMention({
-  channelId,
-  includeChannelMention = false,
-  limit = DEFAULT_LIMIT,
-}: UseMentionParams = {}): UseMentionResult {
-  const { isConnected } = useAuth();
-  const [query, setQuery] = useState<string | null>(null);
-  const [users, setUsers] = useState<MentionSuggestion[]>([]);
-  const [isSearching, setIsSearching] = useState(false);
-  const unsubRef = useRef<(() => void) | undefined>(undefined);
-
-  useEffect(() => {
-    // No active `@query` → nothing to search; tear down any live subscription.
-    if (query === null || !isConnected) {
-      unsubRef.current?.();
-      unsubRef.current = undefined;
-      setUsers([]);
-      setIsSearching(false);
-      return undefined;
-    }
-
-    setIsSearching(true);
-    // Web treats an empty / bare `@` query as "no keyword" (list default members).
-    const keyword = query.trim() === '' ? undefined : query.trim();
-
-    unsubRef.current?.();
-
-    if (channelId) {
-      unsubRef.current = ChannelRepository.Membership.searchMembers(
-        { channelId, search: keyword, memberships: ['member'], limit },
-        ({ data, loading }) => {
-          if (loading) return;
-          setUsers(
-            data
-              .map((member) => ({
-                userId: member.user?.userId ?? member.userId,
-                display:
-                  member.user?.displayName ??
-                  member.user?.userId ??
-                  member.userId,
-                avatarUrl: member.user?.avatarCustomUrl,
-                type: 'user' as const,
-              }))
-              .filter((s) => isNonNullable(s.userId))
-          );
-          setIsSearching(false);
-        }
-      );
-    } else {
-      unsubRef.current = UserRepository.searchUserByDisplayName(
-        { displayName: keyword ?? '', limit },
-        ({ data, loading }) => {
-          if (loading) return;
-          setUsers(
-            data.map((user) => ({
-              userId: user.userId,
-              display: user.displayName ?? user.userId,
-              avatarUrl: user.avatarCustomUrl,
-              type: 'user' as const,
-            }))
-          );
-          setIsSearching(false);
-        }
-      );
-    }
-
-    return () => {
-      unsubRef.current?.();
-      unsubRef.current = undefined;
-    };
-  }, [query, channelId, isConnected, limit]);
-
-  const suggestions = useMemo<MentionSuggestion[]>(() => {
-    // Prepend @all for group channels when enabled and the query matches "all".
-    const showAll =
-      includeChannelMention &&
-      channelId != null &&
-      (query === '' || /^al*l*$/i.test(query ?? ''));
-
-    if (!showAll) return users;
-    return [
-      {
-        userId: CHANNEL_ALL_ID,
-        display: resolveString('amity_chat_tab_all'),
-        type: 'channel' as const,
-      },
-      ...users,
-    ];
-  }, [users, includeChannelMention, channelId, query]);
-
-  const reset = useCallback(() => {
-    setQuery(null);
-    setUsers([]);
-    setIsSearching(false);
-  }, []);
-
-  const toMention = useCallback(
-    (suggestion: MentionSuggestion) => ({
-      userId: suggestion.userId,
-      display: suggestion.display,
-      type: suggestion.type,
-    }),
-    []
-  );
-
-  return { query, setQuery, suggestions, isSearching, reset, toMention };
-}

package/src/chat/hooks/useNetworkOnline.ts

@@ -1,29 +0,0 @@
-// useNetworkOnline — RN replacement for AmityUiKitWeb's `react-use`
-// `useNetworkState().online`, backed by `@react-native-community/netinfo`
-// (already a repo dependency; see elements/WaitingForNetwork).
-//
-// Returns `{ online: boolean }`. NetInfo's `isConnected` is `null` until the
-// first callback, so we default to `true` and only flip to `false` on an explicit
-// disconnect — mirroring web's `online !== false` guard and avoiding an
-// offline flash on mount.
-
-import { useEffect, useState } from 'react';
-
-import NetInfo from '@react-native-community/netinfo';
-
-export type UseNetworkOnlineReturn = {
-  online: boolean;
-};
-
-export function useNetworkOnline(): UseNetworkOnlineReturn {
-  const [online, setOnline] = useState(true);
-
-  useEffect(() => {
-    const unsubscribe = NetInfo.addEventListener((state) => {
-      setOnline(state.isConnected !== false);
-    });
-    return () => unsubscribe();
-  }, []);
-
-  return { online };
-}

package/src/chat/hooks/useVideoFileUrl.ts

@@ -1,31 +0,0 @@
-// useVideoFileUrl — resolve an SDK video fileId to its RAW playable URL.
-// The shared `useFile` hook always runs `fileUrlWithSize`, which is an image-CDN
-// transform; for video we need the untouched `fileUrl` (the same source string the
-// existing RN VideoFeed/VideoPlayer screens feed to react-native-video). Mirrors web
-// VideoPlayer/VideoBubble, which read `video?.fileUrl` directly.
-
-import { useEffect, useState } from 'react';
-import { FileRepository } from '@amityco/ts-sdk-react-native';
-
-export function useVideoFileUrl(fileId?: string): string | undefined {
-  const [url, setUrl] = useState<string | undefined>(undefined);
-
-  useEffect(() => {
-    let cancelled = false;
-    async function run() {
-      if (!fileId) {
-        setUrl(undefined);
-        return;
-      }
-      const file = await FileRepository.getFile(fileId);
-      if (cancelled || !file) return;
-      setUrl(file.data.fileUrl);
-    }
-    run();
-    return () => {
-      cancelled = true;
-    };
-  }, [fileId]);
-
-  return url;
-}

package/src/chat/pages/AmityAddGroupMemberPage/index.tsx

@@ -1,27 +0,0 @@
-// AmityAddGroupMemberPage — add members to an existing group.
-import { SafeAreaView } from 'react-native';
-import {
-  useNavigation,
-  useRoute,
-  type RouteProp,
-} from '@react-navigation/native';
-import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
-
-import type { RootStackParamList } from '../../../core/routes/RouteParamList';
-import { AddGroupMember } from '../../features/group/add-member';
-
-export default function AmityAddGroupMemberPage() {
-  const navigation =
-    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
-  const { params } =
-    useRoute<RouteProp<RootStackParamList, 'AmityAddGroupMemberPage'>>();
-
-  return (
-    <SafeAreaView style={{ flex: 1 }}>
-      <AddGroupMember
-        channelId={params.channelId}
-        onClose={() => navigation.goBack()}
-      />
-    </SafeAreaView>
-  );
-}

package/src/chat/pages/AmityArchivedChatPage/index.tsx

@@ -1,26 +0,0 @@
-// AmityArchivedChatPage — the navigation-destination wrapper for the archived
-// chats feature, ported from AmityUiKitWeb v4/chat/pages/ArchivedChatPage.
-// Mounts ArchivedChat inside a SafeAreaView (the feature owns its own Header +
-// back navigation via useChatNavigation).
-//
-// RN adaptations from web:
-//   - Web's `useAmityPage`/`themeStyles` wrapper → a plain themed SafeAreaView
-//     (matches AmityChatHomePage).
-
-// 1. React / RN imports
-import { SafeAreaView } from 'react-native';
-
-// 2. Internal imports (relative)
-import { ArchivedChat } from '../../features/archive';
-import { useStyles } from './styles';
-
-// 3. Named function component
-export default function AmityArchivedChatPage() {
-  const { styles } = useStyles();
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <ArchivedChat />
-    </SafeAreaView>
-  );
-}

package/src/chat/pages/AmityArchivedChatPage/styles.ts

@@ -1,18 +0,0 @@
-// Styles for AmityArchivedChatPage — the full-screen wrapper around ArchivedChat.
-
-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),
-    },
-  });
-
-  return { styles };
-};

package/src/chat/pages/AmityBannedGroupMemberListPage/index.tsx

@@ -1,27 +0,0 @@
-// AmityBannedGroupMemberListPage — banned members list (unban).
-import { SafeAreaView } from 'react-native';
-import {
-  useNavigation,
-  useRoute,
-  type RouteProp,
-} from '@react-navigation/native';
-import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
-
-import type { RootStackParamList } from '../../../core/routes/RouteParamList';
-import { BannedGroupMembers } from '../../features/group/banned-members';
-
-export default function AmityBannedGroupMemberListPage() {
-  const navigation =
-    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
-  const { params } =
-    useRoute<RouteProp<RootStackParamList, 'AmityBannedGroupMemberListPage'>>();
-
-  return (
-    <SafeAreaView style={{ flex: 1 }}>
-      <BannedGroupMembers
-        channelId={params.channelId}
-        onBack={() => navigation.goBack()}
-      />
-    </SafeAreaView>
-  );
-}

package/src/chat/pages/AmityChannelCreateConversationPage/index.tsx

@@ -1,21 +0,0 @@
-// AmityChannelCreateConversationPage — navigation destination that hosts the
-// create-conversation flow. Mirrors AmityUiKitWeb ChannelCreateConversationPage
-// and the sibling AmityChatPage wrapper pattern (SafeAreaView + feature entry).
-
-// 1. React / RN imports
-import { SafeAreaView } from 'react-native';
-
-// 2. Internal imports (relative)
-import { CreateConversation } from '../../features/conversation/create';
-import { useStyles } from './styles';
-
-// 3. Named function component
-export default function AmityChannelCreateConversationPage() {
-  const { styles } = useStyles();
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <CreateConversation />
-    </SafeAreaView>
-  );
-}

package/src/chat/pages/AmityChannelCreateConversationPage/styles.ts

@@ -1,16 +0,0 @@
-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),
-    },
-  });
-
-  return { styles, token };
-};

package/src/chat/pages/AmityChatHomePage/index.tsx

@@ -1,39 +0,0 @@
-// AmityChatHomePage — the navigation-destination wrapper for the chat home
-// (channel list). It mounts ChatHome inside a SafeAreaView and wires row presses
-// to React Navigation. The target `AmityChatPage` route is not registered yet;
-// AmityChatPage is registered in the navigator (M2); pressing a row opens the thread.
-
-// 1. React / RN imports
-import { SafeAreaView } from 'react-native';
-
-// 2. Third-party imports
-import { useNavigation } from '@react-navigation/native';
-import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
-
-// 3. Internal imports (relative)
-import { ChatHome } from '../../features/home';
-import { useStyles } from './styles';
-
-// 4. Named function component
-export default function AmityChatHomePage() {
-  const { styles } = useStyles();
-  const navigation = useNavigation<NativeStackNavigationProp<any>>();
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <ChatHome
-        onChannelPress={(channelId, displayName, type) =>
-          type === 'community'
-            ? navigation.navigate('AmityGroupChatPage', { channelId })
-            : navigation.navigate('AmityChatPage', {
-                channelId,
-                userDisplayName: displayName,
-              })
-        }
-        onCreatePress={() =>
-          navigation.navigate('AmityChannelCreateConversationPage')
-        }
-      />
-    </SafeAreaView>
-  );
-}

package/src/chat/pages/AmityChatHomePage/styles.ts

@@ -1,18 +0,0 @@
-// Styles for AmityChatHomePage — the full-screen wrapper around ChatHome.
-
-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.SurfaceListDefaultDefault),
-    },
-  });
-
-  return { styles };
-};

package/src/chat/pages/AmityChatPage/index.tsx

@@ -1,37 +0,0 @@
-// AmityChatPage — navigation destination for a conversation thread. Reads the
-// channelId + display name from the route and renders the Chat container, wiring
-// the header back button to navigation.goBack. Mirrors AmityUiKitWeb ChatPage.
-
-// 1. React / RN imports
-import { SafeAreaView } from 'react-native';
-
-// 2. Third-party imports
-import {
-  useNavigation,
-  useRoute,
-  type RouteProp,
-} from '@react-navigation/native';
-import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
-
-// 3. Internal imports (relative)
-import type { RootStackParamList } from '../../../core/routes/RouteParamList';
-import { Chat } from '../../features/conversation';
-import { useStyles } from './styles';
-
-// 4. Named function component
-export default function AmityChatPage() {
-  const { styles } = useStyles();
-  const navigation =
-    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
-  const { params } = useRoute<RouteProp<RootStackParamList, 'AmityChatPage'>>();
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <Chat
-        channelId={params.channelId}
-        userDisplayName={params.userDisplayName}
-        onBack={() => navigation.goBack()}
-      />
-    </SafeAreaView>
-  );
-}

package/src/chat/pages/AmityChatPage/styles.ts

@@ -1,16 +0,0 @@
-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),
-    },
-  });
-
-  return { styles, token };
-};

package/src/chat/pages/AmityCreateGroupChatPage/index.tsx

@@ -1,17 +0,0 @@
-// AmityCreateGroupChatPage — name/avatar/privacy for a new group (step 2 of create).
-import { SafeAreaView } from 'react-native';
-import { useRoute, type RouteProp } from '@react-navigation/native';
-
-import type { RootStackParamList } from '../../../core/routes/RouteParamList';
-import { CreateGroupChat } from '../../features/group/create';
-
-export default function AmityCreateGroupChatPage() {
-  const { params } =
-    useRoute<RouteProp<RootStackParamList, 'AmityCreateGroupChatPage'>>();
-
-  return (
-    <SafeAreaView style={{ flex: 1 }}>
-      <CreateGroupChat selectedUsers={params.selectedUsers} />
-    </SafeAreaView>
-  );
-}

package/src/chat/pages/AmityEditGroupMemberPermissionsPage/index.tsx

@@ -1,19 +0,0 @@
-// AmityEditGroupMemberPermissionsPage — who can send messages (everyone / moderators).
-import { SafeAreaView } from 'react-native';
-import { useRoute, type RouteProp } from '@react-navigation/native';
-
-import type { RootStackParamList } from '../../../core/routes/RouteParamList';
-import { EditGroupMemberPermissions } from '../../features/group/edit-permission';
-
-export default function AmityEditGroupMemberPermissionsPage() {
-  const { params } =
-    useRoute<
-      RouteProp<RootStackParamList, 'AmityEditGroupMemberPermissionsPage'>
-    >();
-
-  return (
-    <SafeAreaView style={{ flex: 1 }}>
-      <EditGroupMemberPermissions channelId={params.channelId} />
-    </SafeAreaView>
-  );
-}

package/src/chat/pages/AmityEditGroupNotificationPage/index.tsx

@@ -1,26 +0,0 @@
-// AmityEditGroupNotificationPage — the notification-mode radio screen
-// (default / silent / subscribe). Ported from AmityUiKitWeb
-// v4/chat/pages/EditGroupNotificationPage.
-//
-// RN adaptation: the route is not yet registered in RouteParamList (the
-// orchestrator wires it), so the channelId param is typed locally to keep this
-// file compiling independently.
-import { SafeAreaView } from 'react-native';
-import { useRoute, type RouteProp } from '@react-navigation/native';
-
-import { EditGroupNotification } from '../../features/group/edit-notification';
-
-type ParamList = {
-  AmityEditGroupNotificationPage: { channelId: string };
-};
-
-export default function AmityEditGroupNotificationPage() {
-  const { params } =
-    useRoute<RouteProp<ParamList, 'AmityEditGroupNotificationPage'>>();
-
-  return (
-    <SafeAreaView style={{ flex: 1 }}>
-      <EditGroupNotification channelId={params.channelId} />
-    </SafeAreaView>
-  );
-}

package/src/chat/pages/AmityEditGroupProfilePage/index.tsx

@@ -1,17 +0,0 @@
-// AmityEditGroupProfilePage — edit group name + avatar.
-import { SafeAreaView } from 'react-native';
-import { useRoute, type RouteProp } from '@react-navigation/native';
-
-import type { RootStackParamList } from '../../../core/routes/RouteParamList';
-import { EditGroupProfile } from '../../features/group/edit-profile';
-
-export default function AmityEditGroupProfilePage() {
-  const { params } =
-    useRoute<RouteProp<RootStackParamList, 'AmityEditGroupProfilePage'>>();
-
-  return (
-    <SafeAreaView style={{ flex: 1 }}>
-      <EditGroupProfile channelId={params.channelId} />
-    </SafeAreaView>
-  );
-}

package/src/chat/pages/AmityGroupChatPage/index.tsx

@@ -1,28 +0,0 @@
-// AmityGroupChatPage — navigation destination for a group (community) conversation.
-import { SafeAreaView } from 'react-native';
-import {
-  useNavigation,
-  useRoute,
-  type RouteProp,
-} from '@react-navigation/native';
-import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
-
-import type { RootStackParamList } from '../../../core/routes/RouteParamList';
-import { GroupChat } from '../../features/group/chat';
-
-export default function AmityGroupChatPage() {
-  const navigation =
-    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
-  const { params } =
-    useRoute<RouteProp<RootStackParamList, 'AmityGroupChatPage'>>();
-
-  return (
-    <SafeAreaView style={{ flex: 1 }}>
-      <GroupChat
-        channelId={params.channelId}
-        isJustCreated={params.isJustCreated}
-        onBack={() => navigation.goBack()}
-      />
-    </SafeAreaView>
-  );
-}

package/src/chat/pages/AmityGroupMemberListPage/index.tsx

@@ -1,32 +0,0 @@
-// AmityGroupMemberListPage — group members list (member/moderator tabs).
-import { SafeAreaView } from 'react-native';
-import {
-  useNavigation,
-  useRoute,
-  type RouteProp,
-} from '@react-navigation/native';
-import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
-
-import type { RootStackParamList } from '../../../core/routes/RouteParamList';
-import { GroupMembers } from '../../features/group/members';
-
-export default function AmityGroupMemberListPage() {
-  const navigation =
-    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
-  const { params } =
-    useRoute<RouteProp<RootStackParamList, 'AmityGroupMemberListPage'>>();
-
-  return (
-    <SafeAreaView style={{ flex: 1 }}>
-      <GroupMembers
-        channelId={params.channelId}
-        onBack={() => navigation.goBack()}
-        onAddMember={() =>
-          navigation.navigate('AmityAddGroupMemberPage', {
-            channelId: params.channelId,
-          })
-        }
-      />
-    </SafeAreaView>
-  );
-}

package/src/chat/pages/AmityGroupNotificationPreferencePage/index.tsx

@@ -1,25 +0,0 @@
-// AmityGroupNotificationPreferencePage — the "allow notifications" toggle screen.
-// Ported from AmityUiKitWeb v4/chat/pages/GroupNotificationPreferencePage.
-//
-// RN adaptation: the route is not yet registered in RouteParamList (the
-// orchestrator wires it), so the channelId param is typed locally to keep this
-// file compiling independently.
-import { SafeAreaView } from 'react-native';
-import { useRoute, type RouteProp } from '@react-navigation/native';
-
-import { NotificationPreference } from '../../features/group/notification-preference';
-
-type ParamList = {
-  AmityGroupNotificationPreferencePage: { channelId: string };
-};
-
-export default function AmityGroupNotificationPreferencePage() {
-  const { params } =
-    useRoute<RouteProp<ParamList, 'AmityGroupNotificationPreferencePage'>>();
-
-  return (
-    <SafeAreaView style={{ flex: 1 }}>
-      <NotificationPreference channelId={params.channelId} />
-    </SafeAreaView>
-  );
-}

package/src/chat/pages/AmityGroupSettingPage/index.tsx

@@ -1,17 +0,0 @@
-// AmityGroupSettingPage — group settings (members, edit profile, permissions, leave).
-import { SafeAreaView } from 'react-native';
-import { useRoute, type RouteProp } from '@react-navigation/native';
-
-import type { RootStackParamList } from '../../../core/routes/RouteParamList';
-import { GroupSetting } from '../../features/group/setting';
-
-export default function AmityGroupSettingPage() {
-  const { params } =
-    useRoute<RouteProp<RootStackParamList, 'AmityGroupSettingPage'>>();
-
-  return (
-    <SafeAreaView style={{ flex: 1 }}>
-      <GroupSetting channelId={params.channelId} />
-    </SafeAreaView>
-  );
-}