function Page()

in source/app/pages/_app.js [153:215]

• 55 lines of code
• 11 McCabe index (conditional complexity)

function Page({ children, pageProps, pathname }) {
  const { showNavigation, backButton, pageTitle: heading } = pageProps;
  const showGrid = useGridOverlay();

  // All routes are protected by default. We whitelist public routes.
  // Authorization does not occur on public routes.
  const isPublicRoute = ["/styleguide"].indexOf(pathname) >= 0;

  // The Login page is technically a public route, but we handle it separately because
  // we do an auth check on it in order to redirect if the user is already logged in.
  const isLoginRoute = pathname === "/";
  const [isLoggedIn, setLoggedIn] = useState("pending");

  // Don't render the app unless the user is logged in, or this is a public route,
  // or this is the login route and the user is not logged in.
  const shouldRenderApp =
    isLoggedIn === true || isPublicRoute || (isLoginRoute && !isLoggedIn);

  // Authorize user
  // NOTE: This method of authorization is not sufficient to protect static content.
  // The authorization happens on the client side only, which means all static
  // content still gets delivered to the browser in the initial page response
  // (even though we may not render it with React). However, all protected content
  // in this app is delivered by API calls that have their own authorization checks.
  useEffect(() => {
    // If this is a public route, we don't need to authorize.
    if (isPublicRoute) return;

    // Try to get the user's session info
    Auth.currentSession()
      .then(async () => {
        // User has a session
        isLoginRoute && (await Router.push("/home"));
        setLoggedIn(true);
      })
      .catch(() => {
        // No user session, redirect to login if not already there
        setLoggedIn(false);
        !isLoginRoute && Router.push("/");
      });
  }, [isLoginRoute, isPublicRoute]);

  return (
    shouldRenderApp && (
      <div className={css.container}>
        <Header {...reject(isNil, { heading, showNavigation, backButton })} />

        <main>{children}</main>

        {showGrid && (
          <div className={css.gridContainer}>
            {times(
              i => (
                <div key={i} className={css.gridCol} />
              ),
              12
            )}
          </div>
        )}
      </div>
    )
  );
}