Fix too many updates issue with useFavorites + ui changes

1 files changed, 27 insertions, 10 deletions

diff --git a/src/screens/AppList.tsx b/src/screens/AppList.tsx
index ec83124..81c8f4f 100644
--- a/src/screens/AppList.tsx
+++ b/src/screens/AppList.tsx
@@ -1,12 +1,18 @@
 import {matchSorter} from 'match-sorter';
-import React, {useMemo, useState} from 'react';
+import React, {useEffect, useMemo, useRef, useState} from 'react';
 import {ScrollView, Text, TextInput, View} from 'react-native';
 import {AppDetail} from 'react-native-launcher-kit/typescript/Interfaces/InstalledApps';
+import {useFavorites} from '../hooks/useFavorites';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import Icon from 'react-native-vector-icons/MaterialIcons';
 
-export const AppList: React.FC<{apps: AppDetail[]; screenIndex: number}> = ({
+export const AppList: React.FC<{apps: AppDetail[]; isActive: boolean}> = ({
   apps,
-  screenIndex,
+  isActive,
 }) => {
+  const {addToFavorites} = useFavorites();
+
+  const textInputRef = useRef<TextInput>(null);
   const [searchText, setSearchText] = useState('');
 
   const filteredApps = useMemo(() => {
@@ -15,14 +21,22 @@ export const AppList: React.FC<{apps: AppDetail[]; screenIndex: number}> = ({
     return matchSorter(apps, searchText, {keys: ['label', 'packageName']});
   }, [apps, searchText]);
 
+  // Autofocus
+  useEffect(() => {
+    if (!textInputRef.current) return;
+    if (isActive) TextInput.State.focusTextInput(textInputRef.current);
+  }, [isActive]);
+
   return (
     <View>
-      <View>
+      <View className="flex justify-between flex-row items-center gap-2">
+        <Icon name="search" size={21} color="#aaa" />
         <TextInput
-          key={screenIndex}
-          autoFocus
+          ref={textInputRef}
+          autoFocus={false}
           autoCorrect={false}
           value={searchText}
+          className="flex-1"
           onChangeText={setSearchText}
         />
       </View>
@@ -31,10 +45,13 @@ export const AppList: React.FC<{apps: AppDetail[]; screenIndex: number}> = ({
         <View className="flex-1">
           {filteredApps.map((app, index) => (
             <View className="mt-4 px-4" key={app.packageName + index}>
-              <Text className="text-md font-bold dark:text-white">
-                {app.label}
-              </Text>
-              <Text className="text-xs">{app.packageName}</Text>
+              <TouchableOpacity
+                onLongPress={() => addToFavorites(app.packageName)}>
+                <Text className="text-md font-bold dark:text-white">
+                  {app.label}
+                </Text>
+                <Text className="text-xs">{app.packageName}</Text>
+              </TouchableOpacity>
             </View>
           ))}
         </View>