hedgedoc/frontend/src/components/editor-page/sidebar/delete-note-sidebar-entry/delete-note-sidebar-entry.tsx
Tilman Vatteroth a05b387ee1
nullable note details
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
2023-04-15 12:23:50 +02:00

58 lines
2.3 KiB
TypeScript

/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { deleteNote } from '../../../../api/notes'
import { useBooleanState } from '../../../../hooks/common/use-boolean-state'
import { useNoteDetails } from '../../../../hooks/common/use-note-details'
import { cypressId } from '../../../../utils/cypress-attribute'
import { Logger } from '../../../../utils/logger'
import { useUiNotifications } from '../../../notifications/ui-notification-boundary'
import { SidebarButton } from '../sidebar-button/sidebar-button'
import type { SpecificSidebarEntryProps } from '../types'
import { DeleteNoteModal } from './delete-note-modal'
import { useRouter } from 'next/router'
import type { PropsWithChildren } from 'react'
import React, { Fragment, useCallback } from 'react'
import { Trash as IconTrash } from 'react-bootstrap-icons'
import { Trans, useTranslation } from 'react-i18next'
const logger = new Logger('note-deletion')
/**
* Sidebar entry that can be used to delete the current note.
*
* @param hide {@link true} if the entry shouldn't be visible
* @param className Additional css class names for the sidebar entry
*/
export const DeleteNoteSidebarEntry: React.FC<PropsWithChildren<SpecificSidebarEntryProps>> = ({ hide, className }) => {
useTranslation()
const router = useRouter()
const noteId = useNoteDetails().id
const [modalVisibility, showModal, closeModal] = useBooleanState()
const { showErrorNotification } = useUiNotifications()
const deleteNoteAndCloseDialog = useCallback(() => {
deleteNote(noteId)
.then(() => {
router.push('/history').catch((reason) => logger.error('Error while redirecting to /history', reason))
})
.catch(showErrorNotification('landing.history.error.deleteNote.text'))
.finally(closeModal)
}, [closeModal, noteId, router, showErrorNotification])
return (
<Fragment>
<SidebarButton
{...cypressId('sidebar.deleteNote.button')}
icon={IconTrash}
className={className}
hide={hide}
onClick={showModal}>
<Trans i18nKey={'landing.history.menu.deleteNote'} />
</SidebarButton>
<DeleteNoteModal onHide={closeModal} onConfirm={deleteNoteAndCloseDialog} show={modalVisibility} />
</Fragment>
)
}