Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2248 | Rev 2254 | 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 
 
51 
      if (!isMobile) setShowOptions(!showOptions)
52 
 
53 
      if (navigator?.share) {
54 
        try {
55 
          await navigator.share({ url: shorterUrl })
56 
          incrementCount()
57 
        } catch (error) {
58 
          dispatch(addNotification({ style: 'danger', msg: error.message }))
59 
        }
60 
        return
61 
      }
62 
 
63 
      if (window?.AndroidShareHandler) {
64 
        try {
65 
          window.AndroidShareHandler.share(shorterUrl)
66 
        } catch (error) {
67 
          dispatch(addNotification({ style: 'danger', msg: error.message }))
68 
        }
69 
        return
70 
      }
71 
 
72 
      setOpenPopup(true)
73 
    }
74 
 
2248 stevensc 75 
    const getShareUrl = async () => {
76 
      try {
77 
        const response = await axios.get(url)
78 
        const { data, success } = response.data
79 
        if (!success) throw new Error(data)
80 
        return data
81 
      } catch (error) {
82 
        dispatch(addNotification({ style: 'danger', msg: error.message }))
83 
      }
84 
    }
85 
 
199 stevensc 86 
    const incrementCount = async () => {
87 
      await axios
2157 stevensc 88 
        .post(shorterUrl)
2244 stevensc 89 
        .then((response) => {
90 
          const { data, success } = response.data
91 
          if (!success) throw new Error(data)
92 
          setShowOptions(false)
93 
          setValue(data)
199 stevensc 94 
        })
2244 stevensc 95 
        .catch((err) =>
96 
          dispatch(addNotification({ style: 'danger', msg: err.message }))
97 
        )
2157 stevensc 98 
    }
199 stevensc 99 
 
100 
    return (
2245 stevensc 101 
      <>
2253 stevensc 102 
        <Component onClick={handleClick}>
2245 stevensc 103 
          {children}
2162 stevensc 104 
 
2245 stevensc 105 
          {showOptions && (
106 
            <StyledShareContainer>
107 
              <FacebookShareButton
108 
                url={shareUrl}
109 
                onShareWindowClose={incrementCount}
110 
                disabled={!shareUrl}
111 
              >
112 
                <FacebookIcon size={32} round />
113 
              </FacebookShareButton>
114 
              <TwitterShareButton
115 
                url={shareUrl}
116 
                onShareWindowClose={incrementCount}
117 
                disabled={!shareUrl}
118 
              >
119 
                <TwitterIcon size={32} round />
120 
              </TwitterShareButton>
121 
              <TelegramShareButton
122 
                url={shareUrl}
123 
                onShareWindowClose={incrementCount}
124 
                disabled={!shareUrl}
125 
              >
126 
                <TelegramIcon size={32} round />
127 
              </TelegramShareButton>
128 
              <WhatsappShareButton
129 
                url={shareUrl}
130 
                onShareWindowClose={incrementCount}
131 
                disabled={!shareUrl}
132 
              >
133 
                <WhatsappIcon size={32} round />
134 
              </WhatsappShareButton>
135 
              <RedditShareButton
136 
                url={shareUrl}
137 
                onShareWindowClose={incrementCount}
138 
                disabled={!shareUrl}
139 
              >
140 
                <RedditIcon size={32} round />
141 
              </RedditShareButton>
142 
              <EmailShareButton
143 
                url={shareUrl}
144 
                onShareWindowClose={incrementCount}
145 
                disabled={!shareUrl}
146 
              >
147 
                <EmailIcon size={32} round />
148 
              </EmailShareButton>
149 
            </StyledShareContainer>
150 
          )}
151 
        </Component>
152 
        <SharePopup
153 
          show={openPopup}
154 
          shareData={{ url: shareUrl }}
155 
          onClose={() => setOpenPopup(false)}
156 
        />
157 
      </>
2157 stevensc 158 
    )
159 
  }
199 stevensc 160 
}