Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 12149 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 12149 Rev 14867
Línea 1... Línea 1...
1 
import React, { useState } from 'react'
 1 
import React, { useState } from 'react'
2 
import { deleteFeed } from '../../redux/feed/feed.actions'
 2 
import { deleteFeed } from '../../redux/feed/feed.actions'
3 
import DeleteModal from '../../shared/DeleteModal'
 3 
import DeleteModal from '../../shared/DeleteModal'
4 
import CommentSection from './CommentSection'
 4 
import CommentSection from './CommentSection'
5 
import parse from 'html-react-parser'
 5 
import parse from 'html-react-parser'
- 
 
 6 
import styles from './feedTemplate.module.scss'
Línea 6... Línea 7...
6 
 
 7 
 
Línea 7... Línea 8...
7 
const FeedTemplate = ({ feed }) => {
 8 
const FeedTemplate = ({ feed }) => {
8 
 
 9 
 
9 
	const [showDropdown, setShowDropdown] = useState(false)
 10 
	const [displayOption, setDisplayOption] = useState(false)
10 
	const [showDeleteModal, setShowDeleteModal] = useState(false)
 11 
	const [showDeleteModal, setShowDeleteModal] = useState(false)
Línea 11... Línea 12...
11 
	const [isReadMoreActive, setIsReadMoreActive] = useState(false)
 12 
	const [isReadMoreActive, setIsReadMoreActive] = useState(false)
Línea 33... Línea 34...
33 
		}
 34 
		}
34 
	}
 35 
	}
Línea 35... Línea 36...
35 
 
 36 
 
36 
	return (
 37 
	return (
37 
		<>
 38 
		<>
38 
			<div className="card">
 39 
			<div className={styles.postContainer}>
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">
 40 
				< div className="post_topbar" >
42 
							<div className="avatar me-2">
 41 
					<div className="usy-dt">
43 
								<a href={feed.owner_url}>
 - 
 
44 
									<img
 - 
 
45 
										className="avatar-img rounded-circle"
 42 
						<a href={feed.owner_url}>
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={{
 43 
							<img src={feed.owner_image} alt="" style={{
71 
									position: 'absolute',
 - 
 
72 
									inset: '0px 0px auto auto',
 44 
								width: '50px',
73 
									margin: '0px',
 - 
 
74 
									transform: 'translate(0px, 35px)'
 45 
								height: 'auto',
75 
								}}
 46 
							}}
76 
							>
 - 
 
77 
								<li
 - 
 
78 
									className="dropdown-item"
 47 
							/>
79 
								>
 - 
 
80 
									<button
 48 
						</a>
81 
										className='btn'
 49 
						<div className="usy-name">
82 
										onClick={() => setShowDeleteModal(true)}
 50 
							<a href={feed.owner_url}>
83 
										type="button"
 51 
								<h3>{feed.owner_name}</h3>
84 
									>
 - 
 
85 
										<i className="fa fa-trash pe-2" />
 52 
							</a>
86 
										Borrar
 53 
							<span>
87 
									</button>
 - 
 
88 
								</li>
 54 
								{feed.Fowner_time_elapse}
89 
							</ul>
 55 
							</span>
90 
						</div>
 56 
						</div>
91 
					</div>
 - 
 
92 
				</div>
 - 
 
93 
				<div className="card-body">
 - 
 
94 
					<p>{htmlParsedText(feed.owner_description)}</p>
 - 
 
95 
					{
 - 
 
96 
						feed.owner_file_image
 - 
 
97 
						&&
 - 
 
98 
						<img className="card-img" src={feed.owner_file_image} alt="Post" />
 - 
 
99 
					}
 57 
					</div>
100 
					{
 58 
					{
101 
						feed.owner_file_document
 59 
						feed.feed_delete_url
102 
						&&
 60 
						&&
103 
						<a href={feed.owner_file_document} target="_blank" rel="noreferrer">
 61 
						<div className="cursor-pointer d-flex align-items-center">
- 
 
 62 
							<i
- 
 
 63 
								className='fa fa-ellipsis-v'
- 
 
 64 
								onClick={() => setDisplayOption(!displayOption)}
104 
							Descargar
 65 
								style={{ fontSize: '1.5rem' }}
- 
 
 66 
							/>
105 
						</a>
 67 
							<div className={`feed-options ${displayOption ? 'active' : ''}`}>
106 
					}
 68 
								<ul>
- 
 
 69 
									<li>
107 
					{
 70 
										<button
- 
 
 71 
											className="option-btn"
108 
						feed.owner_file_video
 72 
											onClick={() => setShowDeleteModal(true)}
109 
						&&
 73 
										>
- 
 
 74 
											<i className="fa fa'trash mr-1" />
- 
 
 75 
											Borrar
- 
 
 76 
										</button>
- 
 
 77 
									</li>
- 
 
 78 
								</ul>
- 
 
 79 
							</div>
110 
						<video src={feed.owner_file_video} width="400" height="300" controls autoPlay muted />
 80 
						</div>
- 
 
 81 
					}
- 
 
 82 
				</div >
- 
 
 83 
				<div>
- 
 
 84 
					<div className="job_descp">
- 
 
 85 
						{
- 
 
 86 
							feed.showDescription
- 
 
 87 
							&&
- 
 
 88 
							<div className="show-read-more">
- 
 
 89 
								{htmlParsedText(feed.owner_description)}
- 
 
 90 
							</div>
- 
 
 91 
						}
- 
 
 92 
						{feed.owner_file_image &&
- 
 
 93 
							<img src={feed.owner_file_image} className="Entradas" />
- 
 
 94 
						}
- 
 
 95 
						{feed.owner_file_video &&
- 
 
 96 
							<video
- 
 
 97 
								src={feed.owner_file_video}
- 
 
 98 
								controls
- 
 
 99 
								poster={feed.owner_file_image_preview}
- 
 
 100 
								preload="none"
- 
 
 101 
							/>
- 
 
 102 
						}
- 
 
 103 
						{feed.owner_file_document &&
- 
 
 104 
							<a href={feed.owner_file_document} target="_blank" rel="noreferrer">
- 
 
 105 
								Descargar
- 
 
 106 
							</a>
- 
 
 107 
						}
111 
					}
 108 
						{feed.shared_name &&
- 
 
 109 
							<div className="shared-post-bar">
- 
 
 110 
								<div className="post-bar">
112 
					<ul className="nav nav-stack py-3 small">
 111 
									<div className="post_topbar">
- 
 
 112 
										<div className="usy-dt">
- 
 
 113 
											<img
- 
 
 114 
												src={feed.shared_image}
- 
 
 115 
												alt=""
- 
 
 116 
												style={{ width: '50px', height: 'auto', }}
- 
 
 117 
											/>
- 
 
 118 
											<div className="usy-name">
- 
 
 119 
												<h3>{feed.shared_name}</h3>
- 
 
 120 
												<span>
- 
 
 121 
													{feed.shared_time_elapse}
- 
 
 122 
												</span>
- 
 
 123 
											</div>
- 
 
 124 
										</div>
- 
 
 125 
									</div>
- 
 
 126 
									<div className="job_descp">
- 
 
 127 
										<div className="show-read-more">
- 
 
 128 
											{htmlParsedText(feed.shared_description)}
- 
 
 129 
										</div>
- 
 
 130 
										{feed.shared_file_image &&
- 
 
 131 
											<img src={feed.shared_file_image} className="Entradas" />
- 
 
 132 
										}
- 
 
 133 
										{feed.shared_file_video &&
- 
 
 134 
											<video
- 
 
 135 
												src={feed.shared_file_video}
- 
 
 136 
												controls
- 
 
 137 
												poster={feed.shared_file_image_preview}
- 
 
 138 
												preload="none"
- 
 
 139 
											/>
- 
 
 140 
										}
- 
 
 141 
										{feed.shared_file_document &&
- 
 
 142 
											<a href={feed.shared_file_document} target="_blank" rel="noreferrer">
- 
 
 143 
												Descargar
- 
 
 144 
											</a>
- 
 
 145 
										}
- 
 
 146 
									</div>
- 
 
 147 
								</div>
- 
 
 148 
							</div>
- 
 
 149 
						}
- 
 
 150 
					</div>
- 
 
 151 
				</div>
113 
						<li className="nav-item">
 152 
				<div className="job-status-bar">
- 
 
 153 
					<ul className="reactions-list">
- 
 
 154 
						<li>
- 
 
 155 
							<button
- 
 
 156 
								type="button"
- 
 
 157 
								id={`btn-comments-${feed.feed_unique}`}
- 
 
 158 
								className="btn-indicator"
114 
							<button className="btn nav-link">
 159 
							>
115 
								<i className="fa fa-comments pe-1" />
 160 
								<i className="fa fa-comments mr-1" />
116 
								Comentarios ({feed.comments.length})
 161 
								{feed.owner_shared}
117 
							</button>
 162 
							</button>
- 
 
 163 
						</li>
- 
 
 164 
						<li>
- 
 
 165 
							<button
118 
						</li>
 166 
								type="button"
119 
						<li className="nav-item dropdown">
 167 
								id={`btn-share-${feed.feed_unique}`}
- 
 
 168 
								className="btn-indicator"
120 
							<a className="btn nav-link mb-0" >
 169 
							>
121 
								<i className="fa fa-share flip-horizontal ps-1" />
 170 
								<i className="fa fa-share flip-horizontal ps-1" />
122 
								Compartido ({feed.owner_shared})
 171 
								{feed.owner_shared}
123 
							</a>
 172 
							</button>
124 
						</li>
 173 
						</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 
					/>
 174 
					</ul>
- 
 
 175 
				</div>
- 
 
 176 
				<CommentSection
- 
 
 177 
					comments_link_add={feed.comment_add_url}
- 
 
 178 
					comments={feed.comments}
- 
 
 179 
					owner_image={feed.owner_image}
- 
 
 180 
					owner_url={feed.owner_url}
- 
 
 181 
				/>
132 
				</div>
 182 
 
133 
			</div>
 183 
			</div>
134 
			<DeleteModal
 184 
			<DeleteModal
135 
				url={feed.feed_delete_url}
 185 
				url={feed.feed_delete_url}
136 
				isOpen={showDeleteModal}
 186 
				isOpen={showDeleteModal}