Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable camelcase */
/* 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,
  RedditShareButton,
  TelegramIcon,
  TelegramShareButton,
  TwitterIcon,
  TwitterShareButton,
  WhatsappIcon,
  WhatsappShareButton,
} from 'react-share'

// Redux types
import { shareModalTypes } from '../../../redux/share-modal/shareModal.types'
import { feedTypes } from '../../../redux/feed/feed.types'

// Redux actions
import { openShareModal } from '../../../redux/share-modal/shareModal.actions'
import { addNotification } from '../../../redux/notification/notification.actions'

// Components
import FeedModal from './FeedModal'
import FeedHeader from './FeedHeader'
import FeedCommentSection from './feed-comment/FeedCommentSection'

const Feed = ({ feed, owner_shared, image }) => {
  // Destructuring feed data
  const {
    feed_unique,
    owner_name,
    owner_url,
    owner_image,
    owner_time_elapse,
    owner_file_image,
    owner_file_video,
    owner_file_document,
    feed_likes,
    feed_like_url,
    feed_unlike_url,
    feed_is_liked,
    feed_highlighted,
    feed_share_url,
    feed_delete_url,
    comments,
    comment_add_url,
    feed_share_external_url,
  } = feed

  const dispatch = useDispatch()

  const [totalComments, setTotalComments] = useState(comments.length || 0)
  const [feedIsLiked, setFeedIsLiked] = useState(feed_is_liked)
  const [sharedState, setSharedState] = useState(owner_shared)
  const [likesState, setLikesState] = useState(feed_likes)
  const [shareUrl, setShareUrl] = useState('')
  const [showComments, setShowComments] = useState(false)

  const [shareOptions, setShareOptions] = useState(false)
  const [show, setShow] = useState(false)

  const shareContainer = useRef(null)

  useEffect(() => setSharedState(owner_shared), [owner_shared])

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (
        shareContainer.current &&
        !shareContainer.current.contains(event.target)
      ) {
        setShareOptions(false)
      }
    }
    document.addEventListener('mousedown', handleClickOutside)

    return () => {
      document.removeEventListener('mousedown', handleClickOutside)
    }
  }, [shareContainer])

  const getShareUrl = new Promise((resolve, reject) => {
    if (shareOptions) {
      axios
        .get(feed_share_external_url)
        .then(({ data }) => {
          if (!data.success) {
            dispatch(addNotification({ style: 'danger', msg: data.data }))
            setShareOptions(false)
            return reject(data.data)
          }
          setShareUrl(data.data)
          return resolve(data.data)
        })
        .catch((err) => reject(err))
    }
  })

  const likeHandler = (likeUrl) => {
    axios.post(likeUrl).then((res) => {
      const { success, data } = res.data
      if (!success) {
        setFeedIsLiked((previousState) => !previousState)
        dispatch(
          addNotification({
            style: 'danger',
            msg: data,
          })
        )
      } else {
        setLikesState(data.likes)
        setFeedIsLiked(!feedIsLiked)
      }
    })
  }

  const displayComments = () => setShowComments(!showComments)

  const btnShareHandler = () =>
    dispatch(
      openShareModal(
        feed_share_url,
        shareModalTypes.SHARE,
        feedTypes.DASHBOARD,
        feed_unique
      )
    )

  return (
    <>
      <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}
          feedDeleteUrl={feed_delete_url}
          feedUnique={feed_unique}
        />
        <div
          onClick={() =>
            (owner_file_image || owner_file_video || owner_file_document) &&
            setShow(true)
          }
        >
          <Feed.Content
            isShare={!!feed.shared_name}
            ownerFileImage={feed.owner_file_image}
            ownerFileVideo={feed.owner_file_video}
            ownerFileImagePreview={feed.owner_file_image_preview}
            ownerFileDocument={feed.owner_file_document}
            ownerDescription={feed.owner_description}
            sharedItem={{
              name: feed.shared_name,
              image: feed.shared_image,
              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,
            }}
          />
        </div>
        <div className="job-status-bar">
          <ul className="reactions-list">
            <li>
              <button
                type="button"
                id={
                  feedIsLiked
                    ? `btn-unlike-${feed_unique}`
                    : `btn-like-${feed_unique}`
                }
                className={feedIsLiked ? 'btn-unlike' : 'btn-like'}
                onClick={() =>
                  likeHandler(feedIsLiked ? feed_unlike_url : feed_like_url)
                }
              >
                {feedIsLiked ? (
                  <i className="mr-1 fa fa-heart" />
                ) : (
                  <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
                  src="/images/icons/message.png"
                  className="mr-1 img-icon"
                />
                {totalComments}
              </button>
            </li>
            <li>
              <button
                type="button"
                id={`btn-share-${feed_unique}`}
                className="btn-indicator"
                onClick={btnShareHandler}
              >
                <img src="/images/icons/share.png" className="mr-1 img-icon" />
                {sharedState}
              </button>
            </li>
            <li className="position-relative">
              <button
                type="button"
                className="btn-indicator"
                onClick={() => setShareOptions(!shareOptions)}
              >
                <i className="mr-1 far fa-share-square" />
              </button>
              {shareOptions && (
                <div className="ext_share" ref={shareContainer}>
                  <FacebookShareButton
                    beforeOnClick={() => getShareUrl}
                    url={shareUrl}
                  >
                    <FacebookIcon size={32} round />
                  </FacebookShareButton>
                  <TwitterShareButton
                    beforeOnClick={() => getShareUrl}
                    url={shareUrl}
                  >
                    <TwitterIcon size={32} round />
                  </TwitterShareButton>
                  <TelegramShareButton
                    beforeOnClick={() => getShareUrl}
                    url={shareUrl}
                  >
                    <TelegramIcon size={32} round />
                  </TelegramShareButton>
                  <WhatsappShareButton
                    beforeOnClick={() => getShareUrl}
                    url={shareUrl}
                  >
                    <WhatsappIcon size={32} round />
                  </WhatsappShareButton>
                  <RedditShareButton
                    beforeOnClick={() => getShareUrl}
                    url={shareUrl}
                  >
                    <RedditIcon size={32} round />
                  </RedditShareButton>
                  <EmailShareButton
                    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)}
          currentComments={comments}
          isShow={showComments}
        />
      </div>
    </>
  )
}

const Content = ({
  showDescription = true,
  ownerFileImage,
  ownerFileVideo,
  ownerFileImagePreview,
  ownerFileDocument,
  ownerDescription,
  isShare,
  sharedItem,
}) => {
  const labels = useSelector((state) => state.labels)
  return (
    <div className="job_descp">
      {showDescription && (
        <Feed.Description ownerDescription={ownerDescription} />
      )}
      {ownerFileImage && (
        <img src={ownerFileImage} className="Entradas" loading="lazy" />
      )}
      {ownerFileVideo && (
        <video
          src={ownerFileVideo}
          controls
          poster={ownerFileImagePreview}
          preload="none"
        />
      )}
      {ownerFileDocument && (
        <a href={ownerFileDocument} target="_blank" rel="noreferrer">
          {labels.DOWNLOAD}
        </a>
      )}
      {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 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 (
        <p>
          {isReadMoreActive ? fullText : shortenedText}
          <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">{htmlParsedText(ownerDescription)}</div>
  )
}

const SharedContent = ({
  name,
  image,
  timeElapse,
  description,
  fileVideo,
  fileImagePreview,
  fileImage,
  fileDocument,
}) => {
  const [isReadMoreActive, setIsReadMoreActive] = useState(false)
  const labels = useSelector((state) => state.labels)

  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 (
        <p>
          {isReadMoreActive ? fullText : shortenedText}
          <span className="cursor-pointer" onClick={readMoreHandler}>
            {isReadMoreActive ? labels.READ_LESS : labels.READ_MORE}
          </span>
        </p>
      )
    }
    return <p>{fullText}</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' }} />
            <div className="usy-name">
              <h3>{name}</h3>
              <span>{timeElapse}</span>
            </div>
          </div>
        </div>
        <div className="job_descp">
          <div className="show-read-more">{htmlParsedText(description)}</div>
          {fileImage && (
            <img src={fileImage} className="Entradas" loading="lazy" />
          )}
          {fileVideo && (
            <video
              src={fileVideo}
              controls
              poster={fileImagePreview}
              preload="none"
            />
          )}
          {fileDocument && (
            <a href={fileDocument} target="_blank" rel="noreferrer">
              {labels.DOWNLOAD}
            </a>
          )}
        </div>
      </div>
    </div>
  )
}

Feed.SharedContent = SharedContent
Feed.Description = Description
Feed.Content = Content

export default React.memo(Feed)