added filter param to account listing

app/mobile/src/api/getListing.js

@@ -1,12 +1,8 @@
 import { checkResponse, fetchWithTimeout } from './fetchUtil';
 
-export async function getListing(server) {
+export async function getListing(server, filter) {
-  let host = "";
+  const param = filter ? `?filter=${filter}` : '';
-  if (server) {
+  let listing = await fetchWithTimeout(`https://${server}/account/listing${param}`, { method: 'GET' });
-    host = `https://${server}`;
-  }
-
-  let listing = await fetchWithTimeout(`${host}/account/listing`, { method: 'GET' });
   checkResponse(listing);
   return await listing.json();
 }

app/mobile/src/session/registry/Registry.jsx

@@ -24,10 +24,20 @@ export function RegistryTitle({ state, actions }) {
 
   return (
     <View style={styles.title}>
+      { !state.filter && (
+        <TouchableOpacity style={styles.sort} onPress={actions.filter}>
+          <Ionicons style={styles.icon} name="filter" size={18} color={Colors.disabled} />
+        </TouchableOpacity>
+      )}
+      { state.filter && (
+        <View style={styles.filterwrapper}>
+          <TextInput style={styles.inputfield} value={state.username} onChangeText={actions.setUsername}
+              autoCorrect={false} autoCapitalize="none" placeholderTextColor={Colors.disabled} placeholder="Username" />
+        </View>
+      )}
       <View style={styles.inputwrapper}>
         <TextInput style={styles.inputfield} value={state.server} onChangeText={actions.setServer}
             autoCorrect={false} autoCapitalize="none" placeholderTextColor={Colors.disabled} placeholder="Server" />
-        <View style={styles.space} />
       </View>
       { state.busy && (
         <View style={styles.search}>

app/mobile/src/session/registry/Registry.styled.js

@@ -40,6 +40,17 @@ export const styles = StyleSheet.create({
     paddingBottom: 8,
     alignItems: 'center',
   },
+  filterwrapper: {
+    display: 'flex',
+    flexDirection: 'row',
+    borderRadius: 4,
+    backgroundColor: Colors.white,
+    alignItems: 'center',
+    paddingTop: 4,
+    paddingBottom: 4,
+    marginLeft: 8,
+    width: '25%',
+  },
   inputwrapper: {
     display: 'flex',
     flexDirection: 'row',
@@ -100,8 +111,6 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
     padding: 8,
     borderRadius: 4,
-  },
-  newtext: {
     paddingLeft: 8,
     color: Colors.white,
   },

app/mobile/src/session/registry/useRegistry.hook.js

@@ -12,6 +12,8 @@ export function useRegistry() {
     tabbed: null,
     accounts: [],
     server: null,
+    filter: false,
+    username: null,
     busy: false,
   });
 
@@ -47,7 +49,13 @@ export function useRegistry() {
     if (!state.busy) {
       try {
         updateState({ busy: true });
-        const accounts = await getListing(server, true);
+        let accounts;
+        if (state.filter && state.username) {
+          accounts = await getListing(server, state.username);
+        }
+        else {
+          accounts = await getListing(server);
+        }
         const filtered = accounts.filter(item => {
           if (item.guid === profile.state.profile.guid) {
             return false;
@@ -74,7 +82,13 @@ export function useRegistry() {
     },
     search: async () => {
       await getAccounts(state.server, false);
-    }
+    },
+    filter: async () => {
+      updateState({ filter: true });
+    },
+    setUsername: async (username) => {
+      updateState({ username });
+    },
   };
 
   return { state, actions };