link-stack/apps/link/app/_components/MultiProvider.tsx

"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 { I18n } from "react-polyglot";
import { AdapterDateFns } from "@mui/x-date-pickers-pro/AdapterDateFnsV3";
import { LocalizationProvider } from "@mui/x-date-pickers-pro";
import { LicenseInfo } from "@mui/x-license";
import { locales, LeafcutterProvider } from "@link-stack/leafcutter-ui";

LicenseInfo.setLicenseKey(
  "c787ac6613c5f2aa0494c4285fe3e9f2Tz04OTY1NyxFPTE3NDYzNDE0ODkwMDAsUz1wcm8sTE09c3Vic2NyaXB0aW9uLEtWPTI=",
);

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}/zammad/graphql`);
  const messages: any = { en: locales.en, fr: locales.fr };
  const locale = "en";
  const fetchAndCheckAuth = async ({
    document,
    variables,
    url,
    method,
    body,
  }: any) => {
    const requestHeaders = {
      "Content-Type": "application/json",
      Accept: "application/json",
      "X-CSRF-Token": csrfToken,
    };
    let responseData = null;
    let responseHeaders = new Headers();
    let responseStatus = null;

    if (document) {
      const { data, headers, status } = await client.rawRequest(
        document,
        variables,
        requestHeaders,
      );
      responseData = data;
      responseHeaders = headers;
      responseStatus = status;
    } else {
      const res = await fetch(url, {
        method,
        headers: requestHeaders,
        body,
      });
      responseData = await res.json();
      responseHeaders = res.headers;
      responseStatus = res.status;
    }

    if (responseStatus !== 200) {
      const res = await fetch("/zammad/auth/sso", {
        method: "GET",
        redirect: "manual",
      });

      console.log({ checkAuth: res });

      return null;
    }

    const token = responseHeaders.get("CSRF-Token");
    setCsrfToken(token);

    return responseData;
  };

  const multiFetcher = async ({
    document,
    variables,
    url,
    method,
    body,
  }: any) => {
    let checks = 0;
    let data = null;

    while (!data && checks < 2) {
      data = await fetchAndCheckAuth({
        document,
        variables,
        url,
        method,
        body,
      });
      checks++;
    }

    return data;
  };

  return (
    <NextAppDirEmotionCacheProvider options={{ key: "css" }}>
      <CssBaseline />
      <SWRConfig value={{ fetcher: multiFetcher }}>
        <SessionProvider>
          <CookiesProvider>
            <LocalizationProvider dateAdapter={AdapterDateFns}>
              <I18n locale={locale} messages={messages[locale]}>
                <LeafcutterProvider>{children}</LeafcutterProvider>
              </I18n>
            </LocalizationProvider>
          </CookiesProvider>
        </SessionProvider>
      </SWRConfig>
    </NextAppDirEmotionCacheProvider>
  );
};