Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev Autor Línea Nro. Línea
199 stevensc 1 
import React, { useEffect, useState } from "react";
2 
import { useDispatch } from "react-redux";
3 
import {
4 
  EmailIcon,
5 
  EmailShareButton,
6 
  FacebookIcon,
7 
  FacebookShareButton,
8 
  RedditIcon,
9 
  RedditShareButton,
10 
  TelegramIcon,
11 
  TelegramShareButton,
12 
  TwitterIcon,
13 
  TwitterShareButton,
14 
  WhatsappIcon,
15 
  WhatsappShareButton,
16 
} from "react-share";
641 stevensc 17 
import { addNotification } from "store/notification/notification.actions";
199 stevensc 18 
import { axios } from "../../../utils";
641 stevensc 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%);
34 
`;
35 
 
199 stevensc 36 
export default function withExternalShare(Component, url) {
37 
  return function (props) {
38 
    const [shareOptions, setShareOptions] = useState(false);
39 
    const [shareUrl, setShareUrl] = useState("");
631 stevensc 40 
    const dispatch = useDispatch();
199 stevensc 41 
 
631 stevensc 42 
    const toggleShareOptions = () => {
43 
      setShareOptions(!shareOptions);
44 
    };
199 stevensc 45 
 
46 
    const getShareUrl = async () => {
47 
      await axios
48 
        .get(url)
49 
        .then(({ data }) => {
50 
          if (!data.success) {
51 
            dispatch(addNotification({ style: "danger", msg: data.data }));
52 
            setShareOptions(false);
53 
            return;
54 
          }
55 
 
56 
          setShareUrl(data.data);
57 
        })
58 
        .catch((err) => console.log(err));
59 
    };
60 
 
61 
    const incrementCount = async () => {
62 
      await axios
63 
        .post(props.shareUrl)
64 
        .then(({ data }) => {
65 
          if (!data.success) {
66 
            dispatch(addNotification({ style: "danger", msg: data.data }));
67 
            return;
68 
          }
69 
 
70 
          setShareOptions(false);
71 
          props.setValue(data.data);
72 
        })
73 
        .catch((err) => console.log(err));
74 
    };
75 
 
76 
    useEffect(() => {
77 
      if (shareOptions && !shareUrl) getShareUrl();
78 
    }, [shareOptions]);
79 
 
80 
    return (
631 stevensc 81 
      <Component onClick={toggleShareOptions} {...props}>
199 stevensc 82 
        {shareOptions && (
641 stevensc 83 
          <StyledShareContainer>
199 stevensc 84 
            <FacebookShareButton
85 
              url={shareUrl}
86 
              onShareWindowClose={() => incrementCount()}
87 
            >
88 
              <FacebookIcon size={32} round />
89 
            </FacebookShareButton>
90 
            <TwitterShareButton
91 
              url={shareUrl}
92 
              onShareWindowClose={() => incrementCount()}
93 
            >
94 
              <TwitterIcon size={32} round />
95 
            </TwitterShareButton>
96 
            <TelegramShareButton
97 
              url={shareUrl}
98 
              onShareWindowClose={() => incrementCount()}
99 
            >
100 
              <TelegramIcon size={32} round />
101 
            </TelegramShareButton>
102 
            <WhatsappShareButton
103 
              url={shareUrl}
104 
              onShareWindowClose={() => incrementCount()}
105 
            >
106 
              <WhatsappIcon size={32} round />
107 
            </WhatsappShareButton>
108 
            <RedditShareButton
109 
              url={shareUrl}
110 
              onShareWindowClose={() => incrementCount()}
111 
            >
112 
              <RedditIcon size={32} round />
113 
            </RedditShareButton>
114 
            <EmailShareButton
115 
              url={shareUrl}
116 
              onShareWindowClose={() => incrementCount()}
117 
            >
118 
              <EmailIcon size={32} round />
119 
            </EmailShareButton>
641 stevensc 120 
          </StyledShareContainer>
199 stevensc 121 
        )}
122 
      </Component>
123 
    );
124 
  };
125 
}