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)