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 >

    )

}