All files / layouts/BasicLayout BasicLayout.tsx

100% Statements 10/10
100% Branches 3/3
100% Functions 3/3
100% Lines 8/8

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44                                      488x 488x 488x   488x 184x 68x 68x     488x                            
import { useEffect, type ReactNode } from "react";
import AppNavbar from "main/components/Nav/AppNavbar";
import Footer from "main/components/Nav/Footer";
import { useCurrentUser, useLogout } from "main/utils/currentUser";
import { useSystemInfo } from "main/utils/systemInfo";
 
interface BasicLayoutProps {
  children: ReactNode;
  // When true (the Scaffold Canvas pages), the viewport is pinned so the
  // React Flow canvas handles all pan/zoom itself: a class is added to
  // <body> that index.css uses to disable page scrolling. Every other page
  // scrolls normally.
  lockScroll?: boolean;
}
 
export default function BasicLayout({
  children,
  lockScroll = false,
}: BasicLayoutProps) {
  const doLogout = useLogout().mutate;
  const currentUser = useCurrentUser();
  const { data: systemInfo } = useSystemInfo();
 
  useEffect(() => {
    if (!lockScroll) return;
    document.body.classList.add("scaffold-canvas-active");
    return () => document.body.classList.remove("scaffold-canvas-active");
  }, [lockScroll]);
 
  return (
    <div className="BasicLayout" data-testid="BasicLayout">
      <AppNavbar
        doLogout={doLogout}
        currentUser={currentUser}
        systemInfo={systemInfo}
      />
      <main className="main-content" data-testid="BasicLayout-main-content">
        {children}
      </main>
      <Footer />
    </div>
  );
}