Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 1 Rev 3361
Línea -... Línea 1...
- 
 
 1 
/* eslint-disable react/prop-types */
1 
import React from 'react'
 2 
import React, { useState } from 'react'
2 
import parse from "html-react-parser";
 3 
import parse from "html-react-parser";
3 
import moment from 'moment'
 4 
import moment from 'moment'
4 
export default function PostView(props) {
 5 
import { BiDotsVerticalRounded } from 'react-icons/bi'
5 
    const {post} = props
 6 
import { EmailIcon, EmailShareButton, FacebookIcon, FacebookMessengerIcon, FacebookMessengerShareButton, FacebookShareButton, PinterestIcon, PinterestShareButton, RedditIcon, RedditShareButton, TelegramIcon, TelegramShareButton, TumblrIcon, TumblrShareButton, TwitterIcon, TwitterShareButton, WhatsappIcon, WhatsappShareButton, WorkplaceIcon, WorkplaceShareButton } from 'react-share';
- 
 
 7 
import { useRef } from 'react';
- 
 
 8 
 
- 
 
 9 
export default function PostView({ post = {} }) {
- 
 
 10 
 
6 
    const baseUrl = `/storage/type/post/code/${post.uuid}/filename/`
 11 
    const baseUrl = `/storage/type/post/code/${post.uuid}/filename/`
- 
 
 12 
    const shareContainer = useRef(null)
- 
 
 13 
    const [shareOptions, setShareOptions] = useState(false)
- 
 
 14 
 
7 
    return (
 15 
    return (
8 
        <div
 - 
 
9 
            className='container'
 16 
        <div className='container'>
10 
        >
 - 
 
11 
            <div
 17 
            <div
12 
                className='row p-2 m-2'
 18 
                className='row p-2 m-2'
13 
                style={{
 - 
 
14 
                    backgroundColor: 'white'
 19 
                style={{ backgroundColor: 'white' }}
15 
                }}
 - 
 
16 
            >
 20 
            >
17 
                <div
 - 
 
18 
                    className='col-md-6 col-sm-12 col-12'
 21 
                <div className='col-md-6 col-sm-12 col-12'>
19 
                >
 - 
 
20 
                    <div className="card">
 22 
                    <div className="card">
21 
                        <img className="card-img-top" src={baseUrl+post.image} alt={post.title} />
 23 
                        <img className="card-img-top" src={baseUrl + post.image} alt={post.title} />
22 
                    </div>
 24 
                    </div>
23 
                </div>
 25 
                </div>
24 
                <div
 - 
 
25 
                    className='col-md-6 col-sm-12 col-12 d-flex align-items-center'
 26 
                <div className='col-md-6 col-sm-12 col-12 d-flex align-items-center position-relative'>
26 
                >
 - 
 
27 
                    <div className="card border-0">
 27 
                    <div className="card border-0">
28 
                        <div className="card-body">
 28 
                        <div className="card-body">
29 
                            <h1 className="card-title font-weight-bold border-bottom">{post.title}</h1>
 29 
                            <h1 className="card-title font-weight-bold border-bottom">{post.title}</h1>
30 
                            <p> {moment(post.date).format('DD-MM-YYYY')} </p>
 30 
                            <p> {moment(post.date).format('DD-MM-YYYY')} </p>
31 
                            <p className="card-text">
 31 
                            <p className="card-text">
32 
                                {parse(post.description)}
 32 
                                {parse(post.description)}
33 
                            </p>
 33 
                            </p>
34 
                            {
 34 
                            {
35 
                                !!post.file && (
 35 
                                !!post.file &&
36 
                                    <a href={baseUrl+post.file} target='_blank' className="btn btn-primary mt-2">
 36 
                                <a href={baseUrl + post.file} target='_blank' className="btn btn-primary mt-2" rel="noreferrer">
37 
                                        <i className="fa fa-file" /> Ver adjunto
 37 
                                    <i className="fa fa-file" /> Ver adjunto
38 
                                    </a>
 38 
                                </a>
39 
                                )
 - 
 
40 
                            }
 39 
                            }
41 
                        </div>
 40 
                        </div>
42 
                    </div>
 41 
                    </div>
- 
 
 42 
                    <button
- 
 
 43 
                        className="btn p-0"
- 
 
 44 
                        onClick={() => setShareOptions(!shareOptions)}
- 
 
 45 
                        style={{ right: '0', top: '0' }}
- 
 
 46 
                    >
- 
 
 47 
                        <BiDotsVerticalRounded />
- 
 
 48 
                    </button>
- 
 
 49 
                    {
- 
 
 50 
                        shareOptions &&
- 
 
 51 
                        <div className="ext_share" ref={shareContainer}>
- 
 
 52 
                            <FacebookShareButton url={`${window.location.hostname}${post.share_external_url}`}>
- 
 
 53 
                                <FacebookIcon size={32} round />
- 
 
 54 
                            </FacebookShareButton>
- 
 
 55 
                            <FacebookMessengerShareButton url={`${window.location.hostname}${post.share_external_url}`}>
- 
 
 56 
                                <FacebookMessengerIcon size={32} round />
- 
 
 57 
                            </FacebookMessengerShareButton>
- 
 
 58 
                            <TwitterShareButton url={`${window.location.hostname}${post.share_external_url}`}>
- 
 
 59 
                                <TwitterIcon size={32} round />
- 
 
 60 
                            </TwitterShareButton>
- 
 
 61 
                            <TelegramShareButton url={`${window.location.hostname}${post.share_external_url}`}>
- 
 
 62 
                                <TelegramIcon size={32} round />
- 
 
 63 
                            </TelegramShareButton>
- 
 
 64 
                            <WhatsappShareButton url={`${window.location.hostname}${post.share_external_url}`}>
- 
 
 65 
                                <WhatsappIcon size={32} round />
- 
 
 66 
                            </WhatsappShareButton>
- 
 
 67 
                            <PinterestShareButton url={`${window.location.hostname}${post.share_external_url}`}>
- 
 
 68 
                                <PinterestIcon size={32} round />
- 
 
 69 
                            </PinterestShareButton>
- 
 
 70 
                            <RedditShareButton url={`${window.location.hostname}${post.share_external_url}`}>
- 
 
 71 
                                <RedditIcon size={32} round />
- 
 
 72 
                            </RedditShareButton>
- 
 
 73 
                            <TumblrShareButton url={`${window.location.hostname}${post.share_external_url}`}>
- 
 
 74 
                                <TumblrIcon size={32} round />
- 
 
 75 
                            </TumblrShareButton>
- 
 
 76 
                            <WorkplaceShareButton url={`${window.location.hostname}${post.share_external_url}`}>
- 
 
 77 
                                <WorkplaceIcon size={32} round />
- 
 
 78 
                            </WorkplaceShareButton>
- 
 
 79 
                            <EmailShareButton url={`${window.location.hostname}${post.share_external_url}`}>
- 
 
 80 
                                <EmailIcon size={32} round />
- 
 
 81 
                            </EmailShareButton>
- 
 
 82 
                        </div>
- 
 
 83 
                    }
43 
                </div>
 84 
                </div>
44 
            </div>
 85 
            </div>
45
- 
 
46 
        </div>
 86 
        </div >
47 
    )
 87 
    )
48 
}
 88 
}