hedgedoc/src/components/editor-page/document-bar/share/share-modal.tsx

/*
 * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */

import React from 'react'
import { Modal } from 'react-bootstrap'
import { Trans, useTranslation } from 'react-i18next'
import { useParams } from 'react-router-dom'
import { useFrontendBaseUrl } from '../../../../hooks/common/use-frontend-base-url'
import { CopyableField } from '../../../common/copyable/copyable-field/copyable-field'
import type { ModalVisibilityProps } from '../../../common/modals/common-modal'
import { CommonModal } from '../../../common/modals/common-modal'
import { ShowIf } from '../../../common/show-if/show-if'
import type { EditorPagePathParams } from '../../editor-page'
import { useApplicationState } from '../../../../hooks/common/use-application-state'
import { NoteType } from '../../../../redux/note-details/types/note-details'

export const ShareModal: React.FC<ModalVisibilityProps> = ({ show, onHide }) => {
  useTranslation()
  const noteFrontmatter = useApplicationState((state) => state.noteDetails.frontmatter)
  const editorMode = useApplicationState((state) => state.editorConfig.editorMode)
  const baseUrl = useFrontendBaseUrl()
  const { id } = useParams<EditorPagePathParams>()

  return (
    <CommonModal show={show} onHide={onHide} showCloseButton={true} title={'editor.modal.shareLink.title'}>
      <Modal.Body>
        <Trans i18nKey={'editor.modal.shareLink.editorDescription'} />
        <CopyableField
          content={`${baseUrl}n/${id}?${editorMode}`}
          nativeShareButton={true}
          url={`${baseUrl}n/${id}?${editorMode}`}
        />
        <ShowIf condition={noteFrontmatter.type === NoteType.SLIDE}>
          <Trans i18nKey={'editor.modal.shareLink.slidesDescription'} />
          <CopyableField content={`${baseUrl}p/${id}`} nativeShareButton={true} url={`${baseUrl}p/${id}`} />
        </ShowIf>
        <ShowIf condition={noteFrontmatter.type === NoteType.DOCUMENT}>
          <Trans i18nKey={'editor.modal.shareLink.viewOnlyDescription'} />
          <CopyableField content={`${baseUrl}s/${id}`} nativeShareButton={true} url={`${baseUrl}s/${id}`} />
        </ShowIf>
      </Modal.Body>
    </CommonModal>
  )
}