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