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'
import styles from './feedTemplate.module.scss'

const FeedTemplate = ({ feed }) => {

        const [displayOption, setDisplayOption] = 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={styles.postContainer}>
                                < div className="post_topbar" >
                                        <div className="usy-dt">
                                                <a href={feed.owner_url}>
                                                        <img src={feed.owner_image} alt="" style={{
                                                                width: '50px',
                                                                height: 'auto',
                                                        }}
                                                        />
                                                </a>
                                                <div className="usy-name">
                                                        <a href={feed.owner_url}>
                                                                <h3>{feed.owner_name}</h3>
                                                        </a>
                                                        <span>
                                                                {feed.Fowner_time_elapse}
                                                        </span>
                                                </div>
                                        </div>
                                        {
                                                feed.feed_delete_url
                                                &&
                                                <div className="cursor-pointer d-flex align-items-center">
                                                        <i
                                                                className='fa fa-ellipsis-v'
                                                                onClick={() => setDisplayOption(!displayOption)}
                                                                style={{ fontSize: '1.5rem' }}
                                                        />
                                                        <div className={`feed-options ${displayOption ? 'active' : ''}`}>
                                                                <ul>
                                                                        <li>
                                                                                <button
                                                                                        className="option-btn"
                                                                                        onClick={() => setShowDeleteModal(true)}
                                                                                >
                                                                                        <i className="fa fa'trash mr-1" />
                                                                                        Borrar
                                                                                </button>
                                                                        </li>
                                                                </ul>
                                                        </div>
                                                </div>
                                        }
                                </div >
                                <div>
                                        <div className="job_descp">
                                                {
                                                        feed.showDescription
                                                        &&
                                                        <div className="show-read-more">
                                                                {htmlParsedText(feed.owner_description)}
                                                        </div>
                                                }
                                                {feed.owner_file_image &&
                                                        <img src={feed.owner_file_image} className="Entradas" />
                                                }
                                                {feed.owner_file_video &&
                                                        <video
                                                                src={feed.owner_file_video}
                                                                controls
                                                                poster={feed.owner_file_image_preview}
                                                                preload="none"
                                                        />
                                                }
                                                {feed.owner_file_document &&
                                                        <a href={feed.owner_file_document} target="_blank" rel="noreferrer">
                                                                Descargar
                                                        </a>
                                                }
                                                {feed.shared_name &&
                                                        <div className="shared-post-bar">
                                                                <div className="post-bar">
                                                                        <div className="post_topbar">
                                                                                <div className="usy-dt">
                                                                                        <img
                                                                                                src={feed.shared_image}
                                                                                                alt=""
                                                                                                style={{ width: '50px', height: 'auto', }}
                                                                                        />
                                                                                        <div className="usy-name">
                                                                                                <h3>{feed.shared_name}</h3>
                                                                                                <span>
                                                                                                        {feed.shared_time_elapse}
                                                                                                </span>
                                                                                        </div>
                                                                                </div>
                                                                        </div>
                                                                        <div className="job_descp">
                                                                                <div className="show-read-more">
                                                                                        {htmlParsedText(feed.shared_description)}
                                                                                </div>
                                                                                {feed.shared_file_image &&
                                                                                        <img src={feed.shared_file_image} className="Entradas" />
                                                                                }
                                                                                {feed.shared_file_video &&
                                                                                        <video
                                                                                                src={feed.shared_file_video}
                                                                                                controls
                                                                                                poster={feed.shared_file_image_preview}
                                                                                                preload="none"
                                                                                        />
                                                                                }
                                                                                {feed.shared_file_document &&
                                                                                        <a href={feed.shared_file_document} target="_blank" rel="noreferrer">
                                                                                                Descargar
                                                                                        </a>
                                                                                }
                                                                        </div>
                                                                </div>
                                                        </div>
                                                }
                                        </div>
                                </div>
                                <div className="job-status-bar">
                                        <ul className="reactions-list">
                                                <li>
                                                        <button
                                                                type="button"
                                                                id={`btn-comments-${feed.feed_unique}`}
                                                                className="btn-indicator"
                                                        >
                                                                <i className="fa fa-comments mr-1" />
                                                                {feed.owner_shared}
                                                        </button>
                                                </li>
                                                <li>
                                                        <button
                                                                type="button"
                                                                id={`btn-share-${feed.feed_unique}`}
                                                                className="btn-indicator"
                                                        >
                                                                <i className="fa fa-share flip-horizontal ps-1" />
                                                                {feed.owner_shared}
                                                        </button>
                                                </li>
                                        </ul>
                                </div>
                                <CommentSection
                                        comments_link_add={feed.comment_add_url}
                                        comments={feed.comments}
                                        owner_image={feed.owner_image}
                                        owner_url={feed.owner_url}
                                />

                        </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)