You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
2.8 KiB
TypeScript
127 lines
2.8 KiB
TypeScript
'use client'
|
|
|
|
import {
|
|
Modal,
|
|
ModalContent,
|
|
ModalHeader,
|
|
ModalBody,
|
|
ModalFooter,
|
|
} from '@nextui-org/modal'
|
|
import { Button } from '@nextui-org/button'
|
|
import { Input } from '@nextui-org/input'
|
|
import { Icon } from '@iconify/react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { useContext, useState } from 'react'
|
|
import { Bookmark } from '@/types'
|
|
import { BookmarkContext, EditBookmarkContext } from '@/app/providers'
|
|
|
|
export default function EditBookmarkForm() {
|
|
const { isEditBookmark, onIsEditBookmarkChange } =
|
|
useContext(EditBookmarkContext)
|
|
const { bookmark, setBookmark } = useContext(BookmarkContext)
|
|
|
|
const router = useRouter()
|
|
const onSubmit = async () => {
|
|
const body = bookmark
|
|
|
|
await fetch('/api/bookmark', {
|
|
method: 'PATCH',
|
|
body: JSON.stringify(body),
|
|
})
|
|
onIsEditBookmarkChange()
|
|
router.refresh()
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Modal
|
|
isOpen={isEditBookmark}
|
|
onOpenChange={onIsEditBookmarkChange}
|
|
placement='top-center'
|
|
hideCloseButton>
|
|
<ModalContent
|
|
onKeyUp={(e) => {
|
|
console.log(e.key)
|
|
if (e.key === 'Enter') onSubmit()
|
|
}}>
|
|
{(onClose) => (
|
|
<>
|
|
<ModalHeader className='flex gap-2'>
|
|
Edit Bookmark
|
|
<Icon
|
|
icon='mdi:bookmark-box'
|
|
fontSize={30}
|
|
/>
|
|
</ModalHeader>
|
|
<ModalBody className='gap-4'>
|
|
<Input
|
|
autoFocus
|
|
label='Name'
|
|
placeholder='Enter Name'
|
|
variant='bordered'
|
|
value={bookmark.name}
|
|
onChange={(event) => {
|
|
setBookmark({
|
|
...bookmark,
|
|
name: event.target.value,
|
|
})
|
|
}}
|
|
/>
|
|
<Input
|
|
label='Link'
|
|
placeholder='Enter Link'
|
|
variant='bordered'
|
|
value={bookmark.link}
|
|
onChange={(event) => {
|
|
setBookmark({
|
|
...bookmark,
|
|
link: event.target.value,
|
|
})
|
|
}}
|
|
/>
|
|
<Input
|
|
label='Description'
|
|
placeholder='Enter Desription'
|
|
variant='bordered'
|
|
value={bookmark.description}
|
|
onChange={(event) => {
|
|
setBookmark({
|
|
...bookmark,
|
|
description: event.target.value,
|
|
})
|
|
}}
|
|
/>
|
|
<Input
|
|
label='Url'
|
|
placeholder='Enter Url'
|
|
variant='bordered'
|
|
value={bookmark.url}
|
|
onChange={(event) => {
|
|
setBookmark({
|
|
...bookmark,
|
|
url: event.target.value,
|
|
})
|
|
}}
|
|
/>
|
|
</ModalBody>
|
|
<ModalFooter>
|
|
<Button
|
|
color='danger'
|
|
variant='flat'
|
|
onClick={onClose}>
|
|
Close
|
|
</Button>
|
|
<Button
|
|
color='primary'
|
|
onPress={onSubmit}>
|
|
Update
|
|
</Button>
|
|
</ModalFooter>
|
|
</>
|
|
)}
|
|
</ModalContent>
|
|
</Modal>
|
|
</>
|
|
)
|
|
}
|