feat: providers combiner

src/app/deals/page.tsx

@@ -15,6 +15,7 @@ import {
     getBoardsOptions,
     getProjectsOptions,
 } from "@/lib/client/@tanstack/react-query.gen";
+import { combineProviders } from "@/utils/combineProviders";
 import { DealsContextProvider } from "./contexts/DealsContext";
 
 async function prefetchData() {
@@ -34,23 +35,24 @@ async function prefetchData() {
 export default async function DealsPage() {
     const queryClient = await prefetchData();
 
+    const Providers = combineProviders(
+        [HydrationBoundary, { state: dehydrate(queryClient) }],
+        [ProjectsContextProvider],
+        [BoardsContextProvider],
+        [StatusesContextProvider]
+    );
+
     return (
-        <HydrationBoundary state={dehydrate(queryClient)}>
+        <Providers>
-            <ProjectsContextProvider>
+            <PageContainer>
-                <BoardsContextProvider>
+                <PageBlock className={"mobile-margin-height"}>
-                    <StatusesContextProvider>
+                    <Header />
-                        <PageContainer>
+                    <Space h={"md"} />
-                            <PageBlock className={"mobile-margin-height"}>
+                    <DealsContextProvider>
-                                <Header />
+                        <Funnel />
-                                <Space h={"md"} />
+                    </DealsContextProvider>
-                                <DealsContextProvider>
+                </PageBlock>
-                                    <Funnel />
+            </PageContainer>
-                                </DealsContextProvider>
+        </Providers>
-                            </PageBlock>
-                        </PageContainer>
-                    </StatusesContextProvider>
-                </BoardsContextProvider>
-            </ProjectsContextProvider>
-        </HydrationBoundary>
     );
 }

src/utils/combineProviders.tsx

@@ -0,0 +1,25 @@
+import { ElementType, PropsWithChildren } from "react";
+
+type ProvidersType = [ElementType, Record<string, unknown>] | [ElementType];
+
+export const combineProviders = (
+    ...componentsWithProps: Array<ProvidersType>
+): ElementType => {
+    const getInitial = ({ children }: PropsWithChildren) => children;
+
+    return componentsWithProps.reduce(
+        (
+            AccumulatedComponents: ElementType,
+            [Provider, props = {}]: ProvidersType
+        ) => {
+            return ({ children }: PropsWithChildren) => {
+                return (
+                    <AccumulatedComponents>
+                        <Provider {...props}>{children}</Provider>
+                    </AccumulatedComponents>
+                );
+            };
+        },
+        getInitial
+    );
+};