Proyectos de Subversion LeadersLinked - Backend

import React, { useState } from 'react'
import { deleteFeed } from '../../redux/feed/feed.actions'
import DeleteModal from '../../shared/DeleteModal'
import CommentSection from './CommentSection'

const FeedTemplate = React.memo(({ feed }) => {

    const [showDropdown, setShowDropdown] = useState(false)
    const [showDeleteModal, setShowDeleteModal] = useState(false)

    const closeModal = () => setShowDeleteModal(false)

    return (
        <>
            <div className="card">
                <div className="card-header border-0 pb-0">
                    <div className="d-flex align-items-center justify-content-between">
                        <div className="d-flex align-items-center">
                            <div className="avatar me-2">
                                <a href={feed.owner_url}>
                                    <img
                                        className="avatar-img rounded-circle"
                                        src={feed.owner_image}
                                        alt={`${feed.owner_name} profile image`}
                                    />
                                </a>
                            </div>
                            <div>
                                <div className="nav nav-divider">
                                    <h6 className="nav-item card-title mb-0">
                                        <a href="#!">{feed.owner_name}</a>
                                    </h6>
                                    <span className="nav-item small">{feed.owner_time_elapse}</span>
                                </div>
                            </div>
                        </div>
                        <div className="dropdown" onClick={() => setShowDropdown(!showDropdown)}>
                            <button
                                className="text-secondary btn btn-secondary-soft-hover py-1 px-2"
                            >
                                <i className="fa fa-ellipsis-h icon" />
                            </button>
                            <ul
                                className={`dropdown-menu dropdown-menu-end ${showDropdown ? "show" : ''}`}
                                aria-labelledby="cardFeedAction"
                                data-popper-placement="bottom-end"
                                style={{
                                    position: 'absolute',
                                    inset: '0px 0px auto auto',
                                    margin: '0px',
                                    transform: 'translate(0px, 35px)'
                                }}
                            >
                                <li
                                    className="dropdown-item"
                                >
                                    <button
                                        className='btn'
                                        onClick={() => setShowDeleteModal(true)}
                                        type="button"
                                    >
                                        <i className="fa fa-trash pe-2" />
                                        Delete post
                                    </button>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div className="card-body">
                    <p>{feed.owner_description}</p>
                    {
                        feed.owner_file_image
                        &&
                        <img
                            className="card-img"
                            src={feed.owner_file_image}
                            alt="Post"
                        />
                    }
                    {
                        feed.owner_file_document
                        &&
                        <a href={feed.owner_file_document} target="_blank">
                            Descargar
                        </a>
                    }
                    {
                        feed.owner_file_video
                        &&
                        <video
                            src={feed.owner_file_video}
                            width="400"
                            height="300"
                            controls
                            autoPlay
                            muted
                        />
                    }
                    <ul className="nav nav-stack py-3 small">
                        <li className="nav-item">
                            <button className="btn nav-link">
                                <i className="fa fa-comments pe-1" />
                                Comments ({feed.comments.length})
                            </button>
                        </li>
                        <li className="nav-item dropdown">
                            <a className="btn nav-link mb-0" >
                                <i className="fa fa-share flip-horizontal ps-1" />
                                Share ({feed.owner_shared})
                            </a>
                        </li>
                    </ul>
                    <CommentSection
                        comments_link_add={feed.comment_add_url}
                        comments={feed.comments}
                        owner_image={feed.owner_image}
                        owner_url={feed.owner_url}
                    />
                </div>
            </div>
            <DeleteModal
                url={feed.feed_delete_url}
                isOpen={showDeleteModal}
                closeModal={closeModal}
                title="Esta seguro de borrar esta publicación?"
                action={() => deleteFeed(feed.feed_unique)}
            />
        </>
    )
})

export default FeedTemplate