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" />
                                        Borrar
                                    </button>
                                </li>
                            </ul>
                        </div>
                        <ConfirmModal
                            show={showConfirmModal}
                            onClose={() => handleShowConfirmModal(false)}
                            onAccept={deleteFeedHandler}
                            acceptLabel="Aceptar"
                        />
                    </div>
                }
            </div >
        </>
    )
}

export default FeedHeader