Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useEffect, useRef, useState } from 'react'
import { useDispatch } from 'react-redux'
import { deleteFeed } from '../../../redux/feed/feed.actions'
import { addNotification } from '../../../redux/notification/notification.actions'
import ConfirmModal from '../../../shared/confirm-modal/ConfirmModal'
import { axios } from '../../../utils'

const FeedHeader = ({
  ownerName,
  ownerImage,
  ownerTimeElapse,
  ownerUrl,
  feedDeleteUrl,
  feedUnique
}) => {
  const [showConfirmModal, setShowConfirmModal] = useState(false)
  const [displayOption, setDisplayOption] = useState(false)
  const deleteButton = useRef()
  const dispatch = useDispatch()

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

  const deleteFeedHandler = () => {
    axios.post(feedDeleteUrl)
      .then((res) => {
        const { data } = res
        if (!data.success) {
          dispatch(addNotification({ style: 'danger', msg: data.data }))
          return
        }
        dispatch(addNotification({ style: 'success', msg: data.data }))
        handleShowConfirmModal()
        dispatch(deleteFeed(feedUnique))
      })
  }

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (deleteButton.current && !deleteButton.current.contains(event.target)) {
        setDisplayOption(false)
      }
    }
    document.addEventListener('mousedown', handleClickOutside)

    return () => {
      document.removeEventListener('mousedown', handleClickOutside)
    }
  }, [deleteButton])

  return (
        <>
            <div className="post_topbar" >
                <div className="usy-dt">
                    <a href={ownerUrl}>
                        <img
                            src={ownerImage}
                            alt=""
                            style={{ width: '50px', height: 'auto' }}
                        />
                    </a>
                    <div className="usy-name">
                        <a href={ownerUrl}>
                            <h3>{ownerName}</h3>
                        </a>
                        <span>
                            {ownerTimeElapse}
                        </span>
                    </div>
                </div>
                {feedDeleteUrl &&
                    <div className="cursor-pointer d-flex align-items-center">
                        <img
                            src='/images/icons/options.png'
                            className='cursor-pointer img-icon options'
                            onClick={() => setDisplayOption(!displayOption)}
                        />
                        <div className={`feed-options ${displayOption ? 'active' : ''}`}>
                            <ul>
                                <li>
                                    <button
                                        className="option-btn"
                                        onClick={handleShowConfirmModal}
                                        ref={deleteButton}
                                    >
                                        <i className="fa fa-trash-o mr-1" />
                                        {LABELS.DELETE}
                                    </button>
                                </li>
                            </ul>
                        </div>
                        <ConfirmModal
                            show={showConfirmModal}
                            onClose={() => handleShowConfirmModal(false)}
                            onAccept={deleteFeedHandler}
                            acceptLabel="Aceptar"
                        />
                    </div>
                }
            </div >
        </>
  )
}

export default FeedHeader