Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'

import { addNotification } from '@app/redux/notification/notification.actions'
import { showReportModal } from '@app/redux/report/report.actions'
import { deleteFeed, fetchFeeds } from '@app/redux/feed/feed.actions'

import Widget from '@components/UI/Widget'
import Options from '@components/UI/Option'
import ConfirmModal from '@components/modals/ConfirmModal'

export default function FeedHeader({ id }) {
  const [showConfirmModal, setShowConfirmModal] = useState(false)
  const navigate = useNavigate()
  const dispatch = useDispatch()

  const { timelineUrl, currentPage } = useSelector(({ feed }) => feed)

  const {
    feed_delete_url: deleteUrl,
    feed_abuse_report_url: reportUrl,
    owner_image: image,
    owner_name: name,
    owner_time_elapse: timeElapse,
    owner_url: profileUrl
  } = useSelector(({ feed }) => feed.feeds.byId[id])

  const removeFeed = async () => {
    try {
      const response = await dispatch(deleteFeed(id))
      dispatch(addNotification({ style: 'success', msg: response }))
      toggleConfirm()
    } catch (error) {
      dispatch(addNotification({ style: 'danger', msg: error.message }))
    }
  }

  const reportFeed = () =>
    dispatch(
      showReportModal({
        type: 'publicación',
        reportUrl,
        onComplete: () => dispatch(fetchFeeds(timelineUrl, currentPage))
      })
    )

  const toggleConfirm = () => setShowConfirmModal(!showConfirmModal)

  return (
    <>
      <Widget.Header
        avatar={image}
        title={name}
        onClick={() => navigate(profileUrl)}
        subheader={timeElapse}
        renderAction={() => (
          <Options>
            {reportUrl ? (
              <Options.Item onClick={reportFeed}>Reportar</Options.Item>
            ) : null}

            {deleteUrl ? (
              <Options.Item onClick={toggleConfirm}>Borrar</Options.Item>
            ) : null}
          </Options>
        )}
      />
      <ConfirmModal
        show={showConfirmModal}
        onClose={toggleConfirm}
        onAccept={removeFeed}
      />
    </>
  )
}