Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4098 | Rev 4817 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 4098 Rev 4816
Línea 1... Línea 1...
1 
/* eslint-disable react/prop-types */
 1 
/* eslint-disable react/prop-types */
2 
import React, { useState, useRef } from 'react'
 2 
import React, { useState } from 'react'
3 
import parse from "html-react-parser";
 - 
 
4 
import moment from 'moment'
 - 
 
5 
import { BiShareAlt } from 'react-icons/bi'
 - 
 
6 
import { EmailIcon, EmailShareButton, FacebookIcon, FacebookShareButton, RedditIcon, RedditShareButton, TelegramIcon, TelegramShareButton, TwitterIcon, TwitterShareButton, WhatsappIcon, WhatsappShareButton } from 'react-share';
 - 
 
7 
import { addNotification } from '../../redux/notification/notification.actions'
 - 
 
8 
import { useDispatch } from 'react-redux'
 - 
 
9 
import { axios } from '../../utils';
 3 
import { axios } from '../../utils';
- 
 
 4 
import { addNotification } from '../../redux/notification/notification.actions';
- 
 
 5 
import parse from 'html-react-parser'
- 
 
 6 
 
- 
 
 7 
// Components
10 
import HomeNews from '../components/home-section/HomeNews';
 8 
import HomeNews from '../components/home-section/HomeNews';
- 
 
 9 
import InputOption from '../templates/linkedin/Feed/InputOption';
- 
 
 10 
import withExternalShare from '../templates/linkedin/Feed/withExternalShare';
- 
 
 11 
 
- 
 
 12 
// Icons
- 
 
 13 
import ThumbUpAltOutlinedIcon from '@mui/icons-material/ThumbUpAltOutlined'
- 
 
 14 
import ThumbUpAltIcon from '@mui/icons-material/ThumbUpAlt'
- 
 
 15 
import ChatOutlinedIcon from '@mui/icons-material/ChatOutlined'
- 
 
 16 
import SendOutlinedIcon from '@mui/icons-material/SendOutlined'
- 
 
 17 
import AccessTimeIcon from '@mui/icons-material/AccessTime';
- 
 
 18 
 
- 
 
 19 
export default function PostView({ post = {
- 
 
 20 
    url: "",
- 
 
 21 
    file: "imagengrupo.png",
- 
 
 22 
    comments_url: "/post/344ccca7-6260-4564-93cc-85ed7682bec2/comments",
- 
 
 23 
    comments_add_url: "/post/344ccca7-6260-4564-93cc-85ed7682bec2/comments/add"
- 
 
 24 
}
- 
 
 25 
}) {
- 
 
 26 
    const [isLiked, setIsLiked] = useState(post.is_liked)
- 
 
 27 
    const [externalShare, setExternalShare] = useState(post.total_share_external)
- 
 
 28 
    const [isReadMoreActive, setIsReadMoreActive] = useState(false)
- 
 
 29 
    const [showComments, setShowComments] = useState(false)
Línea 11... Línea 30...
11 
 
 30 
 
Línea 12... Línea 31...
12 
export default function PostView({ post = {} }) {
 31 
    const readMoreHandler = () => setIsReadMoreActive(!isReadMoreActive)
13 
 
 32 
 
- 
 
 33 
    const displayCommentSection = () => {
- 
 
 34 
        axios.get(post.comments_url)
Línea -... Línea 35...
- 
 
 35 
        setShowComments(!showComments)
- 
 
 36 
    }
- 
 
 37 
 
- 
 
 38 
    const ExternalShareButton = withExternalShare(InputOption, post.share_external_url, {
14 
    const [shareUrl, setShareUrl] = useState()
 39 
        Icon: SendOutlinedIcon,
15 
    const dispatch = useDispatch()
 40 
        color: 'gray',
- 
 
 41 
        title: 'Send',
- 
 
 42 
        shareUrl: post.share_increment_external_counter_url,
- 
 
 43 
        setValue: handleExternalShare
- 
 
 44 
    })
- 
 
 45 
 
- 
 
 46 
    const handleExternalShare = (value) => setExternalShare(value)
16 
 
 47 
 
17 
    const getShareUrl = new Promise((resolve, reject) => {
 48 
    const handleLike = (url) => {
18 
        axios.get(post.share_external_url)
 49 
        axios.post(url)
19 
            .then(({ data }) => {
 - 
 
20 
                if (!data.success) {
 50 
            .then(({ data: response }) => {
21 
                    dispatch(addNotification({ style: 'danger', msg: data.data }))
 51 
                if (!response.success) {
22 
                    setShareOptions(false)
 52 
                    addNotification({ style: "danger", msg: response.data })
23 
                    return reject(data.data)
 - 
 
24 
                }
 53 
                    return
25 
                setShareUrl(data.data)
 - 
 
26 
                return resolve(data.data)
 54 
                }
27 
            })
 55 
                setIsLiked(!isLiked);
28 
            .catch((err) => reject(err))
 56 
            });
29 
    });
 57 
    }
- 
 
 58 
 
- 
 
 59 
    const htmlParsedText = (fullStringText) => {
30 
 
 60 
        const fullText = parse(fullStringText)
- 
 
 61 
        if (fullStringText.length > 500) {
- 
 
 62 
            const shortenedString = fullStringText.substr(0, 500);
- 
 
 63 
            const shortenedText = parse(`${shortenedString}... `);
- 
 
 64 
            return (
- 
 
 65 
                <>
- 
 
 66 
                    {isReadMoreActive ? fullText : shortenedText}
- 
 
 67 
                    <span className='cursor-pointer' onClick={readMoreHandler}>
- 
 
 68 
                        {isReadMoreActive ? " Leer menos" : " Leer más"}
- 
 
 69 
                    </span>
- 
 
 70 
                </>
- 
 
 71 
            );
Línea 31... Línea 72...
31 
    const baseUrl = `/storage/type/post/code/${post.uuid}/filename/`
 72 
        }
32 
    const shareContainer = useRef(null)
 73 
        return <p>{fullText}</p>
33 
    const [shareOptions, setShareOptions] = useState(false)
 74 
    }
34 
 
 75 
 
35 
    return (
 76 
    return (
36 
        <div className="container">
 - 
 
37 
            <div className="d-flex flex-column flex-md-row" style={{ gap: '1rem' }}>
 - 
 
38 
                <div className="col-12 col-md-8 peopleYouMayKnow">
 - 
 
39 
                    <div className="job_descp">
 77 
        <div className="container">
40 
                        <img
 78 
            <div className="d-flex flex-column flex-md-row" style={{ gap: '1rem' }}>
41 
                            alt={post.title}
 - 
 
42 
                            src={baseUrl + post.image}
 79 
                <div className="col-12 col-md-8 p-0">
43 
                            className="Entradas"
 - 
 
44 
                            style={{ objectFit: 'contain' }}
 80 
                    <div className='feed'>
45 
                        />
 81 
                        <div className='feed__body'>
46 
                    </div>
 - 
 
47 
                    <div className="job-status-bar">
 - 
 
48 
                        <ul className="reactions-list">
 82 
                            {post.image && <img src={`/storage/type/post/code/${post.uuid}/filename/${post.image}`} className="Entradas" loading='lazy' />}
49 
                            <li className="position-relative">
 - 
 
50 
                                <button
 - 
 
51 
                                    type="button"
 83 
                        </div>
52 
                                    className="btn-indicator"
 - 
 
53 
                                    onClick={() => setShareOptions(!shareOptions)}
 - 
 
54 
                                >
 - 
 
55 
                                    <BiShareAlt />
 - 
 
56 
                                </button>
 - 
 
57 
                                {shareOptions &&
 84 
                        <div className='feed__body'>
58 
                                    <div className="ext_share post" ref={shareContainer}>
 - 
 
59 
                                        <FacebookShareButton beforeOnClick={() => getShareUrl} url={shareUrl}>
 - 
 
60 
                                            <FacebookIcon size={32} round />
 - 
 
61 
                                        </FacebookShareButton>
 - 
 
62 
                                        <TwitterShareButton beforeOnClick={() => getShareUrl} url={shareUrl}>
 - 
 
63 
                                            <TwitterIcon size={32} round />
 - 
 
64 
                                        </TwitterShareButton>
 - 
 
65 
                                        <TelegramShareButton beforeOnClick={() => getShareUrl} url={shareUrl}>
 - 
 
66 
                                            <TelegramIcon size={32} round />
 - 
 
67 
                                        </TelegramShareButton>
 - 
 
68 
                                        <WhatsappShareButton beforeOnClick={() => getShareUrl} url={shareUrl}>
 - 
 
69 
                                            <WhatsappIcon size={32} round />
 85 
                            <div className='feed__header'>
70 
                                        </WhatsappShareButton>
 - 
 
71 
                                        <RedditShareButton beforeOnClick={() => getShareUrl} url={shareUrl}>
 86 
                                <div className='feed__info'>
72 
                                            <RedditIcon size={32} round />
 - 
 
73 
                                        </RedditShareButton>
 87 
                                    <h2>{post.title}</h2>
74 
                                        <EmailShareButton beforeOnClick={() => getShareUrl} url={shareUrl}>
 - 
 
75 
                                            <EmailIcon size={32} round />
 - 
 
76 
                                        </EmailShareButton>
 - 
 
77 
                                    </div>
 - 
 
78 
                                }
 - 
 
79 
                            </li>
 - 
 
80 
                        </ul>
 - 
 
81 
                    </div>
 - 
 
82 
                    <div className="post_topbar mt-3" >
 - 
 
83 
                        <div className="usy-dt">
 - 
 
84 
                            <div className="usy-name">
 88 
                                    <div className='time__elapse'>
85 
                                <h3>{post.title}</h3>
 89 
                                        <p>{post.addedOn}</p>
- 
 
 90 
                                        <AccessTimeIcon className='time__elapse-icon' />
86 
                                <span>
 91 
                                    </div>
- 
 
 92 
                                </div>
- 
 
 93 
                            </div>
- 
 
 94 
                            {post.description && htmlParsedText(post.description)}
87 
                                    {moment(post.date).format('DD-MM-YYYY')}
 95 
                        </div>
88 
                                </span>
 96 
                        <div className="px-3 d-flex align-items-center justify-content-between">
- 
 
 97 
                            <div className="d-inline-flex align-items-center" style={{ gap: '5px' }}>
- 
 
 98 
                                {!!externalShare && <span>{`${externalShare} enviados`}</span>}
89 
                            </div>
 99 
                            </div>
- 
 
 100 
                            <div className='feed__buttons'>
- 
 
 101 
                                <InputOption
- 
 
 102 
                                    Icon={isLiked ? ThumbUpAltIcon : ThumbUpAltOutlinedIcon}
90 
                        </div>
 103 
                                    title='Like'
- 
 
 104 
                                    color={isLiked ? '#7405f9' : 'gray'}
- 
 
 105 
                                    onClick={() => handleLike(isLiked ? post.unlike_url : post.like_url)}
- 
 
 106 
                                />
- 
 
 107 
                                <InputOption
- 
 
 108 
                                    Icon={ChatOutlinedIcon}
- 
 
 109 
                                    title='Comment'
- 
 
 110 
                                    color='gray'
91 
                    </div >
 111 
                                    onClick={displayCommentSection}
92 
                    <div className="job_descp">
 112 
                                />
93 
                        <div className="show-read-more">
 113 
                                <ExternalShareButton />
94 
                            {parse(post.description)}
 114 
                            </div>
95 
                        </div>
 115 
                        </div>