Change context for editBookmarkForm to useDisclosure + enter to submit

app/providers.tsx

@@ -5,6 +5,7 @@ import { NextUIProvider } from '@nextui-org/system'
 import { ThemeProvider as NextThemesProvider } from 'next-themes'
 import { ThemeProviderProps } from 'next-themes/dist/types'
 import { Bookmark } from '@/types'
+import { useDisclosure } from '@nextui-org/modal'
 
 export interface ProvidersProps {
 	children: React.ReactNode
@@ -13,13 +14,15 @@ export interface ProvidersProps {
 
 export type EditBookmarkContextContent = {
 	isEditBookmark: boolean
-	setIsEditBookmark: (c: boolean) => void
+	onIsEditBookmark: () => void
+	onIsEditBookmarkChange: () => void
 }
 
 export const EditBookmarkContext =
 	React.createContext<EditBookmarkContextContent>({
 		isEditBookmark: false,
-		setIsEditBookmark: () => {},
+		onIsEditBookmark: () => {},
+		onIsEditBookmarkChange: () => {},
 	})
 
 export type BookmarkContextContent = {
@@ -39,7 +42,12 @@ export const BookmarkContext = React.createContext<BookmarkContextContent>({
 })
 
 export function Providers({ children, themeProps }: ProvidersProps) {
-	const [isEditBookmark, setIsEditBookmark] = React.useState<boolean>(false)
+	// const [isEditBookmark, setIsEditBookmark] = React.useState<boolean>(false)
+	const {
+		isOpen: isEditBookmark,
+		onOpen: onIsEditBookmark,
+		onOpenChange: onIsEditBookmarkChange,
+	} = useDisclosure()
 	const [bookmark, setBookmark] = React.useState<Bookmark>({
 		id: 0,
 		name: '',
@@ -56,7 +64,8 @@ export function Providers({ children, themeProps }: ProvidersProps) {
 			<EditBookmarkContext.Provider
 				value={{
 					isEditBookmark,
-					setIsEditBookmark,
+					onIsEditBookmark,
+					onIsEditBookmarkChange,
 				}}>
 				<NextUIProvider>
 					<NextThemesProvider {...themeProps}>

components/bookmarkCard.tsx

@@ -14,13 +14,12 @@ import {
 } from '@nextui-org/dropdown'
 import { useRouter } from 'next/navigation'
 
-import EditBookmarkForm from './editBookmarkForm'
 import { type Bookmark } from '@/types'
 import { useContext } from 'react'
 import { BookmarkContext, EditBookmarkContext } from '@/app/providers'
 
 export const BookmarkCard = ({ data }: { data: Bookmark }) => {
-	const { setIsEditBookmark } = useContext(EditBookmarkContext)
+	const { onIsEditBookmark } = useContext(EditBookmarkContext)
 	const { bookmark, setBookmark } = useContext(BookmarkContext)
 
 	const router = useRouter()
@@ -34,7 +33,7 @@ export const BookmarkCard = ({ data }: { data: Bookmark }) => {
 	}
 	const editBookmark = (selectedBookmark: Bookmark) => {
 		setBookmark({ ...bookmark, ...selectedBookmark })
-		setIsEditBookmark(true)
+		onIsEditBookmark()
 	}
 	return (
 		<>
@@ -67,7 +66,7 @@ export const BookmarkCard = ({ data }: { data: Bookmark }) => {
 						<DropdownMenu aria-label='Static Actions'>
 							<DropdownItem
 								key='edit'
-								onClick={() => editBookmark(data)}>
+								onPress={() => editBookmark(data)}>
 								Edit Bookmark
 							</DropdownItem>
 							<DropdownItem

components/editBookmarkForm.tsx

@@ -16,7 +16,7 @@ import { Bookmark } from '@/types'
 import { BookmarkContext, EditBookmarkContext } from '@/app/providers'
 
 export default function EditBookmarkForm() {
-	const { isEditBookmark, setIsEditBookmark } =
+	const { isEditBookmark, onIsEditBookmarkChange } =
 		useContext(EditBookmarkContext)
 	const { bookmark, setBookmark } = useContext(BookmarkContext)
 
@@ -28,7 +28,7 @@ export default function EditBookmarkForm() {
 			method: 'PATCH',
 			body: JSON.stringify(body),
 		})
-		setIsEditBookmark(false)
+		onIsEditBookmarkChange()
 		router.refresh()
 	}
 
@@ -36,10 +36,14 @@ export default function EditBookmarkForm() {
 		<>
 			<Modal
 				isOpen={isEditBookmark}
-				onOpenChange={() => setIsEditBookmark(false)}
+				onOpenChange={onIsEditBookmarkChange}
 				placement='top-center'
 				hideCloseButton>
-				<ModalContent>
+				<ModalContent
+					onKeyUp={(e) => {
+						console.log(e.key)
+						if (e.key === 'Enter') onSubmit()
+					}}>
 					{(onClose) => (
 						<>
 							<ModalHeader className='flex gap-2'>

components/newBookmarkForm.tsx

@@ -55,8 +55,12 @@ export default function NewBookmarkForm() {
 			<Modal
 				isOpen={isOpen}
 				onOpenChange={onOpenChange}
-				placement='top-center'>
+				placement='top-center'
-				<ModalContent>
+				hideCloseButton>
+				<ModalContent
+					onKeyUp={(e) => {
+						if (e.key === 'Enter') onSubmit()
+					}}>
 					{(onClose) => (
 						<>
 							<ModalHeader className='flex gap-2'>