WebSVN – LeadersLinked - Antes de SPA – Diff – /react-webpack/dashboard/components/feed/FeedTemplate.js

 /* eslint-disable react/prop-types */
 import React, { useEffect, useState, useRef } from 'react'
 import parse from 'html-react-parser'
 import { useDispatch, useSelector } from 'react-redux'
 import { axios } from '../../../utils'
+import {
+  EmailIcon,
+  EmailShareButton,
+  FacebookIcon,
+  FacebookShareButton,
+  RedditIcon,
-import { EmailIcon, EmailShareButton, FacebookIcon, FacebookShareButton, RedditIcon, RedditShareButton, TelegramIcon, TelegramShareButton, TwitterIcon, TwitterShareButton, WhatsappIcon, WhatsappShareButton } from 'react-share'
+  RedditShareButton,
+  TelegramIcon,
+  TelegramShareButton,
+  TwitterIcon,
+  TwitterShareButton,
+  WhatsappIcon,
+  WhatsappShareButton,
+} from 'react-share'
 // Redux types
 import { shareModalTypes } from '../../../redux/share-modal/shareModal.types'
     feed_highlighted,
     feed_share_url,
     feed_delete_url,
     comments,
     comment_add_url,
-    feed_share_external_url
+    feed_share_external_url,
   } = feed
   const dispatch = useDispatch()
   useEffect(() => setSharedState(owner_shared), [owner_shared])
+  useEffect(() => {
+    const handleClickOutside = (event) => {
-  useEffect(() => {
+      if (
+        shareContainer.current &&
-    const handleClickOutside = (event) => {
+        !shareContainer.current.contains(event.target)
-      if (shareContainer.current && !shareContainer.current.contains(event.target)) {
+      ) {
         setShareOptions(false)
+      }
+    }
   }, [shareContainer])
   const getShareUrl = new Promise((resolve, reject) => {
+    if (shareOptions) {
-    if (shareOptions) {
+      axios
-      axios.get(feed_share_external_url)
+        .get(feed_share_external_url)
         .then(({ data }) => {
           if (!data.success) {
             dispatch(addNotification({ style: 'danger', msg: data.data }))
             setShareOptions(false)
         .catch((err) => reject(err))
+    }
   })
   const likeHandler = (likeUrl) => {
-    axios.post(likeUrl)
-      .then((res) => {
+    axios.post(likeUrl).then((res) => {
-        const { success, data } = res.data
+      const { success, data } = res.data
-        if (!success) {
+      if (!success) {
+        setFeedIsLiked((previousState) => !previousState)
-          setFeedIsLiked((previousState) => !previousState)
+        dispatch(
-          dispatch(addNotification({
+          addNotification({
             style: 'danger',
-            msg: data
+            msg: data,
+          })
-          }))
+        )
-        } else {
+      } else {
-          setLikesState(data.likes)
+        setLikesState(data.likes)
-          setFeedIsLiked(!feedIsLiked)
+        setFeedIsLiked(!feedIsLiked)
-        }
+      }
-      })
+    })
+  }
+  const displayComments = () => setShowComments(!showComments)
+  const btnShareHandler = () =>
+    dispatch(
+      openShareModal(
+        feed_share_url,
+        shareModalTypes.SHARE,
+        feedTypes.DASHBOARD,
-  const displayComments = () => setShowComments(!showComments)
+        feed_unique
+      )
-  const btnShareHandler = () => dispatch(openShareModal(feed_share_url, shareModalTypes.SHARE, feedTypes.DASHBOARD, feed_unique))
-  return (
+    )
-    <>
-      <FeedModal
         isShow={show}
-        handleClose={() => setShow(false)}
+  return (
-        feed={feed}
+    <>
-      />
+      <FeedModal isShow={show} handleClose={() => setShow(false)} feed={feed} />
       <div className={`feed ${feed_highlighted ? 'highlighted' : ''}`}>
         <FeedHeader
           ownerName={owner_name}
           ownerImage={owner_image}
           ownerTimeElapse={owner_time_elapse}
+          ownerUrl={owner_url}
-          ownerUrl={owner_url}
+          feedDeleteUrl={feed_delete_url}
-          feedDeleteUrl={feed_delete_url}
+          feedUnique={feed_unique}
-          feedUnique={feed_unique}
+        />
-        />
+        <div
-        <div onClick={() =>
+          onClick={() =>
-          (owner_file_image || owner_file_video || owner_file_document) &&
+            (owner_file_image || owner_file_video || owner_file_document) &&
-          setShow(true)
+            setShow(true)
+          }
+        >
               time_elapse: feed.shared_time_elapse,
               description: feed.shared_description,
               file_video: feed.shared_file_video,
               file_image_preview: feed.shared_file_image_preview,
               file_image: feed.shared_file_image,
-              file_document: feed.shared_file_document
+              file_document: feed.shared_file_document,
             }}
           />
         </div>
         <div className="job-status-bar">
           <ul className="reactions-list">
             <li>
               <button
                 type="button"
+                id={
+                  feedIsLiked
-                id={feedIsLiked ? `btn-unlike-${feed_unique}` : `btn-like-${feed_unique}`}
+                    ? `btn-unlike-${feed_unique}`
+                    : `btn-like-${feed_unique}`
+                }
                 className={feedIsLiked ? 'btn-unlike' : 'btn-like'}
+                onClick={() =>
-                onClick={() => likeHandler(feedIsLiked ? feed_unlike_url : feed_like_url)}
+                  likeHandler(feedIsLiked ? feed_unlike_url : feed_like_url)
+                }
+              >
+                {feedIsLiked ? (
+                  <i className="mr-1 fa fa-heart" />
+                ) : (
-                {feedIsLiked ? <i className="mr-1 fa fa-heart" /> : <i className="mr-1 fa fa-heart-o" />}
+                  <i className="mr-1 fa fa-heart-o" />
+                )}
                 {likesState}
               </button>
             </li>
             <li>
               <button
                 type="button"
                 id={`btn-comments-${feed_unique}`}
                 className="btn-indicator"
                 onClick={displayComments}
+              >
+                <img
-                <img src="/images/icons/message.png" className="mr-1 img-icon" />
+                  src="/images/icons/message.png"
+                  className="mr-1 img-icon"
+                />
                 {totalComments}
               </button>
             </li>
             <li>
               <button
                 className="btn-indicator"
                 onClick={() => setShareOptions(!shareOptions)}
+              >
                 <i className="mr-1 far fa-share-square" />
               </button>
-              {shareOptions &&
+              {shareOptions && (
                 <div className="ext_share" ref={shareContainer}>
+                  <FacebookShareButton
-                  <FacebookShareButton beforeOnClick={() => getShareUrl} url={shareUrl}>
+                    beforeOnClick={() => getShareUrl}
+                    url={shareUrl}
+                  >
                     <FacebookIcon size={32} round />
                   </FacebookShareButton>
+                  <TwitterShareButton
-                  <TwitterShareButton beforeOnClick={() => getShareUrl} url={shareUrl}>
+                    beforeOnClick={() => getShareUrl}
+                    url={shareUrl}
+                  >
                     <TwitterIcon size={32} round />
                   </TwitterShareButton>
+                  <TelegramShareButton
-                  <TelegramShareButton beforeOnClick={() => getShareUrl} url={shareUrl}>
+                    beforeOnClick={() => getShareUrl}
+                    url={shareUrl}
+                  >
                     <TelegramIcon size={32} round />
                   </TelegramShareButton>
+                  <WhatsappShareButton
-                  <WhatsappShareButton beforeOnClick={() => getShareUrl} url={shareUrl}>
+                    beforeOnClick={() => getShareUrl}
+                    url={shareUrl}
+                  >
                     <WhatsappIcon size={32} round />
                   </WhatsappShareButton>
+                  <RedditShareButton
-                  <RedditShareButton beforeOnClick={() => getShareUrl} url={shareUrl}>
+                    beforeOnClick={() => getShareUrl}
+                    url={shareUrl}
+                  >
                     <RedditIcon size={32} round />
                   </RedditShareButton>
+                  <EmailShareButton
-                  <EmailShareButton beforeOnClick={() => getShareUrl} url={shareUrl}>
+                    beforeOnClick={() => getShareUrl}
+                    url={shareUrl}
+                  >
                     <EmailIcon size={32} round />
                   </EmailShareButton>
                 </div>
-              }
+              )}
             </li>
           </ul>
         </div>
         <FeedCommentSection
           feedId={feed.feed_unique}
           image={image}
           addUrl={comment_add_url}
           updateTotalComments={(total) => setTotalComments(total)}
-          comments={comments}
+          currentComments={comments}
           isShow={showComments}
         />
       </div>
     </>
+  )
   ownerFileVideo,
   ownerFileImagePreview,
   ownerFileDocument,
   ownerDescription,
   isShare,
-  sharedItem
+  sharedItem,
 }) => {
-  const labels = useSelector(state => state.labels)
+  const labels = useSelector((state) => state.labels)
   return (
     <div className="job_descp">
-      {showDescription &&
+      {showDescription && (
         <Feed.Description ownerDescription={ownerDescription} />
-      }
+      )}
-      {ownerFileImage &&
+      {ownerFileImage && (
-        <img src={ownerFileImage} className="Entradas" loading='lazy' />
+        <img src={ownerFileImage} className="Entradas" loading="lazy" />
-      }
+      )}
-      {ownerFileVideo &&
+      {ownerFileVideo && (
         <video
           src={ownerFileVideo}
           controls
           poster={ownerFileImagePreview}
           preload="none"
         />
-      }
+      )}
-      {ownerFileDocument &&
+      {ownerFileDocument && (
         <a href={ownerFileDocument} target="_blank" rel="noreferrer">
           {labels.DOWNLOAD}
         </a>
-      }
+      )}
-      {isShare &&
+      {isShare && (
         <Feed.SharedContent
           name={sharedItem.name}
           image={sharedItem.image}
           timeElapse={sharedItem.time_elapse}
           description={sharedItem.description}
           fileVideo={sharedItem.file_video}
           fileImagePreview={sharedItem.file_image_preview}
           fileImage={sharedItem.file_image}
           fileDocument={sharedItem.file_document}
         />
-      }
+      )}
     </div>
+  )
+}
 const Description = ({ ownerDescription }) => {
   const [isReadMoreActive, setIsReadMoreActive] = useState(false)
-  const labels = useSelector(state => state.labels)
+  const labels = useSelector((state) => state.labels)
   const readMoreHandler = () => setIsReadMoreActive(!isReadMoreActive)
       const shortenedString = fullStringText.substr(0, 500)
       const shortenedText = parse(`${shortenedString}... `)
       return (
         <p>
           {isReadMoreActive ? fullText : shortenedText}
-          <span className='cursor-pointer' onClick={readMoreHandler}>
+          <span className="cursor-pointer" onClick={readMoreHandler}>
             {isReadMoreActive ? labels.READ_LESS : labels.READ_MORE}
           </span>
         </p>
+      )
+    }
     return <p>{fullText}</p>
+  }
-  return (
-    <div className="show-read-more">
+  return (
-      {htmlParsedText(ownerDescription)}
-    </div>
+    <div className="show-read-more">{htmlParsedText(ownerDescription)}</div>
+  )
+}
   timeElapse,
   description,
   fileVideo,
   fileImagePreview,
   fileImage,
-  fileDocument
+  fileDocument,
 }) => {
   const [isReadMoreActive, setIsReadMoreActive] = useState(false)
-  const labels = useSelector(state => state.labels)
+  const labels = useSelector((state) => state.labels)
   const readMoreHandler = () => setIsReadMoreActive(!isReadMoreActive)
       const shortenedString = fullStringText.substr(0, 500)
       const shortenedText = parse(`${shortenedString}... `)
       return (
         <p>
           {isReadMoreActive ? fullText : shortenedText}
-          <span className='cursor-pointer' onClick={readMoreHandler}>
+          <span className="cursor-pointer" onClick={readMoreHandler}>
             {isReadMoreActive ? labels.READ_LESS : labels.READ_MORE}
           </span>
         </p>
+      )
+    }
   return (
     <div className="shared-post-bar">
       <div className="post-bar">
         <div className="post_topbar">
           <div className="usy-dt">
-            <img
-              src={image}
-              alt=""
-              style={{ width: '50px', height: 'auto' }}
+            <img src={image} alt="" style={{ width: '50px', height: 'auto' }} />
-            />
             <div className="usy-name">
               <h3>{name}</h3>
-              <span>
-                {timeElapse}
+              <span>{timeElapse}</span>
-              </span>
             </div>
           </div>
         </div>
         <div className="job_descp">
-          <div className="show-read-more">
+          <div className="show-read-more">{htmlParsedText(description)}</div>
-            {htmlParsedText(description)}
-          </div>
-          {fileImage &&
+          {fileImage && (
-            <img src={fileImage} className="Entradas" loading='lazy' />
+            <img src={fileImage} className="Entradas" loading="lazy" />
-          }
+          )}
-          {fileVideo &&
+          {fileVideo && (
             <video
               src={fileVideo}
               controls
               poster={fileImagePreview}
               preload="none"
             />
-          }
+          )}
-          {fileDocument &&
+          {fileDocument && (
             <a href={fileDocument} target="_blank" rel="noreferrer">
               {labels.DOWNLOAD}
             </a>
-          }
+          )}
         </div>
       </div>
     </div>
+  )
+}

Proyectos de Subversion LeadersLinked - Antes de SPA

(root)/react-webpack/dashboard/components/feed/FeedTemplate.js – Rev 5449 → 5579