All files / client/components PageAttachment.tsx

0% Statements 0/34
0% Branches 0/14
0% Functions 0/11
0% Lines 0/33

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126                                                                                                                                                                                                                                                           
import React from 'react'
import PageAttachmentList from './PageAttachment/PageAttachmentList'
import DeleteAttachmentModal from './PageAttachment/DeleteAttachmentModal'
import Crowi from 'client/util/Crowi'
import { Attachment } from 'client/types/crowi'
 
interface Props {
  pageId: string | null
  pageContent: string | null
  crowi: Crowi
}
 
interface State {
  attachments: Attachment[]
  inUse: { [id: string]: boolean }
  attachmentToDelete: Attachment | null
  deleting: boolean
  deleteError: string
}
 
export default class PageAttachment extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props)
 
    this.state = {
      attachments: [],
      inUse: {},
      attachmentToDelete: null,
      deleting: false,
      deleteError: '',
    }
 
    this.onAttachmentDeleteClicked = this.onAttachmentDeleteClicked.bind(this)
    this.onAttachmentDeleteClickedConfirm = this.onAttachmentDeleteClickedConfirm.bind(this)
  }
 
  componentDidMount() {
    const pageId = this.props.pageId
 
    if (!pageId) {
      return
    }
 
    this.props.crowi.apiGet('/attachments.list', { page_id: pageId }).then(res => {
      const attachments: Attachment[] = res.attachments
      const inUse: State['inUse'] = {}
 
      for (const attachment of attachments) {
        inUse[attachment._id] = this.checkIfFileInUse(attachment)
      }
 
      this.setState({ attachments, inUse })
    })
  }
 
  checkIfFileInUse(attachment: Attachment) {
    const { pageContent } = this.props
    if (pageContent && pageContent.match(attachment.url)) {
      return true
    }
    return false
  }
 
  onAttachmentDeleteClicked(attachment: Attachment) {
    this.setState({
      attachmentToDelete: attachment,
    })
  }
 
  onAttachmentDeleteClickedConfirm(attachment: Attachment) {
    const attachmentId = attachment._id
    this.setState({
      deleting: true,
    })
 
    this.props.crowi
      .apiPost('/attachments.remove', { attachment_id: attachmentId })
      .then(res => {
        this.setState({
          attachments: this.state.attachments.filter(at => {
            return at._id != attachmentId
          }),
          attachmentToDelete: null,
          deleting: false,
        })
      })
      .catch(err => {
        this.setState({
          deleteError: 'Something went wrong.',
          deleting: false,
        })
      })
  }
 
  render() {
    const { attachmentToDelete, attachments } = this.state
    const deleteModalClose = () => this.setState({ attachmentToDelete: null })
    const showModal = attachmentToDelete !== null
 
    let deleteInUse = false
    if (attachmentToDelete !== null) {
      deleteInUse = !!this.state.inUse[attachmentToDelete._id] || false
    }
 
    if (!attachments || attachments.length <= 0) {
      return null
    }
 
    return (
      <div className="page-meta-contents">
        <p className="page-meta-title">Attachments</p>
        <PageAttachmentList attachments={attachments} inUse={this.state.inUse} onAttachmentDeleteClicked={this.onAttachmentDeleteClicked} />
        <DeleteAttachmentModal
          isOpen={showModal}
          toggle={deleteModalClose}
          attachmentToDelete={attachmentToDelete}
          inUse={deleteInUse}
          deleting={this.state.deleting}
          deleteError={this.state.deleteError}
          onAttachmentDeleteClickedConfirm={this.onAttachmentDeleteClickedConfirm}
        />
      </div>
    )
  }
}