Finish up app menu + fix drag interaction

2 files changed, 51 insertions, 21 deletions

diff --git a/src/hooks/useFavorites.ts b/src/hooks/useFavorites.ts
index 46b6e77..24684aa 100644
--- a/src/hooks/useFavorites.ts
+++ b/src/hooks/useFavorites.ts
@@ -1,31 +1,46 @@
-import {useEffect, useState} from 'react';
 import {useAsyncStorage} from '@react-native-async-storage/async-storage';
 import {useStableCallback} from './useStableCallback';
+import {atom, useAtom} from 'jotai';
+
+const favoriteAppNamesAtom = atom<string[]>([]);
+
+const serialize = (packageNames: string[]) => JSON.stringify(packageNames);
+
+const deserialize = (packageNames: string): string[] => {
+  try {
+    const apps = JSON.parse(packageNames);
+    if (!Array.isArray(apps)) return [];
+    return apps;
+  } catch (err) {
+    console.error(err);
+    return [];
+  }
+};
 
 export const useFavorites = () => {
   const favoritesStorage = useAsyncStorage('favorites');
-  const [favoriteAppNames, setFavoriteAppNames] = useState<string[]>([]);
+  const [favoriteAppNames, setFavoriteAppNames] = useAtom(favoriteAppNamesAtom);
 
   const getFavoriteAppNames = useStableCallback(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 [];
-    }
+    const result = await favoritesStorage.getItem();
+    return deserialize(result ?? 'null');
   });
 
-  const refreshFavorites = useStableCallback(async () => {
-    getFavoriteAppNames().then(setFavoriteAppNames);
+  const setFavoritesState = useStableCallback((packageNames: string[]) => {
+    const newNames = [...new Set(packageNames)];
+    if (serialize(newNames) === serialize(favoriteAppNames)) return newNames;
+
+    setFavoriteAppNames(newNames);
+    return newNames;
   });
 
-  const setFavorites = useStableCallback(async (names: string[]) => {
-    const newNames = [...new Set(names)];
-    await favoritesStorage.setItem(JSON.stringify(newNames));
-    refreshFavorites();
+  const setFavorites = useStableCallback(async (packageNames: string[]) => {
+    const newNames = setFavoritesState(packageNames);
+    await favoritesStorage.setItem(serialize(newNames));
+  });
+
+  const refreshFavorites = useStableCallback(async () => {
+    getFavoriteAppNames().then(setFavoritesState);
   });
 
   const addToFavorites = useStableCallback(async (packageName: string) => {
@@ -41,10 +56,6 @@ export const useFavorites = () => {
     favoriteAppNames.includes(packageName),
   );
 
-  useEffect(() => {
-    refreshFavorites();
-  }, [refreshFavorites]);
-
   return {
     addToFavorites,
     favoriteAppNames,
diff --git a/src/hooks/useInstalledApps.ts b/src/hooks/useInstalledApps.ts
new file mode 100644
index 0000000..32290e5
--- /dev/null
+++ b/src/hooks/useInstalledApps.ts
@@ -0,0 +1,19 @@
+import {atom, useAtom} from 'jotai';
+import {InstalledApps} from 'react-native-launcher-kit';
+import {AppDetail} from 'react-native-launcher-kit/typescript/Interfaces/InstalledApps';
+import {useStableCallback} from './useStableCallback';
+
+const installedAppsAtom = atom<AppDetail[]>(InstalledApps.getSortedApps());
+
+export const useInstalledApps = () => {
+  const [apps, setApps] = useAtom(installedAppsAtom);
+
+  const refreshApps = useStableCallback(() =>
+    setApps(InstalledApps.getSortedApps()),
+  );
+
+  return {
+    apps,
+    refreshApps,
+  };
+};