Proyectos de Subversion LeadersLinked - Backend

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
7291 stevensc 1 
import React, { useState } from 'react'
7480 stevensc 2 
import { deleteFeed } from '../../redux/feed/feed.actions'
7427 stevensc 3 
import DeleteModal from '../../shared/DeleteModal'
7386 stevensc 4 
import CommentSection from './CommentSection'
11225 stevensc 5 
import parse from 'html-react-parser'
7205 stevensc 6 
 
11225 stevensc 7 
const FeedTemplate = ({ feed }) => {
7205 stevensc 8 
 
11225 stevensc 9 
	const [showDropdown, setShowDropdown] = useState(false)
10 
	const [showDeleteModal, setShowDeleteModal] = useState(false)
11 
	const [isReadMoreActive, setIsReadMoreActive] = useState(false)
12 
	const closeModal = () => setShowDeleteModal(false)
7291 stevensc 13 
 
11225 stevensc 14 
	const readMoreHandler = () => {
15 
		setIsReadMoreActive(!isReadMoreActive)
16 
	}
7291 stevensc 17 
 
11225 stevensc 18 
	const htmlParsedText = (fullStringText) => {
19 
		const fullText = parse(fullStringText)
20 
		if (fullStringText.length > 500) {
21 
			const shortenedString = fullStringText.substr(0, 500)
22 
			const shortenedText = parse(`${shortenedString}... `)
23 
			return (
24 
				<React.Fragment>
25 
					{isReadMoreActive ? fullText : shortenedText}
26 
					<button className='btn py-0 px-1' onClick={readMoreHandler}>
27 
						{isReadMoreActive ? ' Leer menos' : ' Leer más'}
28 
					</button>
29 
				</React.Fragment>
30 
			)
31 
		} else {
32 
			return fullText
33 
		}
34 
	}
35 
 
36 
	return (
37 
		<>
38 
			<div className="card">
39 
				<div className="card-header border-0 pb-0">
40 
					<div className="d-flex align-items-center justify-content-between">
41 
						<div className="d-flex align-items-center">
42 
							<div className="avatar me-2">
43 
								<a href={feed.owner_url}>
44 
									<img
45 
										className="avatar-img rounded-circle"
46 
										src={feed.owner_image}
47 
										alt={`${feed.owner_name} profile image`}
48 
									/>
49 
								</a>
50 
							</div>
51 
							<div>
52 
								<div className="nav nav-divider">
53 
									<h6 className="nav-item card-title mb-0">
54 
										<a href="#!">{feed.owner_name}</a>
55 
									</h6>
56 
									<span className="nav-item small">{feed.owner_time_elapse}</span>
57 
								</div>
58 
							</div>
59 
						</div>
60 
						<div className="dropdown" onClick={() => setShowDropdown(!showDropdown)}>
61 
							<button
62 
								className="text-secondary btn btn-secondary-soft-hover py-1 px-2"
63 
							>
64 
								<i className="fa fa-ellipsis-h icon" />
65 
							</button>
66 
							<ul
67 
								className={`dropdown-menu dropdown-menu-end ${showDropdown ? 'show' : ''}`}
68 
								aria-labelledby="cardFeedAction"
69 
								data-popper-placement="bottom-end"
70 
								style={{
71 
									position: 'absolute',
72 
									inset: '0px 0px auto auto',
73 
									margin: '0px',
74 
									transform: 'translate(0px, 35px)'
75 
								}}
76 
							>
77 
								<li
78 
									className="dropdown-item"
79 
								>
80 
									<button
81 
										className='btn'
82 
										onClick={() => setShowDeleteModal(true)}
83 
										type="button"
84 
									>
85 
										<i className="fa fa-trash pe-2" />
12149 stevensc 86 
										Borrar
11225 stevensc 87 
									</button>
88 
								</li>
89 
							</ul>
90 
						</div>
91 
					</div>
92 
				</div>
93 
				<div className="card-body">
94 
					<p>{htmlParsedText(feed.owner_description)}</p>
95 
					{
96 
						feed.owner_file_image
12149 stevensc 97 
						&&
98 
						<img className="card-img" src={feed.owner_file_image} alt="Post" />
11225 stevensc 99 
					}
100 
					{
101 
						feed.owner_file_document
12149 stevensc 102 
						&&
103 
						<a href={feed.owner_file_document} target="_blank" rel="noreferrer">
104 
							Descargar
105 
						</a>
11225 stevensc 106 
					}
107 
					{
108 
						feed.owner_file_video
12149 stevensc 109 
						&&
110 
						<video src={feed.owner_file_video} width="400" height="300" controls autoPlay muted />
11225 stevensc 111 
					}
112 
					<ul className="nav nav-stack py-3 small">
113 
						<li className="nav-item">
114 
							<button className="btn nav-link">
115 
								<i className="fa fa-comments pe-1" />
12149 stevensc 116 
								Comentarios ({feed.comments.length})
11225 stevensc 117 
							</button>
118 
						</li>
119 
						<li className="nav-item dropdown">
120 
							<a className="btn nav-link mb-0" >
121 
								<i className="fa fa-share flip-horizontal ps-1" />
12149 stevensc 122 
								Compartido ({feed.owner_shared})
11225 stevensc 123 
							</a>
124 
						</li>
125 
					</ul>
126 
					<CommentSection
127 
						comments_link_add={feed.comment_add_url}
128 
						comments={feed.comments}
129 
						owner_image={feed.owner_image}
130 
						owner_url={feed.owner_url}
131 
					/>
132 
				</div>
133 
			</div>
134 
			<DeleteModal
135 
				url={feed.feed_delete_url}
136 
				isOpen={showDeleteModal}
137 
				closeModal={closeModal}
138 
				title="Esta seguro de borrar esta publicación?"
139 
				action={() => deleteFeed(feed.feed_unique)}
140 
				message="La publicación ha sido borrada"
141 
			/>
142 
		</>
143 
	)
144 
}
145 
export default React.memo(FeedTemplate)