Remove unnecessary prop drilling (#826)

Enterprise-CMCS · Dec 12, 2024 · 58b6361 · 58b6361
1 parent b07f025
commit 58b6361
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 33 deletions.
diff --git a/services/ui-src/src/components/app/App.tsx b/services/ui-src/src/components/app/App.tsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect } from "react";
+import { useEffect } from "react";
 import { useLocation, Routes, Route } from "react-router-dom";
 import { ErrorBoundary } from "react-error-boundary";
 // components
@@ -20,15 +20,12 @@ import {
   fireTealiumPageView,
   isApparentReportPage,
   makeMediaQueryClasses,
-  UserContext,
   useStore,
 } from "utils";
 import { ReportProvider } from "components/reports/ReportProvider";
 
 export const App = () => {
   const mqClasses = makeMediaQueryClasses();
-  const context = useContext(UserContext);
-  const { logout } = context;
   const { user, showLocalLogins } = useStore();
   const { pathname, key } = useLocation();
 
@@ -51,11 +48,7 @@ export const App = () => {
           <ReportProvider>
             <Timeout />
             <MainSkipNav />
-            {!isExportPage ? (
-              <Header handleLogout={logout} />
-            ) : (
-              <ExportedReportBanner />
-            )}
+            {!isExportPage ? <Header /> : <ExportedReportBanner />}
             <Container sx={sx.appContainer} data-testid="app-container">
               <ErrorBoundary FallbackComponent={Error}>
                 <AppRoutes />

diff --git a/services/ui-src/src/components/layout/Header.test.tsx b/services/ui-src/src/components/layout/Header.test.tsx
@@ -16,25 +16,19 @@ const mockedUseStore = useStore as jest.MockedFunction<typeof useStore>;
 const headerComponent = (
   <RouterWrappedComponent>
     <ReportContext.Provider value={mockReportMethods}>
-      <Header handleLogout={() => {}} />
+      <Header />
     </ReportContext.Provider>
   </RouterWrappedComponent>
 );
 
 const reportComponent = (
   <RouterWrappedComponent>
     <ReportContext.Provider value={mockReportMethods}>
-      <Header handleLogout={() => {}} />
+      <Header />
     </ReportContext.Provider>
   </RouterWrappedComponent>
 );
 
-/*
- * jest.mock("utils/reports/routing", () => ({
- * isReportFormPage: jest.fn(() => true),
- * }));
- */
-
 describe("<Header />", () => {
   describe("Test Header", () => {
     beforeEach(() => {

diff --git a/services/ui-src/src/components/layout/Header.tsx b/services/ui-src/src/components/layout/Header.tsx
@@ -12,7 +12,7 @@ import getHelpIcon from "assets/icons/icon_help.png";
 import checkIcon from "assets/icons/icon_check_gray.png";
 import closeIcon from "assets/icons/icon_cancel_x_circle.png";
 
-export const Header = ({ handleLogout }: Props) => {
+export const Header = () => {
   const { isMobile } = useBreakpoint();
   const { report } = useStore() ?? {};
   const { lastSavedTime, isReportPage } = useContext(ReportContext);
@@ -45,7 +45,7 @@ export const Header = ({ handleLogout }: Props) => {
                   hideText={isMobile}
                 />
               </Link>
-              <Menu handleLogout={handleLogout} />
+              <Menu />
             </Flex>
           </Flex>
         </Container>
@@ -90,10 +90,6 @@ export const Header = ({ handleLogout }: Props) => {
   );
 };
 
-interface Props {
-  handleLogout: () => void;
-}
-
 const sx = {
   root: {
     position: "sticky",

diff --git a/services/ui-src/src/components/menus/Menu.test.tsx b/services/ui-src/src/components/menus/Menu.test.tsx
@@ -1,13 +1,27 @@
 import { render, screen } from "@testing-library/react";
-// utils
-import { RouterWrappedComponent } from "utils/testing/setupJest";
+import userEvent from "@testing-library/user-event";
 //components
 import { Menu } from "components";
+// utils
+import {
+  mockUserContext,
+  RouterWrappedComponent,
+} from "utils/testing/setupJest";
+import { UserContext } from "utils";
 import { testA11y } from "utils/testing/commonTests";
 
+const mockLogout = jest.fn();
+
+const mockContext = {
+  ...mockUserContext,
+  logout: mockLogout,
+};
+
 const menuComponent = (
   <RouterWrappedComponent>
-    <Menu handleLogout={() => {}} />
+    <UserContext.Provider value={mockContext}>
+      <Menu />
+    </UserContext.Provider>
   </RouterWrappedComponent>
 );
 
@@ -17,5 +31,12 @@ describe("<Menu />", () => {
     expect(screen.getByTestId("header-menu-dropdown-button")).toBeVisible();
   });
 
+  test("Menu button logout fires logout function", async () => {
+    render(menuComponent);
+    const logoutButton = screen.getByText("Log Out");
+    await userEvent.click(logoutButton);
+    expect(mockLogout).toHaveBeenCalledTimes(1);
+  });
+
   testA11y(menuComponent);
 });
diff --git a/services/ui-src/src/components/menus/Menu.tsx b/services/ui-src/src/components/menus/Menu.tsx
@@ -1,3 +1,4 @@
+import { useContext } from "react";
 import { Link as RouterLink } from "react-router-dom";
 // components
 import {
@@ -12,14 +13,15 @@ import {
 } from "@chakra-ui/react";
 import { MenuOption } from "components";
 // utils
-import { useBreakpoint } from "utils";
+import { useBreakpoint, UserContext } from "utils";
 // assets
 import accountCircleIcon from "assets/icons/icon_account_circle.png";
 import chevronDownIcon from "assets/icons/icon_arrow_down.png";
 import editIcon from "assets/icons/icon_edit_square.png";
 import logoutIcon from "assets/icons/icon_arrow_right_square.png";
 
-export const Menu = ({ handleLogout }: Props) => {
+export const Menu = () => {
+  const { logout } = useContext(UserContext);
   const { isMobile } = useBreakpoint();
   return (
     <MenuRoot offset={[8, 20]}>
@@ -55,7 +57,7 @@ export const Menu = ({ handleLogout }: Props) => {
           </MenuItem>
         </Link>
         <MenuItem
-          onClick={handleLogout}
+          onClick={logout}
           sx={sx.menuItem}
           tabIndex={0}
           data-testid="header-menu-option-log-out"
@@ -67,10 +69,6 @@ export const Menu = ({ handleLogout }: Props) => {
   );
 };
 
-interface Props {
-  handleLogout: () => void;
-}
-
 const sx = {
   menuButton: {
     padding: 0,