Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useEffect, useState } from 'react'
import { axios } from '../../utils'
import { addNotification } from '../../redux/notification/notification.actions'
import parse from 'html-react-parser'

// Components
import HomeNews from '../components/home-section/HomeNews'
import InputOption from '../templates/linkedin/Feed/InputOption'
import withExternalShare from '../templates/linkedin/Feed/withExternalShare'

// Icons
import ThumbUpAltOutlinedIcon from '@mui/icons-material/ThumbUpAltOutlined'
import ThumbUpAltIcon from '@mui/icons-material/ThumbUpAlt'
import ChatOutlinedIcon from '@mui/icons-material/ChatOutlined'
import SendOutlinedIcon from '@mui/icons-material/SendOutlined'
import AccessTimeIcon from '@mui/icons-material/AccessTime'

// Styles
import '../templates/linkedin/Feed/Feed.scss'
import FeedCommentSection from '../components/feed/feed-comment/FeedCommentSection'

export default function PostView ({
  post = {
    url: '',
    file: 'imagengrupo.png',
    comments_url: '/post/344ccca7-6260-4564-93cc-85ed7682bec2/comments',
    comments_add_url: '/post/344ccca7-6260-4564-93cc-85ed7682bec2/comments/add'
  }
}) {
  const [isLiked, setIsLiked] = useState(post.is_liked)
  const [externalShare, setExternalShare] = useState(post.total_share_external)
  const [comments, setComments] = useState([])
  const [isReadMoreActive, setIsReadMoreActive] = useState(false)
  const [showComments, setShowComments] = useState(false)

  const readMoreHandler = () => setIsReadMoreActive(!isReadMoreActive)

  const displayCommentSection = () => {
    setShowComments(!showComments)
  }

  const getComments = async () => {
    await axios.get(post.comments_url)
      .then(({ data: response }) => {
        if (!response.success) {
          addNotification({ style: 'danger', msg: response.data })
          return
        }

        setComments(response.data)
      })
  }

  const handleExternalShare = (value) => setExternalShare(value)

  const ExternalShareButton = withExternalShare(InputOption, post.share_external_url, {
    Icon: SendOutlinedIcon,
    color: 'gray',
    title: 'Enviar',
    shareUrl: post.share_increment_external_counter_url,
    setValue: handleExternalShare
  })

  const handleLike = (url) => {
    axios.post(url)
      .then(({ data: response }) => {
        if (!response.success) {
          addNotification({ style: 'danger', msg: response.data })
          return
        }
        setIsLiked(!isLiked)
      })
  }

  const htmlParsedText = (fullStringText) => {
    const fullText = parse(fullStringText)
    if (fullStringText.length > 500) {
      const shortenedString = fullStringText.substr(0, 500)
      const shortenedText = parse(`${shortenedString}... `)
      return (
                <>
                    {isReadMoreActive ? fullText : shortenedText}
                    <span className='cursor-pointer' onClick={readMoreHandler}>
                        {isReadMoreActive ? ' Leer menos' : ' Leer más'}
                    </span>
                </>
      )
    }
    return <p>{fullText}</p>
  }

  useEffect(() => {
    if (showComments && !comments.length) getComments()
  }, [showComments])

  return (
        <div className="container">
            <div className="d-flex flex-column flex-md-row" style={{ gap: '1rem' }}>
                <div className="col-12 col-md-8 p-0">
                    <div className='feed'>
                        <div className='feed__body'>
                            {post.image && <img src={`/storage/type/post/code/${post.uuid}/filename/${post.image}`} className="Entradas" loading='lazy' />}
                        </div>
                        <div className='feed__body'>
                            <div className='feed__header'>
                                <div className='feed__info'>
                                    <h2>{post.title}</h2>
                                    <div className='time__elapse'>
                                        <p>{post.addedOn}</p>
                                        <AccessTimeIcon className='time__elapse-icon' />
                                    </div>
                                </div>
                            </div>
                            {post.description && htmlParsedText(post.description)}
                        </div>
                        <div className="px-3 d-flex align-items-center justify-content-end" style={{ gap: '5px' }}>
                            {!!externalShare && <span>{`${externalShare} ${LABELS.SENDS.toLowerCase()}`}</span>}
                        </div>
                        <div className='feed__buttons'>
                            <InputOption
                                Icon={isLiked ? ThumbUpAltIcon : ThumbUpAltOutlinedIcon}
                                title={isLiked ? LABELS.UNLIKE : LABELS.LIKE}
                                color={isLiked ? '#7405f9' : 'gray'}
                                onClick={() => handleLike(isLiked ? post.unlike_url : post.like_url)}
                            />
                            <InputOption
                                Icon={ChatOutlinedIcon}
                                title={LABELS.COMMENTS}
                                color='gray'
                                onClick={displayCommentSection}
                            />
                            <ExternalShareButton />
                        </div>
                        <div className='px-2 pb-2'>
                            <FeedCommentSection
                                feedId={post.uuid}
                                addUrl={post.comments_add_url}
                                comments={comments}
                                isShow={showComments}
                            />
                        </div>
                    </div>
                </div>
                <div className="col-12 col-md-4 p-0">
                    <HomeNews currentPost={post.uuid} />
                </div>
            </div>
        </div>
  )
}