74 lines
2.1 KiB
TypeScript
74 lines
2.1 KiB
TypeScript
import { useCallback, useLayoutEffect, memo, useState } from 'react'
|
|
|
|
import { Modal, ModalClose, Button, Input } from '@janhq/joi'
|
|
import { useAtom } from 'jotai'
|
|
|
|
import { useCreateNewThread } from '@/hooks/useCreateNewThread'
|
|
|
|
import {
|
|
modalActionThreadAtom,
|
|
ThreadModalAction,
|
|
} from '@/helpers/atoms/Thread.atom'
|
|
|
|
const ModalEditTitleThread = () => {
|
|
const { updateThreadMetadata } = useCreateNewThread()
|
|
const [modalActionThread, setModalActionThread] = useAtom(
|
|
modalActionThreadAtom
|
|
)
|
|
const [title, setTitle] = useState(modalActionThread.thread?.title as string)
|
|
|
|
useLayoutEffect(() => {
|
|
if (modalActionThread.thread?.title) {
|
|
setTitle(modalActionThread.thread?.title)
|
|
}
|
|
}, [modalActionThread.thread?.title])
|
|
|
|
const onUpdateTitle = useCallback(
|
|
(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
|
|
e.stopPropagation()
|
|
if (!modalActionThread.thread) return null
|
|
updateThreadMetadata({
|
|
...modalActionThread?.thread,
|
|
title: title || 'New Thread',
|
|
})
|
|
},
|
|
[modalActionThread?.thread, title, updateThreadMetadata]
|
|
)
|
|
|
|
const onCloseModal = useCallback(() => {
|
|
setModalActionThread({
|
|
showModal: undefined,
|
|
thread: undefined,
|
|
})
|
|
}, [setModalActionThread])
|
|
|
|
return (
|
|
<Modal
|
|
title="Edit title thread"
|
|
onOpenChange={onCloseModal}
|
|
open={modalActionThread.showModal === ThreadModalAction.EditTitle}
|
|
content={
|
|
<form className="mt-4">
|
|
<Input
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
autoFocus
|
|
/>
|
|
<div className="mt-4 flex justify-end gap-x-2">
|
|
<ModalClose asChild onClick={(e) => e.stopPropagation()}>
|
|
<Button theme="ghost">Cancel</Button>
|
|
</ModalClose>
|
|
<ModalClose asChild>
|
|
<Button type="submit" onClick={onUpdateTitle} disabled={!title}>
|
|
Save
|
|
</Button>
|
|
</ModalClose>
|
|
</div>
|
|
</form>
|
|
}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default memo(ModalEditTitleThread)
|