Merge pull request #69 from lifeomic/update-use-async-storage

PHC-4151 Include setItem in async storage hook

src/hooks/useActiveAccount.test.tsx

@@ -7,14 +7,9 @@ import {
 } from './useActiveAccount';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import AsyncStorageMock from '@react-native-async-storage/async-storage/jest/async-storage-mock';
-import {
-  QueryClient,
-  QueryClientProvider,
-  QueryObserverLoadingResult,
-  UseQueryResult,
-} from 'react-query';
+import { QueryClient, QueryClientProvider, UseQueryResult } from 'react-query';
 import { mockDeep } from 'jest-mock-extended';
-import * as GetAsyncStorage from './useGetAsyncStorage';
+import * as useAsyncStorage from './useAsyncStorage';
 
 jest.mock('./useAccounts', () => ({
   useAccounts: jest.fn(),
@@ -23,7 +18,7 @@ jest.mock('./useAccounts', () => ({
 const useAccountsMock = useAccounts as jest.Mock;
 
 const refetchMock = jest.fn();
-let useGetAsyncStorageSpy = jest.spyOn(GetAsyncStorage, 'useGetAsyncStorage');
+let useAsyncStorageSpy = jest.spyOn(useAsyncStorage, 'useAsyncStorage');
 
 const accountId1 = 'acct1';
 const accountId2 = 'acct2';
@@ -56,8 +51,11 @@ beforeEach(() => {
     data: mockAccounts,
     refetch: refetchMock,
   });
-  useGetAsyncStorageSpy.mockReturnValue({
-    ...mockDeep<UseQueryResult<string | null>>(),
+  useAsyncStorageSpy.mockReturnValue({
+    useGetItem: (_: string) => ({
+      ...mockDeep<UseQueryResult<string | null>>(),
+    }),
+    setItem: AsyncStorage.setItem,
   });
 });
 
@@ -85,9 +83,12 @@ test('exposes some props from useAccounts', async () => {
     isFetched: true,
     error,
   });
-  useGetAsyncStorageSpy.mockReturnValueOnce({
-    ...mockDeep<QueryObserverLoadingResult<string | null>>(),
-    isFetched: true,
+  useAsyncStorageSpy.mockReturnValueOnce({
+    useGetItem: (_: string) => ({
+      ...mockDeep<UseQueryResult<string | null>>(),
+      isFetched: true,
+    }),
+    setItem: AsyncStorage.setItem,
   });
 
   const { result } = await renderHookInContext();
@@ -164,7 +165,7 @@ test('provider allows for account override by id', async () => {
 });
 
 test('uses account from async storage', async () => {
-  useGetAsyncStorageSpy.mockRestore();
+  useAsyncStorageSpy.mockRestore();
 
   AsyncStorageMock.getItem = jest.fn().mockResolvedValueOnce(accountId1);
   const { result, rerender } = await renderHookInContext();
@@ -188,7 +189,7 @@ test('uses account from async storage', async () => {
     accountsWithProduct: mockAccounts,
   });
 
-  useGetAsyncStorageSpy = jest.spyOn(GetAsyncStorage, 'useGetAsyncStorage');
+  useAsyncStorageSpy = jest.spyOn(useAsyncStorage, 'useAsyncStorage');
 });
 
 test('initial render writes selected account to async storage', async () => {

src/hooks/useActiveAccount.tsx

@@ -5,10 +5,9 @@ import React, {
   useContext,
   useCallback,
 } from 'react';
-import AsyncStorage from '@react-native-async-storage/async-storage';
 import { Account, useAccounts } from './useAccounts';
 import { QueryObserverResult } from 'react-query';
-import { useGetAsyncStorage } from './useGetAsyncStorage';
+import { useAsyncStorage } from './useAsyncStorage';
 
 export type ActiveAccountProps = {
   account?: Account;
@@ -60,11 +59,8 @@ export const ActiveAccountContextProvider = ({
   const accountsResult = useAccounts();
   const accountsWithProduct = filterNonLRAccounts(accountsResult.data);
   const [activeAccount, setActiveAccount] = useState<ActiveAccountProps>({});
-  const storedAccountResult = useGetAsyncStorage(selectedAccountIdKey);
-
-  const storeAccountId = useCallback(async (accountId: string) => {
-    await AsyncStorage.setItem(selectedAccountIdKey, accountId);
-  }, []);
+  const { useGetItem, setItem } = useAsyncStorage();
+  const storedAccountResult = useGetItem(selectedAccountIdKey);
 
   /**
    * Initial setting of activeAccount
@@ -92,12 +88,12 @@ export const ActiveAccountContextProvider = ({
       },
       trialExpired: getTrialExpired(selectedAccount),
     });
-    storeAccountId(selectedAccount.id);
+    setItem(selectedAccountIdKey, selectedAccount.id);
   }, [
     accountsWithProduct,
     activeAccount?.account?.id,
     accountIdToSelect,
-    storeAccountId,
+    setItem,
     storedAccountResult.data,
     storedAccountResult.isLoading,
   ]);
@@ -118,12 +114,12 @@ export const ActiveAccountContextProvider = ({
           },
           trialExpired: getTrialExpired(selectedAccount),
         });
-        storeAccountId(selectedAccount.id);
+        setItem(selectedAccountIdKey, selectedAccount.id);
       } catch (error) {
         console.warn('Unable to set active account', error);
       }
     },
-    [accountsWithProduct, storeAccountId],
+    [accountsWithProduct, setItem],
   );
 
   const refetch = useCallback(async () => {
@@ -137,13 +133,9 @@ export const ActiveAccountContextProvider = ({
         accountsWithProduct,
         refetch,
         setActiveAccountId,
-        isLoading: !!(
-          accountsResult.isLoading || storedAccountResult.isLoading
-        ),
-        isFetched: !!(
-          accountsResult.isFetched && storedAccountResult.isFetched
-        ),
-        error: accountsResult.error || storedAccountResult.error,
+        isLoading: accountsResult.isLoading,
+        isFetched: accountsResult.isFetched,
+        error: accountsResult.error,
       }}
     >
       {children}

src/hooks/useAsyncStorage.ts

@@ -0,0 +1,17 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { useQuery } from 'react-query';
+
+export function useAsyncStorage() {
+  const useGetItem = (key: string) =>
+    useQuery<string | null>('async-storage-get', () =>
+      AsyncStorage.getItem(key),
+    );
+
+  const setItem = (key: string, value: string) =>
+    AsyncStorage.setItem(key, value);
+
+  return {
+    useGetItem: useGetItem,
+    setItem: setItem,
+  };
+}