Proyectos de Subversion LeadersLinked - Backend

import React, { useState } from 'react'

import { useDispatch } from 'react-redux'

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 dispatch = useDispatch()

    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