Proyectos de Subversion LeadersLinked - Antes de SPA

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

import ConfirmModal from '../../../shared/confirm-modal/ConfirmModal'
import GroupsRoundedIcon from '@mui/icons-material/GroupsRounded'

const FeedHeader = ({
  ownerName,
  ownerImage,
  ownerTimeElapse,
  ownerUrl,
  feedDeleteUrl,
  feedUnique,
  feedType,
}) => {
  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>
              {feedType === 'g' && <GroupsRoundedIcon />}
              {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