chore: use ComposeChildren for composing multiple providers

one-zero-eight · Feb 24, 2024 · 5314937 · 5314937
1 parent d58abff
commit 5314937
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 21 deletions.
diff --git a/app/providers.tsx → app/_query_provider.tsx b/app/providers.tsx → app/_query_provider.tsx
@@ -2,7 +2,9 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useState } from "react";
 
-export default function Providers({ children }: { children: React.ReactNode }) {
+export default function CustomQueryClientProvider({
+  children,
+}: React.PropsWithChildren) {
   const [queryClient] = useState(
     () =>
       new QueryClient({

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,7 @@
-import Providers from "@/app/providers";
+import CustomQueryClientProvider from "@/app/_query_provider";
 import ThemedHtml from "@/app/theme";
 import Sidebar from "@/components/layout/Sidebar";
+import ComposeChildren from "@/components/utils/ComposeChildren";
 import GoogleAnalytics from "@/lib/tracking/GoogleAnalytics";
 import UserInfoTracker from "@/lib/tracking/UserInfoTracker";
 import YandexMetrika from "@/lib/tracking/YandexMetrika";
@@ -40,31 +41,38 @@ export const viewport: Viewport = {
 export default function RootLayout({
   children,
   modal,
-}: {
-  children: React.ReactNode;
-  modal: React.ReactNode;
-}) {
+}: React.PropsWithChildren<{ modal: React.ReactNode }>) {
   return (
     <ThemedHtml
       lang="en"
       className={clsx(rubik.variable, fuzzyBubbles.variable)}
     >
+      <head>
+        {/* Trackers */}
+        <YandexMetrika />
+        <GoogleAnalytics />
+      </head>
+
       <body className="bg-base font-primary text-lg text-text-main">
-        <Providers>
-          <noscript className="flex w-full justify-center bg-red-700 p-8">
-            You need to enable JavaScript to run this app.
-          </noscript>
-          <YandexMetrika />
-          <GoogleAnalytics />
+        <noscript className="flex w-full justify-center bg-red-700 p-8">
+          You need to enable JavaScript to run this app.
+        </noscript>
+
+        <ComposeChildren>
+          {/* Providers */}
+          <CustomQueryClientProvider />
           <UserInfoTracker />
 
-          <div className="flex flex-row">
-            <Sidebar>
-              <main className="w-full">{children}</main>
-            </Sidebar>
-          </div>
-          {modal}
-        </Providers>
+          {/* Content */}
+          <>
+            <div className="flex flex-row">
+              <Sidebar>
+                <main className="w-full">{children}</main>
+              </Sidebar>
+            </div>
+            {modal}
+          </>
+        </ComposeChildren>
       </body>
     </ThemedHtml>
   );

diff --git a/components/utils/ComposeChildren.tsx b/components/utils/ComposeChildren.tsx
@@ -0,0 +1,41 @@
+import { Children, createElement, isValidElement } from "react";
+
+/**
+ * Compose providers sequentially inside each other to avoid nesting.
+ *
+ * Example:
+ *
+ * ```tsx
+ * <ComposeChildren>
+ *   <ThemeProvider theme={theme} />
+ *   <AuthProvider />
+ *   <QueryClientProvider client={queryClient} />
+ *   {children}
+ * </ComposeChildren>
+ * ```
+ * equals to
+ * ```tsx
+ * <ThemeProvider theme={theme}>
+ *   <AuthProvider>
+ *     <QueryClientProvider client={queryClient}>
+ *       {children}
+ *     </QueryClientProvider>
+ *   </AuthProvider>
+ * </ThemeProvider>
+ * ```
+ */
+export default function ComposeChildren({ children }: React.PropsWithChildren) {
+  const array = Children.toArray(children);
+  const last = array.pop();
+  return (
+    <>
+      {array.reduceRight(
+        (child, element) =>
+          isValidElement(element)
+            ? createElement(element.type, element.props, child)
+            : child,
+        last,
+      )}
+    </>
+  );
+}
diff --git a/lib/tracking/UserInfoTracker.tsx b/lib/tracking/UserInfoTracker.tsx
@@ -3,7 +3,7 @@ import { useUsersGetMe } from "@/lib/events";
 import { ymUserParams } from "@/lib/tracking/YandexMetrika";
 import { useEffect } from "react";
 
-export default function UserInfoTracker() {
+export default function UserInfoTracker({ children }: React.PropsWithChildren) {
   const { data } = useUsersGetMe();
 
   // Send user info to Yandex Metrika
@@ -17,5 +17,5 @@ export default function UserInfoTracker() {
     }
   }, [data]);
 
-  return <></>;
+  return <>{children}</>;
 }