Add draggable favorite apps list

3 files changed, 123 insertions, 6 deletions

diff --git a/src/components/Favorites.tsx b/src/components/Favorites.tsx
new file mode 100644
index 0000000..712a07f
--- /dev/null
+++ b/src/components/Favorites.tsx
@@ -0,0 +1,65 @@
+import React, {useCallback, useMemo} from 'react';
+import {ScrollView, Text, TouchableOpacity, View} from 'react-native';
+import {AppDetail} from 'react-native-launcher-kit/typescript/Interfaces/InstalledApps';
+import {useFavorites} from '../hooks/useFavorites';
+import DraggableFlatList, {
+  OpacityDecorator,
+  ScaleDecorator,
+  ShadowDecorator,
+} from 'react-native-draggable-flatlist';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+
+export const Favorites: React.FC<{apps: AppDetail[]}> = ({apps}) => {
+  const {favoriteAppNames, setFavorites} = useFavorites();
+
+  const appByName = useMemo(
+    () => Object.fromEntries(apps.map(app => [app.packageName, app])),
+    [apps],
+  );
+
+  const favoriteApps = useMemo(
+    () => favoriteAppNames.map(name => appByName[name]).filter(Boolean),
+    [appByName, favoriteAppNames],
+  );
+
+  const onDragEnd = useCallback(
+    ({data}: {data: AppDetail[]}) => {
+      setFavorites(data.map(app => app.packageName));
+    },
+    [setFavorites],
+  );
+
+  return (
+    <View>
+      <DraggableFlatList
+        data={favoriteApps}
+        onDragEnd={onDragEnd}
+        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>
+          </ShadowDecorator>
+        )}
+        renderPlaceholder={() => <View className="flex-1 bg-gray-700" />}
+      />
+    </View>
+  );
+};
diff --git a/src/hooks/useFavorites.ts b/src/hooks/useFavorites.ts
new file mode 100644
index 0000000..54d77fd
--- /dev/null
+++ b/src/hooks/useFavorites.ts
@@ -0,0 +1,52 @@
+import {useCallback, useEffect, useState} from 'react';
+import {useAsyncStorage} from '@react-native-async-storage/async-storage';
+
+export const useFavorites = () => {
+  const favoritesStorage = useAsyncStorage('favorites');
+  const [favoriteAppNames, setFavoriteAppNames] = useState<string[]>([]);
+
+  const getFavoriteAppNames = useCallback(async (): Promise<string[]> => {
+    try {
+      const result = await favoritesStorage.getItem();
+      const apps = result ? JSON.parse(result) : [];
+      if (!Array.isArray(apps)) return [];
+      return apps;
+    } catch (err) {
+      console.error(err);
+      return [];
+    }
+  }, [favoritesStorage]);
+
+  const refreshFavorites = useCallback(async () => {
+    getFavoriteAppNames().then(setFavoriteAppNames);
+  }, [getFavoriteAppNames]);
+
+  const setFavorites = useCallback(
+    async (names: string[]) => {
+      const newNames = [...new Set(names)];
+      setFavoriteAppNames(newNames);
+      await favoritesStorage.setItem(JSON.stringify(newNames));
+    },
+    [favoritesStorage],
+  );
+
+  const addToFavorites = useCallback(
+    async (packageName: string) => {
+      const names = await getFavoriteAppNames();
+      setFavorites([...names, packageName]);
+    },
+    [getFavoriteAppNames, setFavorites],
+  );
+
+  useEffect(() => {
+    refreshFavorites();
+  }, [refreshFavorites]);
+
+  return {
+    favoriteAppNames,
+    getFavoriteAppNames,
+    addToFavorites,
+    refreshFavorites,
+    setFavorites,
+  };
+};
diff --git a/src/screens/Home.tsx b/src/screens/Home.tsx
index da24e13..00a4b1f 100644
--- a/src/screens/Home.tsx
+++ b/src/screens/Home.tsx
@@ -1,14 +1,14 @@
-import React, {useMemo} from 'react';
-import {Text, View} from 'react-native';
+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 = () => {
+export const Home: React.FC<{apps: AppDetail[]}> = ({apps}) => {
   return (
     <View>
       <Clock />
-      <View className="p-6">
-        <Text>Favorites list</Text>
-      </View>
+      <Favorites apps={apps} />
     </View>
   );
 };