Proyectos de Subversion LeadersLinked - SPA

Rev

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