♻️ Abstraction of specific AddModal component out of the Navbar (fastapi#1246)

Author: ajbloureiro

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>
     </>
   )

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>

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>
   )