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 ExternalShareButton = withExternalShare(InputOption, post.share_external_url, {
        Icon: SendOutlinedIcon,
        color: 'gray',
        title: 'Enviar',
        shareUrl: post.share_increment_external_counter_url,
        setValue: handleExternalShare
    })

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

    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} enviados`}</span>}
                        </div>
                        <div className='feed__buttons'>
                            <InputOption
                                Icon={isLiked ? ThumbUpAltIcon : ThumbUpAltOutlinedIcon}
                                title={isLiked ? 'Ya no me gusta' : 'Me gusta'}
                                color={isLiked ? '#7405f9' : 'gray'}
                                onClick={() => handleLike(isLiked ? post.unlike_url : post.like_url)}
                            />
                            <InputOption
                                Icon={ChatOutlinedIcon}
                                title='Comentarios'
                                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 >
    )
}