asdasd

comments.js

import React from 'react'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'

import Comment from 'components/UI/Comment'

import Api from 'api/library'
import { showFlash } from 'store/flash/actions'

import * as S from './styles'

const Comments = ({ match, dispatch }) => {
  const [comments, setComments] = React.useState([])

  async function fetchComments(id) {
    const res = await Api.getDocumentComments(id)
    const data = res.data.entities

    setComments(data)
  }

  async function deleteComment(id) {
    await Api.deleteDocumentComment(id)
    dispatch(showFlash('Комментарий удален', 'info', true, true))
  }

  const docId = match.params.id

  React.useEffect(() => {
    fetchComments(docId)
  }, [])

  function handleDeleteComment(id) {
    deleteComment(id)
    setComments(state => state.filter(comment => comment.id !== id))
  }

  if (comments.length < 1) {
    return null
  }

  return (
    <S.Wrapper>
      <S.Title>Комментарии</S.Title>
      {comments.reverse().map(comment => (
        <Comment
          comment={comment}
          key={comment.id}
          onDelete={handleDeleteComment}
        />
      ))}
    </S.Wrapper>
  )
}

export default withRouter(connect()(Comments))