Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2243 | Rev 2245 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
2157 stevensc 1 
import React, { useEffect, useState } from 'react'
2 
import { useDispatch } from 'react-redux'
199 stevensc 3 
import {
4 
  EmailIcon,
5 
  EmailShareButton,
6 
  FacebookIcon,
7 
  FacebookShareButton,
8 
  RedditIcon,
9 
  RedditShareButton,
10 
  TelegramIcon,
11 
  TelegramShareButton,
12 
  TwitterIcon,
13 
  TwitterShareButton,
14 
  WhatsappIcon,
2157 stevensc 15 
  WhatsappShareButton
16 
} from 'react-share'
17 
import { addNotification } from 'store/notification/notification.actions'
18 
import { axios } from '../../../utils'
19 
import styled from 'styled-components'
199 stevensc 20 
 
641 stevensc 21 
const StyledShareContainer = styled.div`
22 
  display: flex;
23 
  position: absolute;
24 
  align-items: center;
25 
  padding: 5px 1rem;
26 
  bottom: calc(100% + 0.5rem);
27 
  gap: 0.5rem;
28 
  right: 0;
29 
  width: 16.5rem;
30 
  border-radius: 10px;
31 
  background-color: #fff;
32 
  box-shadow: 0px 4px 4px -2px rgb(0 0 0 / 12%),
33 
    0px -4px 4px -2px rgb(0 0 0 / 12%);
2157 stevensc 34 
`
641 stevensc 35 
 
199 stevensc 36 
export default function withExternalShare(Component, url) {
2157 stevensc 37 
  return function ({ children, setValue, shorterUrl }) {
2244 stevensc 38 
    const [showOptions, setShowOptions] = useState(false)
2157 stevensc 39 
    const [shareUrl, setShareUrl] = useState('')
40 
    const dispatch = useDispatch()
199 stevensc 41 
 
2244 stevensc 42 
    const toggleShareOptions = () => setShowOptions(!showOptions)
199 stevensc 43 
 
44 
    const incrementCount = async () => {
45 
      await axios
2157 stevensc 46 
        .post(shorterUrl)
2244 stevensc 47 
        .then((response) => {
48 
          const { data, success } = response.data
49 
          if (!success) throw new Error(data)
50 
          setShowOptions(false)
51 
          setValue(data)
199 stevensc 52 
        })
2244 stevensc 53 
        .catch((err) =>
54 
          dispatch(addNotification({ style: 'danger', msg: err.message }))
55 
        )
2157 stevensc 56 
    }
199 stevensc 57 
 
2244 stevensc 58 
    useEffect(() => {
59 
      if (!showOptions || shareUrl) return
60 
 
61 
      const getShareUrl = async () => {
62 
        try {
63 
          const response = await axios.get(url)
64 
          const { data, success } = response.data
65 
          if (!success) throw new Error(data)
66 
          setShareUrl(data)
67 
        } catch (error) {
68 
          dispatch(addNotification({ style: 'danger', msg: error.message }))
69 
        }
70 
      }
71 
 
72 
      getShareUrl()
73 
    }, [showOptions, shareUrl])
74 
 
199 stevensc 75 
    return (
2157 stevensc 76 
      <Component onClick={toggleShareOptions}>
77 
        {children}
2162 stevensc 78 
 
2244 stevensc 79 
        {showOptions && (
641 stevensc 80 
          <StyledShareContainer>
199 stevensc 81 
            <FacebookShareButton
82 
              url={shareUrl}
2244 stevensc 83 
              onShareWindowClose={incrementCount}
84 
              disabled={!shareUrl}
199 stevensc 85 
            >
86 
              <FacebookIcon size={32} round />
87 
            </FacebookShareButton>
88 
            <TwitterShareButton
89 
              url={shareUrl}
2244 stevensc 90 
              onShareWindowClose={incrementCount}
91 
              disabled={!shareUrl}
199 stevensc 92 
            >
93 
              <TwitterIcon size={32} round />
94 
            </TwitterShareButton>
95 
            <TelegramShareButton
96 
              url={shareUrl}
2244 stevensc 97 
              onShareWindowClose={incrementCount}
98 
              disabled={!shareUrl}
199 stevensc 99 
            >
100 
              <TelegramIcon size={32} round />
101 
            </TelegramShareButton>
102 
            <WhatsappShareButton
103 
              url={shareUrl}
2244 stevensc 104 
              onShareWindowClose={incrementCount}
105 
              disabled={!shareUrl}
199 stevensc 106 
            >
107 
              <WhatsappIcon size={32} round />
108 
            </WhatsappShareButton>
109 
            <RedditShareButton
110 
              url={shareUrl}
2244 stevensc 111 
              onShareWindowClose={incrementCount}
112 
              disabled={!shareUrl}
199 stevensc 113 
            >
114 
              <RedditIcon size={32} round />
115 
            </RedditShareButton>
116 
            <EmailShareButton
117 
              url={shareUrl}
2244 stevensc 118 
              onShareWindowClose={incrementCount}
119 
              disabled={!shareUrl}
199 stevensc 120 
            >
121 
              <EmailIcon size={32} round />
122 
            </EmailShareButton>
641 stevensc 123 
          </StyledShareContainer>
199 stevensc 124 
        )}
125 
      </Component>
2157 stevensc 126 
    )
127 
  }
199 stevensc 128 
}