From 21ffe70499cddd7237b93acd1c653510c8cfa9a1 Mon Sep 17 00:00:00 2001
From: Mikhail Golbakh <golbah@yandex.ru>
Date: Mon, 5 Aug 2024 23:26:29 +0300
Subject: [PATCH] feat(react): add custom props for data loader components

---
 .../DataInfiniteLoader/DataInfiniteLoader.tsx | 31 +++++++++----------
 .../components/DataInfiniteLoader/types.ts    | 16 +++++++---
 .../components/DataLoader/DataLoader.tsx      |  6 ++--
 src/react/components/DataLoader/types.ts      | 12 +++++--
 4 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/src/react/components/DataInfiniteLoader/DataInfiniteLoader.tsx b/src/react/components/DataInfiniteLoader/DataInfiniteLoader.tsx
index be03b72..f103dc8 100644
--- a/src/react/components/DataInfiniteLoader/DataInfiniteLoader.tsx
+++ b/src/react/components/DataInfiniteLoader/DataInfiniteLoader.tsx
@@ -14,6 +14,9 @@ export const DataInfiniteLoader = <TError,>({
     LoadingView,
     ErrorView,
     MoreView,
+    loadingViewProps,
+    errorViewProps,
+    moreViewProps,
     children,
 }: DataInfiniteLoaderProps<TError>): React.ReactNode => {
     const errorAction = React.useMemo<ErrorViewProps<TError>['action']>(
@@ -22,36 +25,32 @@ export const DataInfiniteLoader = <TError,>({
         [errorActionProp],
     );
 
-    const content = React.useMemo(() => {
+    const renderContent = () => {
         if (status === 'loading') {
-            return <LoadingView />;
+            return <LoadingView {...loadingViewProps} />;
         }
 
         if (status === 'error') {
-            return <ErrorView error={error} action={errorAction} />;
+            return <ErrorView error={error} action={errorAction} {...errorViewProps} />;
         }
 
         if (status === 'success' && hasNextPage) {
-            return <MoreView isLoading={isFetchingNextPage} onClick={fetchNextPage} />;
+            return (
+                <MoreView
+                    isLoading={isFetchingNextPage}
+                    onClick={fetchNextPage}
+                    {...moreViewProps}
+                />
+            );
         }
 
         return null;
-    }, [
-        status,
-        hasNextPage,
-        LoadingView,
-        ErrorView,
-        error,
-        errorAction,
-        MoreView,
-        isFetchingNextPage,
-        fetchNextPage,
-    ]);
+    };
 
     return (
         <>
             {status === 'success' ? children : null}
-            {content}
+            {renderContent()}
         </>
     );
 };
diff --git a/src/react/components/DataInfiniteLoader/types.ts b/src/react/components/DataInfiniteLoader/types.ts
index 848fad0..f358af9 100644
--- a/src/react/components/DataInfiniteLoader/types.ts
+++ b/src/react/components/DataInfiniteLoader/types.ts
@@ -8,15 +8,23 @@ export interface MoreViewProps {
     onClick: () => void;
 }
 
-export interface DataInfiniteLoaderProps<TError> {
+export interface DataInfiniteLoaderProps<
+    TError,
+    TLoadingViewProps extends {} = {},
+    TErrorViewProps extends ErrorViewProps<TError> = ErrorViewProps<TError>,
+    TMoreViewProps extends MoreViewProps = MoreViewProps,
+> {
     status: DataLoaderStatus;
     error: TError | null;
     errorAction?: ErrorAction | ErrorAction['handler'];
     hasNextPage: boolean;
     fetchNextPage: () => unknown;
     isFetchingNextPage: boolean;
-    LoadingView: ComponentType;
-    ErrorView: ComponentType<ErrorViewProps<TError>>;
-    MoreView: ComponentType<MoreViewProps>;
+    LoadingView: ComponentType<TLoadingViewProps>;
+    ErrorView: ComponentType<TErrorViewProps>;
+    MoreView: ComponentType<TMoreViewProps>;
+    loadingViewProps?: TLoadingViewProps;
+    errorViewProps?: Omit<TErrorViewProps, keyof ErrorViewProps<TError>>;
+    moreViewProps?: Omit<TMoreViewProps, keyof MoreViewProps>;
     children: ReactNode;
 }
diff --git a/src/react/components/DataLoader/DataLoader.tsx b/src/react/components/DataLoader/DataLoader.tsx
index 36c1c67..4bd0dc0 100644
--- a/src/react/components/DataLoader/DataLoader.tsx
+++ b/src/react/components/DataLoader/DataLoader.tsx
@@ -10,6 +10,8 @@ export const DataLoader = <TError,>({
     errorAction: errorActionProp,
     LoadingView,
     ErrorView,
+    loadingViewProps,
+    errorViewProps,
     children,
 }: DataLoaderProps<TError>): React.ReactNode => {
     const errorAction = React.useMemo<ErrorViewProps<TError>['action']>(
@@ -19,11 +21,11 @@ export const DataLoader = <TError,>({
     );
 
     if (status === 'loading') {
-        return <LoadingView />;
+        return <LoadingView {...loadingViewProps} />;
     }
 
     if (status === 'error') {
-        return <ErrorView error={error} action={errorAction} />;
+        return <ErrorView error={error} action={errorAction} {...errorViewProps} />;
     }
 
     return <>{children}</>;
diff --git a/src/react/components/DataLoader/types.ts b/src/react/components/DataLoader/types.ts
index eab23fc..949927b 100644
--- a/src/react/components/DataLoader/types.ts
+++ b/src/react/components/DataLoader/types.ts
@@ -3,11 +3,17 @@ import type {ComponentType, ReactNode} from 'react';
 import type {DataLoaderStatus} from '../../../core';
 import type {ErrorAction, ErrorViewProps} from '../types';
 
-export interface DataLoaderProps<TError> {
+export interface DataLoaderProps<
+    TError,
+    TLoadingViewProps extends {} = {},
+    TErrorViewProps extends ErrorViewProps<TError> = ErrorViewProps<TError>,
+> {
     status: DataLoaderStatus;
     error: TError | null;
     errorAction?: ErrorAction | ErrorAction['handler'];
-    LoadingView: ComponentType;
-    ErrorView: ComponentType<ErrorViewProps<TError>>;
+    LoadingView: ComponentType<TLoadingViewProps>;
+    ErrorView: ComponentType<TErrorViewProps>;
+    loadingViewProps?: TLoadingViewProps;
+    errorViewProps?: Omit<TErrorViewProps, keyof ErrorViewProps<TError>>;
     children: ReactNode;
 }