refactor: abstract specific AddModal out of Navbar

This follows the fixes from
fastapi/full-stack-fastapi-template#1246

Author: d4vidsha

frontend/src/components/Common/Navbar.tsx

@@ -1,17 +1,15 @@
 import { Button, Flex, Icon, useDisclosure } from "@chakra-ui/react"
+import type { ComponentType, ElementType } from "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 +24,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

@@ -16,6 +16,7 @@ import {
 import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query"
 import { createFileRoute } from "@tanstack/react-router"
 
+import AddUser from "@/components/Admin/AddUser"
 import { Suspense } from "react"
 import { type UserPublic, UsersService } from "../../client"
 import ActionsMenu from "../../components/Common/ActionsMenu"
@@ -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

@@ -16,6 +16,7 @@ import { useQuery, useQueryClient } from "@tanstack/react-query"
 import { createFileRoute, useNavigate } from "@tanstack/react-router"
 import { z } from "zod"
 
+import AddItem from "@/components/Items/AddItem"
 import { useEffect } from "react"
 import { ItemsService } from "../../client"
 import ActionsMenu from "../../components/Common/ActionsMenu"
@@ -135,7 +136,7 @@ function Items() {
         Items Management
       </Heading>
 
-      <Navbar type={"Item"} />
+      <Navbar type={"Item"} addModalAs={AddItem} />
       <ItemsTable />
     </Container>
   )