Create a baseContainer and change Manufacturer to ManufacturerContainer

#1154

src/App.tsx

@@ -25,7 +25,7 @@ import { HomePage } from './homePage/homePage.component';
 import IMSThemeProvider from './imsThemeProvider.component';
 import Items from './items/items.component';
 import ItemsLandingPage from './items/itemsLandingPage.component';
-import Manufacturer from './manufacturer/manufacturer.component';
+import ManufacturerContainer from './manufacturer/manufacturerContainer.component';
 import ManufacturerLandingPage from './manufacturer/manufacturerLandingPage.component';
 import ManufacturerTable from './manufacturer/manufacturersTable.component';
 import Preloader from './preloader/preloader.component';
@@ -92,7 +92,7 @@ const router = createBrowserRouter([
       { path: paths.systems, Component: Systems },
       {
         path: paths.manufacturers,
-        Component: Manufacturer,
+        Component: ManufacturerContainer,
         children: [
           { path: '', Component: ManufacturerTable },
           { path: paths.manufacturer, Component: ManufacturerLandingPage },

src/common/baseContainer.component.tsx

@@ -0,0 +1,7 @@
+import { Outlet } from 'react-router-dom';
+
+const BaseContainer = () => {
+  return <Outlet />;
+};
+
+export default BaseContainer;

src/manufacturer/manufacturer.component.test.tsx → src/manufacturer/manufacturerContainer.component.test.tsx

@@ -1,7 +1,7 @@
 import { screen, waitFor } from '@testing-library/react';
 import userEvent, { UserEvent } from '@testing-library/user-event';
 import { renderComponentWithRouterProvider } from '../testUtils';
-import Manufacturer from './manufacturer.component';
+import ManufacturerContainer from './manufacturerContainer.component';
 
 const mockedUseNavigate = vi.fn();
 
@@ -10,11 +10,11 @@ vi.mock('react-router-dom', async () => ({
   useNavigate: () => mockedUseNavigate,
 }));
 
-describe('Manufacturer', () => {
+describe('Manufacturer Container', () => {
   let user: UserEvent;
   const createView = (path: string, isLandingPage?: boolean) => {
     return renderComponentWithRouterProvider(
-      <Manufacturer />,
+      <ManufacturerContainer />,
       isLandingPage ? 'manufacturer' : 'manufacturers',
       path
     );

src/manufacturer/manufacturer.component.tsx → src/manufacturer/manufacturerContainer.component.tsx

@@ -1,12 +1,13 @@
 import { Box } from '@mui/material';
 import React from 'react';
-import { Outlet, useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { BreadcrumbsInfo } from '../api/api.types';
 import { useGetManufacturer } from '../api/manufacturers';
 import { paths } from '../App';
+import BaseContainer from '../common/baseContainer.component';
 import Breadcrumbs from '../view/breadcrumbs.component';
 
-function Manufacturer() {
+function ManufacturerContainer() {
   const { manufacturer_id: manufacturerId } = useParams();
 
   const { data: manufacturerData } = useGetManufacturer(manufacturerId);
@@ -56,8 +57,8 @@ function Manufacturer() {
           homeLocation="Manufacturers"
         />
       </Box>
-      <Outlet />
+      <BaseContainer />
     </div>
   );
 }
-export default Manufacturer;
+export default ManufacturerContainer;