From 34b8c1f962a5c835351dc6f4369757259998af16 Mon Sep 17 00:00:00 2001
From: Akshay Nair <phenax5@gmail.com>
Date: Sat, 28 Sep 2024 22:19:31 +0530
Subject: Finish up app menu + fix drag interaction

---
 src/screens/AppList.tsx | 31 +++++++++++++++++--------------
 src/screens/Home.tsx    |  8 ++------
 2 files changed, 19 insertions(+), 20 deletions(-)

(limited to 'src/screens')

diff --git a/src/screens/AppList.tsx b/src/screens/AppList.tsx
index e6b3e6e..adb51b5 100644
--- a/src/screens/AppList.tsx
+++ b/src/screens/AppList.tsx
@@ -1,14 +1,24 @@
 import {matchSorter} from 'match-sorter';
 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 Icon from 'react-native-vector-icons/MaterialIcons';
 import {AppMenu} from '../components/AppMenu';
+import {useInstalledApps} from '../hooks/useInstalledApps';
+import {AppDetail} from 'react-native-launcher-kit/typescript/Interfaces/InstalledApps';
+
+const AppListItem: React.FC<{app: AppDetail}> = React.memo(({app}) => {
+  return (
+    <AppMenu app={app}>
+      <View className="px-4 py-2">
+        <Text className="text-md font-bold">{app.label}</Text>
+        <Text className="text-xs text-gray-600">{app.packageName}</Text>
+      </View>
+    </AppMenu>
+  );
+});
 
-export const AppList: React.FC<{apps: AppDetail[]; active: boolean}> = ({
-  apps,
-  active,
-}) => {
+export const AppList: React.FC<{active: boolean}> = React.memo(({active}) => {
+  const {apps} = useInstalledApps();
   const textInputRef = useRef<TextInput>(null);
   const [searchText, setSearchText] = useState('');
 
@@ -41,17 +51,10 @@ export const AppList: React.FC<{apps: AppDetail[]; active: boolean}> = ({
       <ScrollView contentInsetAdjustmentBehavior="automatic">
         <View className="flex-1">
           {filteredApps.map((app, index) => (
-            <AppMenu app={app} key={app.packageName + index}>
-              <View className="mt-4 px-4">
-                <Text className="text-md font-bold dark:text-white">
-                  {app.label}
-                </Text>
-                <Text className="text-xs">{app.packageName}</Text>
-              </View>
-            </AppMenu>
+            <AppListItem app={app} key={app.packageName + index} />
           ))}
         </View>
       </ScrollView>
     </View>
   );
-};
+});
diff --git a/src/screens/Home.tsx b/src/screens/Home.tsx
index 7bd1a3f..0d694c0 100644
--- a/src/screens/Home.tsx
+++ b/src/screens/Home.tsx
@@ -1,17 +1,13 @@
 import React from 'react';
 import {View} from 'react-native';
 import {Clock} from '../components/Clock';
-import {AppDetail} from 'react-native-launcher-kit/typescript/Interfaces/InstalledApps';
 import {Favorites} from '../components/Favorites';
 
-export const Home: React.FC<{apps: AppDetail[]; active: boolean}> = ({
-  apps,
-  active,
-}) => {
+export const Home: React.FC<{active: boolean}> = ({active}) => {
   return (
     <View>
       <Clock />
-      <Favorites apps={apps} active={active} />
+      <Favorites active={active} />
     </View>
   );
 };
-- 
cgit v1.3.1