be-components 7.7.2 → 7.7.4

package/src/NotificationManager/components/shared/GroupSelector.tsx

@@ -1,14 +1,16 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { FlatList, TouchableOpacity, ActivityIndicator } from 'react-native';
-import { View, Text, Button } from '../../../Components/Themed';
+import { View, Text, Button, TextInput } from '../../../Components/Themed';
 import { useColors } from '../../../constants/useColors';
+import { NotificationApi } from '../../api';
+import Pagination from '../../../Components/Pagination';
 import type { NotificationGroupProps, FocusPositionProps } from '../../../types';
 
 interface GroupSelectorProps {
     visible: boolean;
     onClose: () => void;
     onSelectGroup: (group: NotificationGroupProps) => void;
-    groups: NotificationGroupProps[];
+    groups?: NotificationGroupProps[]; // Optional: if provided, will use these instead of fetching
     loading?: boolean;
     selectedGroup?: NotificationGroupProps | null;
     showCustomOption?: boolean;
@@ -20,14 +22,65 @@ const GroupSelector = ({
     visible,
     onClose,
     onSelectGroup,
-    groups,
-    loading = false,
+    groups: externalGroups,
+    loading: externalLoading = false,
     selectedGroup,
     showCustomOption = true,
     customGroup
 }: GroupSelectorProps) => {
     const Colors = useColors();
 
+    // Internal state for fetching groups when not provided externally
+    const [internalGroups, setInternalGroups] = useState<NotificationGroupProps[]>([]);
+    const [internalLoading, setInternalLoading] = useState(false);
+
+    // Pagination state
+    const [currentPage, setCurrentPage] = useState(0);
+    const pageSize = 20;
+    const [hasMore, setHasMore] = useState(false);
+
+    // Search state
+    const [searchQuery, setSearchQuery] = useState('');
+
+    // Determine if we're using external or internal groups
+    const useExternalGroups = externalGroups !== undefined;
+    const groups = useExternalGroups ? externalGroups : internalGroups;
+    const loading = useExternalGroups ? externalLoading : internalLoading;
+
+    // Load groups when modal opens or search/page changes (only if not using external groups)
+    useEffect(() => {
+        if (visible && !useExternalGroups) {
+            loadGroups();
+        }
+    }, [visible, searchQuery, currentPage, useExternalGroups]);
+
+    // Reset state when modal opens
+    useEffect(() => {
+        if (visible) {
+            setSearchQuery('');
+            setCurrentPage(0);
+        }
+    }, [visible]);
+
+    const loadGroups = async () => {
+        setInternalLoading(true);
+        const offset = currentPage * pageSize;
+        const fetchedGroups = await NotificationApi.getNotificationGroupsByStatus(
+            'active',
+            pageSize,
+            offset,
+            searchQuery || undefined
+        );
+        setHasMore(fetchedGroups.length === pageSize);
+        setInternalGroups(fetchedGroups);
+        setInternalLoading(false);
+    };
+
+    const handleSearchChange = (text: string) => {
+        setSearchQuery(text);
+        setCurrentPage(0); // Reset to first page when search changes
+    };
+
     if (!visible) return null;
 
     // Combine custom group with regular groups if enabled
@@ -35,6 +88,14 @@ const GroupSelector = ({
         ? [customGroup, ...groups]
         : groups;
 
+    // For external groups, filter by search query client-side
+    const displayGroups = useExternalGroups && searchQuery
+        ? allGroups.filter(g =>
+            g.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+            (g.description && g.description.toLowerCase().includes(searchQuery.toLowerCase()))
+          )
+        : allGroups;
+
     return (
         <View type='blur' style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, padding: 20 }}>
             <View float style={{ flex: 1 }}>
@@ -44,6 +105,13 @@ const GroupSelector = ({
                         <Text theme='description' style={{ marginTop: 3 }}>Select a group to send to</Text>
                     </View>
                 </View>
+                <View style={{ padding: 10, borderBottomWidth: 1, borderColor: Colors.borders.light }}>
+                    <TextInput
+                        placeholder="Search groups..."
+                        value={searchQuery}
+                        onChangeText={handleSearchChange}
+                    />
+                </View>
                 <View style={{ flex: 1 }}>
                     {loading ? (
                         <View style={{ padding: 40, alignItems: 'center' }}>
@@ -51,7 +119,7 @@ const GroupSelector = ({
                         </View>
                     ) : (
                         <FlatList
-                            data={allGroups}
+                            data={displayGroups}
                             keyExtractor={(item) => item.notification_group_id}
                             renderItem={({ item }) => {
                                 const isSelected = selectedGroup?.notification_group_id === item.notification_group_id;
@@ -114,6 +182,15 @@ const GroupSelector = ({
                         />
                     )}
                 </View>
+                {!loading && !useExternalGroups && groups.length > 0 && (
+                    <View style={{ padding: 10, borderTopWidth: 1, borderColor: Colors.borders.light }}>
+                        <Pagination
+                            offset={currentPage}
+                            onPrevious={currentPage > 0 ? () => setCurrentPage(p => p - 1) : undefined}
+                            onNext={hasMore ? () => setCurrentPage(p => p + 1) : undefined}
+                        />
+                    </View>
+                )}
                 <View type='footer' style={{ flexDirection: 'row', alignItems: 'center', padding: 10, borderBottomRightRadius: 8, borderBottomLeftRadius: 8 }}>
                     <Button
                         style={{ flex: 1 }}

package/src/NotificationManager/index.tsx

@@ -6,6 +6,7 @@ import { NotificationApi, NotificationHelpers } from './api';
 import type { PlayerNotificationProps, MyPlayerProps, NotificationGroupProps, FocusPositionProps } from '../types';
 import { Icons } from '../Components';
 import DropDown from '../Components/Dropdown';
+import Pagination from '../Components/Pagination';
 import { showConfirmAlert } from '../Components/ConfirmAlert';
 
 type NotificationManagerProps = {
@@ -54,6 +55,14 @@ const NotificationManager = ({
     const [customGroupCsv, setCustomGroupCsv] = useState('');
     const [sendingProgress, setSendingProgress] = useState<{ current: number; total: number } | null>(null);
 
+    // Pagination state for group selector
+    const [groupsCurrentPage, setGroupsCurrentPage] = useState(0);
+    const groupsPageSize = 20;
+    const [groupsHasMore, setGroupsHasMore] = useState(false);
+
+    // Search state for group selector
+    const [groupSearchQuery, setGroupSearchQuery] = useState('');
+
     // Create a custom group (always available, even if player_ids is empty)
     const customGroup: NotificationGroupProps = {
         notification_group_id: 'custom_group',
@@ -105,11 +114,36 @@ const NotificationManager = ({
 
     const loadNotificationGroups = async () => {
         setLoadingGroups(true);
-        const groups = await NotificationApi.getActiveNotificationGroups();
+        const offset = groupsCurrentPage * groupsPageSize;
+        const groups = await NotificationApi.getNotificationGroupsByStatus(
+            'active',
+            groupsPageSize,
+            offset,
+            groupSearchQuery || undefined
+        );
+        setGroupsHasMore(groups.length === groupsPageSize);
         setNotificationGroups(groups);
         setLoadingGroups(false);
     };
 
+    // Reload groups when search or page changes
+    useEffect(() => {
+        if (showGroupsModal) {
+            loadNotificationGroups();
+        }
+    }, [groupSearchQuery, groupsCurrentPage, showGroupsModal]);
+
+    const handleGroupSearchChange = (text: string) => {
+        setGroupSearchQuery(text);
+        setGroupsCurrentPage(0); // Reset to first page when search changes
+    };
+
+    const handleOpenGroupsModal = () => {
+        setGroupSearchQuery('');
+        setGroupsCurrentPage(0);
+        setShowGroupsModal(true);
+    };
+
     const handleSelectGroup = async (group_id: string) => {
         setLoadingGroups(true);
 
@@ -444,10 +478,7 @@ const NotificationManager = ({
                                 </View>
                                 <Button
                                     type="action"
-                                    onPress={() => {
-                                        loadNotificationGroups();
-                                        setShowGroupsModal(true);
-                                    }}
+                                    onPress={handleOpenGroupsModal}
                                     style={{ padding: 8 }}
                                 >
                                     <Text theme="h1" color={Colors.text.white}>
@@ -806,6 +837,13 @@ const NotificationManager = ({
                                 <Text theme='description' style={{ marginTop:3 }}>Select a group to send to</Text>
                             </View>
                         </View>
+                        <View style={{ padding: 10, borderBottomWidth: 1, borderColor: Colors.borders.light }}>
+                            <TextInput
+                                placeholder="Search groups..."
+                                value={groupSearchQuery}
+                                onChangeText={handleGroupSearchChange}
+                            />
+                        </View>
                         <View style={{flex:1}}>
                             {loadingGroups ? (
                                 <View style={{ padding: 40, alignItems: 'center' }}>
@@ -866,6 +904,15 @@ const NotificationManager = ({
                                 />
                             )}
                         </View>
+                        {!loadingGroups && notificationGroups.length > 0 && (
+                            <View style={{ padding: 10, borderTopWidth: 1, borderColor: Colors.borders.light }}>
+                                <Pagination
+                                    offset={groupsCurrentPage}
+                                    onPrevious={groupsCurrentPage > 0 ? () => setGroupsCurrentPage(p => p - 1) : undefined}
+                                    onNext={groupsHasMore ? () => setGroupsCurrentPage(p => p + 1) : undefined}
+                                />
+                            </View>
+                        )}
                         <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
                             <Button
                                 style={{ flex:1 }}