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

"use client";

import { FC, PropsWithChildren, useState } from "react";
import { usePathname } from "next/navigation";
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/AdapterDateFns";
import { LocalizationProvider } from "@mui/x-date-pickers-pro";
import { LicenseInfo } from "@mui/x-date-pickers-pro";
import { locales } from "leafcutter-common";

LicenseInfo.setLicenseKey(
  "7c9bf25d9e240f76e77cbf7d2ba58a23Tz02NjU4OCxFPTE3MTU4NjIzMzQ2ODgsUz1wcm8sTE09c3Vic2NyaXB0aW9uLEtWPTI=",
);

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 (
    <>
      <CssBaseline />
      <NextAppDirEmotionCacheProvider options={{ key: "css" }}>
        <SWRConfig value={{ fetcher: multiFetcher }}>
          <SessionProvider>
            <CookiesProvider>
              <LocalizationProvider dateAdapter={AdapterDateFns}>
                <I18n locale={locale} messages={messages[locale]}>
                  {children}
                </I18n>
              </LocalizationProvider>
            </CookiesProvider>
          </SessionProvider>
        </SWRConfig>
      </NextAppDirEmotionCacheProvider>
    </>
  );
};