Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5119 | Rev 5946 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 5119 Rev 5911
Línea 57... Línea 57...
57 
    owner_external_shared,
 57 
    owner_external_shared,
58 
    shared_file_document,
 58 
    shared_file_document,
59 
    shared_url,
 59 
    shared_url,
60 
    feed_increment_external_counter_url,
 60 
    feed_increment_external_counter_url,
61 
    addNotification, // REDUX ACTION
 61 
    addNotification, // REDUX ACTION
62 
    openShareModal // REDUX ACTION
 62 
    openShareModal, // REDUX ACTION
63 
  } = props
 63 
  } = props
Línea 64... Línea 64...
64 
 
 64 
 
65 
  const [feedIsLiked, setFeedIsLiked] = useState(feed_is_liked)
 65 
  const [feedIsLiked, setFeedIsLiked] = useState(feed_is_liked)
66 
  const [likesState, setLikesState] = useState(feed_likes)
 66 
  const [likesState, setLikesState] = useState(feed_likes)
Línea 69... Línea 69...
69 
  const [sharedState, setSharedState] = useState(owner_shared)
 69 
  const [sharedState, setSharedState] = useState(owner_shared)
70 
  const [showComments, setShowComments] = useState(false)
 70 
  const [showComments, setShowComments] = useState(false)
71 
  const [showModal, setShowModal] = useState(false)
 71 
  const [showModal, setShowModal] = useState(false)
Línea 72... Línea 72...
72 
 
 72 
 
73 
  const handleLike = (url) => {
 - 
 
74 
    axios.post(url)
 73 
  const handleLike = (url) => {
75 
      .then(({ data: response }) => {
 74 
    axios.post(url).then(({ data: response }) => {
76 
        if (!response.success) {
 75 
      if (!response.success) {
77 
          addNotification({ style: 'danger', msg: response.data })
 76 
        addNotification({ style: 'danger', msg: response.data })
78 
          return
 77 
        return
79 
        }
 78 
      }
80 
        setLikesState(response.data.likes)
 79 
      setLikesState(response.data.likes)
81 
        setFeedIsLiked(!feedIsLiked)
 80 
      setFeedIsLiked(!feedIsLiked)
82 
      })
 81 
    })
Línea -... Línea 82...
- 
 
 82 
  }
- 
 
 83 
 
- 
 
 84 
  const handleShare = () =>
83 
  }
 85 
    openShareModal(
- 
 
 86 
      feed_share_url,
- 
 
 87 
      shareModalTypes.SHARE,
- 
 
 88 
      feedTypes.DASHBOARD,
84 
 
 89 
      feed_unique
Línea 85... Línea 90...
85 
  const handleShare = () => openShareModal(feed_share_url, shareModalTypes.SHARE, feedTypes.DASHBOARD, feed_unique)
 90 
    )
Línea 86... Línea 91...
86 
  const handleExternalShare = (value) => setExternalShare(value)
 91 
  const handleExternalShare = (value) => setExternalShare(value)
- 
 
 92 
 
- 
 
 93 
  const displayCommentSection = () => setShowComments(!showComments)
- 
 
 94 
 
87 
 
 95 
  const ExternalShareButton = withExternalShare(
88 
  const displayCommentSection = () => setShowComments(!showComments)
 96 
    InputOption,
89 
 
 97 
    feed_share_external_url,
90 
  const ExternalShareButton = withExternalShare(InputOption, feed_share_external_url, {
 98 
    {
91 
    Icon: SendOutlinedIcon,
 99 
      Icon: SendOutlinedIcon,
- 
 
 100 
      color: 'gray',
- 
 
 101 
      title: 'Send',
92 
    color: 'gray',
 102 
      shareUrl: feed_increment_external_counter_url,
Línea 93... Línea 103...
93 
    title: 'Send',
 103 
      setValue: handleExternalShare,
Línea 94... Línea 104...
94 
    shareUrl: feed_increment_external_counter_url,
 104 
      withTitle: true,
95 
    setValue: handleExternalShare
 105 
    }
- 
 
 106 
  )
- 
 
 107 
 
- 
 
 108 
  useEffect(() => setSharedState(owner_shared), [owner_shared])
- 
 
 109 
 
96 
  })
 110 
  return (
- 
 
 111 
    <>
- 
 
 112 
      {showModal && (
97 
 
 113 
        <FeedModal
98 
  useEffect(() => setSharedState(owner_shared), [owner_shared])
 - 
 
99 
 
 114 
          isShow={true}
100 
  return (
 115 
          feed={props}
101 
    <>
 116 
          handleClose={() => setShowModal(false)}
102 
      {showModal && <FeedModal isShow={true} feed={props} handleClose={() => setShowModal(false)} />}
 117 
        />
103 
      <div className='feed'>
 118 
      )}
104 
 
 119 
      <div className="feed">
105 
        <Feed.Header
 120 
        <Feed.Header
106 
          image={owner_image}
 121 
          image={owner_image}
Línea -... Línea 122...
- 
 
 122 
          name={owner_name}
- 
 
 123 
          timeElapsed={owner_time_elapse}
- 
 
 124 
          viewUrl={owner_url}
107 
          name={owner_name}
 125 
          deleteUrl={feed_delete_url}
- 
 
 126 
          feedUnique={feed_unique}
- 
 
 127 
        />
- 
 
 128 
 
108 
          timeElapsed={owner_time_elapse}
 129 
        <div
109 
          viewUrl={owner_url}
 130 
          className="feed__body"
110 
          deleteUrl={feed_delete_url}
 131 
          onClick={() =>
111 
          feedUnique={feed_unique}
 132 
            (owner_file_image || owner_file_video || owner_file_document) &&
112 
        />
 133 
            setShowModal(true)
Línea 125... Línea 146...
125 
              description: shared_description,
 146 
              description: shared_description,
126 
              file_video: shared_file_video,
 147 
              file_video: shared_file_video,
127 
              file_image_preview: shared_file_image_preview,
 148 
              file_image_preview: shared_file_image_preview,
128 
              file_image: shared_file_image,
 149 
              file_image: shared_file_image,
129 
              file_document: shared_file_document,
 150 
              file_document: shared_file_document,
130 
              shared_url
 151 
              shared_url,
131 
            }}
 152 
            }}
132 
          />
 153 
          />
133 
        </div>
 154 
        </div>
Línea 134... Línea 155...
134 
 
 155 
 
135 
        {!isShare &&
 156 
        {!isShare && (
136 
          <div className="px-3 d-flex align-items-center justify-content-between">
 157 
          <div className="px-3 d-flex align-items-center justify-content-between">
- 
 
 158 
            {!!likesState && (
137 
            {!!likesState &&
 159 
              <div
- 
 
 160 
                className="d-inline-flex align-items-center"
- 
 
 161 
                style={{ gap: '.5rem' }}
138 
              <div className="d-inline-flex align-items-center" style={{ gap: '.5rem' }}>
 162 
              >
139 
                <RecommendIcon style={{ color: '#7405f9' }} />
 163 
                <RecommendIcon style={{ color: '#7405f9' }} />
140 
                <span>{likesState}</span>
 164 
                <span>{likesState}</span>
- 
 
 165 
              </div>
- 
 
 166 
            )}
141 
              </div>}
 167 
            <div
- 
 
 168 
              className="d-inline-flex align-items-center"
- 
 
 169 
              style={{ gap: '5px' }}
- 
 
 170 
            >
142 
            <div className="d-inline-flex align-items-center" style={{ gap: '5px' }}>
 171 
              {!!totalComments && (
- 
 
 172 
                <span>{`${totalComments} ${LABELS.COMMENTS.toLowerCase()}`}</span>
- 
 
 173 
              )}
143 
              {!!totalComments && <span>{`${totalComments} ${LABELS.COMMENTS.toLowerCase()}`}</span>}
 174 
              {!!sharedState && (
- 
 
 175 
                <span>{`${sharedState} ${LABELS.SHARED.toLowerCase()}`}</span>
- 
 
 176 
              )}
144 
              {!!sharedState && <span>{`${sharedState} ${LABELS.SHARED.toLowerCase()}`}</span>}
 177 
              {!!externalShare && (
- 
 
 178 
                <span>{`${externalShare} ${LABELS.SENDS.toLowerCase()}`}</span>
145 
              {!!externalShare && <span>{`${externalShare} ${LABELS.SENDS.toLowerCase()}`}</span>}
 179 
              )}
146 
            </div>
 180 
            </div>
147 
          </div>
 181 
          </div>
Línea 148... Línea -...
148 
        }
 - 
 
149 
 
 182 
        )}
150 
        {
 183 
 
151 
          !isShare &&
 184 
        {!isShare && (
152 
          <div className='feed__buttons'>
 185 
          <div className="feed__buttons">
153 
            <InputOption
 186 
            <InputOption
154 
              Icon={feedIsLiked ? ThumbUpAltIcon : ThumbUpAltOutlinedIcon}
 187 
              Icon={feedIsLiked ? ThumbUpAltIcon : ThumbUpAltOutlinedIcon}
- 
 
 188 
              title={LABELS.LIKE}
155 
              title={LABELS.LIKE}
 189 
              color={feedIsLiked ? '#7405f9' : 'gray'}
- 
 
 190 
              onClick={() =>
- 
 
 191 
                handleLike(feedIsLiked ? feed_unlike_url : feed_like_url)
156 
              color={feedIsLiked ? '#7405f9' : 'gray'}
 192 
              }
157 
              onClick={() => handleLike(feedIsLiked ? feed_unlike_url : feed_like_url)}
 193 
              withTitle
158 
            />
 194 
            />
159 
            <InputOption
 195 
            <InputOption
160 
              Icon={ChatOutlinedIcon}
 196 
              Icon={ChatOutlinedIcon}
161 
              title={LABELS.COMMENT}
 197 
              title={LABELS.COMMENT}
- 
 
 198 
              color="gray"
162 
              color='gray'
 199 
              onClick={displayCommentSection}
163 
              onClick={displayCommentSection}
 200 
              withTitle
164 
            />
 201 
            />
165 
            <InputOption
 202 
            <InputOption
166 
              Icon={ShareOutlinedIcon}
 203 
              Icon={ShareOutlinedIcon}
167 
              title={LABELS.SHARE}
 204 
              title={LABELS.SHARE}
- 
 
 205 
              color="gray"
168 
              color='gray'
 206 
              onClick={handleShare}
169 
              onClick={handleShare}
 207 
              withTitle
170 
            />
 208 
            />
171 
            <ExternalShareButton />
 209 
            <ExternalShareButton />
Línea 172... Línea 210...
172 
          </div>
 210 
          </div>
173 
        }
 211 
        )}
174 
 
 212 
 
175 
        <div className='px-2 pb-2'>
 213 
        <div className="px-2 pb-2">
176 
          <FeedCommentSection
 214 
          <FeedCommentSection
177 
            feedId={feed_unique}
 215 
            feedId={feed_unique}
178 
            image={owner_image}
 216 
            image={owner_image}
179 
            addUrl={comment_add_url}
 217 
            addUrl={comment_add_url}
180 
            updateTotalComments={(total) => setTotalComments(total)}
 218 
            updateTotalComments={(total) => setTotalComments(total)}
181 
            comments={comments}
 219 
            comments={comments}
182 
            isShow={showComments}
 - 
 
183 
          />
 220 
            isShow={showComments}
184 
        </div>
 221 
          />
185 
 
 222 
        </div>
186 
      </div>
 223 
      </div>
Línea 192... Línea 229...
192 
  ownerDescription,
 229 
  ownerDescription,
193 
  ownerFileImage,
 230 
  ownerFileImage,
194 
  ownerFileImagepreview,
 231 
  ownerFileImagepreview,
195 
  ownerFileVideo,
 232 
  ownerFileVideo,
196 
  ownerFileDocument,
 233 
  ownerFileDocument,
197 
  sharedItem
 234 
  sharedItem,
198 
}) => {
 235 
}) => {
199 
  const [isReadMoreActive, setIsReadMoreActive] = useState(false)
 236 
  const [isReadMoreActive, setIsReadMoreActive] = useState(false)
Línea 200... Línea 237...
200 
 
 237 
 
Línea 206... Línea 243...
206 
      const shortenedString = fullStringText.substr(0, 500)
 243 
      const shortenedString = fullStringText.substr(0, 500)
207 
      const shortenedText = parse(`${shortenedString}... `)
 244 
      const shortenedText = parse(`${shortenedString}... `)
208 
      return (
 245 
      return (
209 
        <>
 246 
        <>
210 
          {isReadMoreActive ? fullText : shortenedText}
 247 
          {isReadMoreActive ? fullText : shortenedText}
211 
          <span className='cursor-pointer' onClick={readMoreHandler}>
 248 
          <span className="cursor-pointer" onClick={readMoreHandler}>
212 
            {isReadMoreActive ? LABELS.READ_LESS : LABELS.READ_MORE}
 249 
            {isReadMoreActive ? LABELS.READ_LESS : LABELS.READ_MORE}
213 
          </span>
 250 
          </span>
214 
        </>
 251 
        </>
215 
      )
 252 
      )
216 
    }
 253 
    }
Línea 218... Línea 255...
218 
  }
 255 
  }
Línea 219... Línea 256...
219 
 
 256 
 
220 
  return (
 257 
  return (
221 
    <>
 258 
    <>
222 
      {ownerDescription && htmlParsedText(ownerDescription)}
 259 
      {ownerDescription && htmlParsedText(ownerDescription)}
223 
      {ownerFileImage &&
 260 
      {ownerFileImage && (
224 
        <img src={ownerFileImage} className="Entradas" loading='lazy' />
 261 
        <img src={ownerFileImage} className="Entradas" loading="lazy" />
225 
      }
 262 
      )}
226 
      {ownerFileVideo &&
 263 
      {ownerFileVideo && (
227 
        <video
 264 
        <video
228 
          src={ownerFileVideo}
 265 
          src={ownerFileVideo}
229 
          controls
 266 
          controls
230 
          poster={ownerFileImagepreview}
 267 
          poster={ownerFileImagepreview}
231 
          preload="none"
 268 
          preload="none"
232 
        />
 269 
        />
233 
      }
 270 
      )}
234 
      {ownerFileDocument &&
 271 
      {ownerFileDocument && (
235 
        <a href={ownerFileDocument} target="_blank" rel="noreferrer">
 272 
        <a href={ownerFileDocument} target="_blank" rel="noreferrer">
236 
          {LABELS.DOWNLOAD}
 273 
          {LABELS.DOWNLOAD}
237 
        </a>
 274 
        </a>
238 
      }
 275 
      )}
239 
      {sharedItem.name &&
 276 
      {sharedItem.name && (
240 
        <div className="py-3 px-md-3">
 277 
        <div className="py-3 px-md-3">
241 
          <Feed
 278 
          <Feed
242 
            isShare={true}
 279 
            isShare={true}
243 
            owner_name={sharedItem.name}
 280 
            owner_name={sharedItem.name}
Línea 249... Línea 286...
249 
            owner_file_image={sharedItem.file_image}
 286 
            owner_file_image={sharedItem.file_image}
250 
            owner_file_document={sharedItem.file_document}
 287 
            owner_file_document={sharedItem.file_document}
251 
            owner_url={sharedItem.shared_url}
 288 
            owner_url={sharedItem.shared_url}
252 
          />
 289 
          />
253 
        </div>
 290 
        </div>
254 
      }
 291 
      )}
255 
    </>
 292 
    </>
256 
  )
 293 
  )
257 
}
 294 
}
Línea 258... Línea 295...
258 
 
 295 
 
259 
const Header = ({
 296 
const Header = ({
260 
  image = '',
 297 
  image = '',
261 
  name = '',
 298 
  name = '',
262 
  timeElapsed = '',
 299 
  timeElapsed = '',
263 
  deleteUrl = '',
 300 
  deleteUrl = '',
264 
  viewUrl = '',
 301 
  viewUrl = '',
265 
  feedUnique = ''
 302 
  feedUnique = '',
266 
}) => {
 303 
}) => {
267 
  const [showConfirmModal, setShowConfirmModal] = useState(false)
 304 
  const [showConfirmModal, setShowConfirmModal] = useState(false)
268 
  const [displayOption, setDisplayOption] = useState(false)
 305 
  const [displayOption, setDisplayOption] = useState(false)
269 
  const deleteButton = useRef()
 306 
  const deleteButton = useRef()
Línea 270... Línea 307...
270 
  const dispatch = useDispatch()
 307 
  const dispatch = useDispatch()
Línea 271... Línea 308...
271 
 
 308 
 
272 
  const handleShowConfirmModal = () => setShowConfirmModal(!showConfirmModal)
 309 
  const handleShowConfirmModal = () => setShowConfirmModal(!showConfirmModal)
273 
 
 - 
 
274 
  const deleteFeedHandler = () => {
 310 
 
275 
    axios.post(deleteUrl)
 311 
  const deleteFeedHandler = () => {
276 
      .then((res) => {
 312 
    axios.post(deleteUrl).then((res) => {
277 
        const { data } = res
 313 
      const { data } = res
278 
        if (!data.success) {
 314 
      if (!data.success) {
279 
          dispatch(addNotification({ style: 'danger', msg: data.data }))
 315 
        dispatch(addNotification({ style: 'danger', msg: data.data }))
280 
          return
 316 
        return
281 
        }
 317 
      }
282 
        dispatch(addNotification({ style: 'success', msg: data.data }))
 318 
      dispatch(addNotification({ style: 'success', msg: data.data }))
283 
        handleShowConfirmModal()
 319 
      handleShowConfirmModal()
Línea 284... Línea 320...
284 
        dispatch(deleteFeed(feedUnique))
 320 
      dispatch(deleteFeed(feedUnique))
285 
      })
 321 
    })
- 
 
 322 
  }
- 
 
 323 
 
286 
  }
 324 
  useEffect(() => {
- 
 
 325 
    const handleClickOutside = (event) => {
287 
 
 326 
      if (
288 
  useEffect(() => {
 327 
        deleteButton.current &&
289 
    const handleClickOutside = (event) => {
 328 
        !deleteButton.current.contains(event.target)
290 
      if (deleteButton.current && !deleteButton.current.contains(event.target)) {
 329 
      ) {
Línea 297... Línea 336...
297 
      document.removeEventListener('mousedown', handleClickOutside)
 336 
      document.removeEventListener('mousedown', handleClickOutside)
298 
    }
 337 
    }
299 
  }, [deleteButton])
 338 
  }, [deleteButton])
Línea 300... Línea 339...
300 
 
 339 
 
301 
  return (
 340 
  return (
302 
    <div className='feed__header'>
 341 
    <div className="feed__header">
303 
      <div className="d-inline-flex" style={{ gap: '.5rem' }}>
 - 
 
304 
        <Avatar
 342 
      <div className="d-inline-flex" style={{ gap: '.5rem' }}>
305 
          imageUrl={image}
 - 
 
306 
          name={name}
 - 
 
307 
          size='xl'
 - 
 
Línea 308... Línea 343...
308 
        />
 343 
        <Avatar imageUrl={image} name={name} size="xl" />
309 
 
 344 
 
310 
        <div className='feed__info'>
 345 
        <div className="feed__info">
311 
          <a href={viewUrl}>
 346 
          <a href={viewUrl}>
312 
            <h2>{name}</h2>
 347 
            <h2>{name}</h2>
313 
          </a>
 - 
 
314 
          <div className='time__elapse'>
 348 
          </a>
315 
            <p>
 - 
 
316 
              {timeElapsed}
 349 
          <div className="time__elapse">
317 
            </p>
 350 
            <p>{timeElapsed}</p>
318 
            <AccessTimeIcon className='time__elapse-icon' />
 351 
            <AccessTimeIcon className="time__elapse-icon" />
319 
          </div>
 - 
 
320 
        </div>
 352 
          </div>
Línea 321... Línea 353...
321 
 
 353 
        </div>
322 
      </div>
 354 
      </div>
323 
 
 355 
 
324 
      {deleteUrl &&
 356 
      {deleteUrl && (
325 
        <div className="cursor-pointer d-flex align-items-center position-relative">
 357 
        <div className="cursor-pointer d-flex align-items-center position-relative">
326 
          <img
 358 
          <img
327 
            src='/images/icons/options.png'
 359 
            src="/images/icons/options.png"
328 
            className='cursor-pointer img-icon options'
 360 
            className="cursor-pointer img-icon options"
329 
            onClick={() => setDisplayOption(!displayOption)}
 361 
            onClick={() => setDisplayOption(!displayOption)}
330 
          />
 362 
          />
Línea 346... Línea 378...
346 
            show={showConfirmModal}
 378 
            show={showConfirmModal}
347 
            onClose={() => handleShowConfirmModal(false)}
 379 
            onClose={() => handleShowConfirmModal(false)}
348 
            onAccept={deleteFeedHandler}
 380 
            onAccept={deleteFeedHandler}
349 
            acceptLabel={LABELS.ACCEPT}
 381 
            acceptLabel={LABELS.ACCEPT}
350 
          />
 382 
          />
351 
        </div>}
 383 
        </div>
- 
 
 384 
      )}
352 
    </div>
 385 
    </div>
353 
  )
 386 
  )
354 
}
 387 
}
Línea 355... Línea 388...
355 
 
 388 
 
356 
Feed.Content = Content
 389 
Feed.Content = Content
Línea 357... Línea 390...
357 
Feed.Header = Header
 390 
Feed.Header = Header
358 
 
 391 
 
359 
const mapDispatchToProps = {
 392 
const mapDispatchToProps = {
- 
 
 393 
  addNotification: (notification) => addNotification(notification),
360 
  addNotification: (notification) => addNotification(notification),
 394 
  openShareModal: (postUrl, modalType, feedType) =>
Línea 361... Línea 395...
361 
  openShareModal: (postUrl, modalType, feedType) => openShareModal(postUrl, modalType, feedType)
 395 
    openShareModal(postUrl, modalType, feedType),