wrap-with-provider.js

import React, { Fragment } from "react";
import { navigate } from "gatsby";
import { useLocation } from "@reach/router";
import { withTheme } from "styled-components";

import { setLayoutBase } from "./src/api/Layout";
import { setFirebaseClass } from "./src/api/Firebase";

import {
  setWithAuthorizationWrapper,
  WithAuthorizationClass,
} from "./src/api/Session";

import Firebase from "./src/components/Firebase";
import GlobalStyle, { Centered } from "./src/styles/global";

import { pathPrefix } from "./gatsby-config";
import "bootstrap/dist/css/bootstrap.min.css";
import "react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css";

const fn = ({ element }) => {
  setFirebaseClass(Firebase);

  const WithAuthorizationWrapper = (props) => {
    const location = useLocation();
    const savePathname = () =>
      window.localStorage.setItem(
        "pathname",
        location.pathname.replace(pathPrefix, "")
      );

    const AuthorizationFailed = () => (
      <Centered>
        <h3>You don't have permission to view this page!</h3>
        <p>If you believe you should have access, please contact an admin.</p>
      </Centered>
    );

    return (
      <WithAuthorizationClass
        firebaseAuthNext={(authUser) => {
          if (!authUser) {
            savePathname();
            navigate("/");
          }
        }}
        firebaseAuthFallback={() => {
          savePathname();
          navigate("/");
        }}
        authorizationFailed={<AuthorizationFailed />}
        {...props}
      />
    );
  };
  // would've preferred to call this in gatsby-browser onClientEntry, but can't do Queries in there
  setWithAuthorizationWrapper(WithAuthorizationWrapper);

  const LayoutBase = withTheme(({ theme, children }) => (
    <Fragment>
      <GlobalStyle theme={theme} />
      {children}
    </Fragment>
  ));
  LayoutBase.displayName = "LayoutBase";
  setLayoutBase(LayoutBase);

  return element;
};

export default fn;