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