From 5d456899ea444301870e1d3c721d139c9251c531 Mon Sep 17 00:00:00 2001
From: Akshay Nair <phenax5@gmail.com>
Date: Fri, 27 Sep 2024 23:58:15 +0530
Subject: Fix too many updates issue with useFavorites + ui changes

---
 src/components/Favorites.tsx | 53 +++++++++++++++++++++-----------------------
 1 file changed, 25 insertions(+), 28 deletions(-)

(limited to 'src/components/Favorites.tsx')

diff --git a/src/components/Favorites.tsx b/src/components/Favorites.tsx
index 712a07f..85ab3c2 100644
--- a/src/components/Favorites.tsx
+++ b/src/components/Favorites.tsx
@@ -1,10 +1,10 @@
 import React, {useCallback, useMemo} from 'react';
-import {ScrollView, Text, TouchableOpacity, View} from 'react-native';
+import {Text, TouchableOpacity, View} from 'react-native';
 import {AppDetail} from 'react-native-launcher-kit/typescript/Interfaces/InstalledApps';
 import {useFavorites} from '../hooks/useFavorites';
 import DraggableFlatList, {
+  DragEndParams,
   OpacityDecorator,
-  ScaleDecorator,
   ShadowDecorator,
 } from 'react-native-draggable-flatlist';
 import Icon from 'react-native-vector-icons/MaterialIcons';
@@ -13,52 +13,49 @@ export const Favorites: React.FC<{apps: AppDetail[]}> = ({apps}) => {
   const {favoriteAppNames, setFavorites} = useFavorites();
 
   const appByName = useMemo(
-    () => Object.fromEntries(apps.map(app => [app.packageName, app])),
+    () => Object.fromEntries(apps.map((app) => [app.packageName, app])),
     [apps],
   );
 
   const favoriteApps = useMemo(
-    () => favoriteAppNames.map(name => appByName[name]).filter(Boolean),
+    () => favoriteAppNames.map((name) => appByName[name]).filter(Boolean),
     [appByName, favoriteAppNames],
   );
 
   const onDragEnd = useCallback(
-    ({data}: {data: AppDetail[]}) => {
-      setFavorites(data.map(app => app.packageName));
+    ({data}: DragEndParams<AppDetail>) => {
+      setFavorites(data.map((app) => app.packageName));
     },
     [setFavorites],
   );
 
   return (
-    <View>
+    <View className="px-4">
       <DraggableFlatList
         data={favoriteApps}
         onDragEnd={onDragEnd}
-        keyExtractor={item => item.packageName}
+        keyExtractor={(item) => item.packageName}
         renderItem={({item: app, drag, isActive}) => (
           <ShadowDecorator>
-            <ScaleDecorator>
-              <OpacityDecorator>
-                <View
-                  className={`py-4 px-2 flex-row ${
-                    isActive ? 'bg-gray-700 opacity-60' : ''
-                  }`}>
-                  <TouchableOpacity
-                    onLongPress={drag}
-                    disabled={isActive}
-                    delayLongPress={500}>
-                    <View className={'py-1 pl-3 pr-3'}>
-                      <Icon name="drag-indicator" size={21} color="#666" />
-                    </View>
-                  </TouchableOpacity>
-
-                  <Text className="text-lg">{app.label}</Text>
-                </View>
-              </OpacityDecorator>
-            </ScaleDecorator>
+            <OpacityDecorator>
+              <View
+                className={`py-2 px-2 flex-row w-full ${
+                  isActive ? 'bg-gray-200 opacity-60' : ''
+                }`}>
+                <Text className="text-lg flex-1">{app.label}</Text>
+                <TouchableOpacity
+                  onLongPress={drag}
+                  disabled={isActive}
+                  delayLongPress={500}>
+                  <View className={'py-1'}>
+                    <Icon name="drag-indicator" size={21} color="#aaa" />
+                  </View>
+                </TouchableOpacity>
+              </View>
+            </OpacityDecorator>
           </ShadowDecorator>
         )}
-        renderPlaceholder={() => <View className="flex-1 bg-gray-700" />}
+        renderPlaceholder={() => <View className="flex-1 bg-gray-200" />}
       />
     </View>
   );
-- 
cgit v1.3.1