Switch to jotai atom with storage + suspense for favorites list

1 files changed, 22 insertions, 42 deletions

diff --git a/src/hooks/useFavorites.ts b/src/hooks/useFavorites.ts
index 24684aa..fa96211 100644
--- a/src/hooks/useFavorites.ts
+++ b/src/hooks/useFavorites.ts
@@ -1,55 +1,37 @@
-import {useAsyncStorage} from '@react-native-async-storage/async-storage';
+import AsyncStorage from '@react-native-async-storage/async-storage/src/AsyncStorage';
 import {useStableCallback} from './useStableCallback';
-import {atom, useAtom} from 'jotai';
+import {useAtom} from 'jotai';
+import {createJSONStorage, atomWithStorage} from 'jotai/utils';
 
-const favoriteAppNamesAtom = atom<string[]>([]);
+const jsonStorage = createJSONStorage<string[]>(() => AsyncStorage);
+const favoriteAppNamesAtom = atomWithStorage<string[]>(
+  'favorites',
+  [],
+  jsonStorage,
+);
 
-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 [];
-  }
-};
+const serialize = (packageNames: string[]) => packageNames.join(',');
 
 export const useFavorites = () => {
-  const favoritesStorage = useAsyncStorage('favorites');
   const [favoriteAppNames, setFavoriteAppNames] = useAtom(favoriteAppNamesAtom);
 
-  const getFavoriteAppNames = useStableCallback(async (): Promise<string[]> => {
-    const result = await favoritesStorage.getItem();
-    return deserialize(result ?? 'null');
-  });
-
-  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 (packageNames: string[]) => {
-    const newNames = setFavoritesState(packageNames);
-    await favoritesStorage.setItem(serialize(newNames));
-  });
+  const setFavorites = useStableCallback(
+    async (
+      updater: (packageNames: string[]) => Promise<string[]> | string[],
+    ) => {
+      const newNames = [...new Set(await updater(favoriteAppNames))];
+      if (serialize(newNames) === serialize(favoriteAppNames)) return newNames;
 
-  const refreshFavorites = useStableCallback(async () => {
-    getFavoriteAppNames().then(setFavoritesState);
-  });
+      setFavoriteAppNames(newNames);
+      return newNames;
+    },
+  );
 
   const addToFavorites = useStableCallback(async (packageName: string) => {
-    const names = await getFavoriteAppNames();
-    setFavorites([...names, packageName]);
+    setFavorites((names) => [...names, packageName]);
   });
   const removeFromFavorites = useStableCallback(async (packageName: string) => {
-    const names = await getFavoriteAppNames();
-    setFavorites(names.filter((name) => name !== packageName));
+    setFavorites((names) => names.filter((name) => name !== packageName));
   });
 
   const isFavorite = useStableCallback((packageName: string) =>
@@ -59,9 +41,7 @@ export const useFavorites = () => {
   return {
     addToFavorites,
     favoriteAppNames,
-    getFavoriteAppNames,
     isFavorite,
-    refreshFavorites,
     removeFromFavorites,
     setFavorites,
   };