Proyectos de Subversion LeadersLinked - SPA

Rev

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