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}

          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)