From 79ebf31967ee195b8ce5cfbfe3e8c73262ca00e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ant=C3=B3nio=20Loureiro?= <ajb.loureiro@gmail.com>
Date: Fri, 7 Jun 2024 15:25:14 +0100
Subject: [PATCH] refactor: Abstraction of specific AddModal component out of
 the Navbar

---
 frontend/src/components/Common/Navbar.tsx | 17 ++++++++---------
 frontend/src/routes/_layout/admin.tsx     |  3 ++-
 frontend/src/routes/_layout/items.tsx     |  3 ++-
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Common/Navbar.tsx b/frontend/src/components/Common/Navbar.tsx
index edcb3d08ac..1579a33b27 100644
--- a/frontend/src/components/Common/Navbar.tsx
+++ b/frontend/src/components/Common/Navbar.tsx
@@ -1,17 +1,17 @@
+import { ComponentType, ElementType } from 'react';
+
 import { Button, Flex, Icon, useDisclosure } from "@chakra-ui/react"
 import { FaPlus } from "react-icons/fa"
 
-import AddUser from "../Admin/AddUser"
-import AddItem from "../Items/AddItem"
-
 interface NavbarProps {
   type: string
+  addModalAs: ComponentType | ElementType
 }
 
-const Navbar = ({ type }: NavbarProps) => {
-  const addUserModal = useDisclosure()
-  const addItemModal = useDisclosure()
+const Navbar = ({ type, addModalAs }: NavbarProps) => {
+  const addModal = useDisclosure()
 
+  const AddModal = addModalAs
   return (
     <>
       <Flex py={8} gap={4}>
@@ -26,12 +26,11 @@ const Navbar = ({ type }: NavbarProps) => {
           variant="primary"
           gap={1}
           fontSize={{ base: "sm", md: "inherit" }}
-          onClick={type === "User" ? addUserModal.onOpen : addItemModal.onOpen}
+          onClick={addModal.onOpen}
         >
           <Icon as={FaPlus} /> Add {type}
         </Button>
-        <AddUser isOpen={addUserModal.isOpen} onClose={addUserModal.onClose} />
-        <AddItem isOpen={addItemModal.isOpen} onClose={addItemModal.onClose} />
+        <AddModal isOpen={addModal.isOpen} onClose={addModal.onClose} />
       </Flex>
     </>
   )
diff --git a/frontend/src/routes/_layout/admin.tsx b/frontend/src/routes/_layout/admin.tsx
index 800317bf2b..b9724c4c19 100644
--- a/frontend/src/routes/_layout/admin.tsx
+++ b/frontend/src/routes/_layout/admin.tsx
@@ -20,6 +20,7 @@ import { Suspense } from "react"
 import { type UserPublic, UsersService } from "../../client"
 import ActionsMenu from "../../components/Common/ActionsMenu"
 import Navbar from "../../components/Common/Navbar"
+import AddUser from "../../components/Admin/AddUser"
 
 export const Route = createFileRoute("/_layout/admin")({
   component: Admin,
@@ -93,7 +94,7 @@ function Admin() {
       <Heading size="lg" textAlign={{ base: "center", md: "left" }} pt={12}>
         User Management
       </Heading>
-      <Navbar type={"User"} />
+      <Navbar type={"User"} addModalAs={AddUser}/>
       <TableContainer>
         <Table fontSize="md" size={{ base: "sm", md: "md" }}>
           <Thead>
diff --git a/frontend/src/routes/_layout/items.tsx b/frontend/src/routes/_layout/items.tsx
index 9946e3b4fd..fb66e2418d 100644
--- a/frontend/src/routes/_layout/items.tsx
+++ b/frontend/src/routes/_layout/items.tsx
@@ -20,6 +20,7 @@ import { useEffect } from "react"
 import { ItemsService } from "../../client"
 import ActionsMenu from "../../components/Common/ActionsMenu"
 import Navbar from "../../components/Common/Navbar"
+import AddItem from "../../components/Items/AddItem"
 
 const itemsSearchSchema = z.object({
   page: z.number().catch(1),
@@ -135,7 +136,7 @@ function Items() {
         Items Management
       </Heading>
 
-      <Navbar type={"Item"} />
+      <Navbar type={"Item"} addModalAs={AddItem}/>
       <ItemsTable />
     </Container>
   )