@pautena/react-design-system 0.1.4 → 0.3.0

package/src/generators/model-router/model-router.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { DummyModelRouter } from "./stories/model-router.stories";
+import { DummyModelRouter, InternalModelRouter } from "./stories/model-router.stories";
 import {
   expectModelFieldInputExist,
   expectProgressIndicator,
@@ -9,12 +9,31 @@ import {
   TestRouter,
   expectModelFieldValue,
   expectModelFieldInputValue,
+  selectOption,
 } from "~/tests";
+import { data as mockData } from "./stories/templates";
 import userEvent from "@testing-library/user-event";
 import { getRandomItem } from "../../utils";
 import { Model } from "../generators.model";
-import { createModelInstance, MockInstance, mockModel } from "../generators.mock";
+import {
+  BirthDateFormat,
+  createModelInstance,
+  MockInstance,
+  mockModel,
+  ReturnTimeFormat,
+  TradeDateFormat,
+} from "../generators.mock";
 import { NotificationCenterProvider } from "../../providers";
+import { Box } from "@mui/system";
+import { Button } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+import {
+  clearCheckbox,
+  clearMultiSelect,
+  expectToHaveBeenCalledOnceWithMockInstance,
+  pickDatetime,
+  selectOptions,
+} from "../../tests";
 
 const REQUEST_TIMEOUT = 20;
 
@@ -30,16 +49,39 @@ describe("ModelRouter", () => {
         name: "Add Items",
         level: 1,
       }),
+    expectNotToBeInAddScreen: () => {
+      expect(
+        screen.queryByRole("heading", {
+          name: "Add Items",
+          level: 1,
+        }),
+      ).not.toBeInTheDocument();
+    },
     expectDetailScreen: async ({ id }: { id: string }) =>
       await screen.findByRole("heading", {
         name: id,
         level: 1,
       }),
+    expectNotToBeInDetailsScreen: ({ id }: { id: string }) => {
+      expect(
+        screen.queryByRole("heading", {
+          name: id,
+          level: 1,
+        }),
+      ).not.toBeInTheDocument();
+    },
     expectUpdateScreen: async ({ id }: { id: string }) =>
       await screen.findByRole("heading", {
         name: `Edit ${id}`,
         level: 1,
       }),
+    expectNotToBeInUpdateScreen: ({ id }: { id: string }) =>
+      expect(
+        screen.queryByRole("heading", {
+          name: `Edit ${id}`,
+          level: 1,
+        }),
+      ).not.toBeInTheDocument(),
     expectListItems: async ({ data, model }: { data: MockInstance[]; model: Model }) => {
       for (let i = 0; i < model.fields.length; ++i) {
         const { id, listable } = model.fields[i];
@@ -52,43 +94,34 @@ describe("ModelRouter", () => {
     expectMenuOption: async ({ id }: { id: string }) => {
       await screen.findByTestId(`options-${id}`);
     },
-    expectSubmitInstanceCall: (mockFn: jest.Mock, instance: MockInstance) => {
-      expect(mockFn).toHaveBeenCalledTimes(1);
-      expect(mockFn).toHaveBeenCalledWith({
-        id: instance.id,
-        firstName: instance.firstName,
-        middleName: instance.middleName,
-        lastName: instance.lastName,
-        gender: instance.gender,
-        age: instance.age.toString(),
-        birthDate: instance.birthDate,
-        car: {
-          model: instance.car.model,
-          manufacturer: instance.car.manufacturer,
-          color: instance.car.color,
-          type: instance.car.type,
-          vin: instance.car.vin,
-          vrm: instance.car.vrm,
-        },
-        quantity: instance.quantity.toString(),
-        available: instance.available.toString(),
-        currency: instance.currency,
-        tradeDate: instance.tradeDate,
-      });
+    expectNotToHaveMenuOption: ({ id }: { id: string }) => {
+      expect(screen.queryByTestId(`options-${id}`)).not.toBeInTheDocument();
     },
   };
 
   const actions = {
     navigateToAddScreen: async () => {
-      await userEvent.click(screen.getByRole("button", { name: /add/i }));
+      await userEvent.click(await screen.findByRole("button", { name: "Add" }));
+    },
+    forceNavigateToAddScreen: async () => {
+      await userEvent.click(screen.getByRole("button", { name: /force add/i }));
     },
     navigateToUpdateScreen: async ({ id }: { id: string }) => {
       await actions.openItemOptions({ id });
       await userEvent.click(screen.getByRole("menuitem", { name: /edit/i }));
     },
+    forceNavigateToUpdateScreen: async () => {
+      await userEvent.click(screen.getByRole("button", { name: /force update/i }));
+    },
     navigateToDetailScreen: async ({ name }: { name: string }) => {
       await userEvent.click(await screen.findByRole("cell", { name }));
     },
+    navigateToInternal: async () => {
+      await userEvent.click(screen.getByRole("button", { name: /go to internal/i }));
+    },
+    forceNavigateToDetailsScreen: async () => {
+      await userEvent.click(screen.getByRole("button", { name: /force details/i }));
+    },
     openItemOptions: async ({ id }: { id: string }) => {
       await userEvent.click(await screen.findByTestId(`options-${id}`));
     },
@@ -107,17 +140,18 @@ describe("ModelRouter", () => {
       const firstNameElement = screen.getByRole("textbox", { name: /first name/i });
       const middleNameElement = screen.getByRole("textbox", { name: /middle name/i });
       const lastNameElement = screen.getByRole("textbox", { name: /last name/i });
-      const genderElement = screen.getByRole("textbox", { name: /gender/i });
+      const genderElement = screen.getByRole("button", { name: /gender/i });
       const ageElement = screen.getByRole("spinbutton", { name: /age/i });
       const birthDateElement = screen.getByRole("textbox", { name: /birth date/i });
-      const manufacturerElement = screen.getByRole("textbox", { name: /manufacturer/i });
-      const modelElement = screen.getByRole("textbox", { name: /model/i });
+      const manufacturerElement = screen.getByRole("button", { name: /manufacturer/i });
+      const modelElement = screen.getByRole("button", { name: /model/i });
       const colorElement = screen.getByRole("textbox", { name: /color/i });
-      const typeElement = screen.getByRole("textbox", { name: /type/i });
+      const typeElement = screen.getByRole("button", { name: /type/i });
       const vinElement = screen.getByRole("textbox", { name: /vin/i });
       const vrmElement = screen.getByRole("textbox", { name: /vrm/i });
+      const timeReturnElement = screen.getByRole("textbox", { name: /return time/i });
       const quantityElement = screen.getByRole("spinbutton", { name: /q/i });
-      const availableElement = screen.getByRole("textbox", { name: /available/i });
+      const availableElement = screen.getByRole("checkbox", { name: /available/i });
       const currencyElement = screen.getByRole("textbox", { name: /currency/i });
       const tradeDateElement = screen.getByRole("textbox", { name: /trade date/i });
 
@@ -126,37 +160,39 @@ describe("ModelRouter", () => {
         await userEvent.clear(firstNameElement);
         await userEvent.clear(middleNameElement);
         await userEvent.clear(lastNameElement);
-        await userEvent.clear(genderElement);
         await userEvent.clear(ageElement);
         await userEvent.clear(birthDateElement);
-        await userEvent.clear(manufacturerElement);
-        await userEvent.clear(modelElement);
         await userEvent.clear(colorElement);
-        await userEvent.clear(typeElement);
         await userEvent.clear(vinElement);
         await userEvent.clear(vrmElement);
         await userEvent.clear(quantityElement);
         await userEvent.clear(availableElement);
         await userEvent.clear(currencyElement);
         await userEvent.clear(tradeDateElement);
+        await userEvent.clear(timeReturnElement);
+        await clearCheckbox(availableElement);
+        await clearMultiSelect(typeElement);
       }
       await userEvent.type(idElement, instance.id);
       await userEvent.type(firstNameElement, instance.firstName);
       await userEvent.type(middleNameElement, instance.middleName);
       await userEvent.type(lastNameElement, instance.lastName);
-      await userEvent.type(genderElement, instance.gender);
+      await selectOption(genderElement, instance.gender);
       await userEvent.type(ageElement, instance.age.toString());
-      await userEvent.type(birthDateElement, instance.birthDate);
-      await userEvent.type(modelElement, instance.car.model);
-      await userEvent.type(manufacturerElement, instance.car.manufacturer);
+      pickDatetime(birthDateElement, instance.birthDate, BirthDateFormat);
+      await selectOption(modelElement, instance.car.model);
+      await selectOption(manufacturerElement, instance.car.manufacturer);
       await userEvent.type(colorElement, instance.car.color);
-      await userEvent.type(typeElement, instance.car.type);
+      await selectOptions(typeElement, instance.car.type);
       await userEvent.type(vinElement, instance.car.vin);
       await userEvent.type(vrmElement, instance.car.vrm);
+      pickDatetime(timeReturnElement, instance.car.returnTime, ReturnTimeFormat);
       await userEvent.type(quantityElement, instance.quantity.toString());
-      await userEvent.type(availableElement, instance.available.toString());
+      if (instance.available) {
+        await userEvent.click(availableElement);
+      }
       await userEvent.type(currencyElement, instance.currency);
-      await userEvent.type(tradeDateElement, instance.tradeDate);
+      pickDatetime(tradeDateElement, instance.tradeDate, TradeDateFormat);
 
       submit && (await userEvent.click(screen.getByRole("button", { name: /save/i })));
 
@@ -167,7 +203,18 @@ describe("ModelRouter", () => {
   const renderComponent = async ({
     router = "memory",
     screen = "initial",
-  }: { router?: TestRouter; screen?: "initial" | "add" | "details" | "update" } = {}) => {
+    deleteFeature,
+    updateFeature,
+    addFeature,
+    detailsFeature,
+  }: {
+    router?: TestRouter;
+    screen?: "initial" | "add" | "details" | "update";
+    deleteFeature?: boolean;
+    updateFeature?: boolean;
+    addFeature?: boolean;
+    detailsFeature?: boolean;
+  } = {}) => {
     const onRequestList = jest.fn();
     const onRequestItem = jest.fn();
     const onSubmitNewItem = jest.fn();
@@ -175,10 +222,28 @@ describe("ModelRouter", () => {
     const onSubmitUpdate = jest.fn();
     const onRequestDelete = jest.fn();
     const args = DummyModelRouter.args;
+    const randomItem = getRandomItem(args.initialData);
+
+    const ForceNavigationComponent = ({ id }: { id: string }) => {
+      const navigate = useNavigate();
+
+      return (
+        <Box>
+          <Button onClick={() => navigate(`/${id}/update`)}>Force update</Button>
+          <Button onClick={() => navigate("/add")}>Force add</Button>
+          <Button onClick={() => navigate(`/${id}`)}>Force details</Button>
+        </Box>
+      );
+    };
+
     const instance = render(
       <NotificationCenterProvider>
         <DummyModelRouter
           {...args}
+          deleteFeature={deleteFeature}
+          updateFeature={updateFeature}
+          addFeature={addFeature}
+          detailsFeature={detailsFeature}
           requestTimeout={REQUEST_TIMEOUT}
           onRequestListAction={onRequestList}
           onRequestItem={onRequestItem}
@@ -187,14 +252,13 @@ describe("ModelRouter", () => {
           onSubmitUpdateAction={onSubmitUpdate}
           onRequestDeleteAction={onRequestDelete}
         />
+        <ForceNavigationComponent id={randomItem.item.id} />
       </NotificationCenterProvider>,
       {
         router,
       },
     );
 
-    const randomItem = getRandomItem(args.initialData);
-
     if (screen === "add") {
       await actions.navigateToAddScreen();
     } else if (screen === "details") {
@@ -217,6 +281,15 @@ describe("ModelRouter", () => {
     };
   };
 
+  const renderComponentInsideRouter = () => {
+    render(
+      <NotificationCenterProvider>
+        <InternalModelRouter />
+      </NotificationCenterProvider>,
+      { router: "memory" },
+    );
+  };
+
   describe("router screens", () => {
     it("would render the list screen by default", async () => {
       await renderComponent();
@@ -292,6 +365,41 @@ describe("ModelRouter", () => {
     });
   });
 
+  describe("inside another router", () => {
+    it("would navigate to the add screen", async () => {
+      renderComponentInsideRouter();
+
+      await actions.navigateToInternal();
+      await actions.navigateToAddScreen();
+
+      await assertions.expectAddScreen();
+    });
+
+    it("would navigate to the detail screen", async () => {
+      renderComponentInsideRouter();
+      const {
+        item: { id, firstName },
+      } = getRandomItem<MockInstance>(mockData);
+
+      await actions.navigateToInternal();
+      await actions.navigateToDetailScreen({ name: firstName });
+
+      await assertions.expectDetailScreen({ id });
+    });
+
+    it("would navigate to the update screen", async () => {
+      renderComponentInsideRouter();
+      const {
+        item: { id },
+      } = getRandomItem<MockInstance>(mockData);
+
+      await actions.navigateToInternal();
+      await actions.navigateToUpdateScreen({ id });
+
+      await assertions.expectUpdateScreen({ id });
+    });
+  });
+
   describe("list screen", () => {
     it("would call onRequestList when is mounted", async () => {
       const { onRequestList } = await renderComponent();
@@ -321,13 +429,13 @@ describe("ModelRouter", () => {
       it("would render an add button", async () => {
         await renderComponent();
 
-        expect(screen.getByRole("button", { name: /add/i })).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Add" })).toBeInTheDocument();
       });
 
       it("would navigate to the add screen if I press the add button", async () => {
         const { history } = await renderComponent({ router: "router" });
 
-        await userEvent.click(screen.getByRole("button", { name: /add/i }));
+        await userEvent.click(screen.getByRole("button", { name: "Add" }));
 
         expect(history.location.pathname).toBe("/add");
       });
@@ -430,7 +538,7 @@ describe("ModelRouter", () => {
 
       const newInstance = await actions.fullfillModelForm({ model, submit: true });
 
-      assertions.expectSubmitInstanceCall(onSubmitNewItem, newInstance);
+      expectToHaveBeenCalledOnceWithMockInstance(onSubmitNewItem, newInstance);
     });
 
     it("would show a loading indicator when the request is in progress", async () => {
@@ -593,12 +701,12 @@ describe("ModelRouter", () => {
     });
 
     it("would make a request with the new values when the form is submitted", async () => {
-      const { model } = await renderComponent({ screen: "update" });
+      const { model, onSubmitUpdate } = await renderComponent({ screen: "update" });
 
       await waitForProgressIndicatorToBeRemoved();
-      const newInstance = await actions.fullfillModelForm({ model, clear: true });
+      const newInstance = await actions.fullfillModelForm({ model, clear: true, submit: true });
 
-      expectModelFieldInputValue(model.fields, newInstance);
+      expectToHaveBeenCalledOnceWithMockInstance(onSubmitUpdate, newInstance);
     });
 
     it("would show a loading indicator while the submit request is in progress", async () => {
@@ -610,14 +718,14 @@ describe("ModelRouter", () => {
       expectProgressIndicator();
     });
 
-    it("would navigate to the list screen when the submit request finish", async () => {
-      const { model, onSubmitUpdate } = await renderComponent({ screen: "update" });
+    // it("would navigate to the list screen when the submit request finish", async () => {
+    //   const { model } = await renderComponent({ screen: "update" });
 
-      await waitForProgressIndicatorToBeRemoved();
-      const newInstance = await actions.fullfillModelForm({ model, submit: true, clear: true });
+    //   await waitForProgressIndicatorToBeRemoved();
+    //   await actions.fullfillModelForm({ model, submit: true, clear: true });
 
-      assertions.expectSubmitInstanceCall(onSubmitUpdate, newInstance);
-    });
+    //   await assertions.expectListScreen();
+    // });
   });
 
   describe("delete item", () => {
@@ -663,4 +771,103 @@ describe("ModelRouter", () => {
       expect(screen.queryByRole("cell", { name: firstName })).not.toBeInTheDocument();
     });
   });
+
+  describe("modifying enabled features", () => {
+    describe("deleteFeature disabled", () => {
+      it("wouldn't have an option to remove an item from the list", async () => {
+        const { data } = await renderComponent({ deleteFeature: false });
+        const {
+          item: { id, firstName },
+        } = getRandomItem<MockInstance>(data);
+
+        await screen.findByRole("cell", { name: firstName });
+        await actions.openItemOptions({ id });
+
+        expect(screen.queryByRole("menuitem", { name: /remove/i })).not.toBeInTheDocument();
+      });
+    });
+
+    describe("updateFeature disabled", () => {
+      it("wouldn't have an option to remove an item from the list", async () => {
+        const { data } = await renderComponent({ updateFeature: false });
+        const {
+          item: { id, firstName },
+        } = getRandomItem<MockInstance>(data);
+
+        await screen.findByRole("cell", { name: firstName });
+        await actions.openItemOptions({ id });
+
+        expect(screen.queryByRole("menuitem", { name: /edit/i })).not.toBeInTheDocument();
+      });
+
+      it("wouldn't have a path to navigate to edit an item", async () => {
+        const {
+          randomItem: {
+            item: { id },
+          },
+        } = await renderComponent({
+          updateFeature: false,
+        });
+
+        await actions.forceNavigateToUpdateScreen();
+
+        assertions.expectNotToBeInUpdateScreen({ id });
+      });
+    });
+
+    describe("deleteFeature and updateFeature disabled", () => {
+      it("wouldn't render an options button in the list", async () => {
+        const { data } = await renderComponent({ deleteFeature: false, updateFeature: false });
+        const {
+          item: { id },
+        } = getRandomItem<MockInstance>(data);
+
+        assertions.expectNotToHaveMenuOption({ id });
+      });
+    });
+
+    describe("addFeature disabled", () => {
+      it("wouldn't render a button to navigate to the add screen", async () => {
+        await renderComponent({ addFeature: false });
+
+        expect(screen.queryByRole("button", { name: "Add" })).not.toBeInTheDocument();
+      });
+
+      it("wouldn't have a path to navigate to the add screen", async () => {
+        await renderComponent({
+          addFeature: false,
+        });
+
+        await actions.forceNavigateToAddScreen();
+
+        assertions.expectNotToBeInAddScreen();
+      });
+    });
+
+    describe("detailsFeature disabled", () => {
+      it("wouldn't navigate to the details screen if I click a row item", async () => {
+        const {
+          randomItem: {
+            item: { id, firstName },
+          },
+        } = await renderComponent({ detailsFeature: false });
+
+        await userEvent.click(await screen.findByRole("cell", { name: firstName }));
+
+        assertions.expectNotToBeInDetailsScreen({ id });
+      });
+
+      it("wouldn't have a path to navigate to the details screen", async () => {
+        const {
+          randomItem: {
+            item: { id },
+          },
+        } = await renderComponent({ detailsFeature: false });
+
+        await actions.forceNavigateToDetailsScreen();
+
+        assertions.expectNotToBeInDetailsScreen({ id });
+      });
+    });
+  });
 });

package/src/generators/model-router/model-router.tsx

@@ -18,12 +18,13 @@ export type ModelRouterProps<T extends BasicModelInstance> = DetailsScreenProps<
   UpdateScreenProps<T>;
 
 export const ModelRouter = <T extends BasicModelInstance>(props: ModelRouterProps<T>) => {
+  const { updateFeature = true, addFeature = true, detailsFeature = true } = props;
   return (
     <Routes>
       <Route path="" element={<ListScreen {...props} />} />
-      <Route path=":id" element={<DetailsScreen {...props} />} />
-      <Route path="add" element={<AddScreen {...props} />} />
-      <Route path=":id/update" element={<UpdateScreen {...props} />} />
+      {detailsFeature && <Route path=":id" element={<DetailsScreen {...props} />} />}
+      {addFeature && <Route path="add" element={<AddScreen {...props} />} />}
+      {updateFeature && <Route path=":id/update" element={<UpdateScreen {...props} />} />}
     </Routes>
   );
 };

package/src/generators/model-router/screens/add-screen.tsx

@@ -24,6 +24,7 @@ export interface AddScreenProps<T extends BasicModelInstance> extends BaseScreen
 export const AddScreen = <T extends BasicModelInstance>({
   model,
   modelName,
+  basePath = "",
   onSubmitNewItem,
   newItemRequest,
 }: AddScreenProps<T>) => {
@@ -33,7 +34,7 @@ export const AddScreen = <T extends BasicModelInstance>({
   useEffect(() => {
     if (newItemRequest.success) {
       show({ message: "Item added successfully", severity: "success" });
-      navigate("/");
+      navigate(`${basePath}/`);
     }
   }, [newItemRequest.success]);
 

package/src/generators/model-router/screens/list-screen.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import { Content, Header, TableList } from "~/components";
+import { Content, Header, HeaderAction, TableList, TableRowOption } from "~/components";
 import { BasicModelInstance } from "~/generators";
 import { HeaderLayout } from "../../../layouts";
 import { RequestState } from "../model-router.types";
@@ -41,10 +41,15 @@ export const ListScreen = <T extends BasicModelInstance>({
   model,
   modelName,
   listData,
-  onRequestList,
-  onClickDeleteItem,
   listRequest,
   deleteRequest,
+  basePath = "",
+  deleteFeature = true,
+  updateFeature = true,
+  addFeature = true,
+  detailsFeature = true,
+  onRequestList,
+  onClickDeleteItem,
 }: ListScreenProps<T>) => {
   const navigate = useNavigate();
 
@@ -52,30 +57,51 @@ export const ListScreen = <T extends BasicModelInstance>({
     onRequestList();
   }, []);
 
-  const handleClickListItem = (item: T) => {
-    navigate(`/${item.id}`);
-  };
+  const handleClickListItem = detailsFeature
+    ? (item: T) => {
+        navigate(`${basePath}/${item.id}`);
+      }
+    : undefined;
 
   const handleClickListOption = (optionId: "edit" | "remove", item: T) => {
     if (optionId === "edit") {
-      navigate(`/${item.id}/update`);
+      navigate(`${basePath}/${item.id}/update`);
     } else {
       onClickDeleteItem(item);
     }
   };
 
+  const options: TableRowOption<T>[] = [];
+
+  updateFeature &&
+    options.push({
+      id: "edit",
+      label: "Edit",
+      onClick: (item: T) => handleClickListOption("edit", item),
+    });
+
+  deleteFeature &&
+    options.push({
+      id: "remove",
+      label: "Remove",
+      onClick: (item: T) => handleClickListOption("remove", item),
+    });
+
+  const actions: HeaderAction[] = [];
+
+  addFeature &&
+    actions.push({
+      id: "add",
+      text: "Add",
+      href: `${basePath}/add`,
+    });
+
   return (
     <HeaderLayout loading={listRequest.loading || deleteRequest.loading}>
       <Header
         title={modelName}
         preset="default"
-        actions={[
-          {
-            id: "add",
-            text: "Add",
-            href: "/add",
-          },
-        ]}
+        actions={actions.length > 0 ? actions : undefined}
       />
       <Content>
         <TableList
@@ -91,18 +117,7 @@ export const ListScreen = <T extends BasicModelInstance>({
           data={listData}
           defaultSort={model.fields[0].id}
           onClick={handleClickListItem}
-          options={[
-            {
-              id: "edit",
-              label: "Edit",
-              onClick: (item) => handleClickListOption("edit", item),
-            },
-            {
-              id: "remove",
-              label: "Remove",
-              onClick: (item) => handleClickListOption("remove", item),
-            },
-          ]}
+          options={options.length > 0 ? options : undefined}
         />
       </Content>
     </HeaderLayout>

package/src/generators/model-router/screens/screens.types.ts

@@ -10,4 +10,29 @@ export interface BaseScreenProps {
    * Structure that represents the fields of the model
    */
   model: Model;
+
+  /**
+   * Path to attach before each internal ModelRouter path
+   */
+  basePath?: string;
+
+  /**
+   * If true delete features are enabled
+   */
+  deleteFeature?: boolean;
+
+  /**
+   * If true update features are enabled
+   */
+  updateFeature?: boolean;
+
+  /**
+   * If true add features are enabled
+   */
+  addFeature?: boolean;
+
+  /**
+   * If true details features are enabled
+   */
+  detailsFeature?: boolean;
 }

package/src/generators/model-router/screens/update-screen.tsx

@@ -39,6 +39,7 @@ export interface UpdateScreenProps<T extends BasicModelInstance> extends BaseScr
 export const UpdateScreen = <T extends BasicModelInstance>({
   model,
   modelName,
+  basePath = "",
   submitUpdateItemRequest,
   updateItemRequest,
   updateItem,
@@ -61,7 +62,7 @@ export const UpdateScreen = <T extends BasicModelInstance>({
         message: `The item ${id} has been updated successfully`,
         severity: "success",
       });
-      navigate("/");
+      navigate(`${basePath}/`);
     }
   }, [submitUpdateItemRequest.success]);