import React from "react";

const ProviderComposer: React.FCC<{
  contexts: JSX.Element[];
}> = ({ contexts, children }) => {
  return contexts.reduceRight((kids, parent) => {
    return React.cloneElement(parent, { children: kids });
  }, children);
};

export default ProviderComposer;

// import Xxx from "path/to/xxx";
// ...

function Layout({ children }) {
  return (
    <ThemeProvider>
      <LocaleProvider>
        <GlobalStoreProvider>
          {children}
          <Footer />
          <TriggerDialogGroup />
        </GlobalStoreProvider>
      </LocaleProvider>
    </ThemeProvider>
  );
}

import ProviderComposer from "./ProviderComposer";

// import Xxx from "path/to/xxx";
// ...

const contexts = [
  <ThemeProvider key="ThemeProvider" />,
  <LocaleProvider key="LocaleProvider" />,
  <GlobalStoreProvider key="GlobalStoreProvider" />,
];

function Layout({ children }) {
  return (
    <ProviderComposer contexts={contexts}>
      {children}
      <Footer />
      <TriggerDialogGroup />
    </ProviderComposer>
  );
}