App directory refactoring

apps/link/app/_components/MultiProvider.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { FC, PropsWithChildren, useState } from "react";
+import { CssBaseline } from "@mui/material";
+import { CookiesProvider } from "react-cookie";
+import { SessionProvider } from "next-auth/react";
+import { NextAppDirEmotionCacheProvider } from "tss-react/next/appDir";
+import { SWRConfig } from "swr";
+import { GraphQLClient } from "graphql-request";
+import { AdapterDateFns } from "@mui/x-date-pickers-pro/AdapterDateFns";
+import { LocalizationProvider } from "@mui/x-date-pickers-pro";
+
+export const MultiProvider: FC<PropsWithChildren> = ({ children }) => {
+  const [csrfToken, setCsrfToken] = useState("");
+  const origin =
+    typeof window !== "undefined" && window.location.origin
+      ? window.location.origin
+      : null;
+  const client = new GraphQLClient(`${origin}/proxy/zammad/graphql`, {
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    },
+  });
+  const graphQLFetcher = async ({ document, variables }: any) => {
+    const requestHeaders = {
+      "X-CSRF-Token": csrfToken,
+    };
+    const { data, headers } = await client.rawRequest(
+      document,
+      variables,
+      requestHeaders
+    );
+
+    const token = headers.get("CSRF-Token");
+    setCsrfToken(token);
+
+    return data;
+  };
+
+  return (
+    <>
+      <CssBaseline />
+      <NextAppDirEmotionCacheProvider options={{ key: "css" }}>
+        <SWRConfig value={{ fetcher: graphQLFetcher }}>
+          <SessionProvider>
+            <CookiesProvider>
+              <LocalizationProvider dateAdapter={AdapterDateFns}>
+                {children}
+              </LocalizationProvider>
+            </CookiesProvider>
+          </SessionProvider>
+        </SWRConfig>
+      </NextAppDirEmotionCacheProvider>
+    </>
+  );
+};