Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev Autor Línea Nro. Línea
2253 stevensc 1 
import React, { useState } from 'react'
2157 stevensc 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'
2776 stevensc 17 
import styled from 'styled-components'
18 
 
2157 stevensc 19 
import { addNotification } from 'store/notification/notification.actions'
20 
import { axios } from '../../../utils'
2245 stevensc 21 
import SharePopup from './mobile-share/MobileSharePopUp'
22 
 
2776 stevensc 23 
import { useMobile } from '@hooks'
199 stevensc 24 
 
641 stevensc 25 
const StyledShareContainer = styled.div`
26 
  display: flex;
27 
  position: absolute;
28 
  align-items: center;
29 
  padding: 5px 1rem;
30 
  bottom: calc(100% + 0.5rem);
31 
  gap: 0.5rem;
32 
  right: 0;
33 
  width: 16.5rem;
34 
  border-radius: 10px;
35 
  background-color: #fff;
36 
  box-shadow: 0px 4px 4px -2px rgb(0 0 0 / 12%),
37 
    0px -4px 4px -2px rgb(0 0 0 / 12%);
2157 stevensc 38 
`
641 stevensc 39 
 
199 stevensc 40 
export default function withExternalShare(Component, url) {
2157 stevensc 41 
  return function ({ children, setValue, shorterUrl }) {
2244 stevensc 42 
    const [showOptions, setShowOptions] = useState(false)
2245 stevensc 43 
    const [openPopup, setOpenPopup] = useState(false)
2157 stevensc 44 
    const [shareUrl, setShareUrl] = useState('')
2245 stevensc 45 
    const isMobile = useMobile()
2157 stevensc 46 
    const dispatch = useDispatch()
199 stevensc 47 
 
2253 stevensc 48 
    const handleClick = async () => {
49 
      const shorterUrl = shareUrl || (await getShareUrl())
50 
      setShareUrl(shorterUrl)
51 
 
2254 stevensc 52 
      if (!isMobile) {
53 
        setShowOptions(!showOptions)
54 
        return
55 
      }
2253 stevensc 56 
 
57 
      if (navigator?.share) {
58 
        try {
59 
          await navigator.share({ url: shorterUrl })
60 
          incrementCount()
61 
        } catch (error) {
62 
          dispatch(addNotification({ style: 'danger', msg: error.message }))
63 
        }
64 
        return
65 
      }
66 
 
67 
      if (window?.AndroidShareHandler) {
68 
        try {
69 
          window.AndroidShareHandler.share(shorterUrl)
70 
        } catch (error) {
71 
          dispatch(addNotification({ style: 'danger', msg: error.message }))
72 
        }
73 
        return
74 
      }
75 
 
76 
      setOpenPopup(true)
77 
    }
78 
 
2248 stevensc 79 
    const getShareUrl = async () => {
80 
      try {
81 
        const response = await axios.get(url)
82 
        const { data, success } = response.data
83 
        if (!success) throw new Error(data)
84 
        return data
85 
      } catch (error) {
86 
        dispatch(addNotification({ style: 'danger', msg: error.message }))
87 
      }
88 
    }
89 
 
199 stevensc 90 
    const incrementCount = async () => {
91 
      await axios
2157 stevensc 92 
        .post(shorterUrl)
2244 stevensc 93 
        .then((response) => {
94 
          const { data, success } = response.data
95 
          if (!success) throw new Error(data)
96 
          setShowOptions(false)
97 
          setValue(data)
199 stevensc 98 
        })
2244 stevensc 99 
        .catch((err) =>
100 
          dispatch(addNotification({ style: 'danger', msg: err.message }))
101 
        )
2157 stevensc 102 
    }
199 stevensc 103 
 
104 
    return (
2245 stevensc 105 
      <>
2253 stevensc 106 
        <Component onClick={handleClick}>
2245 stevensc 107 
          {children}
2162 stevensc 108 
 
2245 stevensc 109 
          {showOptions && (
110 
            <StyledShareContainer>
111 
              <FacebookShareButton
112 
                url={shareUrl}
113 
                onShareWindowClose={incrementCount}
114 
                disabled={!shareUrl}
115 
              >
116 
                <FacebookIcon size={32} round />
117 
              </FacebookShareButton>
118 
              <TwitterShareButton
119 
                url={shareUrl}
120 
                onShareWindowClose={incrementCount}
121 
                disabled={!shareUrl}
122 
              >
123 
                <TwitterIcon size={32} round />
124 
              </TwitterShareButton>
125 
              <TelegramShareButton
126 
                url={shareUrl}
127 
                onShareWindowClose={incrementCount}
128 
                disabled={!shareUrl}
129 
              >
130 
                <TelegramIcon size={32} round />
131 
              </TelegramShareButton>
132 
              <WhatsappShareButton
133 
                url={shareUrl}
134 
                onShareWindowClose={incrementCount}
135 
                disabled={!shareUrl}
136 
              >
137 
                <WhatsappIcon size={32} round />
138 
              </WhatsappShareButton>
139 
              <RedditShareButton
140 
                url={shareUrl}
141 
                onShareWindowClose={incrementCount}
142 
                disabled={!shareUrl}
143 
              >
144 
                <RedditIcon size={32} round />
145 
              </RedditShareButton>
146 
              <EmailShareButton
147 
                url={shareUrl}
148 
                onShareWindowClose={incrementCount}
149 
                disabled={!shareUrl}
150 
              >
151 
                <EmailIcon size={32} round />
152 
              </EmailShareButton>
153 
            </StyledShareContainer>
154 
          )}
155 
        </Component>
156 
        <SharePopup
157 
          show={openPopup}
158 
          shareData={{ url: shareUrl }}
159 
          onClose={() => setOpenPopup(false)}
160 
        />
161 
      </>
2157 stevensc 162 
    )
163 
  }
199 stevensc 164 
}