latex-ub/services/web/frontend/js/features/template/components/edit-template-button.tsx
2025-05-05 12:24:05 +00:00

46 lines
1.3 KiB
TypeScript

import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import useIsMounted from '@/shared/hooks/use-is-mounted'
import OLButton from '@/features/ui/components/ol/ol-button'
import EditTemplateModal from './edit-template-modal'
import { useTemplateContext } from '../context/template-context'
import { updateTemplate } from '@/features/template/util/api'
import type { Template } from '../../../../../types/template'
export default function EditTemplateButton() {
const { t } = useTranslation()
const [showModal, setShowModal] = useState(false)
const isMounted = useIsMounted()
const { template, setTemplate } = useTemplateContext()
const handleOpenModal = () => {
setShowModal(true)
}
const handleCloseModal = () => {
if (isMounted.current) {
setShowModal(false)
}
}
const handleEditTemplate = async (editedTemplate: Template) => {
const updated = await updateTemplate({ editedTemplate, template })
if (updated) {
setTemplate(prev => ({ ...prev, ...updated }))
}
}
return (
<>
<OLButton variant="secondary" onClick={handleOpenModal}>
{t('edit')}
</OLButton>
<EditTemplateModal
showModal={showModal}
handleCloseModal={handleCloseModal}
actionHandler={handleEditTemplate}
/>
</>
)
}