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'
import parse from 'html-react-parser'

const FeedTemplate = ({ feed }) => {

        const [showDropdown, setShowDropdown] = useState(false)
        const [showDeleteModal, setShowDeleteModal] = useState(false)
        const [isReadMoreActive, setIsReadMoreActive] = useState(false)
        const closeModal = () => setShowDeleteModal(false)

        const readMoreHandler = () => {
                setIsReadMoreActive(!isReadMoreActive)
        }

        const htmlParsedText = (fullStringText) => {
                const fullText = parse(fullStringText)
                if (fullStringText.length > 500) {
                        const shortenedString = fullStringText.substr(0, 500)
                        const shortenedText = parse(`${shortenedString}... `)
                        return (
                                <React.Fragment>
                                        {isReadMoreActive ? fullText : shortenedText}
                                        <button className='btn py-0 px-1' onClick={readMoreHandler}>
                                                {isReadMoreActive ? ' Leer menos' : ' Leer más'}
                                        </button>
                                </React.Fragment>
                        )
                } else {
                        return fullText
                }
        }

        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" />
                                                                                Borrar
                                                                        </button>
                                                                </li>
                                                        </ul>
                                                </div>
                                        </div>
                                </div>
                                <div className="card-body">
                                        <p>{htmlParsedText(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" rel="noreferrer">
                                                        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" />
                                                                Comentarios ({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" />
                                                                Compartido ({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)}
                                message="La publicación ha sido borrada"
                        />
                </>
        )
}
export default React.memo(FeedTemplate)