refactor: use react-query hooks

src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/hooks/useProgramMetadata.js

@@ -4,6 +4,8 @@ import { useProgramFromIndexedDB } from '../../../../../utils/cachedDataHooks/us
 import { useDataElementsFromIndexedDB } from '../../../../../utils/cachedDataHooks/useDataElementsFromIndexedDB';
 import { useOptionSetsFromIndexedDB } from '../../../../../utils/cachedDataHooks/useOptionSetsFromIndexedDB';
 
+const queryKey = 'useProgramMetadata';
+
 export const useProgramMetadata = (programId: string) => {
     const { program, isLoading, isError } = useProgramFromIndexedDB(programId, { enabled: !!programId });
 
@@ -17,10 +19,10 @@ export const useProgramMetadata = (programId: string) => {
             new Set) : undefined), [program]);
 
     const {
-        loading: loadingDataElements,
+        isLoading: loadingDataElements,
         dataElements,
-        error: dataElementsError,
-    } = useDataElementsFromIndexedDB(dataElementIds);
+        isError: dataElementsError,
+    } = useDataElementsFromIndexedDB([queryKey, programId], dataElementIds);
 
     const derivedDataElementValues = useMemo(() =>
         (dataElements ? ({
@@ -37,10 +39,10 @@ export const useProgramMetadata = (programId: string) => {
         }) : undefined), [dataElements]);
 
     const {
-        loading: loadingOptionSets,
+        isLoading: loadingOptionSets,
         optionSets,
-        error: optionSetsError,
-    } = useOptionSetsFromIndexedDB(derivedDataElementValues && derivedDataElementValues.optionSetIds);
+        isError: optionSetsError,
+    } = useOptionSetsFromIndexedDB([queryKey, programId], derivedDataElementValues && derivedDataElementValues.optionSetIds);
 
     const optionSetDictionary = useMemo(
         () => (optionSets ? optionSets.reduce(

src/core_modules/capture-core/utils/cachedDataHooks/useDataElementsFromIndexedDB.js

@@ -1,28 +1,32 @@
 // @flow
-import { useCallback } from 'react';
+import type { UseQueryOptions } from 'react-query';
 import { userStores, getUserStorageController } from '../../storageControllers';
-import { useQueryStyleEvaluation } from '../api/useQueryStyleEvaluation';
+import { useIndexedDBQuery } from '../reactQueryHelpers';
 import type { CachedDataElement } from '../../storageControllers/';
 
-export const useDataElementsFromIndexedDB = (dataElementIds: ?Set<string>): {
+export const useDataElementsFromIndexedDB = (queryKey: Array<string | number>, dataElementIds: ?Set<string>, queryOptions?: UseQueryOptions<>): {
     dataElements: ?Array<CachedDataElement>,
-    loading: boolean,
-    error: any,
+    isLoading: boolean,
+    isError: boolean,
 } => {
     const storageController = getUserStorageController();
+    const { enabled = !!dataElementIds } = queryOptions ?? {};
 
-    const getDataElements = useCallback(requestedIds =>
-        storageController.getAll(
+    const { data, isLoading, isError } = useIndexedDBQuery(
+        ['dataElements', ...queryKey],
+        () => storageController.getAll(
             userStores.DATA_ELEMENTS, {
-                predicate: dataElement => requestedIds.has(dataElement.id),
+                // $FlowIgnore - the enabled prop guarantees that dataElementIds will be defined
+                predicate: dataElement => dataElementIds.has(dataElement.id),
             },
-        ), [storageController]);
-
-    const { loading, data, error } = useQueryStyleEvaluation(getDataElements, dataElementIds);
+        ), {
+            enabled,
+        },
+    );
 
     return {
         dataElements: data,
-        loading,
-        error,
+        isLoading,
+        isError,
     };
 };

src/core_modules/capture-core/utils/cachedDataHooks/useOptionSetsFromIndexedDB.js

@@ -1,28 +1,32 @@
 // @flow
-import { useCallback } from 'react';
+import type { UseQueryOptions } from 'react-query';
 import { userStores, getUserStorageController } from '../../storageControllers';
-import { useQueryStyleEvaluation } from '../api/useQueryStyleEvaluation';
+import { useIndexedDBQuery } from '../reactQueryHelpers';
 import type { CachedOptionSet } from '../../storageControllers/';
 
-export const useOptionSetsFromIndexedDB = (optionSetIds: ?Set<string>): {
+export const useOptionSetsFromIndexedDB = (queryKey: Array<string | number>, optionSetIds: ?Set<string>, queryOptions?: UseQueryOptions<>): {
     optionSets: ?Array<CachedOptionSet>,
-    loading: boolean,
-    error: any,
+    isLoading: boolean,
+    isError: boolean,
 } => {
     const storageController = getUserStorageController();
+    const { enabled = !!optionSetIds } = queryOptions ?? {};
 
-    const getOptionSets = useCallback(requestedIds =>
-        storageController.getAll(
+    const { data, isLoading, isError } = useIndexedDBQuery(
+        ['optionSets', ...queryKey],
+        () => storageController.getAll(
             userStores.OPTION_SETS, {
-                predicate: optionSet => requestedIds.has(optionSet.id),
+                // $FlowIgnore - the enabled prop guarantees that optionSetIds will be defined
+                predicate: optionSet => optionSetIds.has(optionSet.id),
             },
-        ), [storageController]);
-
-    const { loading, data, error } = useQueryStyleEvaluation(getOptionSets, optionSetIds);
+        ), {
+            enabled,
+        },
+    );
 
     return {
         optionSets: data,
-        loading,
-        error,
+        isLoading,
+        isError,
     };
 };

src/core_modules/capture-core/utils/reactQueryHelpers/query/useMetadataQuery.js

@@ -5,7 +5,7 @@ import { useDataEngine, type ResourceQuery } from '@dhis2/app-runtime';
 import type { QueryFunction, UseQueryOptions } from 'react-query';
 import { IndexedDBError } from '../../../../capture-core-utils/storage/IndexedDBError/IndexedDBError';
 import type { Result } from './useMetadataQuery.types';
-import { ReactQueryAppNamespace } from '../reactQueryHelpers.const';
+import { ReactQueryAppNamespace, IndexedDBNamespace } from '../reactQueryHelpers.const';
 
 const throwErrorForIndexedDB = (error) => {
     if (error instanceof IndexedDBError) {
@@ -43,7 +43,7 @@ export const useIndexedDBQuery = <TResultData>(
     queryFn: QueryFunction<TResultData>,
     queryOptions?: UseQueryOptions<TResultData>,
 ): Result<TResultData> =>
-        useAsyncMetadata(queryKey, queryFn, {
+        useAsyncMetadata([IndexedDBNamespace, ...queryKey], queryFn, {
             cacheTime: 0,
             ...queryOptions,
             onError: (error) => {

src/core_modules/capture-core/utils/reactQueryHelpers/reactQueryHelpers.const.js

@@ -1,4 +1,4 @@
-
 // @flow
 
 export const ReactQueryAppNamespace = 'capture';
+export const IndexedDBNamespace = 'indexedDB';