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