add server search support

amnet-native/app/ServerManager.tsx

@@ -1,6 +1,6 @@
 import {Paragraph} from "react-native-paper";
-import React, {useCallback, useMemo} from "react";
-import {FlatList, Text, View} from "react-native";
+import React, {ReactEventHandler, useCallback, useEffect, useMemo, useState} from "react";
+import {FlatList, NativeSyntheticEvent, NativeUIEvent, Text, View} from "react-native";
 import {Globe, History, ServerOff} from "lucide-react-native";
 import {EmptyStatePlaceholder} from "../components/EmptyStatePlaceholder";
 import {AMUICard, AMUICardDetail} from "../components/AMUICard";
@@ -8,7 +8,7 @@ import TimeAgo from "../components/TimeAgo";
 
 import RealmContext from "../models/RealmContext";
 import {AMServer} from "../models/AMServer";
-import ContextMenu from "react-native-context-menu-view";
+import ContextMenu, {ContextMenuOnPressNativeEvent} from "react-native-context-menu-view";
 
 const {useRealm, useQuery} = RealmContext;
 
@@ -20,12 +20,12 @@ function ServerCard(props: { server: AMServer, navigation: any }) {
         });
     }, [props.navigation, props.server]);
 
-    const pageContextMenuCallback = useCallback((action) => {
+    const pageContextMenuCallback = useCallback((action: NativeSyntheticEvent<ContextMenuOnPressNativeEvent>) => {
         switch (action.nativeEvent.index) {
             case 0:
                 pageCallback();
                 break;
-                
+
             case 1:
                 realm.write(() => {
                     realm.delete(props.server);
@@ -33,7 +33,7 @@ function ServerCard(props: { server: AMServer, navigation: any }) {
                 break;
         }
     }, [realm, props.server]);
-    
+
     return (
         <ContextMenu onPress={pageContextMenuCallback} actions={[
             {title: `Select ${props.server.serverName}`, systemIcon: "chevron.right"},
@@ -58,23 +58,43 @@ function ServerCard(props: { server: AMServer, navigation: any }) {
 }
 
 export default function ServerManager({navigation}) {
+    const [searchQuery, setSearchQuery] = useState('');
+
     const query = useQuery(AMServer);
-    const servers = useMemo(() => query.sorted("lastUsed"), [query]);
+    const servers = useMemo(() => {
+        let q = query;
+
+        if (searchQuery !== '') {
+            q = q.filtered("serverName CONTAINS[c] $0 OR serverAddress CONTAINS[c] $0", searchQuery);
+        }
+
+        return q.sorted("lastUsed");
+    }, [query, searchQuery]);
+    
+    // use effect to allow using the search bar
+    useEffect(() => {
+        navigation.setOptions({
+            headerSearchBarOptions: {
+                value: searchQuery,
+                onChangeText: e => setSearchQuery(e.nativeEvent.text)
+            },
+        })
+    }, [navigation, setSearchQuery]);
+    
 
     if (!servers.length) {
         return (
-            <View style={{display: "flex", flex: 1, gap: 15, justifyContent: "center", alignItems: "center"}}>
-                <EmptyStatePlaceholder message="No servers added yet" icon={<ServerOff color="gray"/>}/>
+            <View style={{display: "flex", flex: 1, justifyContent: "center", alignItems: "center"}}>
+                <EmptyStatePlaceholder message="No servers found" icon={<ServerOff color="gray"/>}/>
             </View>
         );
     }
-    
-    
+
     return (
         <FlatList contentInsetAdjustmentBehavior="always"
-                  style={{padding: 16, paddingTop: 24}}
                   data={servers}
                   keyExtractor={i => i._id.toString()}
+                  style={{padding: 16, paddingTop: 24}}
                   contentContainerStyle={{paddingBottom: 40}}
                   ItemSeparatorComponent={() => <View style={{height: 15}}/>}
                   renderItem={i => <ServerCard navigation={navigation} server={i.item}/>}/>