@edge-zuq/core 1.2.7

package/src/presentation/domain/offline/use-infinite-offline-query.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+
+import {
+  type InfiniteData,
+  type QueryKey,
+  useInfiniteQuery,
+} from '@tanstack/react-query';
+
+import { handleInfiniteQuerySave, initialDataFallback } from './utils';
+import { UILoading } from '../../components/atoms';
+import type { Storage } from '../../../data/protocols';
+
+export const PAGE_SIZE = 30;
+const MAX_STORED_PAGES = 5;
+
+type InfiniteOfflineQueryParams<TQueryFnData, TError> = Omit<
+  Parameters<
+    typeof useInfiniteQuery<
+      TQueryFnData,
+      TError,
+      InfiniteData<TQueryFnData, number>,
+      QueryKey,
+      number
+    >
+  >[0],
+  'getNextPageParam' | 'initialPageParam'
+> & {
+  initialPageParam?: number;
+  storage: Storage;
+};
+
+export const useInfiniteOfflineQuery = <
+  TQueryFnData extends any,
+  TError = unknown,
+>({
+  queryKey,
+  initialData,
+  initialPageParam = 0,
+  queryFn,
+  storage,
+  ...options
+}: InfiniteOfflineQueryParams<TQueryFnData[], TError>) => {
+  const {
+    data: pageData,
+    fetchNextPage,
+    hasNextPage,
+    isFetching,
+    isFetchingNextPage,
+    ...props
+  } = useInfiniteQuery({
+    queryKey,
+    initialPageParam,
+    queryFn: async ({ pageParam, ...context }) => {
+      const data = await (queryFn as any)?.({ pageParam, ...context });
+      if (pageParam <= MAX_STORED_PAGES) {
+        handleInfiniteQuerySave(queryKey, pageParam, data, storage);
+      }
+      return (data ?? []) as TQueryFnData[];
+    },
+    getNextPageParam: (lastPage, pages) => {
+      if (!lastPage || lastPage.length < PAGE_SIZE) return undefined;
+      return pages.length + initialPageParam;
+    },
+    initialData: initialDataFallback<InfiniteData<TQueryFnData, number>>(
+      queryKey,
+      initialData,
+      storage
+    ),
+    ...options,
+  });
+
+  const data = React.useMemo(() => {
+    return pageData?.pages?.reduce<TQueryFnData[]>((acc, item) => {
+      const value = item ?? [];
+      return [...acc, ...value];
+    }, []);
+  }, [pageData?.pages]);
+
+  const onEndReached = async () => {
+    if (!hasNextPage || isFetching || isFetchingNextPage) {
+      return;
+    }
+    await fetchNextPage();
+  };
+
+  const footer = hasNextPage ? <UILoading /> : null;
+
+  return { data, onEndReached, footer, isFetching, ...props };
+};

package/src/presentation/domain/offline/use-offline-id-v2.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { IsomorphicIdManager } from '../../../infra';
+
+type Props = {
+  initialValue?: number;
+  dependencies?: any[];
+  isomorphicIdManager: IsomorphicIdManager;
+};
+
+export const useOfflineIdV2 = ({
+  initialValue,
+  dependencies = [],
+  isomorphicIdManager,
+}: Props) => {
+  const [id, setId] = React.useState<IsomorphicIdManager.IsomorphicId>(() => {
+    return isomorphicIdManager.create(initialValue ?? Date.now());
+  });
+
+  React.useEffect(() => {
+    const isomorphicId = isomorphicIdManager.create(initialValue ?? Date.now());
+    setId(isomorphicId);
+    return () => {
+      isomorphicIdManager.remove(isomorphicId.get());
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isomorphicIdManager, initialValue, ...dependencies]);
+
+  return id;
+};

package/src/presentation/domain/offline/use-offline-id.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { OfflineId } from './types';
+
+export const useOfflineId = (initialValue?: OfflineId) => {
+  const [id, setId] = React.useState<OfflineId>(initialValue ?? Date.now());
+
+  React.useEffect(() => {
+    setId(initialValue ?? Date.now());
+  }, [initialValue]);
+
+  return id;
+};

package/src/presentation/domain/offline/use-offline-mutation.ts

@@ -0,0 +1,150 @@
+import React from 'react';
+import uuid from 'react-native-uuid';
+import { useNetInfo } from '@react-native-community/netinfo';
+import {
+  type UseMutationOptions,
+  type QueryKey,
+  useMutation,
+  useQueryClient,
+} from '@tanstack/react-query';
+
+import { useOfflineQueue } from './use-offline-queue';
+import {
+  IsomorphicIdManager,
+  OfflineMutationStatus,
+  type OfflineActions,
+  type OfflineMutation,
+} from '../../../infra';
+import { useOfflineId } from './use-offline-id';
+import {
+  handleQueryRollback,
+  handleQuerySuccess,
+  isHttpClientError,
+  isIsomorphicId,
+} from './utils';
+import type { Dependency, OfflineId } from './types';
+import type { Storage } from '../../../data/protocols';
+
+const parseData = (data: any) => {
+  try {
+    return typeof data === 'string' ? JSON.parse(data) : data;
+  } catch (err) {
+    return data;
+  }
+};
+
+export type OfflineOptions = {
+  type: keyof OfflineActions;
+  id?: OfflineId;
+  dependencies?: Dependency[];
+  queryKeysToInvalidate?: QueryKey[];
+  multiple?: boolean;
+  context?: any;
+  storage?: Storage;
+  isomorphicIdManager?: IsomorphicIdManager;
+};
+
+export const useOfflineMutation = <TData, TError, TVariables>({
+  type,
+  queryKeysToInvalidate = [],
+  dependencies = [],
+  multiple = false,
+  mutationFn,
+  context,
+  storage,
+  id: propsId,
+  ...options
+}: UseMutationOptions<TData, TError, TVariables, any> & OfflineOptions) => {
+  const { isConnected, isInternetReachable } = useNetInfo();
+  const queryClient = useQueryClient();
+  const queue = useOfflineQueue();
+  const id = useOfflineId(propsId);
+
+  const hasConnection = React.useMemo(
+    () => isConnected && isInternetReachable,
+    [isConnected, isInternetReachable]
+  );
+
+  const mutation = useMutation<TData, TError, TVariables, any>({
+    ...options,
+    mutationFn,
+    onError: (error, variables, onMutateResult, context) => {
+      pushOfflineMutation(error);
+      options?.onError?.(error, variables, onMutateResult, context);
+      if (
+        !isHttpClientError(error) ||
+        (isHttpClientError(error) &&
+          (error?.response?.statusCode || hasConnection))
+      ) {
+        for (const queryKey of queryKeysToInvalidate) {
+          handleQueryRollback({ queryClient, queryKey, storage });
+        }
+      }
+    },
+    onSuccess: async (data, variables, onMutateResult, context) => {
+      await options?.onSuccess?.(data, variables, onMutateResult, context);
+      for (const queryKey of queryKeysToInvalidate) {
+        handleQuerySuccess({ queryClient, queryKey });
+        queryClient.invalidateQueries({ queryKey });
+        queryClient.refetchQueries({ queryKey });
+      }
+    },
+  });
+
+  const pushOfflineMutation = React.useCallback(
+    (error: any) => {
+      if (
+        isHttpClientError(error) &&
+        (!error?.response?.statusCode || !hasConnection)
+      ) {
+        const { url, method, body } = error;
+        const { params, headers } = error.config ?? {};
+        const parsedData = parseData(body);
+        const offlineMutation: OfflineMutation = {
+          id: String(id),
+          data: {
+            url: url!,
+            method: method as any,
+            params,
+            headers,
+            body: parsedData,
+          },
+          status: OfflineMutationStatus.PENDING,
+          dependencies: dependencies.map((value) =>
+            isIsomorphicId(value) ? value : String(value)
+          ),
+          queryKeysToInvalidate,
+          type,
+          response: null,
+          error: error,
+          createdAt: new Date(),
+          context,
+        };
+        if (multiple) {
+          const currentId = uuid.v4();
+          queue.push(String(currentId), {
+            ...offlineMutation,
+            id: String(currentId),
+          });
+        } else {
+          queue.push(String(id), offlineMutation);
+        }
+      }
+    },
+    [
+      id,
+      multiple,
+      queryKeysToInvalidate,
+      queue,
+      type,
+      dependencies,
+      hasConnection,
+      context,
+    ]
+  );
+
+  return {
+    id,
+    ...mutation,
+  };
+};

package/src/presentation/domain/offline/use-offline-query.ts

@@ -0,0 +1,55 @@
+import {
+  hashKey,
+  useQuery,
+  type QueryKey,
+  type UseQueryOptions,
+} from '@tanstack/react-query';
+import type { Storage } from '../../../data/protocols';
+import { isInvalidData } from './utils';
+
+type Params<
+  TQueryFnData,
+  TError,
+  TData,
+  TQueryKey extends QueryKey,
+> = UseQueryOptions<TQueryFnData, TError, TData, TQueryKey> & {
+  storage: Storage;
+};
+
+export const useOfflineQuery = <
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>({
+  queryKey,
+  queryFn,
+  storage,
+  initialData,
+  ...options
+}: Params<TQueryFnData, TError, TData, TQueryKey>) => {
+  return useQuery({
+    queryKey,
+    queryFn: async (context) => {
+      const data = await (queryFn as any)?.(context);
+      if (isInvalidData(data)) {
+        throw new Error(
+          'Um erro inesperado ocorreu, tente novamente mais tarde.'
+        );
+      }
+      storage.setItem(hashKey(queryKey), data);
+      return (data ?? null) as TQueryFnData;
+    },
+    initialData:
+      initialData ??
+      (() => {
+        const data = storage.getItem<TQueryFnData>(hashKey(queryKey));
+        if (isInvalidData(data)) {
+          storage.removeItem(hashKey(queryKey));
+          return;
+        }
+        return data ?? undefined;
+      }),
+    ...options,
+  });
+};

package/src/presentation/domain/offline/use-offline-queue.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { OfflineMutationQueueContext } from './offline-mutation-queue-provider';
+
+export const useOfflineQueue = () => {
+  return React.useContext(OfflineMutationQueueContext);
+};

package/src/presentation/domain/offline/utils.ts

@@ -0,0 +1,139 @@
+import {
+  hashKey,
+  type InfiniteData,
+  type QueryKey,
+} from '@tanstack/react-query';
+import type { Storage } from '../../../data/protocols';
+import type { OptimisticRollbackParams, OptimisticUpdateParams } from './types';
+import { HttpClientError } from '../../../data/errors';
+import { IsomorphicIdManager } from '../../../infra/isomorphic-id-manager';
+
+export const isHttpClientError = (
+  error: any
+): error is HttpClientError<any> => {
+  return error instanceof HttpClientError;
+};
+
+export const isIsomorphicId = (
+  isomorphicId: any
+): isomorphicId is IsomorphicIdManager.IsomorphicId => {
+  return isomorphicId instanceof IsomorphicIdManager.IsomorphicId;
+};
+
+export const isOfflineId = (id: any): boolean => {
+  return isIsomorphicId(id) && id.isOffline();
+};
+
+export const isFromOfflineId = (id: any): boolean => {
+  return isIsomorphicId(id) && id.isFromOffline();
+};
+
+export const isFromRealId = (id: any): boolean => {
+  return isIsomorphicId(id) && !id.isFromOffline();
+};
+
+export const handleClearQueryRollback = ({
+  queryClient,
+  queryKey,
+}: OptimisticRollbackParams) => {
+  if (!queryKey) return;
+  queryClient.removeQueries({ queryKey: ['__rollback', queryKey] });
+};
+
+export const handleQueryUpdate = async <T>({
+  queryKey,
+  queryClient,
+  handler,
+  storage,
+  fallbackData = {},
+}: OptimisticUpdateParams<T>) => {
+  queryClient.cancelQueries({ queryKey });
+  const data =
+    queryClient.getQueryData<T>(queryKey) ??
+    storage?.getItem<T>(hashKey(queryKey));
+  queryClient.setQueryData(['__rollback', queryKey], data);
+  const result = await handler(data ?? fallbackData);
+  queryClient.setQueryData(queryKey, result);
+  storage?.setItem(hashKey(queryKey), result);
+  return result;
+};
+
+export const handleQueryRollback = <T = any>({
+  queryClient,
+  queryKey,
+  storage,
+}: OptimisticRollbackParams) => {
+  const rollbackData = queryClient.getQueryData<T>(['__rollback', queryKey]);
+  queryClient.setQueryData(queryKey, rollbackData);
+  storage?.setItem(hashKey(queryKey), rollbackData);
+  handleClearQueryRollback({
+    queryClient,
+    queryKey,
+  });
+  return rollbackData;
+};
+
+export const handleQuerySuccess = ({
+  queryClient,
+  queryKey,
+}: OptimisticRollbackParams) => {
+  handleClearQueryRollback({
+    queryClient,
+    queryKey,
+  });
+};
+
+export const handleInfiniteQuerySave = <T>(
+  queryKey: QueryKey,
+  pageParam: number,
+  data: T[],
+  storage: Storage
+) => {
+  const { pages: currentPages, pageParams: currentPageParams } =
+    storage.getItem<InfiniteData<T[], number>>(hashKey(queryKey)) ?? {};
+  if (isInvalidData(data)) {
+    storage?.removeItem(hashKey(queryKey));
+    return;
+  }
+  let pages = [data];
+  let pageParams = [pageParam];
+  if (currentPages) {
+    pages = currentPages.map((page, index) => {
+      if (index === pageParam) return data;
+      return page;
+    });
+  }
+  if (currentPageParams) {
+    pageParams = currentPageParams.map((page, index) => {
+      if (index === pageParam) return pageParam;
+      return page;
+    });
+  }
+  storage.setItem<InfiniteData<T[], number>>(hashKey(queryKey), {
+    pages,
+    pageParams,
+  });
+};
+
+export const initialDataFallback = <T>(
+  queryKey: QueryKey,
+  cb: any,
+  storage?: Storage
+) => {
+  if (cb) return cb;
+  const data = storage?.getItem<T>(hashKey(queryKey));
+  if (isInvalidData(data)) {
+    storage?.removeItem(hashKey(queryKey));
+    return;
+  }
+  return data ?? undefined;
+};
+
+export const isInvalidData = (data: any) => {
+  return (
+    typeof data === 'string' &&
+    (data.includes('<!DOCTYPE') ||
+      data.includes('<html') ||
+      data.includes('<?xml'))
+  );
+};

package/src/presentation/domain/provider/index.ts

@@ -0,0 +1 @@
+export * from './zuq-core-provider';

package/src/presentation/domain/provider/zuq-core-provider.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { PortalHost, PortalProvider } from '@gorhom/portal';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { KeyboardProvider } from 'react-native-keyboard-controller';
+import { OfflineMutationQueueProvider } from '../offline';
+import type { OfflineMutationQueue } from '../../../infra';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { Storage } from '../../../data/protocols';
+
+type Props = {
+  children?: React.ReactNode;
+  queue?: OfflineMutationQueue;
+  storage: Storage;
+};
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      refetchOnMount: true,
+      gcTime: 1000 * 60 * 60 * 24,
+    },
+  },
+});
+
+export const ZUQCoreProvider = ({ children, queue }: Props) => {
+  return (
+    <SafeAreaProvider>
+      <KeyboardProvider>
+        <QueryClientProvider client={queryClient}>
+          <GestureHandlerRootView style={styles.root}>
+            <OfflineMutationQueueProvider queue={queue}>
+              <PortalProvider>
+                {children}
+                <PortalHost name="sheet" />
+                <PortalHost name="camera" />
+              </PortalProvider>
+            </OfflineMutationQueueProvider>
+          </GestureHandlerRootView>
+        </QueryClientProvider>
+      </KeyboardProvider>
+    </SafeAreaProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
+});

package/src/presentation/domain/utils/exists.ts

@@ -0,0 +1,3 @@
+export const exists = <T>(value: T): value is Exclude<T, null | undefined> => {
+  return value !== undefined && value !== null;
+};

package/src/presentation/domain/utils/index.ts

@@ -0,0 +1,5 @@
+export * from './use-action-sheet';
+export * from './yup';
+export * from './exists';
+export * from './react-query';
+export * from './use-signature-ref';

package/src/presentation/domain/utils/react-query.ts

@@ -0,0 +1,10 @@
+import * as ReactQuery from '@tanstack/react-query';
+import type {
+  UseMutationOptions,
+  UseQueryOptions,
+  QueryKey,
+  InfiniteData,
+} from '@tanstack/react-query';
+
+export const { hashKey, useMutation, useQuery, useQueryClient } = ReactQuery;
+export type { UseMutationOptions, UseQueryOptions, QueryKey, InfiniteData };

package/src/presentation/domain/utils/use-action-sheet.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Keyboard } from 'react-native';
+
+export const useActionSheet = (initialValue = false) => {
+  const [visible, setVisible] = React.useState(initialValue);
+
+  const onOpen = React.useCallback(() => {
+    setVisible(true);
+    Keyboard.dismiss();
+  }, []);
+
+  const onClose = React.useCallback(() => {
+    setVisible(false);
+  }, []);
+
+  return {
+    visible,
+    onOpen,
+    onClose,
+  };
+};

package/src/presentation/domain/utils/use-signature-ref.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+
+type ImageType = {
+  name: string;
+  uri: string;
+  type: string;
+  editable?: boolean;
+};
+
+export type SignatureRef = {
+  isDirty: boolean;
+  save: () => Promise<ImageType | undefined>;
+  reset: () => void;
+};
+
+export const useSignatureRef = () => {
+  const ref = React.useRef<SignatureRef>(null);
+  return ref;
+};

package/src/presentation/domain/utils/yup.ts

@@ -0,0 +1,3 @@
+import * as Yup from 'yup';
+
+export const yup = Yup;