From ae12bf4ffbe883d9d9986592b54323183815d8e2 Mon Sep 17 00:00:00 2001
From: Roland Osborne <rolandosborne@gmail.com>
Date: Fri, 6 Oct 2023 14:44:27 -0700
Subject: [PATCH] fix card sort and filter

---
 app/mobile/src/session/cards/Cards.jsx        | 23 +++++++++++++++++++
 app/mobile/src/session/cards/useCards.hook.js | 10 ++++----
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/app/mobile/src/session/cards/Cards.jsx b/app/mobile/src/session/cards/Cards.jsx
index 47cccd5f..9344a32c 100644
--- a/app/mobile/src/session/cards/Cards.jsx
+++ b/app/mobile/src/session/cards/Cards.jsx
@@ -57,6 +57,29 @@ export function Cards({ navigation, openContact, openRegistry, addChannel }) {
 
   return (
     <View style={styles.container}>
+      <View style={styles.title}>
+        { state.sort && (
+          <TouchableOpacity style={styles.sort} onPress={() => actions.setSort(false)}>
+            <MatIcons style={styles.icon} name="sort-ascending" size={24} color={Colors.text} />
+          </TouchableOpacity>
+        )}
+        { !state.sort && (
+          <TouchableOpacity style={styles.sort} onPress={() => actions.setSort(true)}>
+            <MatIcons style={styles.icon} name="sort-ascending" size={24} color={Colors.unsetText} />
+          </TouchableOpacity>
+        )}
+        <View style={styles.inputwrapper}>
+          <AntIcons style={styles.icon} name="search1" size={16} color={Colors.inputPlaceholder} />
+          <TextInput placeholder={ state.strings.contactFilter } placeholderTextColor={Colors.inputPlaceholder} value={state.filter}
+              style={styles.inputfield} autoCapitalize={'none'} spellCheck={false} onChangeText={actions.setFilter} />
+          <View style={styles.space} />
+        </View>
+        <TouchableOpacity style={styles.add} onPress={() => openRegistry(navigation)}>
+          <AntIcons name={'adduser'} size={16} color={Colors.primaryButtonText} style={[styles.box, { transform: [ { rotateY: "180deg" }, ]} ]}/>
+          <Text style={styles.newtext}>{ state.strings.add }</Text>
+        </TouchableOpacity>
+      </View>
+
       { state.cards.length == 0 && (
         <View style={styles.notfound}>
           <Text style={styles.notfoundtext}>{ state.strings.noContacts }</Text>
diff --git a/app/mobile/src/session/cards/useCards.hook.js b/app/mobile/src/session/cards/useCards.hook.js
index 9bcb6855..02ec46f3 100644
--- a/app/mobile/src/session/cards/useCards.hook.js
+++ b/app/mobile/src/session/cards/useCards.hook.js
@@ -5,7 +5,7 @@ import { AccountContext } from 'context/AccountContext';
 import { ProfileContext } from 'context/ProfileContext';
 import { getLanguageStrings } from 'constants/Strings';
 
-export function useCards(filter, sort) {
+export function useCards() {
 
   const [state, setState] = useState({
     cards: [],
@@ -58,10 +58,10 @@ export function useCards(filter, sort) {
       if (item.blocked) {
         return false;
       }
-      if (!filter) {
+      if (!state.filter) {
         return true;
       }
-      const lower = filter.toLowerCase();
+      const lower = state.filter.toLowerCase();
       if (item.name) {
         if (item.name.toLowerCase().includes(lower)) {
           return true;
@@ -74,7 +74,7 @@ export function useCards(filter, sort) {
       }
       return false;
     })
-    if (sort) {
+    if (state.sort) {
       filtered.sort((a, b) => {
         const aName = a?.name?.toLowerCase();
         const bName = b?.name?.toLowerCase();
@@ -99,7 +99,7 @@ export function useCards(filter, sort) {
       });
     }
     updateState({ cards: filtered }); 
-  }, [card, filter, sort]);
+  }, [card, state.filter, state.sort]);
 
   const actions = {
     call: async (card) => {