Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4806 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
4309 stevensc 1 
/* eslint-disable react/display-name */
6018 stevensc 2 
import React, { useEffect, useState } from 'react'
3 
import { useDispatch } from 'react-redux'
4 
import {
5 
  EmailIcon,
6 
  EmailShareButton,
7 
  FacebookIcon,
8 
  FacebookShareButton,
9 
  RedditIcon,
10 
  RedditShareButton,
11 
  TelegramIcon,
12 
  TelegramShareButton,
13 
  TwitterIcon,
14 
  TwitterShareButton,
15 
  WhatsappIcon,
16 
  WhatsappShareButton,
17 
} from 'react-share'
18 
import { addNotification } from '../../../../redux/notification/notification.actions'
19 
import { axios } from '../../../../utils'
4309 stevensc 20 
 
4806 stevensc 21 
export default function withExternalShare(Component, url, params) {
6018 stevensc 22 
  return function () {
23 
    const dispatch = useDispatch()
24 
    const [shareOptions, setShareOptions] = useState(false)
25 
    const [shareUrl, setShareUrl] = useState('')
4309 stevensc 26 
 
6018 stevensc 27 
    const handleDisplayReactionList = () => setShareOptions(!shareOptions)
4309 stevensc 28 
 
6018 stevensc 29 
    const getShareUrl = async () => {
30 
      await axios
31 
        .get(url)
32 
        .then(({ data }) => {
33 
          if (!data.success) {
34 
            dispatch(addNotification({ style: 'danger', msg: data.data }))
35 
            setShareOptions(false)
36 
            return
37 
          }
4792 stevensc 38 
 
6018 stevensc 39 
          setShareUrl(data.data)
40 
        })
41 
        .catch((err) => console.log(err))
42 
    }
4309 stevensc 43 
 
6018 stevensc 44 
    const incrementCount = async () => {
45 
      await axios
46 
        .post(params.shareUrl)
47 
        .then(({ data }) => {
48 
          if (!data.success) {
49 
            dispatch(addNotification({ style: 'danger', msg: data.data }))
50 
            return
51 
          }
4801 stevensc 52 
 
6018 stevensc 53 
          setShareOptions(false)
54 
          params.setValue(data.data)
55 
        })
56 
        .catch((err) => console.log(err))
57 
    }
4792 stevensc 58 
 
6018 stevensc 59 
    useEffect(() => {
60 
      if (shareOptions && !shareUrl) getShareUrl()
61 
    }, [shareOptions])
4802 stevensc 62 
 
6018 stevensc 63 
    return (
64 
      <div
65 
        className="position-relative d-inline-flex"
66 
        onClick={handleDisplayReactionList}
67 
        style={{ flexGrow: 1 }}
68 
      >
69 
        <Component {...params} />
70 
        {shareOptions && (
71 
          <div className="external__share">
72 
            <FacebookShareButton
73 
              url={shareUrl}
74 
              onShareWindowClose={() => incrementCount()}
75 
            >
76 
              <FacebookIcon size={32} round />
77 
            </FacebookShareButton>
78 
            <TwitterShareButton
79 
              url={shareUrl}
80 
              onShareWindowClose={() => incrementCount()}
81 
            >
82 
              <TwitterIcon size={32} round />
83 
            </TwitterShareButton>
84 
            <TelegramShareButton
85 
              url={shareUrl}
86 
              onShareWindowClose={() => incrementCount()}
87 
            >
88 
              <TelegramIcon size={32} round />
89 
            </TelegramShareButton>
90 
            <WhatsappShareButton
91 
              url={shareUrl}
92 
              onShareWindowClose={() => incrementCount()}
93 
            >
94 
              <WhatsappIcon size={32} round />
95 
            </WhatsappShareButton>
96 
            <RedditShareButton
97 
              url={shareUrl}
98 
              onShareWindowClose={() => incrementCount()}
99 
            >
100 
              <RedditIcon size={32} round />
101 
            </RedditShareButton>
102 
            <EmailShareButton
103 
              url={shareUrl}
104 
              onShareWindowClose={() => incrementCount()}
105 
            >
106 
              <EmailIcon size={32} round />
107 
            </EmailShareButton>
108 
          </div>
109 
        )}
110 
      </div>
111 
    )
112 
  }
113 
}